Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SmileCraft Studio - Premium Dental Care</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| }, | |
| secondary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="dark bg-gray-900 text-white"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-primary-900 opacity-90"></div> | |
| <div class="absolute inset-0"> | |
| <div class="floating-tooth"></div> | |
| <div class="floating-tooth delay-3000"></div> | |
| <div class="floating-tooth delay-5000"></div> | |
| </div> | |
| <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent"> | |
| Crafting Perfect Smiles | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed"> | |
| Experience premium dental care with cutting-edge technology and personalized treatment plans | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="px-8 py-4 bg-primary-600 hover:bg-primary-700 rounded-full font-semibold text-lg transition-all transform hover:scale-105 shadow-lg"> | |
| Book Appointment | |
| </button> | |
| <button class="px-8 py-4 border-2 border-secondary-400 text-secondary-400 hover:bg-secondary-400 hover:text-gray-900 rounded-full font-semibold text-lg transition-all"> | |
| Emergency Contact | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12">Our Premium Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="service-card"> | |
| <div class="text-primary-400 mb-4"> | |
| <i data-feather="smile" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Cosmetic Dentistry</h3> | |
| <p class="text-gray-400">Transform your smile with veneers, whitening, and complete smile makeovers</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="text-secondary-400 mb-4"> | |
| <i data-feather="shield" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Preventive Care</h3> | |
| <p class="text-gray-400">Regular checkups, cleanings, and protective treatments</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="text-primary-400 mb-4"> | |
| <i data-feather="target" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Dental Implants</h3> | |
| <p class="text-gray-400">Permanent solutions for missing teeth with natural results</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="text-secondary-400 mb-4"> | |
| <i data-feather="git-branch" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Orthodontics</h3> | |
| <p class="text-gray-400">Invisalign and traditional braces for perfect alignment</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="text-primary-400 mb-4"> | |
| <i data-feather="heart" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Pediatric Dentistry</h3> | |
| <p class="text-gray-400">Gentle care for children's developing smiles</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="text-secondary-400 mb-4"> | |
| <i data-feather="zap" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Emergency Care</h3> | |
| <p class="text-gray-400">24/7 emergency dental services when you need them most</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Meet the Dentist Section --> | |
| <section class="py-20 px-4 bg-gray-800"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-12">Meet Dr. Sarah Chen</h2> | |
| <img src="http://static.photos/people/320x320/123" alt="Dr. Sarah Chen" class="w-64 h-64 rounded-full mx-auto mb-8 border-4 border-primary-400"> | |
| <h3 class="text-2xl font-semibold mb-4">DDS, MS - Founder & Lead Dentist</h3> | |
| <div class="max-w-2xl mx-auto mb-8"> | |
| <p class="text-gray-300 leading-relaxed mb-4"> | |
| With over 15 years of experience, Dr. Chen is passionate about creating beautiful, healthy smiles. | |
| She combines artistry with advanced dental techniques to deliver exceptional results. | |
| </p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-primary-400">5000+</div> | |
| <div class="text-sm text-gray-400">Smiles Transformed</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-secondary-400">15+</div> | |
| <div class="text-sm text-gray-400">Years Experience</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-primary-400">98%</div> | |
| <div class="text-sm text-gray-400">Satisfaction Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-secondary-400">24/7</div> | |
| <div class="text-sm text-gray-400">Emergency Care</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-2"> | |
| <span class="px-4 py-2 bg-primary-900 rounded-full text-sm">Harvard Dental School</span> | |
| <span class="px-4 py-2 bg-secondary-900 rounded-full text-sm">ADA Member</span> | |
| <span class="px-4 py-2 bg-primary-900 rounded-full text-sm">Cosmetic Dentistry Certified</span> | |
| <span class="px-4 py-2 bg-secondary-900 rounded-full text-sm">Implantology Expert</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12">Patient Testimonials</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card"> | |
| <div class="flex mb-4"> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-300 mb-4 italic">"Dr. Chen transformed my smile completely! The entire process was painless and the results exceeded my expectations."</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/234" alt="Patient" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <div class="font-semibold">Emily Rodriguez</div> | |
| <div class="text-sm text-gray-400">Smile Makeover Patient</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <div class="flex mb-4"> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-300 mb-4 italic">"The emergency care I received was exceptional. Dr. Chen saved my tooth and I'm forever grateful!"</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/345" alt="Patient" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <div class="font-semibold">Michael Thompson</div> | |
| <div class="text-sm text-gray-400">Emergency Patient</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <div class="flex mb-4"> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-300 mb-4 italic">"My Invisalign treatment was a breeze. The results are amazing - I can't stop smiling!"</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/456" alt="Patient" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <div class="font-semibold">Sarah Johnson</div> | |
| <div class="text-sm text-gray-400">Orthodontic Patient</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Before/After Gallery --> | |
| <section class="py-20 px-4 bg-gray-800"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12">Smile Transformations</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="before-after-card"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <div class="text-sm text-gray-400 mb-2">BEFORE</div> | |
| <img src="http://static.photos/medical/320x240/567" alt="Before" class="rounded-lg"> | |
| </div> | |
| <div> | |
| <div class="text-sm text-primary-400 mb-2">AFTER</div> | |
| <img src="http://static.photos/people/320x240/678" alt="After" class="rounded-lg"> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-center text-gray-300">Complete smile makeover with veneers</p> | |
| </div> | |
| <div class="before-after-card"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <div class="text-sm text-gray-400 mb-2">BEFORE</div> | |
| <img src="http://static.photos/medical/320x240/789" alt="Before" class="rounded-lg"> | |
| </div> | |
| <div> | |
| <div class="text-sm text-primary-400 mb-2">AFTER</div> | |
| <img src="http://static.photos/people/320x240/890" alt="After" class="rounded-lg"> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-center text-gray-300">Implant restoration and whitening</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Insurance Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8">Insurance Accepted</h2> | |
| <p class="text-xl text-gray-300 mb-12">We work with most major insurance providers to make your dental care affordable</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="insurance-logo">Delta Dental</div> | |
| <div class="insurance-logo">Aetna</div> | |
| <div class="insurance-logo">Cigna</div> | |
| <div class="insurance-logo">MetLife</div> | |
| </div> | |
| <button class="mt-12 px-8 py-4 bg-primary-600 hover:bg-primary-700 rounded-full font-semibold text-lg transition-all"> | |
| Check Your Coverage | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Emergency Contact --> | |
| <section class="py-20 px-4 bg-red-900"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="flex justify-center mb-6"> | |
| <i data-feather="phone-call" class="w-16 h-16 text-red-400 animate-pulse"></i> | |
| </div> | |
| <h2 class="text-4xl font-bold mb-4">24/7 Emergency Care</h2> | |
| <p class="text-xl mb-8">Dental emergencies can't wait. We're here when you need us most.</p> | |
| <div class="text-5xl font-bold mb-4 text-red-400">(555) 911-SMILE</div> | |
| <p class="text-lg">No appointment needed for emergencies</p> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="py-20 px-4 bg-gray-800"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12">Dental Health Tips</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <article class="blog-card"> | |
| <img src="http://static.photos/people/320x240/999" alt="Blog" class="w-full h-48 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">5 Foods That Naturally Whiten Teeth</h3> | |
| <p class="text-gray-400 text-sm mb-4">Discover natural ways to brighten your smile through diet...</p> | |
| <a href="#" class="text-primary-400 hover:text-primary-300 font-semibold">Read More →</a> | |
| </div> | |
| </article> | |
| <article class="blog-card"> | |
| <img src="http://static.photos/medical/320x240/888" alt="Blog" class="w-full h-48 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">The Truth About Flossing</h3> | |
| <p class="text-gray-400 text-sm mb-4">Why flossing is crucial for your overall health...</p> | |
| <a href="#" class="text-primary-400 hover:text-primary-300 font-semibold">Read More →</a> | |
| </div> | |
| </article> | |
| <article class="blog-card"> | |
| <img src="http://static.photos/people/320x240/777" alt="Blog" class="w-full h-48 object-cover rounded-t-lg"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Dental Care for Kids</h3> | |
| <p class="text-gray-400 text-sm mb-4">Tips for making dental hygiene fun for children...</p> | |
| <a href="#" class="text-primary-400 hover:text-primary-300 font-semibold">Read More →</a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Appointment Booking --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12">Book Your Appointment</h2> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <input type="text" placeholder="First Name" class="form-input"> | |
| <input type="text" placeholder="Last Name" class="form-input"> | |
| </div> | |
| <input type="email" placeholder="Email Address" class="form-input"> | |
| <input type="tel" placeholder="Phone Number" class="form-input"> | |
| <select class="form-input"> | |
| <option>Select Service</option> | |
| <option>General Checkup</option> | |
| <option>Cosmetic Dentistry</option> | |
| <option>Orthodontics</option> | |
| <option>Emergency Care</option> | |
| </select> | |
| <input type="date" class="form-input"> | |
| <textarea placeholder="Additional Notes" rows="4" class="form-input"></textarea> | |
| <button type="submit" class="w-full py-4 bg-primary-600 hover:bg-primary-700 rounded-lg font-semibold text-lg transition-all"> | |
| Schedule Appointment | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |