bender/1671e4c2-057d-45e5-b387-da2a9225a09a
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-09 23:12:54 +00:00
parent 1b3a4f99d1
commit ac0dcf78e8
1 changed files with 37 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/app/page.tsx
View File

@@ -30,16 +30,11 @@ 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", id: "hero"}, { name: "About", id: "about" },
{ { name: "Services", id: "services" },
name: "About", id: "about"}, { name: "Booking", id: "booking" },
{ { name: "Contact", id: "contact" },
name: "Services", id: "services"},
{
name: "Booking", id: "booking"},
{
name: "Contact", id: "contact"},
]} ]}
brandName="EL KHAL" brandName="EL KHAL"
/> />
@@ -47,60 +42,22 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroSplitTestimonial <HeroSplitTestimonial
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars"}}
title="Precision. Style. Confidence." title="Precision. Style. Confidence."
description="Premium Barber Experience in Barcelona. EL KHAL delivers modern barbering with precision, style, and attention to detail." description="Premium Barber Experience in Barcelona. EL KHAL delivers modern barbering with precision, style, and attention to detail."
testimonials={[ testimonials={[]}
{
name: "Marc L.", handle: "@marc_bcn", testimonial: "Best fade I've had in Barcelona. Truly professional.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/black-man-with-beard-looking-away_23-2148203662.jpg?_wi=1", imageAlt: "cinematic barber shop"},
{
name: "Alex D.", handle: "@alex_d", testimonial: "The attention to detail here is unmatched. Luxury vibes.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/rear-view-male-customer-sitting-armchair-barber-shop_23-2147839805.jpg?_wi=1", imageAlt: "cinematic barber shop"},
{
name: "Jordi V.", handle: "@jordi_v", testimonial: "Top tier grooming. Highly recommend for a sharp look.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-21678.jpg?_wi=1", imageAlt: "cinematic barber shop"},
{
name: "Luca S.", handle: "@luca_s", testimonial: "The atmosphere is incredible. Proper barber culture.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg?_wi=1", imageAlt: "cinematic barber shop"},
{
name: "Sam R.", handle: "@sam_r", testimonial: "Precision work. Won't go anywhere else now.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/barber-using-scissors-make-hairstyle_23-2148298276.jpg?_wi=1", imageAlt: "cinematic barber shop"},
]}
buttons={[ buttons={[
{ { text: "Book Appointment", href: "#booking" },
text: "Book Appointment", href: "#booking"}, { text: "View Instagram", href: "https://www.instagram.com/barberia_el_khal" },
{
text: "View Instagram", href: "https://www.instagram.com/barberia_el_khal"},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/black-man-with-beard-looking-away_23-2148203662.jpg?_wi=2" imageSrc="http://img.b2bpic.net/free-photo/black-man-with-beard-looking-away_23-2148203662.jpg?_wi=2"
mediaAnimation="blur-reveal" mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelman-dressed-jacket-jeans-fashion-male-posing-near-blue-wall-studio_158538-23689.jpg", alt: "Barber client 1"},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-man_23-2148323636.jpg", alt: "Barber client 2"},
{
src: "http://img.b2bpic.net/free-photo/lateral-view-man-with-vintage-haircut_23-2148328597.jpg", alt: "Barber client 3"},
{
src: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11879.jpg", alt: "Barber client 4"},
{
src: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-chair_23-2149220561.jpg", alt: "Barber client 5"},
]}
marqueeItems={[ marqueeItems={[
{ { type: "image", src: "https://images.unsplash.com/photo-1599351431202-180f0b485fc8?auto=format&fit=crop&w=600&q=80", alt: "Barberia El Khal Instagram Photo 1" },
type: "image", src: "http://img.b2bpic.net/free-photo/black-man-with-beard-looking-away_23-2148203662.jpg?_wi=1", alt: "Instagram feed 1" { type: "image", src: "https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=600&q=80", alt: "Barberia El Khal Instagram Photo 2" },
}, { type: "image", src: "https://images.unsplash.com/photo-1503951336052-16e507b94158?auto=format&fit=crop&w=600&q=80", alt: "Barberia El Khal Instagram Photo 3" },
{ { type: "image", src: "https://images.unsplash.com/photo-1512646608595-07616641214c?auto=format&fit=crop&w=600&q=80", alt: "Barberia El Khal Instagram Photo 4" },
type: "image", src: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-21678.jpg?_wi=1", alt: "Instagram feed 2" { type: "text", text: "FOLLOW @BARBERIA_EL_KHAL" }
},
{
type: "image", src: "http://img.b2bpic.net/free-photo/barber-using-scissors-make-hairstyle_23-2148298276.jpg?_wi=1", alt: "Instagram feed 3"
},
{
type: "text", text: "FOLLOW @BARBERIA_EL_KHAL"
}
]} ]}
marqueeSpeed={20} marqueeSpeed={20}
/> />
@@ -112,12 +69,9 @@ export default function LandingPage() {
title="Modern Barber Culture" title="Modern Barber Culture"
description="EL KHAL combines luxury grooming with Barcelona's urban pulse. Our studio is built for those who value refined details and absolute confidence." description="EL KHAL combines luxury grooming with Barcelona's urban pulse. Our studio is built for those who value refined details and absolute confidence."
metrics={[ metrics={[
{ { value: "100%", title: "Precision" },
value: "100%", title: "Precision"}, { value: "5+", title: "Years Experience" },
{ { value: "10k+", title: "Haircuts" },
value: "5+", title: "Years Experience"},
{
value: "10k+", title: "Haircuts"},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/rear-view-male-customer-sitting-armchair-barber-shop_23-2147839805.jpg?_wi=2" imageSrc="http://img.b2bpic.net/free-photo/rear-view-male-customer-sitting-armchair-barber-shop_23-2147839805.jpg?_wi=2"
mediaAnimation="slide-up" mediaAnimation="slide-up"
@@ -131,18 +85,9 @@ export default function LandingPage() {
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ { id: "f1", title: "Skin Fade", author: "Precision", description: "Clean, crisp fades with military-grade precision.", tags: ["fade", "grooming"], imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-21678.jpg?_wi=2" },
id: "f1", title: "Skin Fade", author: "Precision", description: "Clean, crisp fades with military-grade precision.", tags: [ { id: "f2", title: "Razor Shave", author: "Classic", description: "The traditional premium shaving experience redefined.", tags: ["shave", "luxury"], imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg?_wi=2" },
"fade", "grooming"], { id: "f3", title: "Hair Styling", author: "Professional", description: "Tailored finishing touches for your personal style.", tags: ["styling", "modern"], imageSrc: "http://img.b2bpic.net/free-photo/barber-using-scissors-make-hairstyle_23-2148298276.jpg?_wi=2" },
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-21678.jpg?_wi=2"},
{
id: "f2", title: "Razor Shave", author: "Classic", description: "The traditional premium shaving experience redefined.", tags: [
"shave", "luxury"],
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg?_wi=2"},
{
id: "f3", title: "Hair Styling", author: "Professional", description: "Tailored finishing touches for your personal style.", tags: [
"styling", "modern"],
imageSrc: "http://img.b2bpic.net/free-photo/barber-using-scissors-make-hairstyle_23-2148298276.jpg?_wi=2"},
]} ]}
title="Our Signature Services" title="Our Signature Services"
description="Premium grooming tailored for the modern man." description="Premium grooming tailored for the modern man."
@@ -156,12 +101,9 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
useInvertedBackground={true} useInvertedBackground={true}
members={[ members={[
{ { id: "m1", name: "Khalid", role: "Master Barber", description: "Expert in modern fades and beard shaping.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-drinks-coffee-barbershop_613910-14697.jpg" },
id: "m1", name: "Khalid", role: "Master Barber", description: "Expert in modern fades and beard shaping.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-drinks-coffee-barbershop_613910-14697.jpg"}, { id: "m2", name: "Alex", role: "Senior Stylist", description: "Specialist in razor fades and classic cuts.", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-trimmed-with-trimmer_107420-94786.jpg" },
{ { id: "m3", name: "Javi", role: "Barber", description: "Attention to detail for the modern man.", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg" },
id: "m2", name: "Alex", role: "Senior Stylist", description: "Specialist in razor fades and classic cuts.", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-trimmed-with-trimmer_107420-94786.jpg"},
{
id: "m3", name: "Javi", role: "Barber", description: "Attention to detail for the modern man.", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg"},
]} ]}
title="Meet the Artists" title="Meet the Artists"
description="The masters of precision grooming in Barcelona." description="The masters of precision grooming in Barcelona."
@@ -175,21 +117,11 @@ export default function LandingPage() {
gridVariant="bento-grid" gridVariant="bento-grid"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ { id: "t1", name: "Marc", role: "Regular", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-styling-beard-customer_23-2147778885.jpg" },
id: "t1", name: "Marc", role: "Regular", company: "Client", rating: 5, { id: "t2", name: "Alex", role: "Regular", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4219.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-styling-beard-customer_23-2147778885.jpg"}, { id: "t3", name: "Jordi", role: "Regular", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-suit-sunglasses_613910-11932.jpg" },
{ { id: "t4", name: "Luca", role: "Regular", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11927.jpg" },
id: "t2", name: "Alex", role: "Regular", company: "Client", rating: 5, { id: "t5", name: "Sam", role: "Regular", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313037.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4219.jpg"},
{
id: "t3", name: "Jordi", role: "Regular", company: "Client", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-suit-sunglasses_613910-11932.jpg"},
{
id: "t4", name: "Luca", role: "Regular", company: "Client", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11927.jpg"},
{
id: "t5", name: "Sam", role: "Regular", company: "Client", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313037.jpg"},
]} ]}
title="What Clients Say" title="What Clients Say"
description="Authentic experiences from our Barcelona community." description="Authentic experiences from our Barcelona community."
@@ -199,14 +131,12 @@ export default function LandingPage() {
<div id="booking" data-section="booking"> <div id="booking" data-section="booking">
<ContactCTA <ContactCTA
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{ variant: "sparkles-gradient" }}
variant: "sparkles-gradient"}}
tag="Booking" tag="Booking"
title="Secure Your Session" title="Secure Your Session"
description="Get in touch via WhatsApp to book your appointment in Barcelona today." description="Get in touch via WhatsApp to book your appointment in Barcelona today."
buttons={[ buttons={[
{ { text: "WhatsApp Us", href: "https://wa.me/34674508699" },
text: "WhatsApp Us", href: "https://wa.me/34674508699"},
]} ]}
/> />
</div> </div>
@@ -216,17 +146,14 @@ export default function LandingPage() {
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ { id: "q1", title: "Where are you located?", content: "We are centrally located in the vibrant heart of Barcelona." },
id: "q1", title: "Where are you located?", content: "We are centrally located in the vibrant heart of Barcelona."}, { id: "q2", title: "How can I contact you?", content: "You can reach us at 674508699 or via DM on Instagram." },
{ { id: "q3", title: "Are walk-ins welcome?", content: "We prefer bookings but check for availability via WhatsApp." },
id: "q2", title: "How can I contact you?", content: "You can reach us at 674508699 or via DM on Instagram."},
{
id: "q3", title: "Are walk-ins welcome?", content: "We prefer bookings but check for availability via WhatsApp."},
]} ]}
title="Location & Details" title="Location & Details"
description="Find us in the heart of Barcelona." description="Find us in the heart of Barcelona."
faqsAnimation="blur-reveal" faqsAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-102962.jpg" imageSrc="https://images.unsplash.com/photo-1599351431202-180f0b485fc8?auto=format&fit=crop&w=1200&q=80"
mediaAnimation="blur-reveal" mediaAnimation="blur-reveal"
/> />
</div> </div>
@@ -235,30 +162,9 @@ export default function LandingPage() {
<FooterBaseReveal <FooterBaseReveal
logoText="EL KHAL" logoText="EL KHAL"
columns={[ columns={[
{ { title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Booking", href: "#booking" }] },
title: "Navigation", items: [ { title: "Connect", items: [{ label: "Instagram", href: "https://www.instagram.com/barberia_el_khal" }, { label: "WhatsApp", href: "https://wa.me/34674508699" }] },
{ { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
label: "Home", href: "#hero"},
{
label: "Services", href: "#services"},
{
label: "Booking", href: "#booking"},
],
},
{
title: "Connect", items: [
{
label: "Instagram", href: "https://www.instagram.com/barberia_el_khal"},
{
label: "WhatsApp", href: "https://wa.me/34674508699"},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"},
],
},
]} ]}
copyrightText="© 2024 EL KHAL Barberia Barcelona" copyrightText="© 2024 EL KHAL Barberia Barcelona"
/> />