bender/731eb8a8-a133-4e2e-ace8-aa2fcaa9c227
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-06 21:55:20 +00:00
parent 54da4ea991
commit 739d9ce5e7
1 changed files with 44 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/app/page.tsx
View File

@@ -32,22 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "features",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "Services", id: "features" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="New Face Salon"
/>
@@ -55,70 +43,31 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitKpi
background="gradient-bars"
background={{ variant: "gradient-bars" }}
title="Book unforgettable beauty and wellness experiences"
description="Discover top-rated salons, barbers, medspas, and beauty experts trusted by millions worldwide. Book your spot today."
kpis={[
{
value: "781+",
label: "Happy Clients",
},
{
value: "5.0",
label: "Average Rating",
},
{
value: "7+ Years",
label: "Professional Experience",
},
{ value: "781+", label: "Happy Clients" },
{ value: "5.0", label: "Average Rating" },
{ value: "7+ Years", label: "Professional Experience" }
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/life-style_1122-1803.jpg",
alt: "Happy client 1",
},
{
src: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg",
alt: "Happy client 2",
},
{
src: "http://img.b2bpic.net/free-photo/woman-putting-face-client-towel_23-2147737012.jpg",
alt: "Happy client 3",
},
{
src: "http://img.b2bpic.net/free-photo/photo-two-black-ceramical-hair-sinks-standing-beaty-salon_651396-960.jpg",
alt: "Happy client 4",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women_23-2149272198.jpg",
alt: "Happy client 5",
},
{ src: "http://img.b2bpic.net/free-photo/life-style_1122-1803.jpg", alt: "Happy client 1" },
{ src: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg", alt: "Happy client 2" },
{ src: "http://img.b2bpic.net/free-photo/woman-putting-face-client-towel_23-2147737012.jpg", alt: "Happy client 3" },
{ src: "http://img.b2bpic.net/free-photo/photo-two-black-ceramical-hair-sinks-standing-beaty-salon_651396-960.jpg", alt: "Happy client 4" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women_23-2149272198.jpg", alt: "Happy client 5" }
]}
avatarText="Join our community of beauty lovers"
marqueeItems={[
{
type: "text",
text: "Hair Styling",
},
{
type: "text",
text: "Beard Grooming",
},
{
type: "text",
text: "Scalp Therapy",
},
{
type: "text",
text: "Face Care",
},
{
type: "text",
text: "Professional Tools",
},
{ type: "text", text: "Hair Styling" },
{ type: "text", text: "Beard Grooming" },
{ type: "text", text: "Scalp Therapy" },
{ type: "text", text: "Face Care" },
{ type: "text", text: "Professional Tools" }
]}
/>
</div>
@@ -128,7 +77,7 @@ export default function LandingPage() {
useInvertedBackground={true}
title="Professional Care, Experienced Staff"
description={[
"We offer a wide range of services including professional hair styling, beard grooming, and relaxation treatments. Our friendly team is dedicated to providing the best options for your personal care needs.",
"We offer a wide range of services including professional hair styling, beard grooming, and relaxation treatments. Our friendly team is dedicated to providing the best options for your personal care needs."
]}
/>
</div>
@@ -139,33 +88,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Precision Haircut",
tags: [
"Hair",
"Style",
],
imageSrc: "http://img.b2bpic.net/free-photo/circle-from-combs-scissors_23-2147711644.jpg",
},
{
id: "f2",
title: "Beard Grooming",
tags: [
"Beard",
"Maintenance",
],
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-redhead-bearded-hipster-male-with-crossed-arms-dressed-blue-fleece-shirt_613910-9449.jpg",
},
{
id: "f3",
title: "Scalp Treatment",
tags: [
"Relaxation",
"Care",
],
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230921.jpg",
},
{ id: "f1", title: "Precision Haircut", tags: ["Hair", "Style"], imageSrc: "http://img.b2bpic.net/free-photo/circle-from-combs-scissors_23-2147711644.jpg" },
{ id: "f2", title: "Beard Grooming", tags: ["Beard", "Maintenance"], imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-redhead-bearded-hipster-male-with-crossed-arms-dressed-blue-fleece-shirt_613910-9449.jpg" },
{ id: "f3", title: "Scalp Treatment", tags: ["Relaxation", "Care"], imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230921.jpg" }
]}
title="Signature Grooming Services"
description="Expert services tailored to help you look and feel your absolute best."
@@ -176,25 +101,11 @@ export default function LandingPage() {
<MetricCardThree
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
metrics={[
{
id: "m1",
icon: CheckCircle,
title: "Bookings Today",
value: "40+",
},
{
id: "m2",
icon: Star,
title: "Client Satisfaction",
value: "100%",
},
{
id: "m3",
icon: Award,
title: "Years Business",
value: "7+",
},
{ id: "m1", icon: CheckCircle, title: "Bookings Today", value: "40+" },
{ id: "m2", icon: Star, title: "Client Satisfaction", value: "100%" },
{ id: "m3", icon: Award, title: "Years Business", value: "7+" }
]}
title="Service Excellence"
description="Measurable results backed by our dedication to quality."
@@ -208,60 +119,12 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "ProStyle",
name: "Styling Gel",
price: "$15",
rating: 5,
reviewCount: "120",
imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217986.jpg",
},
{
id: "p2",
brand: "BeardCraft",
name: "Beard Oil",
price: "$22",
rating: 5,
reviewCount: "85",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-elder-bearded-man-holding-serum_23-2148621173.jpg",
},
{
id: "p3",
brand: "SilkRoot",
name: "Organic Shampoo",
price: "$18",
rating: 4,
reviewCount: "200",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-spa-bath-concept_23-2148094253.jpg",
},
{
id: "p4",
brand: "ProStyle",
name: "Matte Hair Wax",
price: "$19",
rating: 5,
reviewCount: "45",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506261.jpg",
},
{
id: "p5",
brand: "FreshFace",
name: "Aftershave Balm",
price: "$25",
rating: 5,
reviewCount: "67",
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288066.jpg",
},
{
id: "p6",
brand: "EliteCut",
name: "Styling Comb",
price: "$12",
rating: 4,
reviewCount: "90",
imageSrc: "http://img.b2bpic.net/free-photo/set-cosmetic-brushes_23-2147710658.jpg",
},
{ id: "p1", brand: "ProStyle", name: "Styling Gel", price: "$15", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217986.jpg" },
{ id: "p2", brand: "BeardCraft", name: "Beard Oil", price: "$22", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/front-view-elder-bearded-man-holding-serum_23-2148621173.jpg" },
{ id: "p3", brand: "SilkRoot", name: "Organic Shampoo", price: "$18", rating: 4, reviewCount: "200", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-spa-bath-concept_23-2148094253.jpg" },
{ id: "p4", brand: "ProStyle", name: "Matte Hair Wax", price: "$19", rating: 5, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506261.jpg" },
{ id: "p5", brand: "FreshFace", name: "Aftershave Balm", price: "$25", rating: 5, reviewCount: "67", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288066.jpg" },
{ id: "p6", brand: "EliteCut", name: "Styling Comb", price: "$12", rating: 4, reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/set-cosmetic-brushes_23-2147710658.jpg" }
]}
title="Premium Beauty Essentials"
description="Selected products used by our professionals to maintain your style at home."
@@ -274,41 +137,11 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah",
handle: "@sarah_salon",
testimonial: "Best service in Doha! My hair has never looked better.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",
},
{
id: "2",
name: "Mark",
handle: "@mark_doha",
testimonial: "Excellent barber shop, highly recommended for beard care.",
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg",
},
{
id: "3",
name: "Emily",
handle: "@emily_beauty",
testimonial: "Very professional and friendly staff. Amazing results every time.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg",
},
{
id: "4",
name: "James",
handle: "@james_groom",
testimonial: "They know exactly how to style men's hair perfectly.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-hairdresser-with-hair-dryer-his-hands-hairstyle-woman-beauty-hair-professional-beauty-salon_231208-10937.jpg",
},
{
id: "5",
name: "Linda",
handle: "@linda_styles",
testimonial: "Such a relaxing atmosphere and a perfect haircut.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-happy-bride-holding-smartphone_23-2149722007.jpg",
},
{ id: "1", name: "Sarah", handle: "@sarah_salon", testimonial: "Best service in Doha! My hair has never looked better.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
{ id: "2", name: "Mark", handle: "@mark_doha", testimonial: "Excellent barber shop, highly recommended for beard care.", imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg" },
{ id: "3", name: "Emily", handle: "@emily_beauty", testimonial: "Very professional and friendly staff. Amazing results every time.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg" },
{ id: "4", name: "James", handle: "@james_groom", testimonial: "They know exactly how to style men's hair perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-hairdresser-with-hair-dryer-his-hands-hairstyle-woman-beauty-hair-professional-beauty-salon_231208-10937.jpg" },
{ id: "5", name: "Linda", handle: "@linda_styles", testimonial: "Such a relaxing atmosphere and a perfect haircut.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-happy-bride-holding-smartphone_23-2149722007.jpg" }
]}
title="Loved by Our Clients"
description="Hear what our regulars have to say about their experience."
@@ -320,21 +153,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "How do I book an appointment?",
content: "You can book directly through our website or give us a call at our salon locations.",
},
{
id: "q2",
title: "What payment methods are accepted?",
content: "We accept major credit cards and digital payments.",
},
{
id: "q3",
title: "Are walk-ins allowed?",
content: "Walk-ins are welcome, but appointments are recommended for guaranteed service.",
},
{ id: "q1", title: "How do I book an appointment?", content: "You can book directly through our website or give us a call at our salon locations." },
{ id: "q2", title: "What payment methods are accepted?", content: "We accept major credit cards and digital payments." },
{ id: "q3", title: "Are walk-ins allowed?", content: "Walk-ins are welcome, but appointments are recommended for guaranteed service." }
]}
mediaAnimation="slide-up"
title="Common Questions"
@@ -347,32 +168,19 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "plain",
}}
background={{ variant: "plain" }}
tag="Visit Us"
title="Ready for a New Look?"
description="Reach out to our professional team in Doha today. We are always here to give you the best service."
buttons={[
{
text: "Book Now",
href: "#",
},
]}
buttons={[{ text: "Book Now", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="New Face Salon"
leftLink={{
text: "Terms of Service",
href: "#",
}}
rightLink={{
text: "Privacy Policy",
href: "#",
}}
leftLink={{ text: "Terms of Service", href: "#" }}
rightLink={{ text: "Privacy Policy", href: "#" }}
/>
</div>
</ReactLenis>