Merge version_1 into main #2
255
src/app/page.tsx
255
src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Award, CheckCircle, Sparkles } from "lucide-react";
|
||||
import { Award, CheckCircle, Sparkles, Scissors, Zap, Flame, Shield } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,24 +32,12 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "#barbers",
|
||||
},
|
||||
{
|
||||
name: "Location",
|
||||
id: "#location",
|
||||
},
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Barbers", id: "#barbers" },
|
||||
{ name: "Location", id: "#location" },
|
||||
]}
|
||||
brandName="028 Barber Shop"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -58,16 +46,10 @@ export default function LandingPage() {
|
||||
logoText="028 Barber Shop Downtown Seattle"
|
||||
description="Downtown Seattle’s go-to barbershop for clean fades, sharp beard work, and personalized styles. Precision Cuts. Real Attention to Detail."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Walk In Today",
|
||||
href: "#location",
|
||||
},
|
||||
{ text: "Book Appointment", href: "#contact" },
|
||||
{ text: "Walk In Today", href: "#location" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo"
|
||||
imageAlt="modern luxury barbershop interior"
|
||||
/>
|
||||
</div>
|
||||
@@ -77,46 +59,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Life-Changing",
|
||||
quote: "Best haircut & shave experience of my entire adult life.",
|
||||
name: "James R.",
|
||||
role: "Finance Consultant",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=47qb6n&_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Expertise",
|
||||
quote: "He studies your face shape and gives you a haircut that actually fits you.",
|
||||
name: "Michael S.",
|
||||
role: "Tech Developer",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2hm5f4&_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Detail-Oriented",
|
||||
quote: "Attention to detail is insane.",
|
||||
name: "Alex B.",
|
||||
role: "Creative Director",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5orz58&_wi=1",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Life-Saver",
|
||||
quote: "Saved me before an important meeting—now I’m a regular.",
|
||||
name: "David W.",
|
||||
role: "Architect",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5u8jvm",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Perfect Cut",
|
||||
quote: "Perfect skin fade & beard trim. I’ll definitely come back.",
|
||||
name: "Kevin L.",
|
||||
role: "Manager",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5b5eqy",
|
||||
},
|
||||
{ id: "1", title: "Life-Changing", quote: "Best haircut & shave experience of my entire adult life.", name: "James R.", role: "Finance Consultant", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=47qb6n" },
|
||||
{ id: "2", title: "Expertise", quote: "He studies your face shape and gives you a haircut that actually fits you.", name: "Michael S.", role: "Tech Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2hm5f4" },
|
||||
{ id: "3", title: "Detail-Oriented", quote: "Attention to detail is insane.", name: "Alex B.", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5orz58" },
|
||||
{ id: "4", title: "Life-Saver", quote: "Saved me before an important meeting—now I’m a regular.", name: "David W.", role: "Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5u8jvm" },
|
||||
{ id: "5", title: "Perfect Cut", quote: "Perfect skin fade & beard trim. I’ll definitely come back.", name: "Kevin L.", role: "Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5b5eqy" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Experience the precision that keeps downtown professionals returning to our chair."
|
||||
@@ -128,34 +75,10 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Haircuts",
|
||||
description: "Classic and modern cuts tailored to your unique style.",
|
||||
buttonIcon: "Scissors",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=47qb6n&_wi=2",
|
||||
imageAlt: "man looking sharp barbershop portrait",
|
||||
},
|
||||
{
|
||||
title: "Skin Fades",
|
||||
description: "Crisp, precise fades by master barbers.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo&_wi=2",
|
||||
imageAlt: "man looking sharp barbershop portrait",
|
||||
},
|
||||
{
|
||||
title: "Beard Trims",
|
||||
description: "Professional beard shaping and styling.",
|
||||
buttonIcon: "Flame",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2hm5f4&_wi=2",
|
||||
imageAlt: "man looking sharp barbershop portrait",
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shaves",
|
||||
description: "Luxury shaves with premium products.",
|
||||
buttonIcon: "Shield",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5orz58&_wi=2",
|
||||
imageAlt: "man looking sharp barbershop portrait",
|
||||
},
|
||||
{ title: "Haircuts", description: "Classic and modern cuts tailored to your unique style.", buttonIcon: Scissors, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=47qb6n", imageAlt: "man looking sharp barbershop portrait" },
|
||||
{ title: "Skin Fades", description: "Crisp, precise fades by master barbers.", buttonIcon: Zap, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo", imageAlt: "man looking sharp barbershop portrait" },
|
||||
{ title: "Beard Trims", description: "Professional beard shaping and styling.", buttonIcon: Flame, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2hm5f4", imageAlt: "man looking sharp barbershop portrait" },
|
||||
{ title: "Hot Towel Shaves", description: "Luxury shaves with premium products.", buttonIcon: Shield, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5orz58", imageAlt: "man looking sharp barbershop portrait" },
|
||||
]}
|
||||
title="Premium Grooming Services"
|
||||
description="Every service is tailored to your face shape, hair type, and personal style."
|
||||
@@ -169,27 +92,9 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "Elite",
|
||||
title: "Precision Focus",
|
||||
description: "Attention to detail beyond the standard.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Custom",
|
||||
title: "Personalized Cuts",
|
||||
description: "Not generic styles; tailored for you.",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Expert",
|
||||
title: "Proven Results",
|
||||
description: "Seasoned barbers, mastered technique.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{ id: "m1", value: "Elite", title: "Precision Focus", description: "Attention to detail beyond the standard.", icon: Award },
|
||||
{ id: "m2", value: "Custom", title: "Personalized Cuts", description: "Not generic styles; tailored for you.", icon: Sparkles },
|
||||
{ id: "m3", value: "Expert", title: "Proven Results", description: "Seasoned barbers, mastered technique.", icon: CheckCircle },
|
||||
]}
|
||||
title="Why Choose 028"
|
||||
description="Elite standards for the discerning downtown professional."
|
||||
@@ -203,48 +108,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "team-1",
|
||||
groupTitle: "Seattle's Finest",
|
||||
members: [
|
||||
{
|
||||
id: "barber-1",
|
||||
title: "Andrew",
|
||||
subtitle: "Lead Barber",
|
||||
detail: "Precision-focused, known for clean fades.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s5rhpg",
|
||||
},
|
||||
{
|
||||
id: "barber-2",
|
||||
title: "Francisco",
|
||||
subtitle: "Senior Barber",
|
||||
detail: "Expert in beard shaping and styling.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y8o681",
|
||||
},
|
||||
{
|
||||
id: "barber-3",
|
||||
title: "Christian",
|
||||
subtitle: "Barber",
|
||||
detail: "Master of classic techniques.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qlkb5e",
|
||||
},
|
||||
{
|
||||
id: "barber-4",
|
||||
title: "Chelsey",
|
||||
subtitle: "Stylist",
|
||||
detail: "Detailed and sharp cutting styles.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpk76k",
|
||||
},
|
||||
{
|
||||
id: "barber-5",
|
||||
title: "Myra",
|
||||
subtitle: "Stylist",
|
||||
detail: "Versatile and trend-conscious.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bpdekl",
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo&_wi=3",
|
||||
imageAlt: "professional barber portrait modern",
|
||||
},
|
||||
id: "team-1", groupTitle: "Seattle's Finest", members: [
|
||||
{ id: "barber-1", title: "Andrew", subtitle: "Lead Barber", detail: "Precision-focused, known for clean fades.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s5rhpg" },
|
||||
{ id: "barber-2", title: "Francisco", subtitle: "Senior Barber", detail: "Expert in beard shaping and styling.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y8o681" },
|
||||
{ id: "barber-3", title: "Christian", subtitle: "Barber", detail: "Master of classic techniques.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qlkb5e" },
|
||||
{ id: "barber-4", title: "Chelsey", subtitle: "Stylist", detail: "Detailed and sharp cutting styles.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpk76k" },
|
||||
{ id: "barber-5", title: "Myra", subtitle: "Stylist", detail: "Versatile and trend-conscious.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bpdekl" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Expert Barbers"
|
||||
description="Meet the team dedicated to your best look yet."
|
||||
@@ -257,17 +128,7 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "loyalty-plan",
|
||||
badge: "Special",
|
||||
price: "$10 Off",
|
||||
subtitle: "Your next visit",
|
||||
features: [
|
||||
"Rebooking incentive",
|
||||
"Priority scheduling",
|
||||
"Member discounts",
|
||||
],
|
||||
},
|
||||
{ id: "loyalty-plan", badge: "Special", price: "$10 Off", subtitle: "Your next visit", features: ["Rebooking incentive", "Priority scheduling", "Member discounts"] }
|
||||
]}
|
||||
title="Loyalty Program"
|
||||
description="We value our regulars. Get rewarded for looking sharp."
|
||||
@@ -278,21 +139,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Where are you located?",
|
||||
content: "Conveniently nestled in downtown Seattle for quick access.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "Yes, we are one of the few shops in downtown Seattle that welcome walk-ins daily.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I book?",
|
||||
content: "Use our online booking platform or walk in today.",
|
||||
},
|
||||
{ id: "q1", title: "Where are you located?", content: "Conveniently nestled in downtown Seattle for quick access." },
|
||||
{ id: "q2", title: "Do you accept walk-ins?", content: "Yes, we are one of the few shops in downtown Seattle that welcome walk-ins daily." },
|
||||
{ id: "q3", title: "How do I book?", content: "Use our online booking platform or walk in today." },
|
||||
]}
|
||||
sideTitle="Downtown Seattle"
|
||||
sideDescription="Located for professionals, tourists, and locals alike."
|
||||
@@ -303,30 +152,26 @@ export default function LandingPage() {
|
||||
<div id="urgency" data-section="urgency">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Available Now"
|
||||
title="Need a Cut Today?"
|
||||
description="One of the only walk-in barbershops in downtown Seattle. Perfect for last-minute meetings, events, or quick refreshes."
|
||||
buttonText="Book Online"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo&_wi=4"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Final Step"
|
||||
title="Look Sharp. Feel Confident."
|
||||
description="Book your appointment or visit us downtown today."
|
||||
buttonText="Book Appointment"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo&_wi=5"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k27jmo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -335,32 +180,8 @@ export default function LandingPage() {
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wea609"
|
||||
logoText="028 Barber Shop"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Barbers",
|
||||
href: "#barbers",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Walk-ins Welcome",
|
||||
href: "#location",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "Barbers", href: "#barbers" }] },
|
||||
{ title: "Contact", items: [{ label: "Book Now", href: "#contact" }, { label: "Walk-ins Welcome", href: "#location" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user