Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PTS Marketing | Digital Growth Agency</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #4f46e5; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| background-color: #f9fafb; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-sm z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-indigo-600">PTS<span class="text-gray-800">Marketing</span></a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-gray-700 hover:text-indigo-600">Home</a> | |
| <a href="#services" class="nav-link text-gray-700 hover:text-indigo-600">Services</a> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-indigo-600">About</a> | |
| <a href="#work" class="nav-link text-gray-700 hover:text-indigo-600">Work</a> | |
| <a href="#testimonials" class="nav-link text-gray-700 hover:text-indigo-600">Testimonials</a> | |
| <a href="#contact" class="px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition duration-300">Get Started</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="text-gray-700 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div id="vanta-globe" class="hero-gradient min-h-screen flex items-center pt-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="text-white" data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">Grow Your Business With Our <span class="text-yellow-300">Digital Marketing</span> Expertise</h1> | |
| <p class="text-xl mb-8 opacity-90">We help businesses increase their online presence and generate more leads through strategic digital marketing solutions.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="px-8 py-3 bg-white text-indigo-600 rounded-md font-semibold hover:bg-gray-100 transition duration-300">Get Started</a> | |
| <a href="#services" class="px-8 py-3 border-2 border-white text-white rounded-md font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">Our Services</a> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <img src="http://static.photos/technology/1024x576/1" alt="Digital Marketing" class="rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clients Section --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-gray-500 mb-8">Trusted by innovative companies worldwide</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-center"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+1" alt="Client Logo" class="h-12 mx-auto opacity-70 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+2" alt="Client Logo" class="h-12 mx-auto opacity-70 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+3" alt="Client Logo" class="h-12 mx-auto opacity-70 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+4" alt="Client Logo" class="h-12 mx-auto opacity-70 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+5" alt="Client Logo" class="h-12 mx-auto opacity-70 hover:opacity-100 transition duration-300"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our <span class="text-indigo-600">Services</span></h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">We offer comprehensive digital marketing solutions tailored to your business needs.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="search" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">SEO Optimization</h3> | |
| <p class="text-gray-600">Improve your search engine rankings and drive organic traffic to your website with our proven SEO strategies.</p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">PPC Advertising</h3> | |
| <p class="text-gray-600">Get immediate results with targeted pay-per-click campaigns that maximize your return on investment.</p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Social Media Marketing</h3> | |
| <p class="text-gray-600">Build brand awareness and engage with your audience through strategic social media campaigns.</p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Email Marketing</h3> | |
| <p class="text-gray-600">Nurture leads and retain customers with personalized email campaigns that drive conversions.</p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="edit" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Content Marketing</h3> | |
| <p class="text-gray-600">Tell your brand story and attract customers with high-quality, engaging content.</p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="monitor" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Web Design & Development</h3> | |
| <p class="text-gray-600">Create a stunning, high-performing website that converts visitors into customers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <img src="http://static.photos/office/1024x576/2" alt="Our Team" class="rounded-xl shadow-xl"> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About <span class="text-indigo-600">PTS Marketing</span></h2> | |
| <p class="text-lg text-gray-600 mb-6">We are a full-service digital marketing agency dedicated to helping businesses grow through innovative and data-driven strategies.</p> | |
| <p class="text-lg text-gray-600 mb-8">Our team of experts combines creativity with analytics to deliver measurable results for our clients across various industries.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="check" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">10+ years of digital marketing experience</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="check" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Certified professionals in Google, Facebook, and HubSpot</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="check" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Proven track record of delivering results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="work" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our <span class="text-indigo-600">Work</span></h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">See how we've helped businesses achieve their marketing goals.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="http://static.photos/retail/640x360/1" alt="Project 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">E-commerce Store</h3> | |
| <p class="text-gray-200">Increased conversions by 120%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Project 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">SaaS Platform</h3> | |
| <p class="text-gray-200">Grew MRR by 300% in 6 months</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="http://static.photos/health/640x360/3" alt="Project 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Healthcare Provider</h3> | |
| <p class="text-gray-200">Generated 500+ new patients</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300"> | |
| View All Case Studies | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Client <span class="text-indigo-600">Testimonials</span></h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it. Here's what our clients say about us.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Client"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-gray-900">Sarah Johnson</h4> | |
| <p class="text-gray-600">CEO, TechStart</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"PTS Marketing transformed our online presence. Our website traffic increased by 250% within just 3 months of working with them."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Client"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-gray-900">Michael Chen</h4> | |
| <p class="text-gray-600">Marketing Director, RetailPro</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Their PPC campaigns have been game-changing for our business. We've seen a 5x return on ad spend consistently."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Client"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-gray-900">David Wilson</h4> | |
| <p class="text-gray-600">Founder, HealthPlus</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"The content marketing strategy they developed helped us establish thought leadership in our industry and attract high-quality leads."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 hero-gradient"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6" data-aos="fade-up">Ready to Grow Your Business?</h2> | |
| <p class="text-xl text-white opacity-90 max-w-3xl mx-auto mb-8" data-aos="fade-up" data-aos-delay="100">Let's discuss how we can help you achieve your marketing goals.</p> | |
| <a href="#contact" class="inline-flex items-center px-8 py-4 bg-white text-indigo-600 rounded-md font-semibold text-lg hover:bg-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| Get Your Free Consultation | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div data-aos="fade-right"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Get In <span class="text-indigo-600">Touch</span></h2> | |
| <p class="text-lg text-gray-600 mb-8">Have questions about our services or ready to start your project? Fill out the form and we'll get back to you within 24 hours.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="mail" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-gray-900">Email Us</h4> | |
| <p class="text-gray-600">info@ptsmarketing.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="phone" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-gray-900">Call Us</h4> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="map-pin" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-gray-900">Visit Us</h4> | |
| <p class="text-gray-600">123 Marketing Ave, Suite 500<br>San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label> | |
| <input type="text" id="first-name" name="first-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label> | |
| <input type="text" id="last-name" name="last-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label> | |
| <input type="tel" id="phone" name="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-sm font-medium text-gray-700">Service Interested In</label> | |
| <select id="service" name="service" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>SEO Optimization</option> | |
| <option>PPC Advertising</option> | |
| <option>Social Media Marketing</option> | |
| <option>Email Marketing</option> | |
| <option>Content Marketing</option> | |
| <option>Web Design & Development</option> | |
| <option>Not Sure</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700">Message</label> | |
| <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300"> | |
| Submit Request | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">PTS Marketing</h3> | |
| <p class="text-gray-400">Helping businesses grow through innovative digital marketing solutions.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">SEO Optimization</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">PPC Advertising</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Social Media Marketing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Content Marketing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Our Team</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Free Tools</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 PTS Marketing. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| VANTA.GLOBE({ | |
| el: "#vanta-globe", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3f46e5, | |
| backgroundColor: 0x0, | |
| size: 0.8 | |
| }); | |
| </script> | |
| </body> | |
| </html> | |