Merge version_1 into main #2
321
src/app/page.tsx
321
src/app/page.tsx
@@ -30,26 +30,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Fresh Cut Barber"
|
||||
/>
|
||||
@@ -57,110 +42,38 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Precision Cuts. Modern Style."
|
||||
description="Book your next appointment with the premier barbershop in town. Expert grooming, classic techniques, and a welcoming atmosphere."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-hair-supplies-top-view_23-2148352884.jpg?_wi=1",
|
||||
imageAlt: "barbershop interior modern",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-showing-man-his-haircut-mirror_107420-94782.jpg",
|
||||
imageAlt: "barber chair interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg",
|
||||
imageAlt: "barbershop interior modern",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-tattooed-male-barber-cuts-beard-black-male_613910-1466.jpg",
|
||||
imageAlt: "barber chair interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-combing-man-hair-before-cutting_23-2147778785.jpg",
|
||||
imageAlt: "barbershop interior modern",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/metallic-hair-supplies-top-view_23-2148352884.jpg", imageAlt: "barbershop interior modern" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barber-showing-man-his-haircut-mirror_107420-94782.jpg", imageAlt: "barber chair interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg", imageAlt: "barbershop interior modern" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-tattooed-male-barber-cuts-beard-black-male_613910-1466.jpg", imageAlt: "barber chair interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-combing-man-hair-before-cutting_23-2147778785.jpg", imageAlt: "barbershop interior modern" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg",
|
||||
imageAlt: "barber chair interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg",
|
||||
imageAlt: "barbershop interior modern",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121949.jpg",
|
||||
imageAlt: "barber chair interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg",
|
||||
imageAlt: "barbershop interior modern",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121995.jpg",
|
||||
imageAlt: "barber chair interior",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg", imageAlt: "barber chair interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg", imageAlt: "barbershop interior modern" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121949.jpg", imageAlt: "barber chair interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg", imageAlt: "barbershop interior modern" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121995.jpg", imageAlt: "barber chair interior" }
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94764.jpg",
|
||||
alt: "Man getting his beard shaved with razor",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506294.jpg",
|
||||
alt: "Front view of hairstilyst giving a haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
|
||||
alt: "Full body portrait of a stylish male who himself shaving while sitting on a barber chair in a hairdressing salon.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cute-little-child-is-getting-trendy-haircut-from-barber-busy-barbershop_613910-20834.jpg",
|
||||
alt: "Cute little child is getting trendy haircut from barber at busy barbershop.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/anonymous-woman-trimming-beard-man_23-2147778907.jpg",
|
||||
alt: "Anonymous woman trimming beard of man",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94764.jpg", alt: "Man getting his beard shaved with razor" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506294.jpg", alt: "Front view of hairstilyst giving a haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg", alt: "Full body portrait of a stylish male who himself shaving while sitting on a barber chair in a hairdressing salon." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/cute-little-child-is-getting-trendy-haircut-from-barber-busy-barbershop_613910-20834.jpg", alt: "Cute little child is getting trendy haircut from barber at busy barbershop." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/anonymous-woman-trimming-beard-man_23-2147778907.jpg", alt: "Anonymous woman trimming beard of man" }
|
||||
]}
|
||||
avatarText="Join our 5,000+ satisfied clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/combs-brushes_23-2147711617.jpg",
|
||||
alt: "Combs and brushes",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326542.jpg",
|
||||
alt: "Top view male self-care setting still life",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/arrangement-brow-microblading-tools_23-2149238716.jpg",
|
||||
alt: "Arrangement of brow microblading tools",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/gloves-other-elements-father-s-day_23-2147631307.jpg",
|
||||
alt: "Gloves and other elements for father's day",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg",
|
||||
alt: "Hairdressing chair in vintage barber shop",
|
||||
},
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/combs-brushes_23-2147711617.jpg", alt: "Combs and brushes" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326542.jpg", alt: "Top view male self-care setting still life" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/arrangement-brow-microblading-tools_23-2149238716.jpg", alt: "Arrangement of brow microblading tools" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/gloves-other-elements-father-s-day_23-2147631307.jpg", alt: "Gloves and other elements for father's day" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg", alt: "Hairdressing chair in vintage barber shop" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -171,14 +84,8 @@ export default function LandingPage() {
|
||||
title="The Art of Grooming"
|
||||
description="With over 10 years of experience, our barbers provide personalized styles that fit your personality and lifestyle perfectly. We believe in quality over quantity."
|
||||
metrics={[
|
||||
{
|
||||
value: "10k+",
|
||||
title: "Cuts Performed",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
{ value: "10k+", title: "Cuts Performed" },
|
||||
{ value: "5k+", title: "Happy Clients" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg"
|
||||
imageAlt="experienced barber smiling"
|
||||
@@ -193,48 +100,12 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "s1",
|
||||
name: "Classic Cut",
|
||||
price: "$35",
|
||||
variant: "Hair",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-products-flowers-white_1150-15375.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
name: "Beard Trim",
|
||||
price: "$25",
|
||||
variant: "Beard",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-sustainably-produced-alcoholic-beverage_23-2150162956.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
name: "Hot Towel Shave",
|
||||
price: "$30",
|
||||
variant: "Shave",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326537.jpg",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
name: "Hair & Beard",
|
||||
price: "$55",
|
||||
variant: "Package",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-round-mystery-box_23-2149516476.jpg",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
name: "Fade Cut",
|
||||
price: "$40",
|
||||
variant: "Hair",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shaving-tools-bottles-mens-cosmetics-dark-blue-background_185193-161816.jpg",
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
name: "Executive Service",
|
||||
price: "$75",
|
||||
variant: "Full Service",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shaving-foam-with-brush-wooden-desk_23-2148088561.jpg",
|
||||
},
|
||||
{ id: "s1", name: "Classic Cut", price: "$35", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-products-flowers-white_1150-15375.jpg" },
|
||||
{ id: "s2", name: "Beard Trim", price: "$25", variant: "Beard", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sustainably-produced-alcoholic-beverage_23-2150162956.jpg" },
|
||||
{ id: "s3", name: "Hot Towel Shave", price: "$30", variant: "Shave", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326537.jpg" },
|
||||
{ id: "s4", name: "Hair & Beard", price: "$55", variant: "Package", imageSrc: "http://img.b2bpic.net/free-photo/top-view-round-mystery-box_23-2149516476.jpg" },
|
||||
{ id: "s5", name: "Fade Cut", price: "$40", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/shaving-tools-bottles-mens-cosmetics-dark-blue-background_185193-161816.jpg" },
|
||||
{ id: "s6", name: "Executive Service", price: "$75", variant: "Full Service", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shaving-foam-with-brush-wooden-desk_23-2148088561.jpg" }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Professional grooming services tailored for you."
|
||||
@@ -248,34 +119,12 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "team-group",
|
||||
groupTitle: "Meet the Team",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "John Doe",
|
||||
subtitle: "Master Barber",
|
||||
detail: "Expert in fades and classic cuts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452696.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Jane Smith",
|
||||
subtitle: "Stylist",
|
||||
detail: "Specialist in modern trends.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-with-brush-comb-stuck-her-hair-light_141793-58786.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Mike Ross",
|
||||
subtitle: "Junior Barber",
|
||||
detail: "Dedicated to precise grooming.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-3659.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-hair-supplies-top-view_23-2148352884.jpg?_wi=2",
|
||||
imageAlt: "professional barber smiling",
|
||||
},
|
||||
id: "team-group", groupTitle: "Meet the Team", members: [
|
||||
{ id: "m1", title: "John Doe", subtitle: "Master Barber", detail: "Expert in fades and classic cuts.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452696.jpg" },
|
||||
{ id: "m2", title: "Jane Smith", subtitle: "Stylist", detail: "Specialist in modern trends.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-with-brush-comb-stuck-her-hair-light_141793-58786.jpg" },
|
||||
{ id: "m3", title: "Mike Ross", subtitle: "Junior Barber", detail: "Dedicated to precise grooming.", imageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-3659.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Expert Barbers"
|
||||
description="Meet the team that makes your look legendary."
|
||||
@@ -289,26 +138,11 @@ export default function LandingPage() {
|
||||
rating={5}
|
||||
author="Mark R."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-doing-ok-gesture_1298-73.jpg",
|
||||
alt: "satisfied male customer portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg",
|
||||
alt: "customer getting haircut portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-jacket-grey-vignette-background_613910-20101.jpg",
|
||||
alt: "man beard groomed portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-hairdresser-using-dryer-beard-senior-client_23-2148181879.jpg",
|
||||
alt: "man looking confident haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-hand-using-marker-patient_23-2149103579.jpg",
|
||||
alt: "client portrait barber shop",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-doing-ok-gesture_1298-73.jpg", alt: "satisfied male customer portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg", alt: "customer getting haircut portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-jacket-grey-vignette-background_613910-20101.jpg", alt: "man beard groomed portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/male-hairdresser-using-dryer-beard-senior-client_23-2148181879.jpg", alt: "man looking confident haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-hand-using-marker-patient_23-2149103579.jpg", alt: "client portrait barber shop" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -320,21 +154,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I book an appointment?",
|
||||
content: "You can book directly through our online system.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "We prefer bookings but welcome walk-ins when available.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What products do you use?",
|
||||
content: "We use only premium professional-grade products.",
|
||||
},
|
||||
{ id: "f1", title: "How do I book an appointment?", content: "You can book directly through our online system." },
|
||||
{ id: "f2", title: "Do you accept walk-ins?", content: "We prefer bookings but welcome walk-ins when available." },
|
||||
{ id: "f3", title: "What products do you use?", content: "We use only premium professional-grade products." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our barber shop."
|
||||
@@ -345,18 +167,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Ready for your next cut?"
|
||||
description="Book your appointment today and look your best."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -364,31 +179,17 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
],
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Team", href: "#team" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "FAQ", href: "#faq" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="Fresh Cut Barber"
|
||||
/>
|
||||
@@ -396,4 +197,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user