Merge version_2 into main #1
316
src/app/page.tsx
316
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,81 +42,24 @@ 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."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Cortes de Precisión para el Hombre Moderno"
|
||||
description="Vive una experiencia superior de cuidado en Boom Barber. Donde la tradición se encuentra con el estilo contemporáneo."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
|
||||
imageAlt="Professional barber shop interior"
|
||||
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="Dominando el Arte del Cuidado"
|
||||
description="Con más de una década de experiencia, en Boom Barber nos dedicamos a ofrecer cortes, arreglos de barba y afeitados clásicos que definen la excelencia."
|
||||
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: "5k+", 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"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -143,32 +74,17 @@ export default function LandingPage() {
|
||||
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: "f1", title: "Cortes de Precisión", descriptions: ["Estilo experto adaptado a la forma de tu rostro."],
|
||||
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: "f2", title: "Cuidado de Barba", descriptions: ["Afina tu estilo con un corte y perfilado premium."],
|
||||
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: "f3", title: "Afeitado de Toalla Caliente", descriptions: ["Un afeitado clásico y relajante para una suavidad máxima."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-smiling-woman-white-clothes-relaxing-round-soft-arm-chair-with-beagle-dog_197531-4834.jpg"},
|
||||
]}
|
||||
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>
|
||||
|
||||
@@ -179,83 +95,33 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Essential",
|
||||
price: "$35",
|
||||
subtitle: "Perfect for maintenance",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Neck trim",
|
||||
],
|
||||
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: "Signature",
|
||||
price: "$55",
|
||||
subtitle: "Our most popular",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Beard trim",
|
||||
"Hot towel",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
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: "Full grooming experience",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Shave",
|
||||
"Scalp treatment",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
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: "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" },
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
@@ -268,49 +134,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,81 +147,35 @@ 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>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user