Merge version_1 into main #2
451
src/app/page.tsx
451
src/app/page.tsx
@@ -27,343 +27,136 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Nosotros",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Servicios",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Equipo",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Precios",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contacto",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Aura Barbería"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Inicio", id: "hero" },
|
||||
{ name: "Nosotros", id: "about" },
|
||||
{ name: "Servicios", id: "features" },
|
||||
{ name: "Equipo", id: "team" },
|
||||
{ name: "Precios", id: "pricing" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="Aura Barbería"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="Aura Barbería: El Arte del Estilo"
|
||||
description="Donde la tradición se encuentra con la precisión moderna. Experimenta el corte perfecto en un ambiente único."
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-armchairs-barber-shop_140725-7720.jpg?_wi=1",
|
||||
imageAlt: "Ambiente premium",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6207.jpg?_wi=1",
|
||||
imageAlt: "Herramientas de precisión",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg?_wi=1",
|
||||
imageAlt: "Sillón de barbero",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205858.jpg",
|
||||
imageAlt: "Productos de lujo",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-fluffy-cat-veterinarian-with-cats-animals-couch_1157-46552.jpg",
|
||||
imageAlt: "Detalle de cuchilla",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sexy-young-woman-home-portrait_624325-3379.jpg",
|
||||
imageAlt: "Interior salón",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Aura Barbería: El Arte del Estilo"
|
||||
description="Donde la tradición se encuentra con la precisión moderna. Experimenta el corte perfecto en un ambiente único."
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/luxury-armchairs-barber-shop_140725-7720.jpg", imageAlt: "Ambiente premium" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6207.jpg", imageAlt: "Herramientas de precisión" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg", imageAlt: "Sillón de barbero" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205858.jpg", imageAlt: "Productos de lujo" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/white-fluffy-cat-veterinarian-with-cats-animals-couch_1157-46552.jpg", imageAlt: "Detalle de cuchilla" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/sexy-young-woman-home-portrait_624325-3379.jpg", imageAlt: "Interior salón" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Pasión por el detalle en cada corte.",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/yorkshire-terrier-getting-procedure-groomer-salon-young-woman-white-tshirt-combing-little-dog-yorkshire-terrier-puppy-blue-table_1157-51464.jpg",
|
||||
alt: "Sobre nosotros",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Pasión por el detalle en cada corte." },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/yorkshire-terrier-getting-procedure-groomer-salon-young-woman-white-tshirt-combing-little-dog-yorkshire-terrier-puppy-blue-table_1157-51464.jpg", alt: "Sobre nosotros" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Corte de Precisión",
|
||||
description: "Técnicas de tijera y máquina para lograr el estilo que buscas.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dad-teaching-his-boy-how-shave_23-2149588748.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-using-dry-shampoo-home_23-2150706332.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-armchairs-barber-shop_140725-7720.jpg?_wi=2",
|
||||
imageAlt: "straight razor shave service",
|
||||
},
|
||||
{
|
||||
title: "Afeitado Clásico",
|
||||
description: "Ritual con toallas calientes para un acabado suave y profesional.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-shaving_23-2147638137.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-comb-close-microphone-asmr_23-2149378089.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6207.jpg?_wi=2",
|
||||
imageAlt: "straight razor shave service",
|
||||
},
|
||||
{
|
||||
title: "Tratamiento de Barba",
|
||||
description: "Perfilado y cuidado de barba con productos de alta gama.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-shaving-his-beard-with-razor_23-2148692250.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-comb-close-microphone-asmr_23-2149378061.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg?_wi=2",
|
||||
imageAlt: "straight razor shave service",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Nuestros Servicios Especializados"
|
||||
description="Soluciones de grooming diseñadas para el hombre moderno que busca distinción."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showStepNumbers={false}
|
||||
title="Nuestros Servicios Especializados"
|
||||
description="Soluciones de grooming diseñadas para el hombre moderno que busca distinción."
|
||||
features={[
|
||||
{ title: "Corte de Precisión", description: "Técnicas de tijera y máquina para lograr el estilo que buscas.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/dad-teaching-his-boy-how-shave_23-2149588748.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-using-dry-shampoo-home_23-2150706332.jpg" } },
|
||||
{ title: "Afeitado Clásico", description: "Ritual con toallas calientes para un acabado suave y profesional.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-shaving_23-2147638137.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/person-using-comb-close-microphone-asmr_23-2149378089.jpg" } },
|
||||
{ title: "Tratamiento de Barba", description: "Perfilado y cuidado de barba con productos de alta gama.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-shaving-his-beard-with-razor_23-2148692250.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/person-using-comb-close-microphone-asmr_23-2149378061.jpg" } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "team-group",
|
||||
groupTitle: "Equipo Principal",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "Carlos A.",
|
||||
subtitle: "Director Creativo",
|
||||
detail: "Experto en degradados",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Luis B.",
|
||||
subtitle: "Maestro Barbero",
|
||||
detail: "Especialista en afeitado",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/frowning-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-keeping-hands-crossed-holding-scissors-comb-isolated-white-background-with-copy-space_141793-32123.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Jorge V.",
|
||||
subtitle: "Estilista Senior",
|
||||
detail: "Consultor de imagen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-plus-size-man-working-as-hairstylist_23-2150754692.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-armchairs-barber-shop_140725-7720.jpg?_wi=3",
|
||||
imageAlt: "professional barber portrait",
|
||||
},
|
||||
]}
|
||||
title="Nuestro Equipo de Expertos"
|
||||
description="Maestros barberos dedicados a esculpir tu mejor imagen."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Nuestro Equipo de Expertos"
|
||||
description="Maestros barberos dedicados a esculpir tu mejor imagen."
|
||||
groups={[
|
||||
{ id: "team-group", groupTitle: "Equipo Principal", members: [
|
||||
{ id: "m1", title: "Carlos A.", subtitle: "Director Creativo", detail: "Experto en degradados", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg" },
|
||||
{ id: "m2", title: "Luis B.", subtitle: "Maestro Barbero", detail: "Especialista en afeitado", imageSrc: "http://img.b2bpic.net/free-photo/frowning-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-keeping-hands-crossed-holding-scissors-comb-isolated-white-background-with-copy-space_141793-32123.jpg" },
|
||||
{ id: "m3", title: "Jorge V.", subtitle: "Estilista Senior", detail: "Consultor de imagen", imageSrc: "http://img.b2bpic.net/free-photo/front-view-plus-size-man-working-as-hairstylist_23-2150754692.jpg" },
|
||||
] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marco R.",
|
||||
handle: "@marco_r",
|
||||
testimonial: "El mejor servicio de corte en la ciudad. Atención impecable.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Alejandro P.",
|
||||
handle: "@alejandro_p",
|
||||
testimonial: "Profesionalismo puro. Aura Barbería es mi lugar de siempre.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street_158538-14342.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Julián S.",
|
||||
handle: "@julian_s",
|
||||
testimonial: "Gran ambiente y resultados consistentes cada visita.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-girl-waiting-vet-s-with-their-doberman-dog_329181-10375.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Diego F.",
|
||||
handle: "@diego_f",
|
||||
testimonial: "Si buscas calidad y estilo, este es el lugar.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6351.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Fernando M.",
|
||||
handle: "@fernando_m",
|
||||
testimonial: "Excelente trato al cliente y cortes de gran nivel.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-with-haircut-dressed-casual-clothes-sitting-bench-city-park_613910-4836.jpg",
|
||||
},
|
||||
]}
|
||||
title="Lo que dicen nuestros clientes"
|
||||
description="La experiencia Aura Barbería en palabras de quienes nos eligen."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Lo que dicen nuestros clientes"
|
||||
description="La experiencia Aura Barbería en palabras de quienes nos eligen."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Marco R.", handle: "@marco_r", testimonial: "El mejor servicio de corte en la ciudad. Atención impecable.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg" },
|
||||
{ id: "2", name: "Alejandro P.", handle: "@alejandro_p", testimonial: "Profesionalismo puro. Aura Barbería es mi lugar de siempre.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street_158538-14342.jpg" },
|
||||
{ id: "3", name: "Julián S.", handle: "@julian_s", testimonial: "Gran ambiente y resultados consistentes cada visita.", imageSrc: "http://img.b2bpic.net/free-photo/woman-girl-waiting-vet-s-with-their-doberman-dog_329181-10375.jpg" },
|
||||
{ id: "4", name: "Diego F.", handle: "@diego_f", testimonial: "Si buscas calidad y estilo, este es el lugar.", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6351.jpg" },
|
||||
{ id: "5", name: "Fernando M.", handle: "@fernando_m", testimonial: "Excelente trato al cliente y cortes de gran nivel.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-with-haircut-dressed-casual-clothes-sitting-bench-city-park_613910-4836.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "corte",
|
||||
badge: "Popular",
|
||||
price: "$25",
|
||||
subtitle: "Servicio estándar",
|
||||
features: [
|
||||
"Lavado",
|
||||
"Corte clásico",
|
||||
"Estilizado",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Recomendado",
|
||||
price: "$40",
|
||||
subtitle: "Experiencia completa",
|
||||
features: [
|
||||
"Lavado",
|
||||
"Corte de diseño",
|
||||
"Afeitado profesional",
|
||||
"Mascarilla",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "barba",
|
||||
badge: "Básico",
|
||||
price: "$15",
|
||||
subtitle: "Solo barba",
|
||||
features: [
|
||||
"Perfilado",
|
||||
"Hidratación",
|
||||
"Cuidado diario",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Nuestras Tarifas"
|
||||
description="Precios transparentes para una calidad inigualable."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Nuestras Tarifas"
|
||||
description="Precios transparentes para una calidad inigualable."
|
||||
plans={[
|
||||
{ id: "corte", badge: "Popular", price: "$25", subtitle: "Servicio estándar", features: ["Lavado", "Corte clásico", "Estilizado"] },
|
||||
{ id: "premium", badge: "Recomendado", price: "$40", subtitle: "Experiencia completa", features: ["Lavado", "Corte de diseño", "Afeitado profesional", "Mascarilla"] },
|
||||
{ id: "barba", badge: "Básico", price: "$15", subtitle: "Solo barba", features: ["Perfilado", "Hidratación", "Cuidado diario"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Reserva tu Cita"
|
||||
description="Agenda tu transformación hoy mismo. Te esperamos en Aura Barbería."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Nombre",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Cuéntanos qué necesitas",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205931.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Reserva tu Cita"
|
||||
description="Agenda tu transformación hoy mismo. Te esperamos en Aura Barbería."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205931.jpg"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Nombre", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Cuéntanos qué necesitas", rows: 4 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Aura Barbería",
|
||||
items: [
|
||||
{
|
||||
label: "Ubicación",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Horarios",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Teléfono",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Aura Barbería. Todos los derechos reservados."
|
||||
bottomRightText="Hecho con estilo."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Aura Barbería", items: [{ label: "Ubicación", href: "#" }, { label: "Horarios", href: "#" }] },
|
||||
{ title: "Contacto", items: [{ label: "Instagram", href: "#" }, { label: "Teléfono", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 Aura Barbería. Todos los derechos reservados."
|
||||
bottomRightText="Hecho con estilo."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user