Compare commits
28 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 92334040a9 | |||
| ad0277dbf8 | |||
| ec9e18eccc | |||
| a681d693d4 | |||
| 053fc50d4a | |||
| c4261f5d31 | |||
| 07003c7f54 | |||
| c8b09b1797 | |||
| 8b09da0ea4 | |||
| 6849fc26a0 | |||
| b51a6a9afd | |||
| 3628b5cae6 | |||
| 45ada81a58 | |||
| c4d18e17cc | |||
| 5038fe9b8c | |||
| d356f2ab93 | |||
| 41765372f8 | |||
| 8424fa0413 | |||
| 3effb6f5c5 | |||
| c2f5b4e2a7 | |||
| fd8cdcb211 | |||
| 57706d1c51 | |||
| 01b8aab219 | |||
| c66c92dc1b | |||
| 9c7fc5fa1d | |||
| 6e7cb8d1bd | |||
| 5d0a3883b4 | |||
| 29a43830d8 |
328
src/app/page.tsx
328
src/app/page.tsx
@@ -31,22 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Servicios", id: "pricing" },
|
||||
{ name: "Sobre Nosotros", id: "about" },
|
||||
{ name: "Equipo", id: "team" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="BOOM BARBER"
|
||||
/>
|
||||
@@ -54,83 +42,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Precision Cuts for the Modern Man"
|
||||
description="Experience superior grooming at Boom Barber. Where timeless tradition meets contemporary style."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
|
||||
imageAlt="Professional barber shop interior"
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Cortes de Precisión para el Hombre"
|
||||
description="Donde comprendemos al hombre actual para crear un estilo que refleje su personalidad. "
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778052682577-6ufm0ryu.jpg"
|
||||
imageAlt="Interior de barbería profesional"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-african-american-man-getting-haircut-while-sitting-wooden-boxes-studio-old-fashioned-professional-tattooed-hairdresser-does-haircut_613910-19503.jpg",
|
||||
alt: "Handsome barber",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151501010.jpg",
|
||||
alt: "Modern chair",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6236.jpg",
|
||||
alt: "Barber tools",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6388.jpg",
|
||||
alt: "Bearded man",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462516.jpg",
|
||||
alt: "Happy client",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/sewing-scissors_23-2148145921.jpg",
|
||||
alt: "Scissors",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Style",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/tools-from-barbershop-wooden-background_1303-10376.jpg",
|
||||
alt: "Tools",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Excellence",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Mastering the Art of Grooming"
|
||||
description="With over a decade of experience, Boom Barber is dedicated to delivering high-quality haircuts, beard trims, and hot towel shaves that define excellence."
|
||||
title="Sobre nosotros "
|
||||
description="Somos una barbería independiente ubicada en el corazón de Sant Joan Despí, en la calle Baltasar de España 26, local 4. Un punto de encuentro para quienes buscan un buen corte, un arreglado de barba o simplemente desconectar un rato con buen ambiente. Ofrecemos cortes clásicos, modernos y personalizados, siempre con productos de calidad y atención al detalle."
|
||||
metrics={[
|
||||
{
|
||||
value: "10+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "4.9",
|
||||
title: "Average Rating",
|
||||
},
|
||||
{ value: "10+", title: "Años de Experiencia" },
|
||||
{ value: "3k+", title: "Clientes Felices" },
|
||||
{ value: "4.9", title: "Calificación Promedio" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bearded-male-sitting-armchair-barber-shop-while-hairdresser-modeling-beard-with-scissors-comb-barbershop_613910-18515.jpg"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778136064521-k8amn9l7.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -142,33 +73,19 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Precision Cuts",
|
||||
descriptions: [
|
||||
"Expert styling tailored to your face shape.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tools-from-barbershop-wooden-background_1303-10375.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Beard Grooming",
|
||||
descriptions: [
|
||||
"Sharpen your look with a premium trim and shape.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5409.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Hot Towel Shave",
|
||||
descriptions: [
|
||||
"A classic, relaxing shave for ultimate smoothness.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-smiling-woman-white-clothes-relaxing-round-soft-arm-chair-with-beagle-dog_197531-4834.jpg",
|
||||
},
|
||||
{ id: "f1", title: "Cortes de Precisión", descriptions: ["Estilo experto adaptado a la forma de tu rostro."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=1" },
|
||||
{ id: "f2", title: "Cuidado de Barba", descriptions: ["Afina tu estilo con un corte y perfilado premium."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=2" },
|
||||
{ id: "f3", title: "Afeitado de Toalla Caliente", descriptions: ["Un afeitado clásico y relajante para una suavidad máxima."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=3" },
|
||||
{ id: "f4", title: "Tratamiento Capilar", descriptions: ["Nutrición profunda para tu cabello."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=4" },
|
||||
{ id: "f5", title: "Masaje Capilar", descriptions: ["Relajación total para el cuero cabelludo."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=5" },
|
||||
{ id: "f6", title: "Perfilado de Cejas", descriptions: ["Define tu mirada con estilo."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=6" },
|
||||
{ id: "f7", title: "Coloración Profesional", descriptions: ["Oculta canas o cambia tu tono con naturalidad."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=7" },
|
||||
{ id: "f8", title: "Limpieza Facial", descriptions: ["Elimina impurezas y revitaliza tu rostro."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=8" },
|
||||
{ id: "f9", title: "Corte de Niños", descriptions: ["Estilos actuales para los más pequeños."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=9" },
|
||||
{ id: "f10", title: "Asesoría de Imagen", descriptions: ["Encuentra el estilo que mejor te sienta."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778137145818-meafm0n3.png?_wi=10" }
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="From classic cuts to specialized grooming, we cater to all styles with precision."
|
||||
title="Nuestros Servicios"
|
||||
description="Desde cortes clásicos hasta cuidado especializado, dominamos todos los estilos."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -178,84 +95,25 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Essential",
|
||||
price: "$35",
|
||||
subtitle: "Perfect for maintenance",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Neck trim",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Signature",
|
||||
price: "$55",
|
||||
subtitle: "Our most popular",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Beard trim",
|
||||
"Hot towel",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Ultimate",
|
||||
price: "$75",
|
||||
subtitle: "Full grooming experience",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Shave",
|
||||
"Scalp treatment",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "p1", badge: "Esencial", price: "$35", subtitle: "Perfecto para mantenimiento", features: ["Corte de cabello", "Perfilado de cuello"], buttons: [{ text: "Reservar", href: "#contact" }] },
|
||||
{ id: "p2", badge: "Firma", price: "$55", subtitle: "Nuestro favorito", features: ["Corte de cabello", "Cuidado de barba", "Toalla caliente"], buttons: [{ text: "Reservar", href: "#contact" }] },
|
||||
{ id: "p3", badge: "Ultimate", price: "$75", subtitle: "Experiencia completa", features: ["Corte de cabello", "Afeitado", "Tratamiento de cuero cabelludo"], buttons: [{ text: "Reservar", href: "#contact" }] },
|
||||
]}
|
||||
title="Pricing Options"
|
||||
description="Choose the perfect grooming service for your lifestyle."
|
||||
title="Precios"
|
||||
description="Elige el servicio de cuidado perfecto para tu estilo de vida."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={false}
|
||||
title="Meet Your Barbers"
|
||||
tag="Skilled professionals"
|
||||
title="Conoce a Nuestros Barberos"
|
||||
tag="Profesionales calificados"
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John Doe",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike Smith",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-portrait-close-up_1321-1448.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Alex Johnson",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-177.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Willy ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778062923097-vn5kwu1f.png" },
|
||||
{ id: "t2", name: "Jhan ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DIKfFXjDHzndC9PfRvTIBIREhF/uploaded-1778062934274-vpcebf0w.png" },
|
||||
{ id: "t3", name: "Alex Johnson", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-177.jpg" },
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
@@ -268,49 +126,11 @@ export default function LandingPage() {
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice M.",
|
||||
role: "Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob T.",
|
||||
role: "Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11782.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Charlie D.",
|
||||
role: "Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David L.",
|
||||
role: "Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-male-with-tattoo-his-face-dressed-jacket-grey-background_613910-1474.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eve S.",
|
||||
role: "Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-man-s-hair-barber-shop_23-2148353447.jpg",
|
||||
},
|
||||
{ id: "1", name: "Alice M.", role: "Cliente", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
{ id: "2", name: "Bob T.", role: "Cliente", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11782.jpg" },
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Honest feedback from our regulars."
|
||||
title="Lo que Dicen Nuestros Clientes"
|
||||
description="Opiniones honestas de quienes nos visitan regularmente."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -319,78 +139,32 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking in advance.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How long is a standard cut?",
|
||||
content: "Most sessions take about 30-45 minutes.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you take walk-ins?",
|
||||
content: "We do, but availability isn't guaranteed.",
|
||||
},
|
||||
{ id: "q1", title: "¿Necesito cita?", content: "Sí, recomendamos agendar con anticipación." },
|
||||
{ id: "q2", title: "¿Cuánto dura un corte?", content: "La mayoría de las sesiones duran entre 30 y 45 minutos." },
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about our shop."
|
||||
title="Preguntas Frecuentes"
|
||||
description="Dudas comunes sobre nuestra barbería."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready for your next cut? Book your spot today and stay sharp."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "tel:5550123456",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="¿Listo para tu próximo corte? Reserva tu lugar hoy y mantente impecable."
|
||||
buttons={[{ text: "Contáctanos", href: "tel:5550123456" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navegación", items: [{ label: "Servicios", href: "#pricing" }, { label: "Sobre nosotros", href: "#about" }] },
|
||||
{ title: "Soporte", items: [{ label: "Contacto", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
|
||||
]}
|
||||
logoText="BOOM BARBER"
|
||||
copyrightText="© 2025 BOOM BARBER. All rights reserved."
|
||||
copyrightText="© 2025 BOOM BARBER. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user