Update src/app/page.tsx

This commit is contained in:
2026-03-11 08:56:22 +00:00
parent 00c24b40bf
commit 543b604956

View File

@@ -8,9 +8,26 @@ import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwe
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Calendar, Heart, Quote, Shield, Smile, Sparkles, Star } from 'lucide-react';
import { Calendar, Heart, Quote, Shield, Smile, Sparkles, Star, Phone, MessageCircle } from 'lucide-react';
import { useState } from 'react';
export default function LandingPage() {
const [bookingOption, setBookingOption] = useState<'calendly' | 'call' | 'whatsapp' | null>(null);
const handleBookingClick = (option: 'calendly' | 'call' | 'whatsapp') => {
setBookingOption(option);
if (option === 'calendly') {
// Open Calendly integration
window.open('https://calendly.com', '_blank');
} else if (option === 'call') {
// Trigger phone call
window.location.href = 'tel:+919068808583';
} else if (option === 'whatsapp') {
// Open WhatsApp chat
window.open('https://wa.me/919068808583?text=Hello%20Dr.%20Fauzdar%27s%20Dental', '_blank');
}
};
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
@@ -119,6 +136,59 @@ export default function LandingPage() {
/>
</div>
<div id="booking" data-section="booking">
<div className="w-content-width mx-auto py-20 px-vw-1_5">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold mb-4">Advanced Booking System</h2>
<p className="text-lg text-foreground/75">Choose your preferred way to book an appointment</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Calendly Integration */}
<div className="p-8 rounded-lg border-2 border-primary-cta/30 hover:border-primary-cta/60 transition-all cursor-pointer bg-card/50 hover:bg-card" onClick={() => handleBookingClick('calendly')}>
<div className="flex justify-center mb-4">
<Calendar className="w-12 h-12 text-primary-cta" />
</div>
<h3 className="text-xl font-semibold text-center mb-2">Book via Calendly</h3>
<p className="text-foreground/70 text-center text-sm mb-4">
Choose your preferred date and time from our interactive calendar. Instant confirmation.
</p>
<button className="w-full py-2 px-4 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity font-medium">
Open Calendar
</button>
</div>
{/* Call Now */}
<div className="p-8 rounded-lg border-2 border-accent/30 hover:border-accent/60 transition-all cursor-pointer bg-card/50 hover:bg-card" onClick={() => handleBookingClick('call')}>
<div className="flex justify-center mb-4">
<Phone className="w-12 h-12 text-accent" />
</div>
<h3 className="text-xl font-semibold text-center mb-2">Call Now</h3>
<p className="text-foreground/70 text-center text-sm mb-4">
Speak directly with our team. Available during business hours for immediate assistance.
</p>
<button className="w-full py-2 px-4 bg-accent text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium">
+91 90688 08583
</button>
</div>
{/* WhatsApp Chat */}
<div className="p-8 rounded-lg border-2 border-green-500/30 hover:border-green-500/60 transition-all cursor-pointer bg-card/50 hover:bg-card" onClick={() => handleBookingClick('whatsapp')}>
<div className="flex justify-center mb-4">
<MessageCircle className="w-12 h-12 text-green-500" />
</div>
<h3 className="text-xl font-semibold text-center mb-2">WhatsApp Chat</h3>
<p className="text-foreground/70 text-center text-sm mb-4">
Quick messaging service. Get instant replies and appointment confirmations via WhatsApp.
</p>
<button className="w-full py-2 px-4 bg-green-500 text-white rounded-lg hover:opacity-90 transition-opacity font-medium">
Start Chat
</button>
</div>
</div>
</div>
</div>
<div id="whyus" data-section="whyus">
<FeatureCardTwentySeven
title="Why Patients Trust Our Dental Care"
@@ -249,4 +319,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}