bender/2a5f0da2-7cef-41d4-84a1-a21e5c861d5e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-09 21:50:55 +00:00
parent df193ccce1
commit a17ef26365
1 changed files with 44 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
src/app/page.tsx
View File

@@ -32,56 +32,25 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Treatments",
id: "features",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Treatments", id: "features" },
{ name: "Contact", id: "contact" },
]}
brandName="Kaya Skin Clinic"
button={{ text: "Book Now", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Expert Care for Radiant Skin"
description="Experience professional dermatology and skin care at Kaya Skin Clinic in Al Urubah, Riyadh."
tag="Trusted Dermatology"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334235.jpg?_wi=1",
imageAlt: "Kaya Clinic Interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-making-home-comfortable_23-2149092117.jpg?_wi=1",
imageAlt: "Skin consultation",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/beautician-pulling-off-cosmetic-mask-from-woman-face_651396-1864.jpg",
imageAlt: "Beautician pulling off cosmetic mask",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-young-caucasian-woman-with-closed-eyes-covers-half-her-face-with-palm-leaf-longhaired-brunette-top-smiles-with-her-teeth-wellness-lifestyle-concept_197531-32180.jpg",
imageAlt: "Young woman wellness lifestyle",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-smiling-woman-talking-mobile-phone-from-her-kitchen-chatty-girl-with_1258-184102.jpg",
imageAlt: "Happy woman mobile",
},
{ imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334235.jpg", imageAlt: "Kaya Clinic Interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-making-home-comfortable_23-2149092117.jpg", imageAlt: "Skin consultation" }
]}
mediaAnimation="slide-up"
rating={5}
@@ -94,7 +63,7 @@ export default function LandingPage() {
useInvertedBackground={true}
title="Your Skin, Our Priority"
description="Kaya Skin Clinic provides personalized dermatology solutions with state-of-the-art technology and expert care, right here in Riyadh."
imageSrc="http://img.b2bpic.net/free-photo/elderly-patient-consultation-with-black-medic-modern-clinic-lobby_482257-131071.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/elderly-patient-consultation-with-black-medic-modern-clinic-lobby_482257-131071.jpg"
imageAlt="Clinic professional facility"
/>
</div>
@@ -106,56 +75,26 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
title: "Laser Therapy",
description: "Cutting edge laser solutions for skin rejuvenation.",
icon: Sparkles,
title: "Laser Therapy", description: "Cutting edge laser solutions for skin rejuvenation.", icon: Sparkles,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334265.jpg",
imageAlt: "Laser treatment",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/doctor-using-machine-treat-knee-joints-patient_169016-40817.jpg",
imageAlt: "Laser device",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334235.jpg?_wi=2",
imageAlt: "dermatology skin treatment",
{ imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334265.jpg", imageAlt: "Laser treatment" },
{ imageSrc: "http://img.b2bpic.net/free-photo/doctor-using-machine-treat-knee-joints-patient_169016-40817.jpg", imageAlt: "Laser device" }
]
},
{
title: "Medical Facials",
description: "Deep cleansing and personalized facials.",
icon: Shield,
title: "Medical Facials", description: "Deep cleansing and personalized facials.", icon: Shield,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arrangement-bath-products_23-2148366105.jpg",
imageAlt: "Facial process",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/serum-shaving-razor_23-2148889859.jpg",
imageAlt: "Facial tools",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-making-home-comfortable_23-2149092117.jpg?_wi=2",
imageAlt: "dermatology skin treatment",
{ imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arrangement-bath-products_23-2148366105.jpg", imageAlt: "Facial process" },
{ imageSrc: "http://img.b2bpic.net/free-photo/serum-shaving-razor_23-2148889859.jpg", imageAlt: "Facial tools" }
]
},
{
title: "Consultation",
description: "Expert advice from professional dermatologists.",
icon: Star,
title: "Consultation", description: "Expert advice from professional dermatologists.", icon: Star,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/thinking-doctor-young-girl-wearing-stethoscope-medical-gown-put-her-hand-jaw-white-background_141793-20993.jpg",
imageAlt: "Dermatologist consult",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-posing_23-2148497197.jpg",
imageAlt: "Doctor meeting",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/elderly-patient-consultation-with-black-medic-modern-clinic-lobby_482257-131071.jpg?_wi=2",
imageAlt: "dermatology skin treatment",
},
{ imageSrc: "http://img.b2bpic.net/free-photo/thinking-doctor-young-girl-wearing-stethoscope-medical-gown-put-her-hand-jaw-white-background_141793-20993.jpg", imageAlt: "Dermatologist consult" },
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-posing_23-2148497197.jpg", imageAlt: "Doctor meeting" }
]
}
]}
title="Advanced Skin Treatments"
description="Comprehensive dermatology services for all skin types."
@@ -169,48 +108,12 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "t1",
name: "Acne Treatment",
price: "SAR 500",
variant: "Clinical",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg",
},
{
id: "t2",
name: "Anti-Aging",
price: "SAR 800",
variant: "Medical",
imageSrc: "http://img.b2bpic.net/free-photo/beautycare-concept-with-space-right_23-2147817648.jpg",
},
{
id: "t3",
name: "Skin Brightening",
price: "SAR 600",
variant: "Clinical",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-women-getting-manicure_23-2150507012.jpg",
},
{
id: "t4",
name: "Botox",
price: "SAR 1200",
variant: "Aesthetic",
imageSrc: "http://img.b2bpic.net/free-photo/dermatologist-latex-gloves-holding-dermatoscope-while-examining-attractive-patient-with-skin-disease-female-dermatologist-examining-patient-with-dermascope-looking-signs-skin-cancer_657921-299.jpg",
},
{
id: "t5",
name: "Fillers",
price: "SAR 1500",
variant: "Aesthetic",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-desk_23-2148925522.jpg",
},
{
id: "t6",
name: "Chemical Peel",
price: "SAR 700",
variant: "Clinical",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-businesswoman_23-2147705220.jpg",
},
{ id: "t1", name: "Acne Treatment", price: "SAR 500", variant: "Clinical", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure_343596-77.jpg" },
{ id: "t2", name: "Anti-Aging", price: "SAR 800", variant: "Medical", imageSrc: "http://img.b2bpic.net/free-photo/beautycare-concept-with-space-right_23-2147817648.jpg" },
{ id: "t3", name: "Skin Brightening", price: "SAR 600", variant: "Clinical", imageSrc: "http://img.b2bpic.net/free-photo/side-view-women-getting-manicure_23-2150507012.jpg" },
{ id: "t4", name: "Botox", price: "SAR 1200", variant: "Aesthetic", imageSrc: "http://img.b2bpic.net/free-photo/dermatologist-latex-gloves-holding-dermatoscope-while-examining-attractive-patient-with-skin-disease-female-dermatologist-examining-patient-with-dermascope-looking-signs-skin-cancer_657921-299.jpg" },
{ id: "t5", name: "Fillers", price: "SAR 1500", variant: "Aesthetic", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-desk_23-2148925522.jpg" },
{ id: "t6", name: "Chemical Peel", price: "SAR 700", variant: "Clinical", imageSrc: "http://img.b2bpic.net/free-photo/side-view-businesswoman_23-2147705220.jpg" }
]}
title="Specialized Services"
description="Explore our curated list of clinical skin treatments."
@@ -222,29 +125,10 @@ export default function LandingPage() {
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "10k+",
title: "Clients",
description: "Happy skin success stories",
icon: Users,
},
{
id: "m2",
value: "15+",
title: "Years",
description: "Experience in dermatology",
icon: Award,
},
{
id: "m3",
value: "99%",
title: "Rating",
description: "Patient satisfaction rate",
icon: ThumbsUp,
},
{ id: "m1", value: "10k+", title: "Clients", description: "Happy skin success stories", icon: Users },
{ id: "m2", value: "15+", title: "Years", description: "Experience in dermatology", icon: Award },
{ id: "m3", value: "99%", title: "Rating", description: "Patient satisfaction rate", icon: ThumbsUp }
]}
title="Proven Results"
description="Our clinic has served thousands of satisfied customers in Riyadh."
@@ -256,46 +140,11 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "1",
title: "Great Results",
quote: "My skin has never looked better!",
name: "Sarah Ahmed",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg",
},
{
id: "2",
title: "Professional",
quote: "The team at Al Urubah is excellent.",
name: "Khalid Al-Otaibi",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-33862.jpg",
},
{
id: "3",
title: "Trustworthy",
quote: "I feel comfortable every visit.",
name: "Fatima Noor",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367142.jpg",
},
{
id: "4",
title: "Amazing",
quote: "Best clinic in Riyadh, hands down.",
name: "Layla Saeed",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-beauty-women-elegent-enjoy-concept_53876-148023.jpg",
},
{
id: "5",
title: "Satisfied",
quote: "Very thorough consultation process.",
name: "Omar Bin Sultan",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/business-finance-employment-female-successful-entrepreneurs-concept-confident-good-looking-female-office-manager-lady-white-jacket-smiling-looking-determined-win-case-court_1258-58834.jpg",
},
{ id: "1", title: "Great Results", quote: "My skin has never looked better!", name: "Sarah Ahmed", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg" },
{ id: "2", title: "Professional", quote: "The team at Al Urubah is excellent.", name: "Khalid Al-Otaibi", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-33862.jpg" },
{ id: "3", title: "Trustworthy", quote: "I feel comfortable every visit.", name: "Fatima Noor", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367142.jpg" },
{ id: "4", title: "Amazing", quote: "Best clinic in Riyadh, hands down.", name: "Layla Saeed", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/stylish-beauty-women-elegent-enjoy-concept_53876-148023.jpg" },
{ id: "5", title: "Satisfied", quote: "Very thorough consultation process.", name: "Omar Bin Sultan", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/business-finance-employment-female-successful-entrepreneurs-concept-confident-good-looking-female-office-manager-lady-white-jacket-smiling-looking-determined-win-case-court_1258-58834.jpg" }
]}
title="Patient Stories"
description="Hear what our patients have to say about their skin journey at Kaya."
@@ -307,21 +156,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How do I book?",
content: "You can book by visiting our clinic or via our website.",
},
{
id: "f2",
title: "Is the consultation paid?",
content: "We offer initial consultations to assess your skin needs.",
},
{
id: "f3",
title: "Where is the clinic?",
content: "We are located at Al Urubah road, Riyadh.",
},
{ id: "f1", title: "How do I book?", content: "You can book by visiting our clinic or via our website." },
{ id: "f2", title: "Is the consultation paid?", content: "We offer initial consultations to assess your skin needs." },
{ id: "f3", title: "Where is the clinic?", content: "We are located at Al Urubah road, Riyadh." }
]}
title="Common Questions"
description="Everything you need to know about our skin clinic services."
@@ -335,21 +172,10 @@ export default function LandingPage() {
title="Schedule a Visit"
description="Get in touch with our experts in Al Urubah."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "phone",
type: "tel",
placeholder: "Phone Number",
},
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "phone", type: "tel", placeholder: "Phone Number" }
]}
textarea={{
name: "message",
placeholder: "Tell us about your needs...",
}}
textarea={{ name: "message", placeholder: "Tell us about your needs..." }}
imageSrc="http://img.b2bpic.net/free-photo/stylish-beautiful-spacious-dental-clinic_8353-9586.jpg"
imageAlt="Clinic reception desk"
/>
@@ -360,16 +186,8 @@ export default function LandingPage() {
logoText="Kaya Skin Clinic"
copyrightText="© 2025 Kaya Skin Clinic - Al Urubah, Riyadh"
socialLinks={[
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</div>