98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
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 };
|