Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Elevate | Digital Marketing Agency</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(16,185,129,0.1) 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); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-primary">Elevate<span class="text-secondary">.</span></a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-dark hover:text-primary transition">Home</a> | |
| <a href="#services" class="text-dark hover:text-primary transition">Services</a> | |
| <a href="#about" class="text-dark hover:text-primary transition">About</a> | |
| <a href="#portfolio" class="text-dark hover:text-primary transition">Portfolio</a> | |
| <a href="#testimonials" class="text-dark hover:text-primary transition">Testimonials</a> | |
| <a href="#contact" class="bg-primary text-white px-6 py-2 rounded-full hover:bg-opacity-90 transition">Get Started</a> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-dark focus:outline-none"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden"> | |
| <div class="px-2 pt-2 pb-4 space-y-1"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-100">Home</a> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-100">Services</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-100">About</a> | |
| <a href="#portfolio" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-100">Portfolio</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:bg-gray-100">Testimonials</a> | |
| <a href="#contact" class="block w-full text-center bg-primary text-white px-6 py-2 rounded-full hover:bg-opacity-90 transition mt-2">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient py-20 md:py-32"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-dark mb-6 leading-tight">Elevate Your Brand With <span class="text-primary">Digital Excellence</span></h1> | |
| <p class="text-gray-600 mb-8 text-lg">We craft data-driven marketing strategies that deliver measurable results and help your business grow exponentially.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-primary text-white px-8 py-3 rounded-full hover:bg-opacity-90 transition text-center font-medium">Get Free Consultation</a> | |
| <a href="#services" class="border border-primary text-primary px-8 py-3 rounded-full hover:bg-primary hover:text-white transition text-center font-medium">Our Services</a> | |
| </div> | |
| <div class="flex items-center mt-8 space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client"> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Trusted by <span class="font-bold text-dark">500+</span> businesses worldwide</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://illustrations.popsy.co/amber/digital-marketing.svg" alt="Digital Marketing" class="w-full max-w-lg animate-float"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h3 class="text-center text-gray-500 mb-8">Trusted by industry leaders</h3> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://logo.clearbit.com/google.com" alt="Google" class="h-8 opacity-60 hover:opacity-100 transition"> | |
| <img src="https://logo.clearbit.com/spotify.com" alt="Spotify" class="h-8 opacity-60 hover:opacity-100 transition"> | |
| <img src="https://logo.clearbit.com/slack.com" alt="Slack" class="h-8 opacity-60 hover:opacity-100 transition"> | |
| <img src="https://logo.clearbit.com/airbnb.com" alt="Airbnb" class="h-8 opacity-60 hover:opacity-100 transition"> | |
| <img src="https://logo.clearbit.com/uber.com" alt="Uber" class="h-8 opacity-60 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-secondary font-medium">OUR SERVICES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-4">Comprehensive Digital Solutions</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">We offer end-to-end digital marketing services tailored to your business needs and goals.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-search-dollar text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">SEO Optimization</h3> | |
| <p class="text-gray-600 mb-4">Boost your organic traffic with our proven SEO strategies that rank your website higher on search engines.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-ad text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">PPC Advertising</h3> | |
| <p class="text-gray-600 mb-4">Maximize ROI with targeted pay-per-click campaigns that drive qualified leads to your business.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-envelope-open-text text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Email Marketing</h3> | |
| <p class="text-gray-600 mb-4">Engage your audience with personalized email campaigns that convert subscribers into customers.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Social Media Marketing</h3> | |
| <p class="text-gray-600 mb-4">Build brand awareness and loyalty through strategic social media campaigns across all platforms.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-pen-fancy text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Content Marketing</h3> | |
| <p class="text-gray-600 mb-4">Tell your brand story with compelling content that attracts, engages, and retains your audience.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-laptop-code text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Web Design & Development</h3> | |
| <p class="text-gray-600 mb-4">Create stunning, high-performing websites that convert visitors into customers and drive growth.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <img src="https://illustrations.popsy.co/amber/team-work.svg" alt="Our Team" class="w-full max-w-md mx-auto"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <span class="text-secondary font-medium">ABOUT US</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-6">We're More Than Just Marketers</h2> | |
| <p class="text-gray-600 mb-6">Founded in 2015, Elevate has grown from a small team of passionate marketers to a full-service digital agency with clients across the globe. We believe in building long-term partnerships rather than short-term projects.</p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Our Mission</h4> | |
| <p class="mt-1 text-gray-600">To help businesses of all sizes achieve their digital potential through innovative, data-driven marketing strategies.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary bg-opacity-10 text-secondary"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Our Vision</h4> | |
| <p class="mt-1 text-gray-600">To be the most trusted digital marketing partner for businesses looking to scale and dominate their markets.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-6"> | |
| <div> | |
| <p class="text-3xl font-bold text-primary">50+</p> | |
| <p class="text-gray-600">Team Members</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold text-secondary">500+</p> | |
| <p class="text-gray-600">Happy Clients</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold text-primary">250%</p> | |
| <p class="text-gray-600">Avg. ROI</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-secondary font-medium">OUR WORK</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-4">Success Stories</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Explore some of our recent projects and see how we've helped businesses achieve remarkable results.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Portfolio Item 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i class="fas fa-store text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">E-Commerce Brand</h3> | |
| <p class="text-gray-600 mb-4">Increased online sales by 320% in 6 months through comprehensive digital strategy.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">SEO</span> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">PPC</span> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">Social Media</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Portfolio Item 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-primary flex items-center justify-center"> | |
| <i class="fas fa-utensils text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Restaurant Chain</h3> | |
| <p class="text-gray-600 mb-4">Grew social media following by 15,000+ and increased reservations by 200%.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">Social Media</span> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">Content</span> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">Local SEO</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Portfolio Item 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-graduation-cap text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Online Education</h3> | |
| <p class="text-gray-600 mb-4">Generated 5,000+ leads in 3 months through targeted Facebook ad campaigns.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">PPC</span> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">Email</span> | |
| <span class="bg-primary bg-opacity-10 text-primary text-xs px-3 py-1 rounded-full">Conversion</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-primary text-primary rounded-full hover:bg-primary hover:text-white transition"> | |
| View All Case Studies | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-secondary font-medium">TESTIMONIALS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-4">What Our Clients Say</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Don't just take our word for it. Here's what our clients have to say about working with us.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Sarah Johnson</h4> | |
| <p class="text-gray-600">CEO, TechStart</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Working with Elevate transformed our online presence. Our website traffic increased by 400% and our conversion rates tripled within just 4 months."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Michael Chen</h4> | |
| <p class="text-gray-600">Marketing Director, RetailPlus</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"The team at Elevate understood our brand perfectly. Their social media strategy helped us connect with our audience in ways we never thought possible."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Emily Rodriguez</h4> | |
| <p class="text-gray-600">Founder, GreenLife</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"From SEO to content marketing, Elevate delivered exceptional results across all channels. Our organic growth has been phenomenal since partnering with them."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-primary to-secondary"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Elevate Your Marketing?</h2> | |
| <p class="text-white text-opacity-90 max-w-2xl mx-auto mb-8">Schedule a free consultation with our team and discover how we can help your business grow.</p> | |
| <a href="#contact" class="inline-block bg-white text-primary px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition">Get Started Today</a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <span class="text-secondary font-medium">CONTACT US</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-6">Let's Talk About Your Project</h2> | |
| <p class="text-gray-600 mb-8">Fill out the form and our team will get back to you within 24 hours. Or contact us directly using the information below.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Our Office</h4> | |
| <p class="mt-1 text-gray-600">123 Marketing Ave, Suite 500<br>San Francisco, CA 94103</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Phone</h4> | |
| <p class="mt-1 text-gray-600">+1 (555) 123-4567<br>Mon-Fri, 9am-5pm PST</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark">Email</h4> | |
| <p class="mt-1 text-gray-600">hello@elevatemarketing.com<br>We respond within 24 hours</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-md" method="POST" action="https://formspree.io/f/your-form-id-here"> | |
| <input type="hidden" name="_subject" value="New contact form submission"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="John Doe"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="john@example.com"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="(123) 456-7890"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Interested In</label> | |
| <select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Select a service</option> | |
| <option value="seo">SEO Optimization</option> | |
| <option value="ppc">PPC Advertising</option> | |
| <option value="social">Social Media Marketing</option> | |
| <option value="content">Content Marketing</option> | |
| <option value="email">Email Marketing</option> | |
| <option value="web">Web Design & Development</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tell us about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white px-6 py-3 rounded-full hover:bg-opacity-90 transition font-medium">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> | |
| <div> | |
| <a href="#" class="text-2xl font-bold text-white">Elevate<span class="text-secondary">.</span></a> | |
| <p class="mt-4 text-gray-400">Helping businesses grow through innovative digital marketing strategies since 2015.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">SEO Optimization</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">PPC Advertising</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Social Media Marketing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Content Marketing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Web Design & Development</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Our Team</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest marketing tips and insights.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-dark"> | |
| <button type="submit" class="bg-secondary px-4 py-2 rounded-r-lg hover:bg-opacity-90 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </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">© 2023 Elevate Marketing Agency. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (mobileMenu.classList.contains('open')) { | |
| mobileMenu.classList.remove('open'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Form submission feedback | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', async function(e) { | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| const originalBtnText = submitBtn.innerHTML; | |
| try { | |
| submitBtn.disabled = true; | |
| submitBtn.innerHTML = 'Sending...'; | |
| const response = await fetch(this.action, { | |
| method: 'POST', | |
| body: new FormData(this), | |
| headers: { | |
| 'Accept': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| alert('Thank you! Your message has been sent successfully.'); | |
| this.reset(); | |
| } else { | |
| throw new Error('Form submission failed'); | |
| } | |
| } catch (error) { | |
| alert('There was a problem sending your message. Please try again later.'); | |
| console.error('Form submission error:', error); | |
| } finally { | |
| submitBtn.disabled = false; | |
| submitBtn.innerHTML = originalBtnText; | |
| } | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Marchantthirion/my-test-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |