Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 04c289ee17 | |||
| 55bfa8e535 | |||
| 66a2fbe3ec | |||
| 6b7c08e416 | |||
| 9b07ffbbce | |||
| 075b45d404 | |||
| 65eb8e1c6a | |||
| 14b5625c0a | |||
| fcb8394ad1 | |||
| e135ff8fe7 | |||
| 4f78c3faf1 | |||
| 7a071d376b | |||
| 134bd05ad7 | |||
| 79e16537c6 | |||
| 7192fb24f2 | |||
| 39d5c1f99c | |||
| 2476b1f9d4 | |||
| 7f5d885381 | |||
| 6a0e0faec0 | |||
| 45bae6f702 | |||
| 0289a8cd92 | |||
| 87b4dc12e0 |
@@ -1,54 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Source_Sans_3 } from "next/font/google";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const sourceSans3 = Source_Sans_3({
|
||||
variable: "--font-source-sans-3", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Luxury Dental Practice | Premium Care & Advanced Dentistry", description: "Experience luxury dental care with advanced technology and expert dentists. Premium cosmetic, restorative, and preventive services for your perfect smile.", keywords: "luxury dental care, cosmetic dentistry, dental implants, professional dentist, premium dental services", metadataBase: new URL("https://dentalexcellence.com"),
|
||||
alternates: {
|
||||
canonical: "https://dentalexcellence.com"},
|
||||
openGraph: {
|
||||
title: "Luxury Dental Practice | Premium Care & Advanced Dentistry", description: "Experience luxury dental care with advanced technology and expert dentists. Premium cosmetic, restorative, and preventive services for your perfect smile.", siteName: "Dental Excellence", type: "website", images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg", alt: "Premium dental care"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Luxury Dental Practice | Premium Care & Advanced Dentistry", description: "Experience luxury dental care with advanced technology and expert dentists.", images: [
|
||||
"http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg"],
|
||||
},
|
||||
};
|
||||
title: "Expert Dental Care", description: "Premium dental services with luxury care and advanced technology"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${sourceSans3.variable} ${halant.variable} ${inter.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body className="antialiased">{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1416,7 +1381,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
491
src/app/page.tsx
491
src/app/page.tsx
@@ -2,16 +2,365 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Star, Sparkles, Award, Heart, Mail } from "lucide-react";
|
||||
import { Star, Sparkles, Award, Heart, Mail, Calendar, X, Clock, Users, CheckCircle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import React from "react";
|
||||
|
||||
interface TimeSlot {
|
||||
time: string;
|
||||
available: boolean;
|
||||
}
|
||||
|
||||
interface BookingState {
|
||||
isOpen: boolean;
|
||||
step: 'service' | 'date' | 'time' | 'confirmation';
|
||||
selectedService: string | null;
|
||||
selectedDate: string | null;
|
||||
selectedTime: string | null;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
const SERVICES = [
|
||||
{ id: 'cosmetic', name: 'Cosmetic Dentistry', duration: '1 hour' },
|
||||
{ id: 'implants', name: 'Dental Implants', duration: '2 hours' },
|
||||
{ id: 'cleaning', name: 'Professional Cleaning', duration: '45 minutes' },
|
||||
{ id: 'root-canal', name: 'Root Canal', duration: '1.5 hours' },
|
||||
{ id: 'orthodontics', name: 'Orthodontics Consultation', duration: '30 minutes' },
|
||||
];
|
||||
|
||||
const TIME_SLOTS: TimeSlot[] = [
|
||||
{ time: '09:00 AM', available: true },
|
||||
{ time: '09:30 AM', available: true },
|
||||
{ time: '10:00 AM', available: false },
|
||||
{ time: '10:30 AM', available: true },
|
||||
{ time: '11:00 AM', available: true },
|
||||
{ time: '02:00 PM', available: true },
|
||||
{ time: '02:30 PM', available: false },
|
||||
{ time: '03:00 PM', available: true },
|
||||
{ time: '03:30 PM', available: true },
|
||||
{ time: '04:00 PM', available: true },
|
||||
];
|
||||
|
||||
function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose: () => void; onSubmit: (data: any) => void }) {
|
||||
const [state, setState] = React.useState<BookingState>({
|
||||
isOpen,
|
||||
step: 'service',
|
||||
selectedService: null,
|
||||
selectedDate: null,
|
||||
selectedTime: null,
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
setState(prev => ({ ...prev, isOpen }));
|
||||
}, [isOpen]);
|
||||
|
||||
const handleServiceSelect = (serviceId: string) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
selectedService: serviceId,
|
||||
step: 'date',
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDateSelect = (date: string) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
selectedDate: date,
|
||||
step: 'time',
|
||||
}));
|
||||
};
|
||||
|
||||
const handleTimeSelect = (time: string) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
selectedTime: time,
|
||||
step: 'confirmation',
|
||||
}));
|
||||
};
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
const service = SERVICES.find(s => s.id === state.selectedService);
|
||||
onSubmit({
|
||||
service: service?.name,
|
||||
date: state.selectedDate,
|
||||
time: state.selectedTime,
|
||||
name: state.name,
|
||||
email: state.email,
|
||||
phone: state.phone,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
const getNextAvailableDate = () => {
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
return tomorrow.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
const getDateRangeOptions = () => {
|
||||
const dates = [];
|
||||
for (let i = 1; i <= 30; i++) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + i);
|
||||
dates.push(date.toISOString().split('T')[0]);
|
||||
}
|
||||
return dates;
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 bg-gradient-to-r from-blue-50 to-blue-100 px-6 py-6 flex justify-between items-center border-b">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Schedule Your Appointment</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-blue-200 rounded-lg transition"
|
||||
>
|
||||
<X size={24} className="text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator */}
|
||||
<div className="px-6 py-4 bg-gray-50 border-b">
|
||||
<div className="flex justify-between items-center">
|
||||
{['Service', 'Date', 'Time', 'Confirm'].map((label, idx) => (
|
||||
<React.Fragment key={label}>
|
||||
<div className={`flex flex-col items-center ${
|
||||
state.step === ['service', 'date', 'time', 'confirmation'][idx]
|
||||
? 'text-blue-600'
|
||||
: idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step)
|
||||
? 'text-green-600'
|
||||
: 'text-gray-400'
|
||||
}`}>
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold ${
|
||||
state.step === ['service', 'date', 'time', 'confirmation'][idx]
|
||||
? 'bg-blue-600 text-white'
|
||||
: idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step)
|
||||
? 'bg-green-600 text-white'
|
||||
: 'bg-gray-200 text-gray-600'
|
||||
}`}>
|
||||
{idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step) ? '✓' : idx + 1}
|
||||
</div>
|
||||
<span className="text-xs mt-1">{label}</span>
|
||||
</div>
|
||||
{idx < 3 && (
|
||||
<div className={`flex-1 h-1 mx-2 ${
|
||||
idx < ['service', 'date', 'time', 'confirmation'].indexOf(state.step)
|
||||
? 'bg-green-600'
|
||||
: 'bg-gray-200'
|
||||
}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Service Selection */}
|
||||
{state.step === 'service' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-6">Select a Service</h3>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{SERVICES.map(service => (
|
||||
<button
|
||||
key={service.id}
|
||||
onClick={() => handleServiceSelect(service.id)}
|
||||
className={`p-4 rounded-lg border-2 text-left transition ${
|
||||
state.selectedService === service.id
|
||||
? 'border-blue-600 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-blue-400'
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold text-gray-900">{service.name}</div>
|
||||
<div className="text-sm text-gray-500 flex items-center gap-1 mt-1">
|
||||
<Clock size={14} /> {service.duration}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setState(prev => ({ ...prev, step: 'date' }))}
|
||||
disabled={!state.selectedService}
|
||||
className="w-full mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Date Selection */}
|
||||
{state.step === 'date' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-6">Select a Date</h3>
|
||||
<div className="grid grid-cols-4 gap-2 max-h-64 overflow-y-auto">
|
||||
{getDateRangeOptions().map(date => (
|
||||
<button
|
||||
key={date}
|
||||
onClick={() => handleDateSelect(date)}
|
||||
className={`p-3 rounded-lg border-2 text-center text-sm font-medium transition ${
|
||||
state.selectedDate === date
|
||||
? 'border-blue-600 bg-blue-50 text-blue-600'
|
||||
: 'border-gray-200 hover:border-blue-400 text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{formatDate(date)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button
|
||||
onClick={() => setState(prev => ({ ...prev, step: 'service' }))}
|
||||
className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setState(prev => ({ ...prev, step: 'time' }))}
|
||||
disabled={!state.selectedDate}
|
||||
className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Time Selection */}
|
||||
{state.step === 'time' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-6">Select a Time</h3>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{TIME_SLOTS.map(slot => (
|
||||
<button
|
||||
key={slot.time}
|
||||
onClick={() => slot.available && handleTimeSelect(slot.time)}
|
||||
disabled={!slot.available}
|
||||
className={`p-3 rounded-lg border-2 text-center font-medium transition ${
|
||||
state.selectedTime === slot.time
|
||||
? 'border-blue-600 bg-blue-50 text-blue-600'
|
||||
: slot.available
|
||||
? 'border-gray-200 hover:border-blue-400 text-gray-700'
|
||||
: 'border-gray-100 bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{slot.time}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button
|
||||
onClick={() => setState(prev => ({ ...prev, step: 'date' }))}
|
||||
className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setState(prev => ({ ...prev, step: 'confirmation' }))}
|
||||
disabled={!state.selectedTime}
|
||||
className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Confirmation */}
|
||||
{state.step === 'confirmation' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 flex gap-3">
|
||||
<CheckCircle size={24} className="text-green-600 flex-shrink-0" />
|
||||
<div>
|
||||
<div className="font-semibold text-green-900">Appointment Details</div>
|
||||
<div className="text-sm text-green-700 mt-1">
|
||||
{SERVICES.find(s => s.id === state.selectedService)?.name} on {formatDate(state.selectedDate!)} at {state.selectedTime}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Your Information</h3>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
value={state.name}
|
||||
onChange={e => handleInputChange('name', e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
value={state.email}
|
||||
onChange={e => handleInputChange('email', e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Phone Number"
|
||||
value={state.phone}
|
||||
onChange={e => handleInputChange('phone', e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setState(prev => ({ ...prev, step: 'time' }))}
|
||||
className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!state.name || !state.email || !state.phone}
|
||||
className="flex-1 px-6 py-3 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 disabled:bg-gray-300 transition"
|
||||
>
|
||||
Confirm Booking
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
const [bookingOpen, setBookingOpen] = useState(false);
|
||||
|
||||
const handleBookingSubmit = (data: any) => {
|
||||
console.log('Booking submitted:', data);
|
||||
// Here you would typically send this to your backend
|
||||
alert(`Booking confirmed for ${data.name} on ${data.date} at ${data.time}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -25,9 +374,15 @@ export default function LandingPage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<BookingModal
|
||||
isOpen={bookingOpen}
|
||||
onClose={() => setBookingOpen(false)}
|
||||
onSubmit={handleBookingSubmit}
|
||||
/>
|
||||
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Dental Excellence"
|
||||
brandName="Expert Dental Care"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
@@ -35,61 +390,45 @@ export default function LandingPage() {
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Schedule Appointment", href: "#contact"}}
|
||||
text: "Schedule Appointment", onClick: () => setBookingOpen(true),
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Premium Dental Care Excellence"
|
||||
description="Experience world-class dental treatment in a luxurious, calming environment. Our expert team delivers exceptional results with cutting-edge technology and personalized care for every patient."
|
||||
tag="Trusted by 1000+ Patients"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
kpis={[
|
||||
{ value: "25+", label: "Years Experience" },
|
||||
{ value: "99%", label: "Patient Satisfaction" },
|
||||
{ value: "500+", label: "Successful Smiles" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "Book Consultation", href: "#contact" },
|
||||
{ text: "Learn More", href: "#services" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg"
|
||||
imageAlt="Beautiful professional smile"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardTwo
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Premium Dental Services"
|
||||
description="Discover our comprehensive range of luxury dental treatments designed to enhance your smile and oral health."
|
||||
tag="Our Services"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Cosmetic Dentistry", name: "Smile Enhancement", price: "From $500", rating: 5,
|
||||
reviewCount: "248", imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg", imageAlt: "Cosmetic smile enhancement"},
|
||||
{
|
||||
id: "2", brand: "Restorative", name: "Dental Implants", price: "From $2,500", rating: 5,
|
||||
reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/old-man-sitting-dentist-s-office_1157-19454.jpg", imageAlt: "Advanced dental implant procedure"},
|
||||
{
|
||||
id: "3", brand: "Preventive Care", name: "Professional Cleaning", price: "From $150", rating: 5,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-dental-treatment-from-male-dentist-clinic_662251-2591.jpg", imageAlt: "Professional dental cleaning"},
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Book Consultation", onClick: () => setBookingOpen(true) },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
buttons={[{ text: "View All Services", href: "#contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg?_wi=1", imageAlt: "Cosmetic smile enhancement"
|
||||
},
|
||||
{
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/old-man-sitting-dentist-s-office_1157-19454.jpg", imageAlt: "Advanced dental implant procedure"
|
||||
},
|
||||
{
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-dental-treatment-from-male-dentist-clinic_662251-2591.jpg", imageAlt: "Professional dental cleaning"
|
||||
},
|
||||
{
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg", imageAlt: "Dental care treatment"
|
||||
},
|
||||
{
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/dental-clinic-interior-with-modern-dentistry-equipment-orange-color-stomatology-cabinet-with-nobody-it-orange-equipment-oral-treatment_482257-12486.jpg", imageAlt: "Modern dental office"
|
||||
},
|
||||
{
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg?_wi=2", imageAlt: "Cosmetic smile enhancement"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -98,12 +437,13 @@ export default function LandingPage() {
|
||||
heading={[
|
||||
{ type: "text", content: "Luxury Dental Excellence with" },
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/dental-clinic-interior-with-modern-dentistry-equipment-orange-color-stomatology-cabinet-with-nobody-it-orange-equipment-oral-treatment_482257-12486.jpg", alt: "Modern dental office"},
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/dental-clinic-interior-with-modern-dentistry-equipment-orange-color-stomatology-cabinet-with-nobody-it-orange-equipment-oral-treatment_482257-12486.jpg", alt: "Modern dental office"
|
||||
},
|
||||
{ type: "text", content: "State-of-the-Art Care" },
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{ text: "Discover Our Practice", href: "#services" },
|
||||
{ text: "Discover Our Practice", href: "#about" },
|
||||
{ text: "Meet Our Team", href: "#testimonials" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -111,7 +451,7 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
<FeatureCardNine
|
||||
title="Why Choose Us"
|
||||
description="We combine luxury amenities with cutting-edge dental technology to create an unparalleled patient experience."
|
||||
tag="Our Advantages"
|
||||
@@ -121,15 +461,24 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Patient Comfort", description: "Relax in our luxurious treatment rooms with premium seating, ambient lighting, and calming environments designed for maximum comfort.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-patient_23-2148396133.jpg", imageAlt: "Comfortable patient treatment area"},
|
||||
id: 1,
|
||||
title: "Patient Comfort", description: "Relax in our luxurious treatment rooms with premium seating, ambient lighting, and calming environments designed for maximum comfort.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-patient_23-2148396133.jpg?_wi=1", imageAlt: "Comfortable patient treatment area" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-patient_23-2148396133.jpg?_wi=2", imageAlt: "Comfortable patient treatment area" }
|
||||
},
|
||||
{
|
||||
title: "Advanced Technology", description: "We invest in the latest dental technology including digital imaging, laser treatments, and computer-guided implant placement.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-doctor-patient-looking-digital-teeh-x-ray-dental-office-person-pov-stomatology-wearing-protective-face-mask-gloves-pointing-teeth-radiography-stomatological-clinic_482257-13097.jpg", imageAlt: "Advanced dental technology"},
|
||||
id: 2,
|
||||
title: "Advanced Technology", description: "We invest in the latest dental technology including digital imaging, laser treatments, and computer-guided implant placement.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/dentist-doctor-patient-looking-digital-teeh-x-ray-dental-office-person-pov-stomatology-wearing-protective-face-mask-gloves-pointing-teeth-radiography-stomatological-clinic_482257-13097.jpg?_wi=1", imageAlt: "Advanced dental technology" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/dentist-doctor-patient-looking-digital-teeh-x-ray-dental-office-person-pov-stomatology-wearing-protective-face-mask-gloves-pointing-teeth-radiography-stomatological-clinic_482257-13097.jpg?_wi=2", imageAlt: "Advanced dental technology" }
|
||||
},
|
||||
{
|
||||
title: "Expert Team", description: "Our board-certified dentists and specialists have over 25 years combined experience delivering exceptional results.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-talking-with-nurse_23-2148757329.jpg", imageAlt: "Professional dental team"},
|
||||
id: 3,
|
||||
title: "Expert Team", description: "Our board-certified dentists and specialists have over 25 years combined experience delivering exceptional results.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-talking-with-nurse_23-2148757329.jpg?_wi=1", imageAlt: "Professional dental team" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-talking-with-nurse_23-2148757329.jpg?_wi=2", imageAlt: "Professional dental team" }
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
showStepNumbers={true}
|
||||
animationType="slide-up"
|
||||
buttons={[{ text: "Schedule Appointment", href: "#contact" }]}
|
||||
buttons={[{ text: "Schedule Appointment", onClick: () => setBookingOpen(true) }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -147,17 +496,23 @@ export default function LandingPage() {
|
||||
speed={40}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Mitchell", handle: "CEO, Tech Innovations", testimonial: "Dr. Chen transformed my smile completely. The care and attention to detail was exceptional. I've never felt more confident!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Mitchell"},
|
||||
id: "1", name: "Sarah Mitchell", handle: "CEO, Tech Innovations", testimonial: "Dr. Chen transformed my smile completely. The care and attention to detail was exceptional. I've never felt more confident!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Mitchell"
|
||||
},
|
||||
{
|
||||
id: "2", name: "James Rodriguez", handle: "Marketing Director", testimonial: "The entire experience was luxury from start to finish. Modern facilities, expert care, and results beyond my expectations.", imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg", imageAlt: "James Rodriguez"},
|
||||
id: "2", name: "James Rodriguez", handle: "Marketing Director", testimonial: "The entire experience was luxury from start to finish. Modern facilities, expert care, and results beyond my expectations.", imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg", imageAlt: "James Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emily Watson", handle: "Business Owner", testimonial: "Finally found a dentist who understands premium care. The comfort level and professionalism are unmatched in the city.", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Emily Watson"},
|
||||
id: "3", name: "Emily Watson", handle: "Business Owner", testimonial: "Finally found a dentist who understands premium care. The comfort level and professionalism are unmatched in the city.", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Emily Watson"
|
||||
},
|
||||
{
|
||||
id: "4", name: "David Thompson", handle: "Entrepreneur", testimonial: "My implant procedure was seamless and painless. The team made me feel completely at ease throughout the entire process.", imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling-while-talking-doctor_107420-73983.jpg", imageAlt: "David Thompson"},
|
||||
id: "4", name: "David Thompson", handle: "Entrepreneur", testimonial: "My implant procedure was seamless and painless. The team made me feel completely at ease throughout the entire process.", imageSrc: "http://img.b2bpic.net/free-photo/female-patient-smiling-while-talking-doctor_107420-73983.jpg", imageAlt: "David Thompson"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Lisa Anderson", handle: "Designer", testimonial: "The smile makeover exceeded all my dreams. Dr. Chen's expertise combined with the luxurious setting made it truly special.", imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageAlt: "Lisa Anderson"},
|
||||
id: "5", name: "Lisa Anderson", handle: "Designer", testimonial: "The smile makeover exceeded all my dreams. Dr. Chen's expertise combined with the luxurious setting made it truly special.", imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageAlt: "Lisa Anderson"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Michael Chang", handle: "Consultant", testimonial: "Best dental investment I've made. The quality, comfort, and results speak volumes. Highly recommend to everyone!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg", imageAlt: "Michael Chang"},
|
||||
id: "6", name: "Michael Chang", handle: "Consultant", testimonial: "Best dental investment I've made. The quality, comfort, and results speak volumes. Highly recommend to everyone!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg", imageAlt: "Michael Chang"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -183,15 +538,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Dental Excellence"
|
||||
copyrightText="© 2025 Dental Excellence. All rights reserved."
|
||||
logoText="Expert Dental Care"
|
||||
copyrightText="© 2025 Expert Dental Care. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Cosmetic Dentistry", href: "#services" },
|
||||
{ label: "Implants", href: "#services" },
|
||||
{ label: "Preventive Care", href: "#services" },
|
||||
{ label: "Emergency Care", href: "#services" },
|
||||
{ label: "Cosmetic Dentistry", href: "#about" },
|
||||
{ label: "Implants", href: "#about" },
|
||||
{ label: "Preventive Care", href: "#about" },
|
||||
{ label: "Emergency Care", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user