Dental Care

components/landing/hero.tsx

@@ -0,0 +1,97 @@
+import { ArrowRight, Calendar} from "lucide-react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { ShimmeringText } from "@/components/ui/shimmering-text";
+import TypingText from "@/components/ui/typing-text";
+import Link from "next/link";
+const Hero = () => {
+  return (
+    <section>
+      <div className="container mt-5 ">
+        <div className="bg-muted/25 grid items-center gap-8 lg:grid-cols-2 border rounded-lg shadow-lg">
+          <div className="flex flex-col items-center p-16 text-center lg:items-start lg:text-left">
+            <div className="mb-6 flex items-center gap-3">
+              <Image
+                src="/tooth.svg"
+                alt="Dental U Care Logo"
+                width={40}
+                height={40}
+                className="h-10 w-10"
+              />
+              <ShimmeringText
+                text="Dental U-Care"
+                className="text-2xl font-bold"
+                shimmeringColor="rgb(147 51 234)"
+                color="rgb(37 99 235)"
+                duration={2}
+              />
+            </div>
+            <h1 className="my-6 text-pretty text-4xl font-bold lg:text-6xl min-h-[120px] lg:min-h-[160px] flex items-start">
+              <TypingText
+                text={[
+                  "Your Smile, Our Priority",
+                  "Book Appointments Online",
+                  "Smile with Confidence",
+                  "Expert Dental Care for you"
+                ]}
+                typingSpeed={80}
+                deletingSpeed={50}
+                pauseDuration={2000}
+                loop={true}
+                showCursor={true}
+                cursorClassName="bg-primary"
+                cursorCharacter="|"
+                className="inline-block"
+              />
+            </h1>
+            <p className="text-muted-foreground mb-8 max-w-xl lg:text-xl">
+              Book your dental appointment online in minutes. Choose your
+              preferred date, time, and service. Real-time availability with
+              instant confirmation.
+            </p>
+            <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
+              <Button size="lg">
+                <Calendar className="mr-2 h-4 w-4" />
+                Book Appointment Now
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="lg">
+                <Link href="/get-started" className="flex items-center">
+                  Get Started
+                </Link>
+              </Button>
+            </div>
+            <div className="mt-8 grid grid-cols-3 gap-6 text-center lg:text-left">
+              <div>
+                <p className="text-2xl font-bold">500+</p>
+                <p className="text-muted-foreground text-xs">Happy Patients</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold">4</p>
+                <p className="text-muted-foreground text-xs">Expert Dentists</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold">98%</p>
+                <p className="text-muted-foreground text-xs">
+                  Satisfaction Rate
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative h-full w-full overflow-hidden rounded-r-lg sm:rounded-lg md:rounded-lg">
+            <Image
+              src="/smile.jpg"
+              alt="Professional dental care at Dental U Care"
+              width={600}
+              height={500}
+              priority
+              className="h-full w-full object-cover dark:brightness-75"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Hero };