drrish/tooth-tales
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Tooth Tales | Dental Adventure</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>12</head>13<body class="bg-gradient-to-br from-blue-50 to-indigo-50">14 <custom-navbar></custom-navbar>15 <main class="container mx-auto px-4 py-12" id="main-content">16<!-- Hero Section -->17 <section class="flex flex-col md:flex-row items-center gap-12 mb-20">18 <div class="md:w-1/2">19 <h1 class="text-5xl font-bold text-gray-800 mb-6">Your Smile's <span class="text-indigo-600">Favorite</span> Story</h1>20 <p class="text-xl text-gray-600 mb-8">Embark on a dental adventure where every chapter ends with a brighter, healthier smile.</p>21 <div class="flex gap-4">22 <a href="#services" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Explore Services</a>23 <a href="#contact" class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition">Book Appointment</a>24 </div>25 </div>26 <div class="md:w-1/2">27 <img src="http://static.photos/medical/640x360/5" alt="Happy dentist with patient" class="rounded-xl shadow-xl">28 </div>29 </section>30 31 <!-- Services Section -->32 <section id="services" class="mb-20">33 <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our <span class="text-indigo-600">Dental</span> Services</h2>34 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">35 <!-- Service Card 1 -->36 <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">37 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">38 <i data-feather="smile" class="text-indigo-600 w-8 h-8"></i>39 </div>40 <h3 class="text-xl font-semibold mb-2">Teeth Whitening</h3>41 <p class="text-gray-600">Brighten your smile with our professional whitening treatments.</p>42 </div>43 44 <!-- Service Card 2 -->45 <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">46 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">47 <i data-feather="tooth" class="text-indigo-600 w-8 h-8"></i>48 </div>49 <h3 class="text-xl font-semibold mb-2">Dental Checkup</h3>50 <p class="text-gray-600">Comprehensive exams to keep your oral health in top shape.</p>51 </div>52 53 <!-- Service Card 3 -->54 <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">55 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">56 <i data-feather="activity" class="text-indigo-600 w-8 h-8"></i>57 </div>58 <h3 class="text-xl font-semibold mb-2">Orthodontics</h3>59 <p class="text-gray-600">Straighten your teeth with our customized braces and aligners.</p>60 </div>61 </div>62 </section>63 64 <!-- Testimonials -->65 <section class="mb-20 bg-white p-8 rounded-xl shadow-lg">66 <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Patient <span class="text-indigo-600">Stories</span></h2>67 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">68 <div class="bg-indigo-50 p-6 rounded-lg">69 <div class="flex items-center mb-4">70 <img src="http://static.photos/people/200x200/1" alt="Patient" class="w-12 h-12 rounded-full mr-4">71 <div>72 <h4 class="font-semibold">Sarah Johnson</h4>73 <p class="text-indigo-600 text-sm">Teeth Whitening</p>74 </div>75 </div>76 <p class="text-gray-700">"I was amazed at how painless and effective the whitening treatment was. My smile has never looked better!"</p>77 <div class="flex mt-3">78 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>79 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>80 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>81 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>82 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>83 </div>84 </div>85 86 <div class="bg-indigo-50 p-6 rounded-lg">87 <div class="flex items-center mb-4">88 <img src="http://static.photos/people/200x200/2" alt="Patient" class="w-12 h-12 rounded-full mr-4">89 <div>90 <h4 class="font-semibold">Michael Chen</h4>91 <p class="text-indigo-600 text-sm">Invisalign Treatment</p>92 </div>93 </div>94 <p class="text-gray-700">"The team made my orthodontic journey comfortable and transparent. I'm thrilled with my new smile!"</p>95 <div class="flex mt-3">96 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>97 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>98 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>99 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>100 <i data-feather="star" class="text-yellow-400 w-4 h-4 fill-current"></i>101 </div>102 </div>103 </div>104 </section>105 106 <!-- Contact Section -->107 <section id="contact" class="bg-white p-8 rounded-xl shadow-lg">108 <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Book Your <span class="text-indigo-600">Appointment</span></h2>109 <form class="max-w-2xl mx-auto">110 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">111 <div>112 <label for="name" class="block text-gray-700 mb-2">Full Name</label>113 <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">114 </div>115 <div>116 <label for="email" class="block text-gray-700 mb-2">Email</label>117 <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">118 </div>119 </div>120 <div class="mb-6">121 <label for="service" class="block text-gray-700 mb-2">Service</label>122 <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">123 <option>General Checkup</option>124 <option>Teeth Whitening</option>125 <option>Dental Implants</option>126 <option>Orthodontics</option>127 <option>Other</option>128 </select>129 </div>130 <div class="mb-6">131 <label for="message" class="block text-gray-700 mb-2">Message</label>132 <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>133 </div>134 <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Book Appointment</button>135 </form>136 </section>137 </main>138 139 <custom-footer></custom-footer>140 141 <script src="components/navbar.js"></script>142 <script src="components/footer.js"></script>143 <script src="script.js"></script>144 <script>145 feather.replace();146 VANTA.WAVES({147 el: "body",148 mouseControls: true,149 touchControls: true,150 gyroControls: false,151 minHeight: 200.00,152 minWidth: 200.00,153 scale: 1.00,154 scaleMobile: 1.00,155 color: 0x7b8dff,156 shininess: 30.00,157 waveHeight: 10.00,158 waveSpeed: 0.5,159 zoom: 0.8160 })161 </script>162<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>163</body>164</html>