Update src/app/page.tsx
This commit is contained in:
289
src/app/page.tsx
289
src/app/page.tsx
@@ -31,25 +31,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Booking",
|
||||
id: "booking",
|
||||
},
|
||||
name: "Booking", id: "booking"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="EL KHAL"
|
||||
/>
|
||||
@@ -58,108 +48,61 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Precision. Style. Confidence."
|
||||
description="Premium Barber Experience in Barcelona. EL KHAL delivers modern barbering with precision, style, and attention to detail."
|
||||
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: "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: "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: "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: "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",
|
||||
},
|
||||
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={[
|
||||
{
|
||||
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"
|
||||
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/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/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/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/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",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-chair_23-2149220561.jpg", alt: "Barber client 5"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "PRECISION",
|
||||
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: "text",
|
||||
text: "LUXURY",
|
||||
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: "STYLE",
|
||||
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: "BARCELONA",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "MODERN",
|
||||
},
|
||||
type: "text", text: "FOLLOW @BARBERIA_EL_KHAL"
|
||||
}
|
||||
]}
|
||||
marqueeSpeed={20}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -170,17 +113,11 @@ export default function LandingPage() {
|
||||
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={[
|
||||
{
|
||||
value: "100%",
|
||||
title: "Precision",
|
||||
},
|
||||
value: "100%", title: "Precision"},
|
||||
{
|
||||
value: "5+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
value: "5+", title: "Years Experience"},
|
||||
{
|
||||
value: "10k+",
|
||||
title: "Haircuts",
|
||||
},
|
||||
value: "10k+", title: "Haircuts"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/rear-view-male-customer-sitting-armchair-barber-shop_23-2147839805.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -195,38 +132,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
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: [
|
||||
"fade", "grooming"],
|
||||
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: "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",
|
||||
},
|
||||
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"
|
||||
description="Premium grooming tailored for the modern man."
|
||||
@@ -241,26 +157,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
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: "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: "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"
|
||||
description="The masters of precision grooming in Barcelona."
|
||||
@@ -275,45 +176,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
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,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-styling-beard-customer_23-2147778885.jpg"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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: "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: "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",
|
||||
},
|
||||
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"
|
||||
description="Authentic experiences from our Barcelona community."
|
||||
@@ -324,16 +200,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Booking"
|
||||
title="Secure Your Session"
|
||||
description="Get in touch via WhatsApp to book your appointment in Barcelona today."
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp Us",
|
||||
href: "https://wa.me/34674508699",
|
||||
},
|
||||
text: "WhatsApp Us", href: "https://wa.me/34674508699"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -344,20 +217,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
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: "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: "q3", title: "Are walk-ins welcome?", content: "We prefer bookings but check for availability via WhatsApp."},
|
||||
]}
|
||||
title="Location & Details"
|
||||
description="Find us in the heart of Barcelona."
|
||||
@@ -372,42 +236,27 @@ export default function LandingPage() {
|
||||
logoText="EL KHAL"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Booking",
|
||||
href: "#booking",
|
||||
},
|
||||
label: "Booking", href: "#booking"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://www.instagram.com/barberia_el_khal",
|
||||
},
|
||||
label: "Instagram", href: "https://www.instagram.com/barberia_el_khal"},
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "https://wa.me/34674508699",
|
||||
},
|
||||
label: "WhatsApp", href: "https://wa.me/34674508699"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -417,4 +266,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user