Merge version_1 into main #2
237
src/app/page.tsx
237
src/app/page.tsx
@@ -31,26 +31,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="SG Barber Shop"
|
||||
/>
|
||||
@@ -58,39 +43,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Precision Cuts. Timeless Style."
|
||||
description="Experience the art of traditional grooming at SG Barber Shop. Where classic techniques meet modern standards."
|
||||
tag="Expert Grooming"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-man-barbershop_23-2147737096.jpg?_wi=1",
|
||||
imageAlt: "modern barber shop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg?_wi=1",
|
||||
imageAlt: "barber cutting hair with clippers",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-drinks-coffee-barbershop_613910-14697.jpg",
|
||||
imageAlt: "A handsome stylish bearded male with a tattoo on arm dressed in a flannel shirt drinks coffee in a barbershop.",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-expensive-barber-shop-chair_23-2148256916.jpg",
|
||||
imageAlt: "Close-up expensive barber shop chair",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-washing-head-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6316.jpg",
|
||||
imageAlt: "Young bearded man washing head by hairdresser while sitting in chair at barbershop Barber soul",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-man-barbershop_23-2147737096.jpg", imageAlt: "modern barber shop interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg", imageAlt: "barber cutting hair with clippers" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
@@ -103,7 +63,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="Crafted for You"
|
||||
description="At SG Barber Shop, we believe every cut is a story. Our master barbers provide meticulous attention to detail in a comfortable, relaxed environment designed for the modern gentleman."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg"
|
||||
imageAlt="barbershop waiting area cozy"
|
||||
/>
|
||||
</div>
|
||||
@@ -115,41 +75,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Cut",
|
||||
description: "Customized haircuts tailored to your head shape and style.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224419.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506210.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-man-barbershop_23-2147737096.jpg?_wi=2",
|
||||
imageAlt: "barber haircut detail side view",
|
||||
title: "Precision Cut", description: "Customized haircuts tailored to your head shape and style.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224419.jpg", imageAlt: "barber haircut detail side view" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506210.jpg", imageAlt: "professional barber fade cut" }
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "The classic, relaxing ritual for a perfectly smooth finish.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-doubtful-concentrated-bearded-man-looking-razor_171337-17312.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg?_wi=2",
|
||||
imageAlt: "barber haircut detail side view",
|
||||
title: "Hot Towel Shave", description: "The classic, relaxing ritual for a perfectly smooth finish.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg", imageAlt: "barber applying hot towel shave" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-doubtful-concentrated-bearded-man-looking-razor_171337-17312.jpg", imageAlt: "barber doing traditional shave" }
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming",
|
||||
description: "Expert shaping, lining, and conditioning for a sharp beard.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-trimming-beard-man_23-2147778847.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=2",
|
||||
imageAlt: "barber haircut detail side view",
|
||||
},
|
||||
title: "Beard Grooming", description: "Expert shaping, lining, and conditioning for a sharp beard.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-trimming-beard-man_23-2147778847.jpg", imageAlt: "barber trimming man beard" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg", imageAlt: "detailed beard grooming work" }
|
||||
}
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Our Signature Services"
|
||||
@@ -163,54 +99,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
name: "Classic Cut",
|
||||
price: "$30",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Haircut",
|
||||
"Style",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
name: "The Executive",
|
||||
price: "$55",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Hot Towel Shave",
|
||||
"Beard Trim",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
name: "Full Grooming",
|
||||
price: "$80",
|
||||
features: [
|
||||
"Everything in Executive",
|
||||
"Face Mask",
|
||||
"Scalp Massage",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "basic", name: "Classic Cut", price: "$30", features: ["Consultation", "Haircut", "Style"], buttons: [{ text: "Book Now", href: "#contact" }] },
|
||||
{ id: "pro", name: "The Executive", price: "$55", features: ["Haircut", "Hot Towel Shave", "Beard Trim"], buttons: [{ text: "Book Now", href: "#contact" }] },
|
||||
{ id: "premium", name: "Full Grooming", price: "$80", features: ["Everything in Executive", "Face Mask", "Scalp Massage"], buttons: [{ text: "Book Now", href: "#contact" }] }
|
||||
]}
|
||||
title="Pricing Options"
|
||||
description="Transparent pricing for high-quality grooming services."
|
||||
@@ -223,24 +114,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "barber-1",
|
||||
name: "John Smith",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-3659.jpg",
|
||||
},
|
||||
{
|
||||
id: "barber-2",
|
||||
name: "David Lee",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-comb-scissors-isolated-white-background_141793-31598.jpg",
|
||||
},
|
||||
{
|
||||
id: "barber-3",
|
||||
name: "Sarah Chen",
|
||||
role: "Grooming Expert",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
|
||||
},
|
||||
{ id: "barber-1", name: "John Smith", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-3659.jpg" },
|
||||
{ id: "barber-2", name: "David Lee", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-comb-scissors-isolated-white-background_141793-31598.jpg" },
|
||||
{ id: "barber-3", name: "Sarah Chen", role: "Grooming Expert", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg" }
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Professional artists dedicated to your look."
|
||||
@@ -253,46 +129,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
handle: "@alex",
|
||||
testimonial: "Best fade I've had in years.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-romantic-woman-kissing-her-boyfriend_1153-757.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark P.",
|
||||
handle: "@mark",
|
||||
testimonial: "Always professional, always on time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-hair-salon_23-2150665422.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam K.",
|
||||
handle: "@sam",
|
||||
testimonial: "Found my go-to shop.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Chris B.",
|
||||
handle: "@chris",
|
||||
testimonial: "Exceptional service every time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-hugging-beard-trimmer-hair-brushes-scarted-confused-standing-orange-wall_141793-61541.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Pat D.",
|
||||
handle: "@pat",
|
||||
testimonial: "High quality cuts and atmosphere.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1419.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Alex R.", handle: "@alex", testimonial: "Best fade I've had in years.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-romantic-woman-kissing-her-boyfriend_1153-757.jpg" },
|
||||
{ id: "t2", name: "Mark P.", handle: "@mark", testimonial: "Always professional, always on time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-hair-salon_23-2150665422.jpg" },
|
||||
{ id: "t3", name: "Sam K.", handle: "@sam", testimonial: "Found my go-to shop.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg" },
|
||||
{ id: "t4", name: "Chris B.", handle: "@chris", testimonial: "Exceptional service every time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-hugging-beard-trimmer-hair-brushes-scarted-confused-standing-orange-wall_141793-61541.jpg" },
|
||||
{ id: "t5", name: "Pat D.", handle: "@pat", testimonial: "High quality cuts and atmosphere.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1419.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Stories"
|
||||
@@ -305,21 +146,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking online to guarantee your spot.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Can I bring my own products?",
|
||||
content: "Our barbers use high-end professional products, but we can advise on yours.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept cash, credit cards, and digital payments.",
|
||||
},
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online to guarantee your spot." },
|
||||
{ id: "f2", title: "Can I bring my own products?", content: "Our barbers use high-end professional products, but we can advise on yours." },
|
||||
{ id: "f3", title: "What payment methods do you accept?", content: "We accept cash, credit cards, and digital payments." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to your grooming FAQs."
|
||||
@@ -330,9 +159,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
tag="Visit Us"
|
||||
title="Book Your Spot"
|
||||
description="Join our growing list of satisfied clients today."
|
||||
|
||||
Reference in New Issue
Block a user