Compare commits
46 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e53f86fe06 | |||
| 80a77b9215 | |||
| b3e70b6eaf | |||
| a28b8c81aa | |||
| 02357e59c4 | |||
| 153055bfb4 | |||
| 8ca343e350 | |||
| 763086b1b1 | |||
| 146aae97ec | |||
| c96426061d | |||
| 0ecd603482 | |||
| b8f9a350b2 | |||
| ea7d4c8d43 | |||
| cce61c48a3 | |||
| b72aeb9031 | |||
| 2b7a1c49ee | |||
| 1e39cfd4be | |||
| b16995238f | |||
| c9c62de5f5 | |||
| a31b409bbc | |||
| ca844cddde | |||
| 34a680df35 | |||
| 7276d20164 | |||
| ba939da9ff | |||
| 19e0e8b1fa | |||
| 594476ac3b | |||
| fa1f36dffe | |||
| c2996b5452 | |||
| 8b1e85e222 | |||
| 1f48fa0d0c | |||
| 04c289ee17 | |||
| 82f3fd2fad | |||
| 55bfa8e535 | |||
| 785f6f369e | |||
| 66a2fbe3ec | |||
| 6b7c08e416 | |||
| 9b07ffbbce | |||
| 075b45d404 | |||
| 65eb8e1c6a | |||
| 14b5625c0a | |||
| fcb8394ad1 | |||
| e135ff8fe7 | |||
| 4f78c3faf1 | |||
| 7a071d376b | |||
| 134bd05ad7 | |||
| 7192fb24f2 |
@@ -1,57 +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: "Expert Dental Care | Premium Dental Services & Treatment", description: "Experience expert dental care with advanced technology and skilled dentists. Comprehensive cosmetic, restorative, and preventive dental services for your perfect smile.", keywords: "expert dental care, cosmetic dentistry, dental implants, professional dentist, premium dental services", metadataBase: new URL("https://expertdentalcare.com"),
|
||||
alternates: {
|
||||
canonical: "https://expertdentalcare.com"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Expert Dental Care | Premium Dental Services & Treatment", description: "Experience expert dental care with advanced technology and skilled dentists. Comprehensive cosmetic, restorative, and preventive dental services for your perfect smile.", siteName: "Expert Dental Care", type: "website", images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/dentist-process-dental-services-dental-office-dental-treatment_1321-2973.jpg", alt: "Expert dental care"
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Expert Dental Care | Premium Dental Services & Treatment", description: "Experience expert dental care with advanced technology and skilled 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: `
|
||||
@@ -1419,7 +1381,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
151
src/app/page.tsx
151
src/app/page.tsx
@@ -2,14 +2,13 @@
|
||||
|
||||
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 HeroSplitKPI from "@/components/sections/hero/HeroSplitKPI";
|
||||
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, CheckCircle } 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";
|
||||
|
||||
@@ -50,54 +49,6 @@ const TIME_SLOTS: TimeSlot[] = [
|
||||
{ time: '04:00 PM', available: true },
|
||||
];
|
||||
|
||||
// Pre-generate random values outside of render to avoid impure function violations
|
||||
const generateRandomValues = () => {
|
||||
return Array.from({ length: 30 }).map(() => ({
|
||||
delay: Math.random() * 2,
|
||||
duration: 3 + Math.random() * 2,
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
size: 2 + Math.random() * 4,
|
||||
offsetX: Math.random() * 100 - 50,
|
||||
offsetY: Math.random() * 100 - 50,
|
||||
}));
|
||||
};
|
||||
|
||||
const RANDOM_VALUES = generateRandomValues();
|
||||
|
||||
function FloatingDotsAnimation() {
|
||||
return (
|
||||
<div className="fixed inset-0 pointer-events-none overflow-hidden">
|
||||
{RANDOM_VALUES.map((values, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-magenta-500 opacity-60"
|
||||
style={{
|
||||
width: `${values.size}px`,
|
||||
height: `${values.size}px`,
|
||||
left: `${values.x}%`,
|
||||
top: `${values.y}%`,
|
||||
animation: `float-dots ${values.duration}s ease-in-out ${values.delay}s infinite`,
|
||||
backgroundColor: '#ff00ff',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes float-dots {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: translate(var(--tx), var(--ty)) scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose: () => void; onSubmit: (data: any) => void }) {
|
||||
const [state, setState] = React.useState<BookingState>({
|
||||
isOpen,
|
||||
@@ -158,6 +109,12 @@ function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose:
|
||||
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++) {
|
||||
@@ -184,7 +141,7 @@ function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose:
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-blue-200 rounded-lg transition"
|
||||
>
|
||||
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
<X size={24} className="text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -242,7 +199,7 @@ function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose:
|
||||
>
|
||||
<div className="font-semibold text-gray-900">{service.name}</div>
|
||||
<div className="text-sm text-gray-500 flex items-center gap-1 mt-1">
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> {service.duration}
|
||||
<Clock size={14} /> {service.duration}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@@ -400,6 +357,7 @@ export default function LandingPage() {
|
||||
|
||||
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}`);
|
||||
};
|
||||
|
||||
@@ -416,7 +374,6 @@ export default function LandingPage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<FloatingDotsAnimation />
|
||||
<BookingModal
|
||||
isOpen={bookingOpen}
|
||||
onClose={() => setBookingOpen(false)}
|
||||
@@ -440,58 +397,26 @@ export default function LandingPage() {
|
||||
</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", onClick: () => setBookingOpen(true) },
|
||||
{ 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
|
||||
<HeroSplitKPI
|
||||
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"
|
||||
},
|
||||
textSide="left"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-patient-smiling_107420-65384.jpg?_wi=1"
|
||||
imageAlt="Cosmetic smile enhancement"
|
||||
mediaAnimation="slide-up"
|
||||
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", onClick: () => setBookingOpen(true) }]}
|
||||
buttonAnimation="slide-up"
|
||||
kpis={[
|
||||
{ value: "25+", label: "Years Experience" },
|
||||
{ value: "10K+", label: "Happy Patients" },
|
||||
{ value: "98%", label: "Satisfaction Rate" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -506,7 +431,7 @@ export default function LandingPage() {
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{ text: "Discover Our Practice", href: "#services" },
|
||||
{ text: "Discover Our Practice", href: "#about" },
|
||||
{ text: "Meet Our Team", href: "#testimonials" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -514,7 +439,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"
|
||||
@@ -524,16 +449,22 @@ 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", onClick: () => setBookingOpen(true) }]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -600,10 +531,10 @@ export default function LandingPage() {
|
||||
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