Merge version_1 into main #2
301
src/app/page.tsx
301
src/app/page.tsx
@@ -31,28 +31,13 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Treatments",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Treatments", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Focus Hair Clinic"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#appointment",
|
||||
}}
|
||||
button={{ text: "Book Now", href: "#appointment" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -60,41 +45,14 @@ export default function LandingPage() {
|
||||
<HeroCarouselLogo
|
||||
logoText="Focus Hair Clinic"
|
||||
description="Restore Your Confidence with Advanced Hair & Aesthetic Treatments at Lahore's premier medical facility."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Consultation",
|
||||
href: "#appointment",
|
||||
},
|
||||
{
|
||||
text: "View Treatments",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Consultation", href: "#appointment" }, { text: "View Treatments", href: "#services" }]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cxma6j&_wi=1",
|
||||
imageAlt: "Modern Clinic Interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnqa55&_wi=1",
|
||||
imageAlt: "Hair Treatment Consultation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0505jh&_wi=1",
|
||||
imageAlt: "Aesthetic Clinic Professional",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6z9l7y&_wi=1",
|
||||
imageAlt: "Modern Medical Facility",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvg9of&_wi=1",
|
||||
imageAlt: "Hair Transplant Result",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2ckrsn&_wi=1",
|
||||
imageAlt: "Satisfied Patient",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cxma6j", imageAlt: "Modern Clinic Interior" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnqa55", imageAlt: "Hair Treatment Consultation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0505jh", imageAlt: "Aesthetic Clinic Professional" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6z9l7y", imageAlt: "Modern Medical Facility" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvg9of", imageAlt: "Hair Transplant Result" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2ckrsn", imageAlt: "Satisfied Patient" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -105,60 +63,12 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "FUE Hair Transplant",
|
||||
descriptions: [
|
||||
"Advanced follicular unit extraction for natural density.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cxma6j&_wi=2",
|
||||
imageAlt: "luxury medical clinic interior modern",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "PRP Therapy",
|
||||
descriptions: [
|
||||
"Stimulate hair growth using your own plasma.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnqa55&_wi=2",
|
||||
imageAlt: "luxury medical clinic interior modern",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Micro Needling",
|
||||
descriptions: [
|
||||
"Revitalize skin surface with minimal downtime.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0505jh&_wi=2",
|
||||
imageAlt: "luxury medical clinic interior modern",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Botox & Fillers",
|
||||
descriptions: [
|
||||
"Restore youthful appearance instantly.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6z9l7y&_wi=2",
|
||||
imageAlt: "luxury medical clinic interior modern",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
title: "Rhinoplasty",
|
||||
descriptions: [
|
||||
"Precision sculpting for facial harmony.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvg9of&_wi=2",
|
||||
imageAlt: "luxury medical clinic interior modern",
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
title: "Laser Hair Removal",
|
||||
descriptions: [
|
||||
"Safe, permanent hair reduction solutions.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2ckrsn&_wi=2",
|
||||
imageAlt: "luxury medical clinic interior modern",
|
||||
},
|
||||
{ id: "s1", title: "FUE Hair Transplant", descriptions: ["Advanced follicular unit extraction for natural density."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cxma6j", imageAlt: "luxury medical clinic interior modern" },
|
||||
{ id: "s2", title: "PRP Therapy", descriptions: ["Stimulate hair growth using your own plasma."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnqa55", imageAlt: "luxury medical clinic interior modern" },
|
||||
{ id: "s3", title: "Micro Needling", descriptions: ["Revitalize skin surface with minimal downtime."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0505jh", imageAlt: "luxury medical clinic interior modern" },
|
||||
{ id: "s4", title: "Botox & Fillers", descriptions: ["Restore youthful appearance instantly."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6z9l7y", imageAlt: "luxury medical clinic interior modern" },
|
||||
{ id: "s5", title: "Rhinoplasty", descriptions: ["Precision sculpting for facial harmony."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvg9of", imageAlt: "luxury medical clinic interior modern" },
|
||||
{ id: "s6", title: "Laser Hair Removal", descriptions: ["Safe, permanent hair reduction solutions."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2ckrsn", imageAlt: "luxury medical clinic interior modern" }
|
||||
]}
|
||||
title="Our Professional Treatments"
|
||||
description="Expert solutions for hair restoration and aesthetic refinement."
|
||||
@@ -182,26 +92,10 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
description: "Patient Satisfaction",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "24/7",
|
||||
description: "Expert Assistance",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Modern",
|
||||
description: "Clinical Equipment",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "Trusted",
|
||||
description: "Professional Staff",
|
||||
},
|
||||
{ id: "m1", value: "100%", description: "Patient Satisfaction" },
|
||||
{ id: "m2", value: "24/7", description: "Expert Assistance" },
|
||||
{ id: "m3", value: "Modern", description: "Clinical Equipment" },
|
||||
{ id: "m4", value: "Trusted", description: "Professional Staff" }
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Commitment to patient safety and superior aesthetic results."
|
||||
@@ -215,48 +109,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "g1",
|
||||
name: "Hair Restoration",
|
||||
price: "Transplant",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgfseb",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: "g2",
|
||||
name: "Facial Sculpting",
|
||||
price: "Rhinoplasty",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nujv1t",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: "g3",
|
||||
name: "Skin Refinement",
|
||||
price: "Hydrafacial",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gnmm7e",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: "g4",
|
||||
name: "PRP Treatment",
|
||||
price: "Regrowth",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r7irie",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: "g5",
|
||||
name: "Skin Whitening",
|
||||
price: "Aesthetic",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dfwmuw",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: "g6",
|
||||
name: "Liposuction",
|
||||
price: "Sculpting",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=95mmdf",
|
||||
rating: 5,
|
||||
},
|
||||
{ id: "g1", brand: "Hair", name: "Restoration", price: "Transplant", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zgfseb", rating: 5, reviewCount: "120" },
|
||||
{ id: "g2", brand: "Facial", name: "Sculpting", price: "Rhinoplasty", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nujv1t", rating: 5, reviewCount: "85" },
|
||||
{ id: "g3", brand: "Skin", name: "Refinement", price: "Hydrafacial", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gnmm7e", rating: 5, reviewCount: "210" },
|
||||
{ id: "g4", brand: "PRP", name: "Treatment", price: "Regrowth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r7irie", rating: 5, reviewCount: "95" },
|
||||
{ id: "g5", brand: "Skin", name: "Whitening", price: "Aesthetic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dfwmuw", rating: 5, reviewCount: "70" },
|
||||
{ id: "g6", brand: "Liposuction", name: "Body", price: "Sculpting", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=95mmdf", rating: 5, reviewCount: "150" }
|
||||
]}
|
||||
title="Results You Can Trust"
|
||||
description="Visual proof of our natural, beautiful transformations."
|
||||
@@ -268,61 +126,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Hafiz Awais Arif",
|
||||
date: "2023-10",
|
||||
title: "Hair Transplant",
|
||||
quote: "The technique used at this clinic was far better than other clinics. Healing time was very fast.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8gfdds",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cxma6j&_wi=3",
|
||||
imageAlt: "portrait happy middle aged man",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Abdul Qayyum",
|
||||
date: "2023-11",
|
||||
title: "PRP Therapy",
|
||||
quote: "I completed 3 PRP sessions here and the results were amazing. No more hair fall or dandruff.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oed02o",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnqa55&_wi=3",
|
||||
imageAlt: "portrait happy middle aged man",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Abdullah Kakar",
|
||||
date: "2023-12",
|
||||
title: "Hair Transplant",
|
||||
quote: "I had a hair transplant done here and I’m completely satisfied with the doctors and staff.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fm8hzp",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0505jh&_wi=3",
|
||||
imageAlt: "portrait happy middle aged man",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Aqsa Irfan",
|
||||
date: "2024-01",
|
||||
title: "Hydrafacial",
|
||||
quote: "Great experience with hydrafacial services. Amazing products and very professional environment.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pfm08o",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6z9l7y&_wi=3",
|
||||
imageAlt: "portrait happy middle aged man",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sara Khan",
|
||||
date: "2024-02",
|
||||
title: "Aesthetic Treatment",
|
||||
quote: "Professional, clean, and incredible results. Truly the best aesthetic clinic in Lahore.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s0m4r1",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvg9of&_wi=3",
|
||||
imageAlt: "portrait happy middle aged man",
|
||||
},
|
||||
{ id: "t1", name: "Hafiz Awais Arif", date: "2023-10", title: "Hair Transplant", quote: "The technique used at this clinic was far better than other clinics. Healing time was very fast.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8gfdds", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cxma6j" },
|
||||
{ id: "t2", name: "Abdul Qayyum", date: "2023-11", title: "PRP Therapy", quote: "I completed 3 PRP sessions here and the results were amazing. No more hair fall or dandruff.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oed02o", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnqa55" },
|
||||
{ id: "t3", name: "Abdullah Kakar", date: "2023-12", title: "Hair Transplant", quote: "I had a hair transplant done here and I’m completely satisfied with the doctors and staff.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fm8hzp", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0505jh" },
|
||||
{ id: "t4", name: "Aqsa Irfan", date: "2024-01", title: "Hydrafacial", quote: "Great experience with hydrafacial services. Amazing products and very professional environment.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pfm08o", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6z9l7y" },
|
||||
{ id: "t5", name: "Sara Khan", date: "2024-02", title: "Aesthetic Treatment", quote: "Professional, clean, and incredible results. Truly the best aesthetic clinic in Lahore.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s0m4r1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zvg9of" }
|
||||
]}
|
||||
title="Patient Stories"
|
||||
description="Hear from patients who transformed their lives."
|
||||
@@ -334,21 +142,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is hair transplant painful?",
|
||||
content: "We use modern local anesthesia for a comfortable procedure.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How long until I see results?",
|
||||
content: "Hair regrowth usually starts around 3 to 6 months after the procedure.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is PRP safe?",
|
||||
content: "Yes, PRP uses your own blood, making it completely safe.",
|
||||
},
|
||||
{ id: "f1", title: "Is hair transplant painful?", content: "We use modern local anesthesia for a comfortable procedure." },
|
||||
{ id: "f2", title: "How long until I see results?", content: "Hair regrowth usually starts around 3 to 6 months after the procedure." },
|
||||
{ id: "f3", title: "Is PRP safe?", content: "Yes, PRP uses your own blood, making it completely safe." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8skky7"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -361,25 +157,16 @@ export default function LandingPage() {
|
||||
<div id="appointment" data-section="appointment">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Book Your Free Consultation Today. Our specialists are available 24/7."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call 0321 7698210",
|
||||
href: "tel:03217698210",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Call 0321 7698210", href: "tel:03217698210" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
text="Focus Hair Clinic: 28 - K Commercial, Sector K DHA Phase 1, Lahore, Pakistan. Open 24/7 for your aesthetic needs."
|
||||
/>
|
||||
</div>
|
||||
@@ -387,14 +174,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Focus Hair Clinic"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user