271 lines
16 KiB
TypeScript
271 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="fluid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#hero"},
|
|
{
|
|
name: "Nosotros", id: "#about"},
|
|
{
|
|
name: "Servicios", id: "#services"},
|
|
{
|
|
name: "Menú", id: "#menu"},
|
|
{
|
|
name: "Equipo", id: "#team"},
|
|
{
|
|
name: "Precios", id: "#pricing"},
|
|
{
|
|
name: "Testimonios", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contacto", id: "#contact"},
|
|
]}
|
|
brandName="RUSTICO"
|
|
button={{
|
|
text: "Reserva tu cita", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Cortes y barbas de primera calidad, una leyenda local"
|
|
description="Cortes modernos, afeitado profesional y la mejor atención en San Juan. Más de 150 clientes nos recomiendan por nuestra calidad y buena onda. "
|
|
buttons={[
|
|
{
|
|
text: "Reserva tu cita", href: "#contact"},
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/beige-barber-wallpaper-background-with-tools-job-career-concept_53876-148095.jpg"
|
|
imageAlt="Barbershop interior with an empty barber chair"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SocialProofOne
|
|
useInvertedBackground={true}
|
|
textboxLayout="default"
|
|
animationType="opacity"
|
|
title="Más de 150 clientes nos recomiendan en Google por nuestra atención y calidad"
|
|
names={[]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Corte Clásico", description: "Estilos atemporales con precisión y atención al detalle, para un look pulcro y distinguido.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-groomed_23-2150668468.jpg", imageAlt: "Barber cutting a man's hair"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-listening-music-earbuds-outside_23-2148381755.jpg", imageAlt: "Man smiling with a fresh haircut"}
|
|
},
|
|
{
|
|
title: "Afeitado Tradicional", description: "Experiencia de afeitado con navaja, toallas calientes y productos de primera calidad para una piel suave.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985727.jpg", imageAlt: "Barber shaving a man's face with a straight razor"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506253.jpg", imageAlt: "Man with a clean-shaven face"}
|
|
},
|
|
{
|
|
title: "Diseño de Barba", description: "Modelado y cuidado de barba personalizado, realzando tu estilo y la forma de tu rostro.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-shaving-with-black-trimmer_23-2148213367.jpg", imageAlt: "Barber trimming a man's beard"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-talking-phone-city_1153-8202.jpg", imageAlt: "Man with a well-groomed beard"}
|
|
},
|
|
{
|
|
title: "Tratamientos Capilares", description: "Desde la hidratación profunda hasta el fortalecimiento, cuidamos la salud de tu cabello.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-sensitive-man-thinking_23-2149459722.jpg", imageAlt: "Man receiving a hair wash and treatment"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-listening-music-headphone_23-2147892843.jpg?_wi=1", imageAlt: "Man with healthy, shiny hair"}
|
|
},
|
|
]}
|
|
showStepNumbers={false}
|
|
title="Nuestros Servicios Destacados"
|
|
description="Ofrecemos una gama completa de servicios de barbería tradicional y moderna, adaptados a tus necesidades para que siempre luzcas tu mejor versión."
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "corte-clasico", name: "Corte de Cabello", price: "$5.000 ARS", variant: "Estilo tradicional o moderno", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-listening-music-headphone_23-2147892843.jpg?_wi=2", imageAlt: "Classic haircut"},
|
|
{
|
|
id: "afeitado-navaja", name: "Afeitado con Navaja", price: "$4.000 ARS", variant: "Afeitado apurado con toallas calientes", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205895.jpg", imageAlt: "Straight razor shave"},
|
|
{
|
|
id: "recorte-barba", name: "Recorte de Barba", price: "$3.500 ARS", variant: "Definición y estilo de tu barba", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg", imageAlt: "Beard trim and line up"},
|
|
{
|
|
id: "coloracion-capilar", name: "Coloración Capilar", price: "$7.000 ARS", variant: "Cambio de look o cobertura de canas", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205889.jpg", imageAlt: "Man's hair coloring"},
|
|
{
|
|
id: "masaje-facial", name: "Masaje Facial", price: "$2.500 ARS", variant: "Relajación y cuidado de la piel", imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-face-massage-while-lying-down-with-eyes-closed-spa-center_637285-1709.jpg", imageAlt: "Man receiving a facial massage"},
|
|
{
|
|
id: "hidratacion-capilar", name: "Tratamiento de Hidratación", price: "$3.000 ARS", variant: "Nutrición profunda para tu cabello", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205880.jpg", imageAlt: "Man's hair deep conditioning treatment"},
|
|
]}
|
|
title="Descubre Nuestro Menú Completo"
|
|
description="Explora nuestra selección de servicios premium, cada uno diseñado para satisfacer tus necesidades de estilo y cuidado personal."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTen
|
|
useInvertedBackground={false}
|
|
title="Conoce a Nuestros Barberos Expertos"
|
|
tag="Nuestro Equipo"
|
|
tagAnimation="slide-up"
|
|
membersAnimation="slide-up"
|
|
members={[]}
|
|
memberVariant="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[]}
|
|
title="Elige Tu Experiencia Perfecta"
|
|
description="Ofrecemos planes flexibles que se adaptan a tu ritmo y estilo de vida, para que siempre luzcas impecable."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Martín S.", date: "23/04/2024", title: "¡El mejor lugar para un corte!", quote: "Siempre salgo de RUSTICO sintiéndome y viéndome genial. Los barberos son verdaderos artistas, el ambiente es inmejorable.", tag: "Excelente", avatarSrc: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg", avatarAlt: "Martín S. avatar", imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-shopping-mall_1203-7904.jpg", imageAlt: "Barbershop interior"},
|
|
{
|
|
id: "2", name: "Diego F.", date: "18/04/2024", title: "Atención personalizada", quote: "Valoro mucho la atención al detalle y el trato amable. Mi barba nunca estuvo mejor cuidada, un servicio de 5 estrellas.", tag: "Profesional", avatarSrc: "http://img.b2bpic.net/free-photo/businessman-using-mobile-phone-communication-technology_53876-22952.jpg", avatarAlt: "Diego F. avatar", imageSrc: "http://img.b2bpic.net/free-photo/shot-makeup-artist-medical-mask-doing-his-job-new-normal_181624-46932.jpg", imageAlt: "Barber working on client"},
|
|
{
|
|
id: "3", name: "Facundo P.", date: "10/04/2024", title: "Ambiente inigualable", quote: "Más que una barbería, es un punto de encuentro. La música, la decoración, todo suma a una experiencia única en San Juan.", tag: "Acogedor", avatarSrc: "http://img.b2bpic.net/free-photo/cool-darkskinned-bearded-man-white-tshirt-orange-jacket-smiles-sincerely-outside-charming-guy-sunglasses-shows-ok-signs-near-white-wall_197531-28765.jpg", avatarAlt: "Facundo P. avatar", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", imageAlt: "Barbershop facade"},
|
|
{
|
|
id: "4", name: "Gabriel M.", date: "05/04/2024", title: "Calidad que se siente", quote: "Cada visita es una garantía de calidad. Desde el corte hasta el afeitado, todo es impecable. ¡Totalmente recomendable!", tag: "Garantía", avatarSrc: "http://img.b2bpic.net/free-photo/man-showing-thumbs-up_1098-21825.jpg", avatarAlt: "Gabriel M. avatar", imageSrc: "http://img.b2bpic.net/free-photo/dollhouse-furniture-white-background_1368-6095.jpg", imageAlt: "Barber tools"},
|
|
{
|
|
id: "5", name: "Lucas R.", date: "01/04/2024", title: "Mis barberos de confianza", quote: "Llevo años viniendo y nunca me decepcionan. Saben exactamente lo que busco y siempre superan mis expectativas. Un lujo.", tag: "Fiel", avatarSrc: "http://img.b2bpic.net/free-photo/young-caucasian-man-smiling-confident-standing-with-arms-crossed-gesture-street_839833-30694.jpg", avatarAlt: "Lucas R. avatar", imageSrc: "http://img.b2bpic.net/free-photo/barber-talking-with-client-reception-desk_23-2148181957.jpg", imageAlt: "Barbershop window"},
|
|
]}
|
|
title="Lo que dicen nuestros clientes"
|
|
description="La satisfacción de quienes confían en nosotros es nuestra mejor carta de presentación. Sus experiencias hablan por sí solas."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "¿Cómo reservo una cita en RUSTICO?", content: "Puedes reservar tu cita directamente a través de nuestro sistema de reservas online en la sección de Contacto, llamándonos o visitándonos en nuestro local."},
|
|
{
|
|
id: "faq-2", title: "¿Cuáles son sus horarios de atención?", content: "Estamos abiertos de Lunes a Sábado de 9:00 a 20:00 hs. Te recomendamos consultar nuestra disponibilidad en línea para horarios específicos."},
|
|
{
|
|
id: "faq-3", title: "¿Aceptan pagos con tarjeta de crédito/débito?", content: "Sí, aceptamos todas las principales tarjetas de crédito y débito, además de efectivo y otros métodos de pago digital."},
|
|
{
|
|
id: "faq-4", title: "¿Tienen servicios de barbería a domicilio?", content: "Actualmente, solo ofrecemos nuestros servicios en nuestro local para garantizar la experiencia completa y el uso de nuestras instalaciones profesionales."},
|
|
{
|
|
id: "faq-5", title: "¿Puedo elegir a mi barbero preferido al reservar?", content: "Sí, nuestro sistema de reservas te permite seleccionar a tu barbero preferido según su disponibilidad al momento de programar tu cita."},
|
|
]}
|
|
title="Preguntas Frecuentes"
|
|
description="Encuentra respuestas rápidas a tus dudas más comunes sobre nuestros servicios, reservas y la experiencia en RUSTICO."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
tag="Contáctanos"
|
|
title="Reserva Tu Cita Hoy"
|
|
description="Estamos ansiosos por darte la bienvenida a RUSTICO. ¡Programa tu visita fácilmente o haznos una consulta para cualquier duda!"
|
|
imageSrc="http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg"
|
|
imageAlt="Interior of RUSTICO barbershop, welcoming atmosphere"
|
|
mediaAnimation="opacity"
|
|
buttons={[{ text: "Reservá tu turno por WhatsApp", href: "https://wa.me/?text=Hola,%20me%20gustaría%20reservar%20un%20turno." }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Servicios", items: [
|
|
{
|
|
label: "Corte Clásico", href: "#services"},
|
|
{
|
|
label: "Afeitado con Navaja", href: "#services"},
|
|
{
|
|
label: "Diseño de Barba", href: "#services"},
|
|
{
|
|
label: "Tratamientos", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Nosotros", items: [
|
|
{
|
|
label: "Nuestra Historia", href: "#about"},
|
|
{
|
|
label: "Nuestro Equipo", href: "#team"},
|
|
{
|
|
label: "Testimonios", href: "#testimonials"},
|
|
],
|
|
},
|
|
{
|
|
title: "Soporte", items: [
|
|
{
|
|
label: "Preguntas Frecuentes", href: "#faq"},
|
|
{
|
|
label: "Contacto", href: "#contact"},
|
|
{
|
|
label: "Términos y Condiciones", href: "#"},
|
|
{
|
|
label: "Política de Privacidad", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 RUSTICO Corte Y Afeitado. Todos los derechos reservados."
|
|
bottomRightText="Hecho con pasión en San Juan, Argentina."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|