bender/bbe243d4-a48b-47ba-9c2f-b0271af2b8e6
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-10 09:03:17 +00:00
parent ddb2eb61ab
commit 08b552bb1f
1 changed files with 54 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

446
src/app/page.tsx
View File

@@ -32,26 +32,11 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "features",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Our Team",
id: "team",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "Services", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Our Team", id: "team" },
{ name: "Contact", id: "contact" },
]}
brandName="MasterCuts"
/>
@@ -59,100 +44,29 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Craft, Precision, Character."
description="Step into MasterCuts, where every cut is a masterpiece and every barber is an artist. Experience grooming the way it was meant to be."
testimonials={[
{
name: "James Anderson",
handle: "@james",
testimonial: "The best fade I've ever had. Truly artisan work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-tattooed-hipster-male-wearing-top-hat-grey-vignette-background_613910-8462.jpg?_wi=1",
},
{
name: "Sophia Miller",
handle: "@sophia",
testimonial: "Finally found a barber who understands modern trends.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/glamour-closeup-portrait-beautiful-sexy-caucasian-young-blond-woman-model-with-bright-makeup_158538-7839.jpg?_wi=1",
},
{
name: "Marcus Chen",
handle: "@marcus",
testimonial: "Exceptional attention to detail. Worth every penny.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-dryer-beard-man_23-2147737033.jpg?_wi=1",
},
{
name: "David Thorne",
handle: "@davidt",
testimonial: "Consistent, clean, and always a great vibe.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-1267.jpg?_wi=1",
},
{
name: "Chloe Vance",
handle: "@chloev",
testimonial: "Perfectly tailored to my style, highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-red-lips-unusual-hair-style-with-shadow-eyes-black-background_158538-3863.jpg?_wi=1",
},
{ name: "James Anderson", handle: "@james", testimonial: "The best fade I've ever had. Truly artisan work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-tattooed-hipster-male-wearing-top-hat-grey-vignette-background_613910-8462.jpg" },
{ name: "Sophia Miller", handle: "@sophia", testimonial: "Finally found a barber who understands modern trends.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/glamour-closeup-portrait-beautiful-sexy-caucasian-young-blond-woman-model-with-bright-makeup_158538-7839.jpg" },
{ name: "Marcus Chen", handle: "@marcus", testimonial: "Exceptional attention to detail. Worth every penny.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-using-dryer-beard-man_23-2147737033.jpg" },
{ name: "David Thorne", handle: "@davidt", testimonial: "Consistent, clean, and always a great vibe.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-1267.jpg" },
{ name: "Chloe Vance", handle: "@chloev", testimonial: "Perfectly tailored to my style, highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-red-lips-unusual-hair-style-with-shadow-eyes-black-background_158538-3863.jpg" },
]}
buttons={[
{
text: "Book Your Transformation",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg?_wi=1"
buttons={[{ text: "Book Your Transformation", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg"
imageAlt="Premium barber tools set"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/close-up-studio-portrait-bearded-male-felt-hat-grey-background_613910-9114.jpg",
alt: "Client 1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-serious-middle-age-bearded-male-dressed-plaid-flannel-shirt-grey-background_613910-16272.jpg",
alt: "Client 2",
},
{
src: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-sunglasses-grey-background_613910-3531.jpg",
alt: "Client 3",
},
{
src: "http://img.b2bpic.net/free-photo/serious-blond-bearded-man-white-shirt-classic-elegant-jacket-dark-background_613910-11230.jpg",
alt: "Client 4",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-cute-brunette-woman-model-casual-summer-dress-with-no-makeup-making-selfie-photo-phone-isolated-gray-with-handbag_158538-14494.jpg",
alt: "Client 5",
},
{ src: "http://img.b2bpic.net/free-photo/close-up-studio-portrait-bearded-male-felt-hat-grey-background_613910-9114.jpg", alt: "Client 1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-serious-middle-age-bearded-male-dressed-plaid-flannel-shirt-grey-background_613910-16272.jpg", alt: "Client 2" },
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-sunglasses-grey-background_613910-3531.jpg", alt: "Client 3" },
{ src: "http://img.b2bpic.net/free-photo/serious-blond-bearded-man-white-shirt-classic-elegant-jacket-dark-background_613910-11230.jpg", alt: "Client 4" },
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-cute-brunette-woman-model-casual-summer-dress-with-no-makeup-making-selfie-photo-phone-isolated-gray-with-handbag_158538-14494.jpg", alt: "Client 5" },
]}
marqueeItems={[
{
type: "text",
text: "Mastercraft",
},
{
type: "text",
text: "Precision",
},
{
type: "text",
text: "Grooming",
},
{
type: "text",
text: "Luxury",
},
{
type: "text",
text: "Artisan",
},
{ type: "text", text: "Mastercraft" }, { type: "text", text: "Precision" }, { type: "text", text: "Grooming" }, { type: "text", text: "Luxury" }, { type: "text", text: "Artisan" },
]}
/>
</div>
@@ -160,79 +74,23 @@ export default function LandingPage() {
<div id="features" data-section="features">
<FeatureCardTen
textboxLayout="split"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
title: "Precision Cuts",
description: "Tailored haircuts executed with artistic precision and expert technique.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-with-razor-blade_23-2148256871.jpg",
},
items: [
{
icon: Scissors,
text: "Classic & Modern Fades",
},
{
icon: Sparkles,
text: "Detailed Scissor Work",
},
{
icon: Award,
text: "Master-level Grooming",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg?_wi=2",
imageAlt: "barber fade haircut detail",
title: "Precision Cuts", description: "Tailored haircuts executed with artistic precision and expert technique.", media: { imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-with-razor-blade_23-2148256871.jpg" },
items: [{ icon: Scissors, text: "Classic & Modern Fades" }, { icon: Sparkles, text: "Detailed Scissor Work" }, { icon: Award, text: "Master-level Grooming" }],
reverse: false
},
{
title: "Signature Shaves",
description: "The ultimate luxury treatment for your skin and facial hair.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg",
},
items: [
{
icon: Sun,
text: "Hot Towel Therapy",
},
{
icon: Droplets,
text: "Premium Shave Oils",
},
{
icon: Shield,
text: "Skincare Focus",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313030.jpg",
imageAlt: "barber fade haircut detail",
title: "Signature Shaves", description: "The ultimate luxury treatment for your skin and facial hair.", media: { imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg" },
items: [{ icon: Sun, text: "Hot Towel Therapy" }, { icon: Droplets, text: "Premium Shave Oils" }, { icon: Shield, text: "Skincare Focus" }],
reverse: true
},
{
title: "Artisan Care",
description: "Curated grooming kits designed for longevity and style.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313068.jpg?_wi=1",
},
items: [
{
icon: Package,
text: "Hand-picked Oils",
},
{
icon: Star,
text: "Organic Products",
},
{
icon: ShieldCheck,
text: "Verified Ingredients",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/top-view-scissors-dispenser_23-2148108757.jpg?_wi=1",
imageAlt: "barber fade haircut detail",
title: "Artisan Care", description: "Curated grooming kits designed for longevity and style.", media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313068.jpg" },
items: [{ icon: Package, text: "Hand-picked Oils" }, { icon: Star, text: "Organic Products" }, { icon: ShieldCheck, text: "Verified Ingredients" }],
reverse: false
},
]}
title="Unmatched Grooming Services"
@@ -245,26 +103,10 @@ export default function LandingPage() {
useInvertedBackground={false}
title="A Legacy of Grooming"
metrics={[
{
icon: Users,
label: "Loyal Clients",
value: "15k+",
},
{
icon: Scissors,
label: "Cuts Per Month",
value: "2.4k",
},
{
icon: Star,
label: "Client Rating",
value: "4.9/5",
},
{
icon: Award,
label: "Years Active",
value: "12",
},
{ icon: Users, label: "Loyal Clients", value: "15k+" },
{ icon: Scissors, label: "Cuts Per Month", value: "2.4k" },
{ icon: Star, label: "Client Rating", value: "4.9/5" },
{ icon: Award, label: "Years Active", value: "12" },
]}
metricsAnimation="slide-up"
/>
@@ -277,42 +119,9 @@ export default function LandingPage() {
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Signature Pomade",
price: "$28",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313068.jpg?_wi=2",
},
{
id: "p2",
name: "Beard Oil Gold",
price: "$34",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-scissors-dispenser_23-2148108757.jpg?_wi=2",
},
{
id: "p3",
name: "Artisan Shave Cream",
price: "$22",
imageSrc: "http://img.b2bpic.net/free-photo/poodle-scenes-vanity-setting_23-2151987174.jpg",
},
{
id: "p4",
name: "Pro Master Shears",
price: "$125",
imageSrc: "http://img.b2bpic.net/free-photo/scissors-combs-hair-cut-treatment-lie-white-table_8353-7045.jpg",
},
{
id: "p5",
name: "Premium Barber Cape",
price: "$45",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-hairdresser-standing-barber-shop_23-2147839774.jpg",
},
{
id: "p6",
name: "Leather Tool Bag",
price: "$89",
imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-beauty-products_23-2148201385.jpg",
},
{ id: "p1", name: "Signature Pomade", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313068.jpg" },
{ id: "p2", name: "Beard Oil Gold", price: "$34", imageSrc: "http://img.b2bpic.net/free-photo/top-view-scissors-dispenser_23-2148108757.jpg" },
{ id: "p3", name: "Artisan Shave Cream", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/poodle-scenes-vanity-setting_23-2151987174.jpg" },
]}
title="Premium Shop Retail"
description="Take the MasterCuts experience home with our signature range of artisan grooming essentials."
@@ -322,62 +131,12 @@ export default function LandingPage() {
<div id="pricing" data-section="pricing">
<PricingCardEight
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
plans={[
{
id: "basic",
badge: "Essential",
price: "$45",
subtitle: "Precision Haircut",
buttons: [
{
text: "Book Service",
href: "#contact",
},
],
features: [
"Consultation",
"Precision Cut",
"Style Finish",
],
},
{
id: "pro",
badge: "Popular",
price: "$75",
subtitle: "Haircut + Hot Shave",
buttons: [
{
text: "Book Service",
href: "#contact",
},
],
features: [
"Precision Cut",
"Hot Towel Shave",
"Skincare Treatment",
"Neck Shave",
],
},
{
id: "elite",
badge: "Elite",
price: "$120",
subtitle: "Complete Transformation",
buttons: [
{
text: "Book Service",
href: "#contact",
},
],
features: [
"Full Haircut",
"Full Shave",
"Beard Sculpting",
"Scalp Massage",
"Retail Discount",
],
},
{ id: "basic", badge: "Essential", price: "$45", subtitle: "Precision Haircut", buttons: [{ text: "Book Service", href: "#contact" }], features: ["Consultation", "Precision Cut", "Style Finish"] },
{ id: "pro", badge: "Popular", price: "$75", subtitle: "Haircut + Hot Shave", buttons: [{ text: "Book Service", href: "#contact" }], features: ["Precision Cut", "Hot Towel Shave", "Skincare Treatment", "Neck Shave"] },
{ id: "elite", badge: "Elite", price: "$120", subtitle: "Complete Transformation", buttons: [{ text: "Book Service", href: "#contact" }], features: ["Full Haircut", "Full Shave", "Beard Sculpting", "Scalp Massage", "Retail Discount"] },
]}
title="Transparent Grooming Rates"
description="Select the service that fits your needs. Membership plans available for recurring clients."
@@ -391,30 +150,10 @@ export default function LandingPage() {
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
members={[
{
id: "m1",
name: "Alex Riviera",
role: "Master Barber",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hairstylist-looking-camera_23-2147839834.jpg",
},
{
id: "m2",
name: "Jordan Lee",
role: "Lead Stylist",
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-female-barber-wearing-uniform-glasses-headband-holding-hair-trimmer-making-brainstorming-gesture-with-closed-eyes-isolated-red-background_141793-137176.jpg",
},
{
id: "m3",
name: "Sam Thorne",
role: "Fade Specialist",
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg",
},
{
id: "m4",
name: "Elena Vance",
role: "Senior Consultant",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg",
},
{ id: "m1", name: "Alex Riviera", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hairstylist-looking-camera_23-2147839834.jpg" },
{ id: "m2", name: "Jordan Lee", role: "Lead Stylist", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-female-barber-wearing-uniform-glasses-headband-holding-hair-trimmer-making-brainstorming-gesture-with-closed-eyes-isolated-red-background_141793-137176.jpg" },
{ id: "m3", name: "Sam Thorne", role: "Fade Specialist", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg" },
{ id: "m4", name: "Elena Vance", role: "Senior Consultant", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg" },
]}
title="Meet The Artists"
description="Our barbers are masters of their craft, dedicated to precision and artistic grooming excellence."
@@ -426,46 +165,11 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
title: "Top-tier service",
quote: "The atmosphere here is truly premium. I'm a client for life.",
name: "James Anderson",
role: "CEO",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-tattooed-hipster-male-wearing-top-hat-grey-vignette-background_613910-8462.jpg?_wi=2",
},
{
id: "t2",
title: "Chic transformation",
quote: "I love the short haircut style they created. Feels very professional.",
name: "Sophia Miller",
role: "Architect",
imageSrc: "http://img.b2bpic.net/free-photo/glamour-closeup-portrait-beautiful-sexy-caucasian-young-blond-woman-model-with-bright-makeup_158538-7839.jpg?_wi=2",
},
{
id: "t3",
title: "Best fade ever",
quote: "Honestly, the attention to detail is second to none.",
name: "Marcus Chen",
role: "Tech Founder",
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-dryer-beard-man_23-2147737033.jpg?_wi=2",
},
{
id: "t4",
title: "Great conversation",
quote: "Always a welcoming vibe, and the cut is always consistent.",
name: "David Thorne",
role: "Consultant",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-1267.jpg?_wi=2",
},
{
id: "t5",
title: "Love the trend",
quote: "Creative, modern, and perfectly suited for my personality.",
name: "Chloe Vance",
role: "Marketing Director",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-red-lips-unusual-hair-style-with-shadow-eyes-black-background_158538-3863.jpg?_wi=2",
},
{ id: "t1", title: "Top-tier service", quote: "The atmosphere here is truly premium. I'm a client for life.", name: "James Anderson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-tattooed-hipster-male-wearing-top-hat-grey-vignette-background_613910-8462.jpg" },
{ id: "t2", title: "Chic transformation", quote: "I love the short haircut style they created. Feels very professional.", name: "Sophia Miller", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/glamour-closeup-portrait-beautiful-sexy-caucasian-young-blond-woman-model-with-bright-makeup_158538-7839.jpg" },
{ id: "t3", title: "Best fade ever", quote: "Honestly, the attention to detail is second to none.", name: "Marcus Chen", role: "Tech Founder", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-dryer-beard-man_23-2147737033.jpg" },
{ id: "t4", title: "Great conversation", quote: "Always a welcoming vibe, and the cut is always consistent.", name: "David Thorne", role: "Consultant", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-1267.jpg" },
{ id: "t5", title: "Love the trend", quote: "Creative, modern, and perfectly suited for my personality.", name: "Chloe Vance", role: "Marketing Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-red-lips-unusual-hair-style-with-shadow-eyes-black-background_158538-3863.jpg" },
]}
title="Client Stories"
description="See why our clients trust MasterCuts with their personal brand and style."
@@ -475,9 +179,7 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
tag="Booking Now"
title="Book Your Transformation"
description="Ready to elevate your look? Reserve your chair now and join the MasterCuts community."
@@ -491,53 +193,13 @@ export default function LandingPage() {
<FooterBaseCard
logoText="MasterCuts"
columns={[
{
title: "Navigation",
items: [
{
label: "Services",
href: "#features",
},
{
label: "Pricing",
href: "#pricing",
},
{
label: "Team",
href: "#team",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
{ title: "Navigation", items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Team", href: "#team" }] },
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}