bender/a2d52e73-9e00-4dd3-b6cf-98eec1124020
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-05 17:32:13 +00:00
parent c863107de8
commit cd6324b461
1 changed files with 50 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
src/app/page.tsx
View File

@@ -12,7 +12,7 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight'; import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix'; import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Repeat, Scissors, Star, User, Users } from "lucide-react"; import { Repeat, Scissors, Star, User, Users, Zap, Shield, Award, Circle } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -32,22 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ { name: "Home", id: "#hero" },
name: "Home", { name: "Services", id: "#pricing" },
id: "#hero", { name: "Team", id: "#about" },
}, { name: "Contact", id: "#contact" },
{
name: "Services",
id: "#pricing",
},
{
name: "Team",
id: "#about",
},
{
name: "Contact",
id: "#contact",
},
]} ]}
brandName="Joels Barbershop" brandName="Joels Barbershop"
/> />
@@ -55,106 +43,33 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroSplitDoubleCarousel <HeroSplitDoubleCarousel
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars",
}}
title="Precision Cuts. Real Barbers. Every Time." title="Precision Cuts. Real Barbers. Every Time."
description="Trusted by locals across Stockholm—where skill meets atmosphere and every client feels like a regular." description="Trusted by locals across Stockholm—where skill meets atmosphere and every client feels like a regular."
leftCarouselItems={[ leftCarouselItems={[
{ { imageSrc: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg", imageAlt: "Professional haircut in progress" },
imageSrc: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg", { imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6207.jpg", imageAlt: "Close up of fade technique" },
imageAlt: "Professional haircut in progress", { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2149141784.jpg", imageAlt: "Satisfied client" },
}, { imageSrc: "http://img.b2bpic.net/free-photo/barbecue-utensil-set-wooden-table_23-2148206901.jpg", imageAlt: "Barber tools detail" },
{ { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2150665413.jpg", imageAlt: "Modern barbershop interior" },
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6207.jpg",
imageAlt: "Close up of fade technique",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2149141784.jpg",
imageAlt: "Satisfied client",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/barbecue-utensil-set-wooden-table_23-2148206901.jpg",
imageAlt: "Barber tools detail",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2150665413.jpg",
imageAlt: "Modern barbershop interior",
},
]} ]}
rightCarouselItems={[ rightCarouselItems={[
{ { imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506206.jpg", imageAlt: "Precise blade work" },
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506206.jpg", { imageSrc: "http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg", imageAlt: "Detailing hair edges" },
imageAlt: "Precise blade work", { imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg", imageAlt: "Friendly barber conversation" },
}, { imageSrc: "http://img.b2bpic.net/free-photo/hair-supplies-paper-bag_23-2148352906.jpg", imageAlt: "Quality grooming tools" },
{ { imageSrc: "http://img.b2bpic.net/free-photo/comfortable-black-white-home-interior-design-generated-by-ai_188544-29099.jpg", imageAlt: "Warm shop lighting" },
imageSrc: "http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg",
imageAlt: "Detailing hair edges",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg",
imageAlt: "Friendly barber conversation",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hair-supplies-paper-bag_23-2148352906.jpg",
imageAlt: "Quality grooming tools",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/comfortable-black-white-home-interior-design-generated-by-ai_188544-29099.jpg",
imageAlt: "Warm shop lighting",
},
]}
buttons={[
{
text: "Book Your Appointment",
href: "#contact",
},
]} ]}
buttons={[{ text: "Book Your Appointment", href: "#contact" }]}
avatars={[ avatars={[
{ { src: "http://img.b2bpic.net/free-photo/portrait-two-male-barbers-looking-camera_23-2147839857.jpg", alt: "Barber 1" },
src: "http://img.b2bpic.net/free-photo/portrait-two-male-barbers-looking-camera_23-2147839857.jpg", { src: "http://img.b2bpic.net/free-photo/portrait-male-hairstylist-barber-shop_23-2147839825.jpg", alt: "Barber 2" },
alt: "Barber 1", { src: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186518.jpg", alt: "Barber 3" },
}, { src: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-taking-care-client_23-2150286038.jpg", alt: "Barber 4" },
{ { src: "http://img.b2bpic.net/free-photo/male-hairdresser-working-with-hair-elderly-client_23-2148181885.jpg", alt: "Barber 5" },
src: "http://img.b2bpic.net/free-photo/portrait-male-hairstylist-barber-shop_23-2147839825.jpg",
alt: "Barber 2",
},
{
src: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186518.jpg",
alt: "Barber 3",
},
{
src: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-taking-care-client_23-2150286038.jpg",
alt: "Barber 4",
},
{
src: "http://img.b2bpic.net/free-photo/male-hairdresser-working-with-hair-elderly-client_23-2148181885.jpg",
alt: "Barber 5",
},
]} ]}
avatarText="Trusted by 2,500+ happy Stockholmers" avatarText="Trusted by 2,500+ happy Stockholmers"
marqueeItems={[ marqueeItems={[{ type: "text", text: "Precision" }, { type: "text", text: "Heritage" }, { type: "text", text: "Quality" }, { type: "text", text: "Style" }, { type: "text", text: "Trust" }]}
{
type: "text",
text: "Precision",
},
{
type: "text",
text: "Heritage",
},
{
type: "text",
text: "Quality",
},
{
type: "text",
text: "Style",
},
{
type: "text",
text: "Trust",
},
]}
/> />
</div> </div>
@@ -163,21 +78,9 @@ export default function LandingPage() {
useInvertedBackground={true} useInvertedBackground={true}
title="The Joels Difference" title="The Joels Difference"
metrics={[ metrics={[
{ { icon: Scissors, label: "Years Experience", value: "15+" },
icon: Scissors, { icon: Users, label: "Happy Locals", value: "2.5K+" },
label: "Years Experience", { icon: Star, label: "Review Rating", value: "4.9" },
value: "15+",
},
{
icon: Users,
label: "Happy Locals",
value: "2.5K+",
},
{
icon: Star,
label: "Review Rating",
value: "4.9",
},
]} ]}
metricsAnimation="slide-up" metricsAnimation="slide-up"
/> />
@@ -188,30 +91,10 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ { title: "Precision Fades", description: "Expert attention to detail for the sharpest look in Stockholm.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11902.jpg", buttonIcon: Zap },
title: "Precision Fades", { title: "Top-Tier Hygiene", description: "Strict cleaning protocols ensuring your comfort and safety.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hair-curlers-scissors_23-2148352959.jpg", buttonIcon: Shield },
description: "Expert attention to detail for the sharpest look in Stockholm.", { title: "Warm Atmosphere", description: "A shop where we know your name and your preferences.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg", buttonIcon: Users },
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11902.jpg", { title: "Expert Craftsmanship", description: "Master barbers dedicated to the art of grooming.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-preparing-equipment-work-barber-shop_23-2148182010.jpg", buttonIcon: Award },
buttonIcon: "Zap",
},
{
title: "Top-Tier Hygiene",
description: "Strict cleaning protocols ensuring your comfort and safety.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hair-curlers-scissors_23-2148352959.jpg",
buttonIcon: "Shield",
},
{
title: "Warm Atmosphere",
description: "A shop where we know your name and your preferences.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg",
buttonIcon: "Users",
},
{
title: "Expert Craftsmanship",
description: "Master barbers dedicated to the art of grooming.",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-preparing-equipment-work-barber-shop_23-2148182010.jpg",
buttonIcon: "Award",
},
]} ]}
title="Why Stockholm Chooses Joels" title="Why Stockholm Chooses Joels"
description="We prioritize consistency, hygiene, and a personalized experience for every chair." description="We prioritize consistency, hygiene, and a personalized experience for every chair."
@@ -225,27 +108,9 @@ export default function LandingPage() {
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
useInvertedBackground={true} useInvertedBackground={true}
metrics={[ metrics={[
{ { id: "m1", value: "5,000", title: "Cuts Per Year", description: "Consistent quality across thousands of visits.", icon: Scissors },
id: "m1", { id: "m2", value: "95%", title: "Return Clients", description: "Evidence of trust and consistent delivery.", icon: Repeat },
value: "5,000", { id: "m3", value: "10", title: "Expert Barbers", description: "Our team of masters ready for you.", icon: User },
title: "Cuts Per Year",
description: "Consistent quality across thousands of visits.",
icon: Scissors,
},
{
id: "m2",
value: "95%",
title: "Return Clients",
description: "Evidence of trust and consistent delivery.",
icon: Repeat,
},
{
id: "m3",
value: "10",
title: "Expert Barbers",
description: "Our team of masters ready for you.",
icon: User,
},
]} ]}
title="Our Impact" title="Our Impact"
description="By the numbers: Building loyalty one haircut at a time." description="By the numbers: Building loyalty one haircut at a time."
@@ -254,44 +119,15 @@ export default function LandingPage() {
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSix <TestimonialCardSix
animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ { id: "1", name: "Erik Lindberg", handle: "@erik_sthlm", testimonial: "Best fade I've had in Stockholm, bar none. Ali is a legend.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg" },
id: "1", { id: "2", name: "Maja Holm", handle: "@maja_holm", testimonial: "Took my son here, and the staff was so patient and kind. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-black-polo-shirt-swinging-paint-brush-with-aggressive-expression-standing-white-background_141793-20662.jpg" },
name: "Erik Lindberg", { id: "3", name: "Lars Berg", handle: "@lars_b", testimonial: "Consistency is king. I get the same great result every single visit.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205920.jpg" },
handle: "@erik_sthlm", { id: "4", name: "Sofia Nordin", handle: "@sofia_n", testimonial: "Wonderful atmosphere, professional and clean. Truly the neighborhood standard.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blue-eyed-bearded-hipster-male-with-crossed-arms-grey-background_613910-12834.jpg" },
testimonial: "Best fade I've had in Stockholm, bar none. Ali is a legend.", { id: "5", name: "Johan Ek", handle: "@johan_ek", testimonial: "Found my regular barber for the foreseeable future. Exceptional.", imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479238.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg",
},
{
id: "2",
name: "Maja Holm",
handle: "@maja_holm",
testimonial: "Took my son here, and the staff was so patient and kind. Highly recommend.",
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-black-polo-shirt-swinging-paint-brush-with-aggressive-expression-standing-white-background_141793-20662.jpg",
},
{
id: "3",
name: "Lars Berg",
handle: "@lars_b",
testimonial: "Consistency is king. I get the same great result every single visit.",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205920.jpg",
},
{
id: "4",
name: "Sofia Nordin",
handle: "@sofia_n",
testimonial: "Wonderful atmosphere, professional and clean. Truly the neighborhood standard.",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blue-eyed-bearded-hipster-male-with-crossed-arms-grey-background_613910-12834.jpg",
},
{
id: "5",
name: "Johan Ek",
handle: "@johan_ek",
testimonial: "Found my regular barber for the foreseeable future. Exceptional.",
imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-working-client-tattoo_23-2149479238.jpg",
},
]} ]}
title="Trusted by Locals" title="Trusted by Locals"
description="Don't just take our word for it—hear what your neighbors are saying." description="Don't just take our word for it—hear what your neighbors are saying."
@@ -304,57 +140,9 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
plans={[ plans={[
{ { id: "p1", badge: "Popular", price: "450 kr", subtitle: "Classic Barber Cut", buttons: [{ text: "Book", href: "#contact" }], features: ["Precision cut", "Style consultation", "Finish"] },
id: "p1", { id: "p2", badge: "Premium", price: "600 kr", subtitle: "Cut & Beard Trim", buttons: [{ text: "Book", href: "#contact" }], features: ["Precision cut", "Beard sculpting", "Hot towel service"] },
badge: "Popular", { id: "p3", badge: "Junior", price: "350 kr", subtitle: "Kids Haircut", buttons: [{ text: "Book", href: "#contact" }], features: ["Safe handling", "Quick session", "Professional result"] },
price: "450 kr",
subtitle: "Classic Barber Cut",
buttons: [
{
text: "Book",
href: "#contact",
},
],
features: [
"Precision cut",
"Style consultation",
"Finish",
],
},
{
id: "p2",
badge: "Premium",
price: "600 kr",
subtitle: "Cut & Beard Trim",
buttons: [
{
text: "Book",
href: "#contact",
},
],
features: [
"Precision cut",
"Beard sculpting",
"Hot towel service",
],
},
{
id: "p3",
badge: "Junior",
price: "350 kr",
subtitle: "Kids Haircut",
buttons: [
{
text: "Book",
href: "#contact",
},
],
features: [
"Safe handling",
"Quick session",
"Professional result",
],
},
]} ]}
title="Our Services" title="Our Services"
description="Quality grooming tailored to your needs." description="Quality grooming tailored to your needs."
@@ -366,26 +154,10 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ { id: "f1", title: "Do I need an appointment?", content: "Booking is highly recommended to secure your preferred barber." },
id: "f1", { id: "f2", title: "Do you accept walk-ins?", content: "We do, but space is limited. Booking online is safer." },
title: "Do I need an appointment?", { id: "f3", title: "Is it safe for kids?", content: "Absolutely. Our barbers are trained to handle nervous kids with care." },
content: "Booking is highly recommended to secure your preferred barber.", { id: "f4", title: "Where are you located?", content: "Find us in the heart of Stockholm neighborhood." },
},
{
id: "f2",
title: "Do you accept walk-ins?",
content: "We do, but space is limited. Booking online is safer.",
},
{
id: "f3",
title: "Is it safe for kids?",
content: "Absolutely. Our barbers are trained to handle nervous kids with care.",
},
{
id: "f4",
title: "Where are you located?",
content: "Find us in the heart of Stockholm neighborhood.",
},
]} ]}
title="Common Questions" title="Common Questions"
description="We want you to feel prepared for your visit." description="We want you to feel prepared for your visit."
@@ -396,18 +168,11 @@ export default function LandingPage() {
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCTA <ContactCTA
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{ variant: "sparkles-gradient" }}
variant: "sparkles-gradient",
}}
tag="Visit Us" tag="Visit Us"
title="Ready to Look Sharp?" title="Ready to Look Sharp?"
description="Book your slot now and join the Joels Barbershop family." description="Book your slot now and join the Joels Barbershop family."
buttons={[ buttons={[{ text: "Book Now", href: "#" }]}
{
text: "Book Now",
href: "#",
},
]}
/> />
</div> </div>
@@ -416,32 +181,8 @@ export default function LandingPage() {
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg" imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
logoText="Joels Barbershop" logoText="Joels Barbershop"
columns={[ columns={[
{ { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
title: "Company", { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]} ]}
copyrightText="© 2025 Joels Barbershop Stockholm" copyrightText="© 2025 Joels Barbershop Stockholm"
/> />