Update src/app/page.tsx

This commit is contained in:
2026-06-09 22:25:36 +00:00
parent 032fa3bb39
commit 438b8d3a0e

View File

@@ -34,80 +34,49 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "#hero"},
id: "#hero",
},
{ {
name: "Services", name: "Services", id: "#services"},
id: "#services",
},
{ {
name: "Gallery", name: "Gallery", id: "#gallery"},
id: "#gallery",
},
{ {
name: "Testimonials", name: "Testimonials", id: "#testimonials"},
id: "#testimonials",
},
{ {
name: "Team", name: "Team", id: "#team"},
id: "#team",
},
{ {
name: "FAQ", name: "FAQ", id: "#faq"},
id: "#faq",
},
{ {
name: "Contact", name: "Contact", id: "#contact"},
id: "#contact",
},
]} ]}
brandName="Barbería UNDERGROUND" brandName="Barbería UNDERGROUND"
button={{ button={{
text: "Book Your Cut Now", text: "Book Your Cut Now", href: "#contact"}}
href: "#contact",
}}
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardGallery <HeroBillboardGallery
background={{ background={{
variant: "radial-gradient", variant: "radial-gradient"}}
}}
title="Premium Barbershop Craftsmanship in Rivera" title="Premium Barbershop Craftsmanship in Rivera"
description="Award-rated grooming for every style. From fade cuts to beard conditioning, we deliver precision and expertise you can trust." description="Award-rated grooming for every style. From fade cuts to beard conditioning, we deliver precision and expertise you can trust."
buttons={[ buttons={[
{ {
text: "Book Your Cut Now", text: "Book Your Cut Now", href: "#contact"},
href: "#contact",
},
]} ]}
mediaItems={[ mediaItems={[
{ {
imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg?_wi=1", imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg", imageAlt: "Barber giving a precision haircut"},
imageAlt: "Barber giving a precision haircut",
},
{ {
imageSrc: "http://img.b2bpic.net/free-photo/adult-barber-washing-old-man-hair-backwash_23-2148181935.jpg?_wi=1", imageSrc: "http://img.b2bpic.net/free-photo/adult-barber-washing-old-man-hair-backwash_23-2148181935.jpg", imageAlt: "Barber meticulously trimming a beard"},
imageAlt: "Barber meticulously trimming a beard",
},
{ {
imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", imageAlt: "Client receiving a stylish haircut"},
imageAlt: "Client receiving a stylish haircut",
},
{ {
imageSrc: "http://img.b2bpic.net/free-photo/young-hairdresser-shaving-male-customer-s-beard-with-comb-hair-clipper-barbershop_181624-40011.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-hairdresser-shaving-male-customer-s-beard-with-comb-hair-clipper-barbershop_181624-40011.jpg", imageAlt: "Barber using clippers for a clean fade"},
imageAlt: "Barber using clippers for a clean fade",
},
{ {
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg", imageAlt: "Client enjoying a hot towel treatment"},
imageAlt: "Client enjoying a hot towel treatment",
},
{ {
imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-beard-man_23-2147778903.jpg", imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-beard-man_23-2147778903.jpg", imageAlt: "Barber applying finishing products to hair"},
imageAlt: "Barber applying finishing products to hair",
},
]} ]}
mediaAnimation="slide-up" mediaAnimation="slide-up"
/> />
@@ -118,15 +87,11 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
heading={[ heading={[
{ {
type: "text", type: "text", content: "Our Craft, Your Style: The UNDERGROUND Difference"},
content: "Our Craft, Your Style: The UNDERGROUND Difference",
},
]} ]}
buttons={[ buttons={[
{ {
text: "Learn More", text: "Learn More", href: "#services"},
href: "#services",
},
]} ]}
/> />
</div> </div>
@@ -138,28 +103,13 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
title: "Cortes de Precisión", title: "Cortes de Precisión", description: "Desde fade cuts hasta estilos clásicos, cada corte se realiza con atención meticulosa al detalle.", bentoComponent: "reveal-icon", icon: Scissors,
description: "Desde fade cuts hasta estilos clásicos, cada corte se realiza con atención meticulosa al detalle.",
bentoComponent: "reveal-icon",
icon: Scissors,
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg",
imageAlt: "barbershop interior vintage modern",
}, },
{ {
title: "Afeitado y Arreglo de Barba", title: "Afeitado y Arreglo de Barba", description: "Disfrute de un afeitado clásico con navaja o un arreglo de barba que realce su estilo.", bentoComponent: "reveal-icon", icon: Feather,
description: "Disfrute de un afeitado clásico con navaja o un arreglo de barba que realce su estilo.",
bentoComponent: "reveal-icon",
icon: Feather,
imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg?_wi=2",
imageAlt: "barbershop interior vintage modern",
}, },
{ {
title: "Tratamientos Especializados", title: "Tratamientos Especializados", description: "Revitalice su cabello y piel con nuestros tratamientos capilares, faciales y de limpieza profunda.", bentoComponent: "reveal-icon", icon: Sparkles,
description: "Revitalice su cabello y piel con nuestros tratamientos capilares, faciales y de limpieza profunda.",
bentoComponent: "reveal-icon",
icon: Sparkles,
imageSrc: "http://img.b2bpic.net/free-photo/adult-barber-washing-old-man-hair-backwash_23-2148181935.jpg?_wi=2",
imageAlt: "barbershop interior vintage modern",
}, },
]} ]}
title="Nuestros Servicios Exclusivos" title="Nuestros Servicios Exclusivos"
@@ -175,52 +125,22 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={[
{ {
id: "style-1", id: "style-1", name: "Fade Clásico", price: "Desde $25", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-her-adorable-kitty-home_23-2149167069.jpg", imageAlt: "Hombre con corte de cabello fade clásico", onProductClick: () => {},
name: "Fade Clásico",
price: "Desde $25",
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-her-adorable-kitty-home_23-2149167069.jpg",
imageAlt: "Hombre con corte de cabello fade clásico",
onProductClick: "() => void",
}, },
{ {
id: "style-2", id: "style-2", name: "Barba Definida", price: "Desde $20", imageSrc: "http://img.b2bpic.net/free-photo/stylish-cool-bearded-man-background-old-city_1153-8185.jpg", imageAlt: "Hombre con barba bien arreglada y definida", onProductClick: () => {},
name: "Barba Definida",
price: "Desde $20",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-cool-bearded-man-background-old-city_1153-8185.jpg",
imageAlt: "Hombre con barba bien arreglada y definida",
onProductClick: "() => void",
}, },
{ {
id: "style-3", id: "style-3", name: "Cabello Texturizado", price: "Desde $30", imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-male-looking-away_23-2148531057.jpg", imageAlt: "Hombre con cabello texturizado y estilizado", onProductClick: () => {},
name: "Cabello Texturizado",
price: "Desde $30",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-male-looking-away_23-2148531057.jpg",
imageAlt: "Hombre con cabello texturizado y estilizado",
onProductClick: "() => void",
}, },
{ {
id: "style-4", id: "style-4", name: "Undercut Moderno", price: "Desde $28", imageSrc: "http://img.b2bpic.net/free-photo/side-view-men-with-beards-studio_23-2149615796.jpg", imageAlt: "Hombre con corte undercut moderno y limpio", onProductClick: () => {},
name: "Undercut Moderno",
price: "Desde $28",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-men-with-beards-studio_23-2149615796.jpg",
imageAlt: "Hombre con corte undercut moderno y limpio",
onProductClick: "() => void",
}, },
{ {
id: "style-5", id: "style-5", name: "Estilo Medium Flow", price: "Desde $27", imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg", imageAlt: "Hombre con estilo de cabello medium flow", onProductClick: () => {},
name: "Estilo Medium Flow",
price: "Desde $27",
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg",
imageAlt: "Hombre con estilo de cabello medium flow",
onProductClick: "() => void",
}, },
{ {
id: "style-6", id: "style-6", name: "Rizos Definidos", price: "Desde $32", imageSrc: "http://img.b2bpic.net/free-photo/young-brunette-woman-with-curly-hair_273609-14377.jpg", imageAlt: "Hombre con rizos naturales definidos y estilizados", onProductClick: () => {},
name: "Rizos Definidos",
price: "Desde $32",
imageSrc: "http://img.b2bpic.net/free-photo/young-brunette-woman-with-curly-hair_273609-14377.jpg",
imageAlt: "Hombre con rizos naturales definidos y estilizados",
onProductClick: "() => void",
}, },
]} ]}
title="Galería de Estilos: Antes y Después" title="Galería de Estilos: Antes y Después"
@@ -230,27 +150,19 @@ export default function LandingPage() {
<div id="reputation" data-section="reputation"> <div id="reputation" data-section="reputation">
<MetricCardThree <MetricCardThree
animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
metrics={[ metrics={[
{ {
id: "m1", id: "m1", icon: Star,
icon: Star, title: "5 Estrellas", value: "Calificación Promedio"},
title: "5 Estrellas",
value: "Calificación Promedio",
},
{ {
id: "m2", id: "m2", icon: Award,
icon: Award, title: "Años de Experiencia", value: "10+"},
title: "Años de Experiencia",
value: "10+",
},
{ {
id: "m3", id: "m3", icon: Smile,
icon: Smile, title: "Clientes Satisfechos", value: "1000+"},
title: "Clientes Satisfechos",
value: "1000+",
},
]} ]}
title="Nuestros Números Hablan por Sí Mismos" title="Nuestros Números Hablan por Sí Mismos"
description="La calidad y satisfacción que nos caracterizan, reflejadas en nuestra trayectoria y dedicación." description="La calidad y satisfacción que nos caracterizan, reflejadas en nuestra trayectoria y dedicación."
@@ -264,36 +176,14 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
groups={[ groups={[
{ {
id: "barbers", id: "barbers", groupTitle: "Equipo Principal", members: [
groupTitle: "Equipo Principal",
members: [
{ {
id: "barber-1", id: "barber-1", title: "Juan 'El Maestro'", subtitle: "Barbero Principal", detail: "Especialista en cortes clásicos y fades, con una década de experiencia.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-plus-size-man-working-as-hairstylist_23-2150754691.jpg", imageAlt: "Juan, Barbero Principal"},
title: "Juan 'El Maestro'",
subtitle: "Barbero Principal",
detail: "Especialista en cortes clásicos y fades, con una década de experiencia.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-plus-size-man-working-as-hairstylist_23-2150754691.jpg",
imageAlt: "Juan, Barbero Principal",
},
{ {
id: "barber-2", id: "barber-2", title: "Sofía 'La Estilista'", subtitle: "Experta en Barba y Diseño", detail: "Creativa y detallista, domina el arreglo de barba y los tratamientos faciales.", imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-with-crossed-arms-dressed-yellow-plaid-shirt_613910-1818.jpg", imageAlt: "Sofía, Experta en Barba y Diseño"},
title: "Sofía 'La Estilista'",
subtitle: "Experta en Barba y Diseño",
detail: "Creativa y detallista, domina el arreglo de barba y los tratamientos faciales.",
imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-with-crossed-arms-dressed-yellow-plaid-shirt_613910-1818.jpg",
imageAlt: "Sofía, Experta en Barba y Diseño",
},
{ {
id: "barber-3", id: "barber-3", title: "Mateo 'El Innovador'", subtitle: "Nuevas Tendencias y Color", detail: "Siempre a la vanguardia, especialista en las últimas tendencias y coloración capilar.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg", imageAlt: "Mateo, Innovador en Tendencias"},
title: "Mateo 'El Innovador'",
subtitle: "Nuevas Tendencias y Color",
detail: "Siempre a la vanguardia, especialista en las últimas tendencias y coloración capilar.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
imageAlt: "Mateo, Innovador en Tendencias",
},
], ],
imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg?_wi=3",
imageAlt: "professional male barber portrait",
}, },
]} ]}
title="Conozca a Nuestros Maestros Barberos" title="Conozca a Nuestros Maestros Barberos"
@@ -303,68 +193,33 @@ export default function LandingPage() {
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen <TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ {
id: "t1", id: "t1", name: "Carlos M.", role: "Empresario", company: "Rivera Motors", rating: 5,
name: "Carlos M.", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", imageAlt: "Foto de Carlos M."},
role: "Empresario",
company: "Rivera Motors",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",
imageAlt: "Foto de Carlos M.",
},
{ {
id: "t2", id: "t2", name: "Diego P.", role: "Estudiante Universitario", company: "Udelar", rating: 5,
name: "Diego P.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-confident-bearded-man-assure-everything-good-showing-okay-gesture-winki_1258-152694.jpg", imageAlt: "Foto de Diego P."},
role: "Estudiante Universitario",
company: "Udelar",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-confident-bearded-man-assure-everything-good-showing-okay-gesture-winki_1258-152694.jpg",
imageAlt: "Foto de Diego P.",
},
{ {
id: "t3", id: "t3", name: "Martín F.", role: "Gerente de Eventos", company: "Eventos Premium", rating: 5,
name: "Martín F.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-outside_1153-2604.jpg", imageAlt: "Foto de Martín F."},
role: "Gerente de Eventos",
company: "Eventos Premium",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-outside_1153-2604.jpg",
imageAlt: "Foto de Martín F.",
},
{ {
id: "t4", id: "t4", name: "Andrea L.", role: "Diseñadora Gráfica", company: "Creativa Studio", rating: 5,
name: "Andrea L.", imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-portrait-person-practicing-law-related-profession_23-2151419548.jpg", imageAlt: "Foto de Andrea L."},
role: "Diseñadora Gráfica",
company: "Creativa Studio",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-portrait-person-practicing-law-related-profession_23-2151419548.jpg",
imageAlt: "Foto de Andrea L.",
},
{ {
id: "t5", id: "t5", name: "Ricardo G.", role: "Ingeniero", company: "Tech Solutions", rating: 5,
name: "Ricardo G.", imageSrc: "http://img.b2bpic.net/free-photo/headshot-skeptical-guy-looking-something-unamusing-grimacing-standing-reluctant-against-bl_1258-163718.jpg", imageAlt: "Foto de Ricardo G."},
role: "Ingeniero",
company: "Tech Solutions",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/headshot-skeptical-guy-looking-something-unamusing-grimacing-standing-reluctant-against-bl_1258-163718.jpg",
imageAlt: "Foto de Ricardo G.",
},
]} ]}
kpiItems={[ kpiItems={[
{ {
value: "5 Estrellas", value: "5 Estrellas", label: "Calidad Consistente"},
label: "Calidad Consistente",
},
{ {
value: "100%", value: "100%", label: "Satisfacción Garantizada"},
label: "Satisfacción Garantizada",
},
{ {
value: "Profesionalismo", value: "Profesionalismo", label: "En Cada Servicio"},
label: "En Cada Servicio",
},
]} ]}
title="Lo Que Nuestros Clientes Dicen" title="Lo Que Nuestros Clientes Dicen"
description="Su experiencia es nuestra mejor carta de presentación. Orgullosos de nuestra reputación 5 estrellas." description="Su experiencia es nuestra mejor carta de presentación. Orgullosos de nuestra reputación 5 estrellas."
@@ -377,25 +232,13 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ {
id: "q1", id: "q1", title: "¿Cómo puedo reservar una cita?", content: "Puede reservar su cita fácilmente a través de nuestro sitio web haciendo clic en el botón 'Reservar Ahora' o contactándonos directamente."},
title: "¿Cómo puedo reservar una cita?",
content: "Puede reservar su cita fácilmente a través de nuestro sitio web haciendo clic en el botón 'Reservar Ahora' o contactándonos directamente.",
},
{ {
id: "q2", id: "q2", title: "¿Cuáles son sus horarios de atención?", content: "Estamos abiertos de Martes a Sábado, de 9:00 AM a 8:00 PM. Los Domingos y Lunes, estamos cerrados."},
title: "¿Cuáles son sus horarios de atención?",
content: "Estamos abiertos de Martes a Sábado, de 9:00 AM a 8:00 PM. Los Domingos y Lunes, estamos cerrados.",
},
{ {
id: "q3", id: "q3", title: "¿Ofrecen servicios para eventos o grupos?", content: "Sí, ofrecemos paquetes especiales para bodas, eventos y servicios grupales. Por favor, contáctenos para más detalles y personalización."},
title: "¿Ofrecen servicios para eventos o grupos?",
content: "Sí, ofrecemos paquetes especiales para bodas, eventos y servicios grupales. Por favor, contáctenos para más detalles y personalización.",
},
{ {
id: "q4", id: "q4", title: "¿Utilizan productos específicos?", content: "Solo utilizamos productos de alta calidad de marcas reconocidas para garantizar los mejores resultados y el cuidado de su cabello y piel."},
title: "¿Utilizan productos específicos?",
content: "Solo utilizamos productos de alta calidad de marcas reconocidas para garantizar los mejores resultados y el cuidado de su cabello y piel.",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/row-empty-chairs-office_23-2147899557.jpg" imageSrc="http://img.b2bpic.net/free-photo/row-empty-chairs-office_23-2147899557.jpg"
imageAlt="Empty barber chair in a modern barbershop" imageAlt="Empty barber chair in a modern barbershop"
@@ -414,27 +257,16 @@ export default function LandingPage() {
description="Estamos listos para atenderle. Contáctenos para agendar su cita o para consultas de servicios grupales. ¡Le esperamos en Rivera!" description="Estamos listos para atenderle. Contáctenos para agendar su cita o para consultas de servicios grupales. ¡Le esperamos en Rivera!"
inputs={[ inputs={[
{ {
name: "name", name: "name", type: "text", placeholder: "Su Nombre Completo", required: true,
type: "text",
placeholder: "Su Nombre Completo",
required: true,
}, },
{ {
name: "email", name: "email", type: "email", placeholder: "Su Correo Electrónico", required: true,
type: "email",
placeholder: "Su Correo Electrónico",
required: true,
}, },
{ {
name: "phone", name: "phone", type: "tel", placeholder: "Su Número de Teléfono"},
type: "tel",
placeholder: "Su Número de Teléfono",
},
]} ]}
textarea={{ textarea={{
name: "message", name: "message", placeholder: "Su Mensaje o Consulta", rows: 4,
placeholder: "Su Mensaje o Consulta",
rows: 4,
required: true, required: true,
}} }}
imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg" imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
@@ -449,54 +281,33 @@ export default function LandingPage() {
<FooterBase <FooterBase
columns={[ columns={[
{ {
title: "Servicios", title: "Servicios", items: [
items: [
{ {
label: "Cortes de Cabello", label: "Cortes de Cabello", href: "#services"},
href: "#services",
},
{ {
label: "Arreglo de Barba", label: "Arreglo de Barba", href: "#services"},
href: "#services",
},
{ {
label: "Tratamientos", label: "Tratamientos", href: "#services"},
href: "#services",
},
], ],
}, },
{ {
title: "Sobre Nosotros", title: "Sobre Nosotros", items: [
items: [
{ {
label: "Nuestra Historia", label: "Nuestra Historia", href: "#about"},
href: "#about",
},
{ {
label: "Nuestro Equipo", label: "Nuestro Equipo", href: "#team"},
href: "#team",
},
{ {
label: "Testimonios", label: "Testimonios", href: "#testimonials"},
href: "#testimonials",
},
], ],
}, },
{ {
title: "Contacto", title: "Contacto", items: [
items: [
{ {
label: "Reservar Cita", label: "Reservar Cita", href: "#contact"},
href: "#contact",
},
{ {
label: "Preguntas Frecuentes", label: "Preguntas Frecuentes", href: "#faq"},
href: "#faq",
},
{ {
label: "Ubicación", label: "Ubicación", href: "#contact"},
href: "#contact",
},
], ],
}, },
]} ]}