Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>BrightSmile Dental — Your Smile, Our Passion</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dental: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| mint: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Playfair Display', 'serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { scroll-behavior: smooth; } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 30%, #ffffff 70%, #f0fdf4 100%); | |
| } | |
| .floating { animation: floating 3s ease-in-out infinite; } | |
| .floating-delay { animation: floating 3s ease-in-out 1s infinite; } | |
| @keyframes floating { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-12px); } | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in-up { animation: fadeInUp 0.7s ease-out forwards; } | |
| .delay-1 { animation-delay: 0.1s; opacity: 0; } | |
| .delay-2 { animation-delay: 0.2s; opacity: 0; } | |
| .delay-3 { animation-delay: 0.3s; opacity: 0; } | |
| .delay-4 { animation-delay: 0.4s; opacity: 0; } | |
| .delay-5 { animation-delay: 0.5s; opacity: 0; } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| background: linear-gradient(135deg, #0ea5e9, #22c55e); | |
| } | |
| .service-icon { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-4px); | |
| } | |
| .nav-blur { | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| } | |
| .blob { | |
| border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; | |
| animation: morph 8s ease-in-out infinite; | |
| } | |
| @keyframes morph { | |
| 0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; } | |
| 33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; } | |
| 66% { border-radius: 30% 70% 70% 30% / 50% 60% 40% 50%; } | |
| } | |
| .star-rating { color: #fbbf24; } | |
| </style> | |
| </head> | |
| <body class="font-sans text-gray-800 overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <a href="#" class="flex items-center gap-2 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-dental-500 to-mint-500 rounded-xl flex items-center justify-center transition-transform group-hover:scale-110"> | |
| <i data-lucide="smile" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold text-dental-900 font-display">BrightSmile</span> | |
| </a> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <a href="#services" class="text-sm font-medium text-gray-600 hover:text-dental-600 transition-colors">Services</a> | |
| <a href="#about" class="text-sm font-medium text-gray-600 hover:text-dental-600 transition-colors">About</a> | |
| <a href="#doctors" class="text-sm font-medium text-gray-600 hover:text-dental-600 transition-colors">Doctors</a> | |
| <a href="#testimonials" class="text-sm font-medium text-gray-600 hover:text-dental-600 transition-colors">Reviews</a> | |
| <a href="#contact" class="text-sm font-medium text-gray-600 hover:text-dental-600 transition-colors">Contact</a> | |
| </div> | |
| <div class="hidden md:flex items-center gap-4"> | |
| <a href="tel:+15551234567" class="flex items-center gap-2 text-sm font-medium text-dental-700 hover:text-dental-900 transition-colors"> | |
| <i data-lucide="phone" class="w-4 h-4"></i> | |
| (555) 123-4567 | |
| </a> | |
| <a href="#appointment" class="bg-gradient-to-r from-dental-600 to-dental-500 hover:from-dental-700 hover:to-dental-600 text-white text-sm font-semibold px-5 py-2.5 rounded-full transition-all shadow-lg shadow-dental-500/25 hover:shadow-dental-500/40"> | |
| Book Now | |
| </a> | |
| </div> | |
| <button id="menuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="md:hidden hidden bg-white/95 nav-blur border-t border-gray-100"> | |
| <div class="px-4 py-4 space-y-2"> | |
| <a href="#services" class="block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-dental-50 hover:text-dental-700 rounded-xl transition-colors">Services</a> | |
| <a href="#about" class="block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-dental-50 hover:text-dental-700 rounded-xl transition-colors">About</a> | |
| <a href="#doctors" class="block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-dental-50 hover:text-dental-700 rounded-xl transition-colors">Doctors</a> | |
| <a href="#testimonials" class="block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-dental-50 hover:text-dental-700 rounded-xl transition-colors">Reviews</a> | |
| <a href="#contact" class="block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-dental-50 hover:text-dental-700 rounded-xl transition-colors">Contact</a> | |
| <a href="#appointment" class="block px-4 py-3 text-sm font-semibold text-center text-white bg-gradient-to-r from-dental-600 to-dental-500 rounded-xl mt-2">Book Appointment</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient min-h-screen pt-20 relative overflow-hidden"> | |
| <div class="absolute top-20 right-10 w-72 h-72 bg-dental-200/30 blob floating hidden lg:block"></div> | |
| <div class="absolute bottom-20 left-10 w-48 h-48 bg-mint-200/30 blob floating-delay hidden lg:block"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center min-h-screen"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center w-full py-12 lg:py-0"> | |
| <div class="space-y-8 fade-in-up"> | |
| <div class="inline-flex items-center gap-2 bg-dental-100 text-dental-700 px-4 py-2 rounded-full text-sm font-medium"> | |
| <i data-lucide="sparkles" class="w-4 h-4"></i> | |
| Accepting New Patients | |
| </div> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-dental-900 leading-tight"> | |
| Your Smile<br /> | |
| <span class="bg-gradient-to-r from-dental-600 to-mint-500 bg-clip-text text-transparent">Deserves the Best</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 max-w-lg leading-relaxed"> | |
| Experience gentle, comprehensive dental care in a warm and welcoming environment. From routine checkups to cosmetic transformations — we make every visit comfortable. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#appointment" class="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-dental-600 to-dental-500 hover:from-dental-700 hover:to-dental-600 text-white font-semibold px-8 py-4 rounded-full transition-all shadow-xl shadow-dental-500/25 hover:shadow-dental-500/40 hover:-translate-y-0.5"> | |
| <i data-lucide="calendar" class="w-5 h-5"></i> | |
| Book Appointment | |
| </a> | |
| <a href="#services" class="inline-flex items-center justify-center gap-2 bg-white hover:bg-gray-50 text-gray-700 font-semibold px-8 py-4 rounded-full border border-gray-200 transition-all hover:-translate-y-0.5"> | |
| <i data-lucide="play-circle" class="w-5 h-5 text-dental-500"></i> | |
| Our Services | |
| </a> | |
| </div> | |
| <div class="flex items-center gap-8 pt-4"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-dental-900">15K+</div> | |
| <div class="text-xs text-gray-500 font-medium">Happy Patients</div> | |
| </div> | |
| <div class="w-px h-10 bg-gray-200"></div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-dental-900">98%</div> | |
| <div class="text-xs text-gray-500 font-medium">Satisfaction</div> | |
| </div> | |
| <div class="w-px h-10 bg-gray-200"></div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-dental-900">20+</div> | |
| <div class="text-xs text-gray-500 font-medium">Years Exp.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative flex justify-center lg:justify-end fade-in-up delay-2"> | |
| <div class="relative"> | |
| <div class="w-80 h-96 sm:w-96 sm:h-[28rem] rounded-3xl overflow-hidden shadow-2xl shadow-dental-200/50"> | |
| <img src="http://static.photos/people/640x360/88" alt="Happy dental patient" class="w-full h-full object-cover" /> | |
| </div> | |
| <!-- Floating badge --> | |
| <div class="absolute -bottom-4 -left-4 bg-white rounded-2xl shadow-xl p-4 floating"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-mint-100 rounded-xl flex items-center justify-center"> | |
| <i data-lucide="shield-check" class="w-6 h-6 text-mint-600"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-bold text-gray-900">Trusted Care</div> | |
| <div class="text-xs text-gray-500">Board Certified</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating badge 2 --> | |
| <div class="absolute -top-4 -right-4 bg-white rounded-2xl shadow-xl p-4 floating-delay"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-dental-100 rounded-xl flex items-center justify-center"> | |
| <i data-lucide="star" class="w-6 h-6 text-dental-600"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-bold text-gray-900">4.9 Rating</div> | |
| <div class="text-xs text-gray-500">500+ Reviews</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <div class="inline-flex items-center gap-2 bg-dental-100 text-dental-700 px-4 py-2 rounded-full text-sm font-medium mb-4"> | |
| <i data-lucide="stethoscope" class="w-4 h-4"></i> | |
| Our Services | |
| </div> | |
| <h2 class="text-3xl sm:text-4xl font-display font-bold text-dental-900 mb-4">Comprehensive Dental Care</h2> | |
| <p class="text-gray-600 leading-relaxed">From preventive care to advanced cosmetic procedures, we offer a full range of dental services to keep your smile healthy and beautiful.</p> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Service 1 --> | |
| <div class="service-card group bg-white rounded-2xl p-8 border border-gray-100 hover:border-dental-200 hover:shadow-xl hover:shadow-dental-100/50 transition-all duration-300 cursor-pointer"> | |
| <div class="service-icon w-14 h-14 bg-dental-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="scan" class="w-7 h-7 text-dental-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900 mb-3">General Dentistry</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4">Regular checkups, cleanings, and preventive care to maintain your oral health and catch issues early.</p> | |
| <div class="flex items-center gap-1 text-dental-600 font-medium text-sm group-hover:gap-2 transition-all"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card group bg-white rounded-2xl p-8 border border-gray-100 hover:border-dental-200 hover:shadow-xl hover:shadow-dental-100/50 transition-all duration-300 cursor-pointer"> | |
| <div class="service-icon w-14 h-14 bg-mint-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="sparkles" class="w-7 h-7 text-mint-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900 mb-3">Cosmetic Dentistry</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4">Veneers, bonding, and complete smile makeovers to give you the radiant smile you've always wanted.</p> | |
| <div class="flex items-center gap-1 text-mint-600 font-medium text-sm group-hover:gap-2 transition-all"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card group bg-white rounded-2xl p-8 border border-gray-100 hover:border-dental-200 hover:shadow-xl hover:shadow-dental-100/50 transition-all duration-300 cursor-pointer"> | |
| <div class="service-icon w-14 h-14 bg-dental-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="smile" class="w-7 h-7 text-dental-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900 mb-3">Teeth Whitening</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4">Professional in-office and take-home whitening treatments for a brighter, more confident smile.</p> | |
| <div class="flex items-center gap-1 text-dental-600 font-medium text-sm group-hover:gap-2 transition-all"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card group bg-white rounded-2xl p-8 border border-gray-100 hover:border-dental-200 hover:shadow-xl hover:shadow-dental-100/50 transition-all duration-300 cursor-pointer"> | |
| <div class="service-icon w-14 h-14 bg-mint-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="shield-plus" class="w-7 h-7 text-mint-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900 mb-3">Dental Implants</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4">Permanent tooth replacement solutions that look and function just like your natural teeth.</p> | |
| <div class="flex items-center gap-1 text-mint-600 font-medium text-sm group-hover:gap-2 transition-all"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card group bg-white rounded-2xl p-8 border border-gray-100 hover:border-dental-200 hover:shadow-xl hover:shadow-dental-100/50 transition-all duration-300 cursor-pointer"> | |
| <div class="service-icon w-14 h-14 bg-dental-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="align-center-vertical" class="w-7 h-7 text-dental-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900 mb-3">Orthodontics</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4">Traditional braces and clear aligners to straighten your teeth and perfect your bite alignment.</p> | |
| <div class="flex items-center gap-1 text-dental-600 font-medium text-sm group-hover:gap-2 transition-all"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card group bg-white rounded-2xl p-8 border border-gray-100 hover:border-dental-200 hover:shadow-xl hover:shadow-dental-100/50 transition-all duration-300 cursor-pointer"> | |
| <div class="service-icon w-14 h-14 bg-mint-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="baby" class="w-7 h-7 text-mint-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900 mb-3">Pediatric Care</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4">Gentle, kid-friendly dental care that makes visits fun and builds healthy habits from an early age.</p> | |
| <div class="flex items-center gap-1 text-mint-600 font-medium text-sm group-hover:gap-2 transition-all"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-24 bg-gradient-to-b from-dental-50 to-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="relative"> | |
| <div class="rounded-3xl overflow-hidden shadow-2xl shadow-dental-200/40"> | |
| <img src="http://static.photos/medical/640x360/55" alt="Modern dental office" class="w-full h-96 object-cover" /> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-dental-500 to-mint-500 rounded-2xl flex items-center justify-center"> | |
| <i data-lucide="heart-pulse" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-dental-900">20+</div> | |
| <div class="text-sm text-gray-500">Years of Excellence</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="inline-flex items-center gap-2 bg-dental-100 text-dental-700 px-4 py-2 rounded-full text-sm font-medium"> | |
| <i data-lucide="info" class="w-4 h-4"></i> | |
| About Us | |
| </div> | |
| <h2 class="text-3xl sm:text-4xl font-display font-bold text-dental-900">Where Comfort Meets Cutting-Edge Care</h2> | |
| <p class="text-gray-600 leading-relaxed"> | |
| At BrightSmile Dental, we believe everyone deserves access to exceptional dental care. Our state-of-the-art facility combines the latest technology with a compassionate, patient-first approach. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-10 h-10 bg-dental-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-dental-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-dental-900">Advanced Technology</h4> | |
| <p class="text-sm text-gray-600">3D imaging, laser dentistry, and digital impressions for faster, more accurate treatments.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-10 h-10 bg-mint-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-mint-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-dental-900">Comfort-First Approach</h4> | |
| <p class="text-sm text-gray-600">Sedation options, warm blankets, and entertainment to make every visit stress-free.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-10 h-10 bg-dental-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-dental-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-dental-900">Flexible Payment Plans</h4> | |
| <p class="text-sm text-gray-600">We work with all major insurances and offer affordable financing options.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#appointment" class="inline-flex items-center gap-2 bg-dental-900 hover:bg-dental-800 text-white font-semibold px-6 py-3 rounded-full transition-all"> | |
| Schedule a Visit <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Doctors Section --> | |
| <section id="doctors" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <div class="inline-flex items-center gap-2 bg-dental-100 text-dental-700 px-4 py-2 rounded-full text-sm font-medium mb-4"> | |
| <i data-lucide="users" class="w-4 h-4"></i> | |
| Our Team | |
| </div> | |
| <h2 class="text-3xl sm:text-4xl font-display font-bold text-dental-900 mb-4">Meet Our Specialists</h2> | |
| <p class="text-gray-600 leading-relaxed">Our team of experienced dental professionals is dedicated to providing you with personalized, gentle care.</p> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Doctor 1 --> | |
| <div class="group text-center"> | |
| <div class="relative rounded-3xl overflow-hidden mb-6 aspect-[3/4]"> | |
| <img src="http://static.photos/people/640x360/12" alt="Dr. Sarah Mitchell" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dental-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6"> | |
| <div class="flex gap-3"> | |
| <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-colors"> | |
| <i data-lucide="linkedin" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-colors"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900">Dr. Sarah Mitchell</h3> | |
| <p class="text-dental-600 font-medium text-sm">General & Cosmetic Dentistry</p> | |
| <p class="text-gray-500 text-sm mt-1">DDS, Harvard — 15 years experience</p> | |
| </div> | |
| <!-- Doctor 2 --> | |
| <div class="group text-center"> | |
| <div class="relative rounded-3xl overflow-hidden mb-6 aspect-[3/4]"> | |
| <img src="http://static.photos/people/640x360/34" alt="Dr. James Rodriguez" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dental-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6"> | |
| <div class="flex gap-3"> | |
| <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-colors"> | |
| <i data-lucide="linkedin" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-colors"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900">Dr. James Rodriguez</h3> | |
| <p class="text-dental-600 font-medium text-sm">Orthodontics & Implants</p> | |
| <p class="text-gray-500 text-sm mt-1">DMD, Columbia — 12 years experience</p> | |
| </div> | |
| <!-- Doctor 3 --> | |
| <div class="group text-center"> | |
| <div class="relative rounded-3xl overflow-hidden mb-6 aspect-[3/4]"> | |
| <img src="http://static.photos/people/640x360/56" alt="Dr. Emily Chen" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dental-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6"> | |
| <div class="flex gap-3"> | |
| <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-colors"> | |
| <i data-lucide="linkedin" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-colors"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-dental-900">Dr. Emily Chen</h3> | |
| <p class="text-dental-600 font-medium text-sm">Pediatric Dentistry</p> | |
| <p class="text-gray-500 text-sm mt-1">DDS, Stanford — 10 years experience</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-24 bg-gradient-to-b from-dental-50 to-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <div class="inline-flex items-center gap-2 bg-dental-100 text-dental-700 px-4 py-2 rounded-full text-sm font-medium mb-4"> | |
| <i data-lucide="message-circle" class="w-4 h-4"></i> | |
| Testimonials | |
| </div> | |
| <h2 class="text-3xl sm:text-4xl font-display font-bold text-dental-900 mb-4">What Our Patients Say</h2> | |
| <p class="text-gray-600 leading-relaxed">Don't just take our word for it — hear from the thousands of patients who trust BrightSmile for their dental care.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"> | |
| <div class="flex items-center gap-1 mb-4 star-rating"> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <p class="text-gray-600 leading-relaxed mb-6">"I've been terrified of the dentist my whole life, but BrightSmile changed everything. The team made me feel so comfortable, and the results are incredible!"</p> | |
| <div class="flex items-center gap-3"> | |
| <img src="http://static.photos/people/200x200/10" alt="Amanda K." class="w-11 h-11 rounded-full object-cover" /> | |
| <div> | |
| <div class="font-semibold text-dental-900 text-sm">Amanda K.</div> | |
| <div class="text-xs text-gray-500">Teeth Whitening Patient</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"> | |
| <div class="flex items-center gap-1 mb-4 star-rating"> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <p class="text-gray-600 leading-relaxed mb-6">"Dr. Rodriguez did my implants and I couldn't be happier. The procedure was painless and the follow-up care was outstanding. Highly recommend!"</p> | |
| <div class="flex items-center gap-3"> | |
| <img src="http://static.photos/people/200x200/22" alt="Michael T." class="w-11 h-11 rounded-full object-cover" /> | |
| <div> | |
| <div class="font-semibold text-dental-900 text-sm">Michael T.</div> | |
| <div class="text-xs text-gray-500">Dental Implant Patient</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"> | |
| <div class="flex items-center gap-1 mb-4 star-rating"> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <p class="text-gray-600 leading-relaxed mb-6">"My kids actually look forward to their dental visits now! Dr. Chen is amazing with children — patient, fun, and so gentle. Best pediatric dentist ever."</p> | |
| <div class="flex items-center gap-3"> | |
| <img src="http://static.photos/people/200x200/44" alt="Jennifer L." class="w-11 h-11 rounded-full object-cover" /> | |
| <div> | |
| <div class="font-semibold text-dental-900 text-sm">Jennifer L.</div> | |
| <div class="text-xs text-gray-500">Pediatric Care Parent</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Appointment Section --> | |
| <section id="appointment" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-gradient-to-br from-dental-900 to-dental-800 rounded-3xl overflow-hidden"> | |
| <div class="grid lg:grid-cols-2 gap-0"> | |
| <!-- Left info --> | |
| <div class="p-10 lg:p-16 flex flex-col justify-center"> | |
| <div class="inline-flex items-center gap-2 bg-white/10 text-dental-200 px-4 py-2 rounded-full text-sm font-medium mb-6 w-fit"> | |
| <i data-lucide="calendar-check" class="w-4 h-4"></i> | |
| Book Online | |
| </div> | |
| <h2 class="text-3xl sm:text-4xl font-display font-bold text-white mb-4">Ready for Your Best Smile?</h2> | |
| <p class="text-dental-200 leading-relaxed mb-8">Schedule your appointment today and take the first step towards a healthier, more confident smile. New patients welcome!</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="clock" class="w-5 h-5 text-dental-300"></i> | |
| </div> | |
| <div> | |
| <div class="text-white font-medium">Mon–Fri: 8am–6pm</div> | |
| <div class="text-dental-300 text-sm">Sat: 9am–2pm • Sun: Closed</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="phone" class="w-5 h-5 text-dental-300"></i> | |
| </div> | |
| <div> | |
| <div class="text-white font-medium">(555) 123-4567</div> | |
| <div class="text-dental-300 text-sm">Emergency line available 24/7</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="map-pin" class="w-5 h-5 text-dental-300"></i> | |
| </div> | |
| <div> | |
| <div class="text-white font-medium">123 Smile Avenue</div> | |
| <div class="text-dental-300 text-sm">Suite 200, Springfield, IL 62701</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right form --> | |
| <div class="bg-white p-8 lg:p-12 m-4 lg:m-6 rounded-2xl"> | |
| <h3 class="text-xl font-bold text-dental-900 mb-6">Request an Appointment</h3> | |
| <form id="appointmentForm" class="space-y-4"> | |
| <div class="grid sm:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">First Name</label> | |
| <input type="text" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all" placeholder="John" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">Last Name</label> | |
| <input type="text" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all" placeholder="Doe" /> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">Email</label> | |
| <input type="email" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all" placeholder="john@example.com" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone</label> | |
| <input type="tel" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all" placeholder="(555) 000-0000" /> | |
| </div> | |
| <div class="grid sm:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">Preferred Date</label> | |
| <input type="date" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">Service</label> | |
| <select class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all text-gray-500"> | |
| <option value="">Select a service</option> | |
| <option>General Checkup</option> | |
| <option>Cosmetic Consultation</option> | |
| <option>Teeth Whitening</option> | |
| <option>Dental Implants</option> | |
| <option>Orthodontics</option> | |
| <option>Pediatric Care</option> | |
| <option>Emergency Visit</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1.5">Message (Optional)</label> | |
| <textarea rows="3" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-dental-500 focus:border-transparent transition-all resize-none" placeholder="Any special requests or concerns..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-dental-600 to-dental-500 hover:from-dental-700 hover:to-dental-600 text-white font-semibold py-3.5 rounded-xl transition-all shadow-lg shadow-dental-500/25 hover:shadow-dental-500/40 flex items-center justify-center gap-2"> | |
| <i data-lucide="calendar-check" class="w-5 h-5"></i> | |
| Request Appointment | |
| </button> | |
| <!-- Success message (hidden by default) --> | |
| <div id="successMessage" class="hidden text-center py-3 px-4 bg-mint-100 text-mint-700 rounded-xl text-sm font-medium"> | |
| <div class="flex items-center justify-center gap-2"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5"></i> | |
| Appointment request sent! We'll contact you shortly. | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Insurance Partners --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-8">Accepted Insurance Providers</h3> | |
| <div class="flex flex-wrap items-center justify-center gap-8 opacity-50"> | |
| <div class="text-2xl font-bold text-gray-400 font-display">Delta Dental</div> | |
| <div class="text-2xl font-bold text-gray-400 font-display">Cigna</div> | |
| <div class="text-2xl font-bold text-gray-400 font-display">Aetna</div> | |
| <div class="text-2xl font-bold text-gray-400 font-display">Guardian</div> | |
| <div class="text-2xl font-bold text-gray-400 font-display">MetLife</div> | |
| <div class="text-2xl font-bold text-gray-400 font-display">United</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact" class="bg-dental-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-10"> | |
| <!-- Brand --> | |
| <div class="space-y-4 lg:col-span-1"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-dental-500 to-mint-500 rounded-xl flex items-center justify-center"> | |
| <i data-lucide="smile" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold font-display">BrightSmile</span> | |
| </div> | |
| <p class="text-dental-300 text-sm leading-relaxed">Providing exceptional dental care with a gentle touch since 2004. Your smile is our passion.</p> | |
| <div class="flex gap-3"> | |
| <a href="#" class="w-9 h-9 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center transition-colors"> | |
| <i data-lucide="facebook" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="w-9 h-9 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center transition-colors"> | |
| <i data-lucide="instagram" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="w-9 h-9 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center transition-colors"> | |
| <i data-lucide="twitter" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="w-9 h-9 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center transition-colors"> | |
| <i data-lucide="youtube" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h4 class="font-semibold text-white mb-4">Quick Links</h4> | |
| <ul class="space-y-2.5"> | |
| <li><a href="#services" class="text-dental-300 hover:text-white text-sm transition-colors">Our Services</a></li> | |
| <li><a href="#about" class="text-dental-300 hover:text-white text-sm transition-colors">About Us</a></li> | |
| <li><a href="#doctors" class="text-dental-300 hover:text-white text-sm transition-colors">Our Doctors</a></li> | |
| <li><a href="#testimonials" class="text-dental-300 hover:text-white text-sm transition-colors">Patient Reviews</a></li> | |
| <li><a href="#appointment" class="text-dental-300 hover:text-white text-sm transition-colors">Book Online</a></li> | |
| </ul> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <h4 class="font-semibold text-white mb-4">Services</h4> | |
| <ul class="space-y-2.5"> | |
| <li><a href="#" class="text-dental-300 hover:text-white text-sm transition-colors">General Dentistry</a></li> | |
| <li><a href="#" class="text-dental-300 hover:text-white text-sm transition-colors">Cosmetic Dentistry</a></li> | |
| <li><a href="#" class="text-dental-300 hover:text-white text-sm transition-colors">Teeth Whitening</a></li> | |
| <li><a href="#" class="text-dental-300 hover:text-white text-sm transition-colors">Dental Implants</a></li> | |
| <li><a href="#" class="text-dental-300 hover:text-white text-sm transition-colors">Pediatric Care</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h4 class="font-semibold text-white mb-4">Contact Us</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="map-pin" class="w-4 h-4 text-dental-400 mt-1 flex-shrink-0"></i> | |
| <span class="text-dental-300 text-sm">123 Smile Avenue, Suite 200<br>Springfield, IL 62701</span> | |
| </li> | |
| <li class="flex items-center gap-3"> | |
| <i data-lucide="phone" class="w-4 h-4 text-dental-400 flex-shrink-0"></i> | |
| <a href="tel:+15551234567" class="text-dental-300 hover:text-white text-sm transition-colors">(555) 123-4567</a> | |
| </li> | |
| <li class="flex items-center gap-3"> | |
| <i data-lucide="mail" class="w-4 h-4 text-dental-400 flex-shrink-0"></i> | |
| <a href="mailto:hello@brightsmile.com" class="text-dental-300 hover:text-white text-sm transition-colors">hello@brightsmile.com</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom bar --> | |
| <div class="border-t border-white/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-4"> | |
| <p class="text-dental-400 text-sm">© 2024 BrightSmile Dental. All rights reserved.</p> | |
| <div class="flex gap-6"> | |
| <a href="#" class="text-dental-400 hover:text-white text-sm transition-colors">Privacy Policy</a> | |
| <a href="#" class="text-dental-400 hover:text-white text-sm transition-colors">Terms of Service</a> | |
| <a href="#" class="text-dental-400 hover:text-white text-sm transition-colors">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to top --> | |
| <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-dental-600 hover:bg-dental-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all opacity-0 translate-y-4 pointer-events-none z-50"> | |
| <i data-lucide="chevron-up" class="w-5 h-5"></i> | |
| </button> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| let menuOpen = false; | |
| menuBtn.addEventListener('click', () => { | |
| menuOpen = !menuOpen; | |
| mobileMenu.classList.toggle('hidden', !menuOpen); | |
| }); | |
| // Close mobile menu on link click | |
| mobileMenu.querySelectorAll('a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| menuOpen = false; | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Navbar scroll effect | |
| const navbar = document.getElementById('navbar'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('bg-white/95', 'nav-blur', 'shadow-sm'); | |
| } else { | |
| navbar.classList.remove('bg-white/95', 'nav-blur', 'shadow-sm'); | |
| } | |
| }); | |
| // Back to top button | |
| const backToTop = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 500) { | |
| backToTop.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none'); | |
| backToTop.classList.add('opacity-100', 'translate-y-0'); | |
| } else { | |
| backToTop.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none'); | |
| backToTop.classList.remove('opacity-100', 'translate-y-0'); | |
| } | |
| }); | |
| backToTop.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Appointment form submission | |
| const appointmentForm = document.getElementById('appointmentForm'); | |
| const successMessage = document.getElementById('successMessage'); | |
| appointmentForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| successMessage.classList.remove('hidden'); | |
| // Re-render icons in success message | |
| lucide.createIcons(); | |
| // Reset form after showing success | |
| setTimeout(() => { | |
| appointmentForm.reset(); | |
| }, 500); | |
| // Hide success message after 5 seconds | |
| setTimeout(() => { | |
| successMessage.classList.add('hidden'); | |
| }, 5000); | |
| }); | |
| // Scroll reveal animation using Intersection Observer | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections for scroll animation | |
| document.querySelectorAll('section').forEach(section => { | |
| section.style.opacity = '0'; | |
| section.style.transform = 'translateY(20px)'; | |
| section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; | |
| observer.observe(section); | |
| }); | |
| // Make the first section visible immediately | |
| const heroSection = document.querySelector('section'); | |
| if (heroSection) { | |
| heroSection.style.opacity = '1'; | |
| heroSection.style.transform = 'translateY(0)'; | |
| } | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |