Merge version_1 into main #2
223
src/app/page.tsx
223
src/app/page.tsx
@@ -33,72 +33,45 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "barbers",
|
||||
},
|
||||
name: "Barbers", id: "barbers"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="THE LAB"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Book Now", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="THE LAB BARBERSHOP"
|
||||
description="Precision. Consistency. Standard-setting cuts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Your Appointment", href: "#contact"},
|
||||
{
|
||||
text: "Meet The Barbers",
|
||||
href: "#barbers",
|
||||
},
|
||||
text: "Meet The Barbers", href: "#barbers"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=1",
|
||||
imageAlt: "Barber shop hero",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "Barber shop hero"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=2",
|
||||
imageAlt: "Barber shop hero",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "Barber shop hero"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=3",
|
||||
imageAlt: "Barber shop hero",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "Barber shop hero"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=4",
|
||||
imageAlt: "Barber shop hero",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "Barber shop hero"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=5",
|
||||
imageAlt: "Barber shop hero",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "Barber shop hero"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=6",
|
||||
imageAlt: "Barber shop hero",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "Barber shop hero"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -110,28 +83,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "225+",
|
||||
title: "5-Star Reviews",
|
||||
items: [
|
||||
"Consistent 4.8 avg rating",
|
||||
],
|
||||
id: "m1", value: "225+", title: "5-Star Reviews", items: [
|
||||
"Consistent 4.8 avg rating"],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Precision Cuts",
|
||||
items: [
|
||||
"Intentional, sharp lines",
|
||||
],
|
||||
id: "m2", value: "100%", title: "Precision Cuts", items: [
|
||||
"Intentional, sharp lines"],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Elite",
|
||||
title: "Trusted Professionals",
|
||||
items: [
|
||||
"Expert-level craft",
|
||||
],
|
||||
id: "m3", value: "Elite", title: "Trusted Professionals", items: [
|
||||
"Expert-level craft"],
|
||||
},
|
||||
]}
|
||||
title="Trusted Excellence"
|
||||
@@ -146,19 +107,13 @@ export default function LandingPage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Sparkles,
|
||||
label: "Philosophy",
|
||||
value: "Precision",
|
||||
},
|
||||
label: "Philosophy", value: "Precision"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Reliability",
|
||||
value: "Consistent",
|
||||
},
|
||||
label: "Reliability", value: "Consistent"},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Vibe",
|
||||
value: "Premium",
|
||||
},
|
||||
label: "Vibe", value: "Premium"},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -171,53 +126,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "fade",
|
||||
title: "Fade / Taper",
|
||||
price: "$XX",
|
||||
period: "session",
|
||||
features: [
|
||||
"Precision lines",
|
||||
"Custom styling",
|
||||
],
|
||||
id: "fade", title: "Fade / Taper", price: "$XX", period: "session", features: [
|
||||
"Precision lines", "Custom styling"],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=7",
|
||||
imageAlt: "cinematic barber shop background dark",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg", imageAlt: "cinematic barber shop background dark"},
|
||||
{
|
||||
id: "beard",
|
||||
title: "Beard Sculpting",
|
||||
price: "$XX",
|
||||
period: "session",
|
||||
features: [
|
||||
"Hot towel finish",
|
||||
"Detail work",
|
||||
],
|
||||
id: "beard", title: "Beard Sculpting", price: "$XX", period: "session", features: [
|
||||
"Hot towel finish", "Detail work"],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-long-hair-dressed-yellow-jacket-red-shirt_613910-10364.jpg?_wi=1",
|
||||
imageAlt: "professional barber portrait modern",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-long-hair-dressed-yellow-jacket-red-shirt_613910-10364.jpg", imageAlt: "professional barber portrait modern"},
|
||||
{
|
||||
id: "combo",
|
||||
title: "Haircut + Beard",
|
||||
price: "$XX",
|
||||
period: "session",
|
||||
features: [
|
||||
"The full works",
|
||||
"Premium products",
|
||||
],
|
||||
id: "combo", title: "Haircut + Beard", price: "$XX", period: "session", features: [
|
||||
"The full works", "Premium products"],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg?_wi=1",
|
||||
imageAlt: "barber expert detail shot",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg", imageAlt: "barber expert detail shot"},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Select your transformation."
|
||||
@@ -232,17 +157,9 @@ export default function LandingPage() {
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "enrique",
|
||||
name: "Enrique - Known for flawless fades",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-long-hair-dressed-yellow-jacket-red-shirt_613910-10364.jpg?_wi=2",
|
||||
imageAlt: "Enrique",
|
||||
},
|
||||
id: "enrique", name: "Enrique - Known for flawless fades", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-long-hair-dressed-yellow-jacket-red-shirt_613910-10364.jpg", imageAlt: "Enrique"},
|
||||
{
|
||||
id: "gio",
|
||||
name: "Gio/Ozzy - Elite level detail",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg?_wi=2",
|
||||
imageAlt: "Gio",
|
||||
},
|
||||
id: "gio", name: "Gio/Ozzy - Elite level detail", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg", imageAlt: "Gio"},
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
@@ -255,37 +172,22 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Clean Environment",
|
||||
description: "Modern, professional atmosphere.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=8",
|
||||
},
|
||||
title: "Clean Environment", description: "Modern, professional atmosphere.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-man-hair-salon_23-2150665387.jpg", imageAlt: "client satisfaction barber shop"},
|
||||
items: [],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-man-hair-salon_23-2150665387.jpg",
|
||||
imageAlt: "client satisfaction barber shop",
|
||||
},
|
||||
{
|
||||
title: "Vibe & Energy",
|
||||
description: "Chill, premium shop energy.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=9",
|
||||
},
|
||||
title: "Vibe & Energy", description: "Chill, premium shop energy.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3394.jpg", imageAlt: "satisfied customer profile portrait"},
|
||||
items: [],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3394.jpg",
|
||||
imageAlt: "satisfied customer profile portrait",
|
||||
},
|
||||
{
|
||||
title: "Intentional Precision",
|
||||
description: "Every line sharp and intentional.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506212.jpg?_wi=10",
|
||||
},
|
||||
title: "Intentional Precision", description: "Every line sharp and intentional.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adult-young-male-smiling_23-2148272553.jpg", imageAlt: "happy client modern salon"},
|
||||
items: [],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adult-young-male-smiling_23-2148272553.jpg",
|
||||
imageAlt: "happy client modern salon",
|
||||
},
|
||||
]}
|
||||
title="The Experience"
|
||||
@@ -301,25 +203,15 @@ export default function LandingPage() {
|
||||
author="Repeat Client"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/low-angle-man-hair-salon_23-2150665387.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/low-angle-man-hair-salon_23-2150665387.jpg", alt: "User 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3394.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3394.jpg", alt: "User 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/adult-young-male-smiling_23-2148272553.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/adult-young-male-smiling_23-2148272553.jpg", alt: "User 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg", alt: "User 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-sad-expression_1194-2826.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-sad-expression_1194-2826.jpg", alt: "User 5"},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -330,20 +222,15 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
tag="Ready to get started?"
|
||||
title="Book Your Appointment"
|
||||
description="Your next premium cut is just one booking away."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
text: "Book Now", href: "#"},
|
||||
{
|
||||
text: "Call Shop",
|
||||
href: "tel:5555555555",
|
||||
},
|
||||
text: "Call Shop", href: "tel:5555555555"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -352,13 +239,9 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="THE LAB BARBERSHOP"
|
||||
leftLink={{
|
||||
text: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
}}
|
||||
text: "Instagram", href: "https://instagram.com"}}
|
||||
rightLink={{
|
||||
text: "Privacy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user