Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marketspire - Coming Soon</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: #18192b; | |
| color: #fff; | |
| overflow-x: hidden; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| .glow { | |
| text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Animated Background Elements --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute top-1/4 left-1/4 w-16 h-16 rounded-full bg-blue-500 opacity-20 blur-xl floating" style="animation-delay: 0s;"></div> | |
| <div class="absolute top-1/3 right-1/3 w-24 h-24 rounded-full bg-purple-500 opacity-20 blur-xl floating" style="animation-delay: 0.5s;"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-20 h-20 rounded-full bg-teal-500 opacity-20 blur-xl floating" style="animation-delay: 1s;"></div> | |
| <div class="absolute bottom-1/3 left-1/3 w-28 h-28 rounded-full bg-pink-500 opacity-20 blur-xl floating" style="animation-delay: 1.5s;"></div> | |
| </div> | |
| <header class="py-6 px-4 sm:px-6 lg:px-8 fixed top-0 left-0 w-full z-50 bg-gradient-to-r from-blue-900 to-purple-900 shadow-lg backdrop-blur-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-store text-3xl text-blue-400 mr-3"></i> | |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">MARKETSPIRE</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-gray-300 hover:text-white transition duration-300">About</a> | |
| <a href="#values" class="text-gray-300 hover:text-white transition duration-300">Values</a> | |
| <a href="#services" class="text-gray-300 hover:text-white transition duration-300">Services</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white transition duration-300">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-gray-300"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <div class="h-24"></div> | |
| <main class="relative z-10 w-full min-h-[90vh] flex items-center justify-center bg-gradient-to-br from-blue-950 via-purple-900 to-pink-900 overflow-hidden"> | |
| <!-- Decorative/animated background shapes --> | |
| <div class="absolute inset-0 -z-10"> | |
| <div class="absolute top-0 left-0 w-1/2 h-full bg-gradient-to-br from-blue-900/80 to-transparent rounded-br-full blur-2xl opacity-40"></div> | |
| <div class="absolute bottom-0 right-0 w-1/2 h-full bg-gradient-to-tl from-pink-900/80 to-transparent rounded-tl-full blur-2xl opacity-40"></div> | |
| <div class="absolute top-1/3 left-1/4 w-72 h-72 bg-purple-500/30 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl animate-pulse"></div> | |
| </div> | |
| <div class="w-full flex flex-col md:flex-row items-center justify-center px-4 md:px-16 lg:px-32 xl:px-48 py-12 gap-12"> | |
| <!-- Left: Text Content --> | |
| <div class="flex-1 flex flex-col items-start justify-center z-10"> | |
| <h1 class="text-5xl md:text-7xl font-extrabold text-white mb-6 drop-shadow-lg leading-tight"> | |
| Welcome to <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400">Marketspire</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-xl"> | |
| Your trusted destination for premium retail and food experiences. Discover quality, convenience, and exclusive member benefits at every visit. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#services" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold px-8 py-4 rounded-xl shadow-lg hover:scale-105 transition text-lg">Explore Services</a> | |
| <a href="#about" class="bg-white/20 border border-white/30 text-white font-bold px-8 py-4 rounded-xl shadow-lg hover:bg-white/30 transition text-lg backdrop-blur-md">Learn More</a> | |
| </div> | |
| </div> | |
| <!-- Right: Illustration/Image --> | |
| <div class="flex-1 flex items-center justify-center z-10"> | |
| <div class="relative w-full max-w-md aspect-square flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80" alt="Modern Retail" class="rounded-3xl shadow-2xl border-4 border-blue-400/30 object-cover w-full h-full"> | |
| <div class="absolute -top-8 -right-8 w-24 h-24 bg-gradient-to-br from-pink-400/60 to-purple-400/60 rounded-full blur-2xl"></div> | |
| <div class="absolute -bottom-8 -left-8 w-16 h-16 bg-gradient-to-br from-blue-400/60 to-teal-400/60 rounded-full blur-2xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- SVG Divider --> | |
| <div class="-mt-1"> | |
| <svg viewBox="0 0 1440 100" class="w-full" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#23243a" d="M0,0 C480,100 960,0 1440,100 L1440,100 L0,100 Z"></path></svg> | |
| </div> | |
| <section id="about" class="relative z-10 py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[#23243a] via-[#23243a]/80 to-[#23243a]/60 overflow-hidden"> | |
| <!-- Abstract floating shapes --> | |
| <div class="absolute -top-16 -left-16 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/10 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="absolute bottom-0 right-0 w-80 h-80 bg-gradient-to-tr from-pink-400/20 to-blue-400/10 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="container mx-auto max-w-6xl flex flex-col md:flex-row items-center gap-16 relative z-10"> | |
| <!-- Left: Circular image with floating icons --> | |
| <div class="md:w-1/2 flex flex-col items-center justify-center relative"> | |
| <div class="relative w-72 h-72 md:w-96 md:h-96 flex items-center justify-center"> | |
| <div class="flex items-center justify-center w-full h-full rounded-full shadow-2xl border-8 border-blue-400/30 bg-gradient-to-br from-blue-900 via-purple-900 to-pink-900"> | |
| <i class="fas fa-store text-[6rem] md:text-[8rem] text-blue-300 drop-shadow-lg"></i> | |
| </div> | |
| <!-- Floating icons --> | |
| <span class="absolute -top-6 left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-md p-3 rounded-full shadow-lg text-blue-400 text-2xl animate-bounce"><i class="fas fa-store"></i></span> | |
| <span class="absolute bottom-4 -left-8 bg-white/20 backdrop-blur-md p-3 rounded-full shadow-lg text-purple-400 text-xl animate-float-slow"><i class="fas fa-users"></i></span> | |
| <span class="absolute top-8 -right-8 bg-white/20 backdrop-blur-md p-3 rounded-full shadow-lg text-pink-400 text-xl animate-float-fast"><i class="fas fa-star"></i></span> | |
| <span class="absolute -bottom-8 left-1/3 bg-white/20 backdrop-blur-md p-3 rounded-full shadow-lg text-yellow-400 text-xl animate-float-slower"><i class="fas fa-lightbulb"></i></span> | |
| <span class="absolute top-1/4 -left-10 bg-white/20 backdrop-blur-md p-3 rounded-full shadow-lg text-green-400 text-xl animate-float-medium"><i class="fas fa-leaf"></i></span> | |
| <span class="absolute bottom-1/4 -right-10 bg-white/20 backdrop-blur-md p-3 rounded-full shadow-lg text-cyan-400 text-xl animate-float-medium2"><i class="fas fa-globe"></i></span> | |
| </div> | |
| </div> | |
| <!-- Right: Content --> | |
| <div class="md:w-1/2 flex flex-col items-start justify-center"> | |
| <h2 class="text-5xl font-extrabold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400">About Marketspire</h2> | |
| <div class="mb-6 px-6 py-2 rounded-full bg-white/10 text-blue-200 font-semibold text-lg shadow-md backdrop-blur-md">Empowering Retail Excellence Across Communities</div> | |
| <div class="flex flex-col gap-6 w-full"> | |
| <div class="bg-white/10 rounded-2xl p-6 shadow-xl border-l-4 border-blue-400/60 hover:scale-[1.03] transition-transform duration-300 backdrop-blur-md"> | |
| <p class="text-lg text-gray-100">Welcome to Marketspire, a trusted limited company dedicated to providing exceptional retail experiences across multiple locations. With a strong commitment to quality, affordability, and customer satisfaction, we offer a diverse range of products tailored to meet your needs.</p> | |
| </div> | |
| <div class="bg-white/10 rounded-2xl p-6 shadow-xl border-l-4 border-purple-400/60 hover:scale-[1.03] transition-transform duration-300 backdrop-blur-md"> | |
| <p class="text-lg text-gray-100">Our network of retail shops ensures convenient access to our premium offerings, backed by expert staff dedicated to delivering personalised service. Discover the difference at Marketspire, where shopping is made simple, reliable, and enjoyable.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <style> | |
| @keyframes float-slow { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);} } | |
| .animate-float-slow { animation: float-slow 5s ease-in-out infinite; } | |
| @keyframes float-fast { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-30px);} } | |
| .animate-float-fast { animation: float-fast 3s ease-in-out infinite; } | |
| @keyframes float-slower { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } | |
| .animate-float-slower { animation: float-slower 7s ease-in-out infinite; } | |
| @keyframes float-medium { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-22px);} } | |
| .animate-float-medium { animation: float-medium 4s ease-in-out infinite; } | |
| @keyframes float-medium2 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} } | |
| .animate-float-medium2 { animation: float-medium2 6s ease-in-out infinite; } | |
| </style> | |
| </section> | |
| <!-- SVG Divider --> | |
| <div class="-mt-1"> | |
| <svg viewBox="0 0 1440 100" class="w-full" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#18192b" d="M0,100 C480,0 960,100 1440,0 L1440,100 L0,100 Z"></path></svg> | |
| </div> | |
| <section id="values" class="py-24 px-4 sm:px-6 lg:px-8 relative z-10 bg-[#18192b]"> | |
| <div class="container mx-auto max-w-7xl relative z-10"> | |
| <h2 class="text-4xl sm:text-5xl font-extrabold mb-16 text-center text-purple-400 glow">Our Values</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10"> | |
| <!-- Value Card 1 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-blue-300 shadow-lg"> | |
| <i class="fas fa-star text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-blue-200 mb-2">Quality First</h3> | |
| <p class="text-gray-200">We prioritize the highest standards in quality, hygiene, and service. From sourcing products to customer interactions, we ensure every detail meets our commitment to excellence.</p> | |
| </div> | |
| <!-- Value Card 2 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-purple-300 shadow-lg"> | |
| <i class="fas fa-users text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-purple-200 mb-2">Customer-Centric</h3> | |
| <p class="text-gray-200">We believe in building lasting relationships by understanding customer needs, listening to feedback, and consistently exceeding expectations.</p> | |
| </div> | |
| <!-- Value Card 3 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-teal-500 to-teal-300 shadow-lg"> | |
| <i class="fas fa-balance-scale text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-teal-200 mb-2">Integrity</h3> | |
| <p class="text-gray-200">Honesty and openness are at our core — in our products, pricing, and business practices. We operate with fairness and responsibility at all levels.</p> | |
| </div> | |
| <!-- Value Card 4 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl flex flex-col items-center text-center hover:scale-105 transition-transform duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-pink-300 shadow-lg"> | |
| <i class="fas fa-lightbulb text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-pink-200 mb-2">Innovation</h3> | |
| <p class="text-gray-200">We embrace new ideas and adapt to changing trends. Our multi-outlet model is built for scalability, with efficiency and creativity driving our expansion.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SVG Divider --> | |
| <div class="-mt-1"> | |
| <svg viewBox="0 0 1440 100" class="w-full" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#23243a" d="M0,0 C480,100 960,0 1440,100 L1440,100 L0,100 Z"></path></svg> | |
| </div> | |
| <section id="services" class="py-24 px-4 sm:px-6 lg:px-8 relative z-10 bg-[#23243a] overflow-hidden"> | |
| <!-- Animated/floating background shapes --> | |
| <div class="absolute -top-24 -left-24 w-96 h-96 bg-gradient-to-br from-blue-500/20 to-purple-500/10 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tr from-pink-400/20 to-blue-400/10 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="container mx-auto max-w-7xl relative z-10"> | |
| <h2 class="text-4xl sm:text-5xl font-extrabold mb-16 text-center text-teal-400 glow">Our Services</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10"> | |
| <!-- Service Card 1 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-blue-400 hover:-translate-y-2 hover:shadow-blue-400/30 transition-all duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-teal-400 shadow-lg group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fas fa-utensils text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-blue-200 mb-2">Quick-Service Retail Food Outlets</h3> | |
| <p class="text-gray-200">We operate multiple quick-service food outlets that provide freshly prepared meals, snacks, and beverages. Our focus is on speed, consistency, and taste — making us a preferred choice for customers seeking quality food on the go.</p> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-purple-400 hover:-translate-y-2 hover:shadow-purple-400/30 transition-all duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-pink-400 shadow-lg group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fas fa-chair text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-purple-200 mb-2">Dine-In and Takeaway Options</h3> | |
| <p class="text-gray-200">Our outlets are designed for flexibility, offering both dine-in seating and efficient takeaway services. Whether it's a quick lunch break or a casual dinner, we provide a welcoming space for every customer.</p> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-teal-400 hover:-translate-y-2 hover:shadow-teal-400/30 transition-all duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-teal-500 to-blue-400 shadow-lg group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fas fa-seedling text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-teal-200 mb-2">Customizable Menus</h3> | |
| <p class="text-gray-200">We cater to a wide range of tastes and dietary preferences with menu options that include vegetarian, vegan, and healthy alternatives. Seasonal specials and local favorites help us stay relevant and responsive to customer demand.</p> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-pink-400 hover:-translate-y-2 hover:shadow-pink-400/30 transition-all duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-yellow-400 shadow-lg group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fas fa-truck text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-pink-200 mb-2">Online Ordering and Delivery</h3> | |
| <p class="text-gray-200">Through digital platforms, we make it easy for customers to browse menus, place orders, and get their meals delivered — bringing convenience and quality straight to their doorsteps.</p> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="group bg-white/10 backdrop-blur-md rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center border-t-4 border-yellow-400 hover:-translate-y-2 hover:shadow-yellow-400/30 transition-all duration-300"> | |
| <div class="mb-6 flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-yellow-400 to-blue-400 shadow-lg group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fas fa-people-carry text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-yellow-200 mb-2">Corporate and Event Catering</h3> | |
| <p class="text-gray-200">We also offer catering solutions for corporate clients and special events, providing reliable service and fresh food tailored to group needs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SVG Divider --> | |
| <div class="-mt-1"> | |
| <svg viewBox="0 0 1440 100" class="w-full" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#18192b" d="M0,100 C480,0 960,100 1440,0 L1440,100 L0,100 Z"></path></svg> | |
| </div> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 relative z-10 bg-[#18192b]"> | |
| <div class="container mx-auto max-w-5xl"> | |
| <h2 class="text-4xl sm:text-5xl font-extrabold mb-12 text-center text-blue-400 glow">Contact Us</h2> | |
| <div class="bg-white/10 backdrop-blur-md rounded-3xl p-10 shadow-2xl flex flex-col md:flex-row gap-12"> | |
| <div class="md:w-1/2 flex flex-col justify-between"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-blue-300 mb-6">Get in Touch</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-3"></i> | |
| <p class="text-gray-300">123 Business Street, City, Country</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-blue-400 mr-3"></i> | |
| <p class="text-gray-300">+1 (234) 567-8900</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-blue-400 mr-3"></i> | |
| <p class="text-gray-300">info@marketspire.com</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300"> | |
| <i class="fab fa-facebook-f text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300"> | |
| <i class="fab fa-linkedin-in text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold text-blue-300 mb-6">Send Us a Message</h3> | |
| <form class="space-y-4"> | |
| <input type="text" placeholder="Your Name" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400"> | |
| <input type="email" placeholder="Your Email" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400"> | |
| <textarea placeholder="Your Message" rows="4" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400"></textarea> | |
| <button type="submit" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium py-3 px-6 rounded-lg hover:opacity-90 transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="py-8 px-4 sm:px-6 lg:px-8 relative z-10 bg-[#23243a] border-t-2 border-blue-900/30"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-gray-400">© 2023 Marketspire. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Slider functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const slides = document.querySelectorAll('.slide'); | |
| const dots = document.querySelectorAll('.slider-dot'); | |
| const prevBtn = document.querySelector('.slider-prev'); | |
| const nextBtn = document.querySelector('.slider-next'); | |
| let currentSlide = 0; | |
| showSlide(currentSlide); | |
| let slideInterval = setInterval(nextSlide, 5000); | |
| function showSlide(index) { | |
| slides.forEach(slide => slide.style.opacity = '0'); | |
| slides[index].style.opacity = '1'; | |
| dots.forEach(dot => dot.classList.remove('bg-white')); | |
| dots[index].classList.add('bg-white'); | |
| } | |
| function nextSlide() { | |
| currentSlide = (currentSlide + 1) % slides.length; | |
| showSlide(currentSlide); | |
| resetInterval(); | |
| } | |
| function prevSlide() { | |
| currentSlide = (currentSlide - 1 + slides.length) % slides.length; | |
| showSlide(currentSlide); | |
| resetInterval(); | |
| } | |
| function resetInterval() { | |
| clearInterval(slideInterval); | |
| slideInterval = setInterval(nextSlide, 5000); | |
| } | |
| nextBtn.addEventListener('click', nextSlide); | |
| prevBtn.addEventListener('click', prevSlide); | |
| dots.forEach(dot => { | |
| dot.addEventListener('click', function() { | |
| currentSlide = parseInt(this.getAttribute('data-slide')); | |
| showSlide(currentSlide); | |
| resetInterval(); | |
| }); | |
| }); | |
| // Smooth scroll for anchor links with offset for fixed header | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| const targetId = this.getAttribute('href').slice(1); | |
| const target = document.getElementById(targetId); | |
| if (target) { | |
| e.preventDefault(); | |
| const headerOffset = document.querySelector('header').offsetHeight; | |
| const elementPosition = target.getBoundingClientRect().top + window.pageYOffset; | |
| const offsetPosition = elementPosition - headerOffset + 1; | |
| window.scrollTo({ | |
| top: offsetPosition, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=krishgokul92/marketspire2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |