Merge version_3 into main #4
130
src/app/page.tsx
130
src/app/page.tsx
@@ -8,23 +8,33 @@ 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, Phone, MessageCircle } from 'lucide-react';
|
||||
import { Heart, Quote, Shield, Smile, Sparkles, Star, MessageCircle, Brain } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [bookingOption, setBookingOption] = useState<'calendly' | 'call' | 'whatsapp' | null>(null);
|
||||
const [chatOpen, setChatOpen] = useState(false);
|
||||
const [chatMessages, setChatMessages] = useState<Array<{role: string, content: string}>>([]);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
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');
|
||||
const handleSendMessage = () => {
|
||||
if (inputValue.trim()) {
|
||||
const newMessages = [
|
||||
...chatMessages,
|
||||
{ role: 'user', content: inputValue }
|
||||
];
|
||||
setChatMessages(newMessages);
|
||||
setInputValue('');
|
||||
|
||||
// Simulate AI response
|
||||
setTimeout(() => {
|
||||
const responses = [
|
||||
"I'd be happy to help you book an appointment! What date and time work best for you?", "Our available time slots are 9 AM - 1 PM and 3 PM - 7 PM. Which suits you?", "Perfect! I've noted your preferences. Can you share your name and phone number?", "Great! Your appointment is confirmed. We'll send you a reminder via SMS."
|
||||
];
|
||||
setChatMessages(prev => [
|
||||
...prev,
|
||||
{ role: 'assistant', content: responses[Math.floor(Math.random() * responses.length)] }
|
||||
]);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -139,51 +149,61 @@ export default function LandingPage() {
|
||||
<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 className="flex justify-center mb-6">
|
||||
<Brain className="w-12 h-12 text-primary-cta" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">AI Booking Assistant</h2>
|
||||
<p className="text-lg text-foreground/75">Chat with our intelligent assistant to book your appointment instantly</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 className="max-w-2xl mx-auto">
|
||||
<div className="rounded-lg border-2 border-primary-cta/30 bg-card/50 overflow-hidden">
|
||||
{/* Chat Container */}
|
||||
<div className="h-96 bg-background/50 overflow-y-auto p-6 space-y-4">
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-primary-cta/20 rounded-lg p-4 max-w-xs">
|
||||
<p className="text-foreground text-sm">👋 Hello! I'm your dental booking assistant. How can I help you schedule an appointment today?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{chatMessages.map((msg, idx) => (
|
||||
<div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div className={`rounded-lg p-4 max-w-xs ${
|
||||
msg.role === 'user'
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-primary-cta/20 text-foreground'
|
||||
}`}>
|
||||
<p className="text-sm">{msg.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="border-t border-primary-cta/20 p-4 bg-card">
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||
placeholder="Type your message..."
|
||||
className="flex-1 px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSendMessage}
|
||||
className="px-6 py-2 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity font-medium"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</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.
|
||||
|
||||
<div className="mt-6 p-4 bg-background/50 rounded-lg border border-accent/20">
|
||||
<p className="text-foreground/75 text-sm text-center">
|
||||
Our AI assistant will help you find the perfect appointment time and collect your information.
|
||||
</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>
|
||||
@@ -270,7 +290,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Get Started"
|
||||
tagIcon={Calendar}
|
||||
tagIcon={MessageCircle}
|
||||
title="Book Your Dental Consultation Today"
|
||||
description="Schedule your appointment with Dr. Fauzdar and experience premium dental care. Our team will contact you shortly to confirm your booking."
|
||||
background={{ variant: "plain" }}
|
||||
@@ -319,4 +339,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user