368 lines
21 KiB
TypeScript
368 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Award, CalendarCheck, Scissors, Sparkles, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#home"},
|
|
{
|
|
name: "Nosotros", id: "#about"},
|
|
{
|
|
name: "Servicios", id: "#services"},
|
|
{
|
|
name: "Barberos", id: "#barbers"},
|
|
{
|
|
name: "Precios", id: "#pricing"},
|
|
{
|
|
name: "Testimonios", id: "#testimonials"},
|
|
{
|
|
name: "Preguntas Frecuentes", id: "#faq"},
|
|
{
|
|
name: "Contacto", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/vintage-barber-shop-illustration_53876-78901.jpg"
|
|
logoAlt="Logotipo de la Barbería Dukos"
|
|
brandName="Barbería Dukos"
|
|
bottomLeftText="San Mateo Atenco"
|
|
bottomRightText="book@dukosbarber.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Cortes Premium. Barberos Locales. La Elección Confiable de San Mateo Atenco"
|
|
description="Experimenta la barbería experta en un espacio limpio y acogedor con buena música y servicio genuino. Únete a 32 clientes satisfechos que confían en Dukos para su corte perfecto."
|
|
testimonials={[
|
|
{
|
|
name: "Carlos M.", handle: "@CarlosM", testimonial: "¡Dukos siempre cumple! El mejor corte de pelo y afeitado en San Mateo Atenco. La atención al detalle es inigualable.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg", imageAlt: "Carlos M. - Cliente satisfecho"},
|
|
{
|
|
name: "Javier R.", handle: "@JavierR", testimonial: "Barberos amables y un ambiente fantástico. Siempre salgo sintiéndome fresco y luciendo impecable. ¡Altamente recomendado!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-handsome-man-with-sunglasses_23-2149022672.jpg", imageAlt: "Javier R. - Cliente feliz"},
|
|
{
|
|
name: "Luis F.", handle: "@LuisF", testimonial: "¡Encontré Dukos mientras viajaba y quedé muy impresionado! Servicio de calidad, personal profesional y excelente relación calidad-precio.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/adult-barber-uniform-laughing-hair-salon_23-2148181964.jpg", imageAlt: "Luis F. - Cliente viajero"},
|
|
{
|
|
name: "Diego P.", handle: "@DiegoP", testimonial: "Esto es más que un simple corte de pelo; es una experiencia. Buena música, buenas vibras y un corte excelente cada vez.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-customer-approving-new-offer_1262-17151.jpg", imageAlt: "Diego P. - Cliente habitual"},
|
|
{
|
|
name: "Miguel S.", handle: "@MiguelS", testimonial: "Los barberos aquí son verdaderos artistas. Escuchan lo que quieres y superan las expectativas. Mi lugar de referencia.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-barber-wearing-uniform-glasses-holding-shaving-razors-looking-one-them-isolated-blue-background_141793-134401.jpg", imageAlt: "Miguel S. - Cliente leal"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Agenda Tu Cita", href: "#contact"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg", alt: "Avatar de cliente 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/attractive-man_1098-14096.jpg", alt: "Avatar de cliente 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/authentic-book-club-scene_23-2150104578.jpg", alt: "Avatar de cliente 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-hair-cutting-machine-holding-hands-near-ears-trying-listen-looking-surprised-standing-purple-wall_141793-50562.jpg", alt: "Hombre barbero con delantal sosteniendo máquina de cortar pelo"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-business-man-with-apron_23-2148366567.jpg", alt: "Hombre de negocios de frente con delantal"},
|
|
]}
|
|
avatarText="¡Únete a 32 clientes satisfechos!"
|
|
imageSrc="http://img.b2bpic.net/free-photo/luxury-coffee-shop-table-inside-barista-bar-generated-by-ai_188544-29280.jpg"
|
|
imageAlt="Sillón de barbero clásico vacío en una elegante barbería"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Cortes de Precisión", icon: Scissors,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Afeitados Clásicos", icon: Star,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Recorte de Barba", icon: Sparkles,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Barberos Expertos", icon: Star,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Reserva Online", icon: CalendarCheck,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Creando Confianza, Un Corte a la Vez"
|
|
description={[
|
|
"En Dukos Barber Shop, creemos que un gran corte de pelo es más que un simple servicio: es una experiencia. Ubicada en el corazón de San Mateo Atenco, nuestra barbería es un santuario donde la tradición se encuentra con el estilo moderno.", "Nuestros hábiles barberos son apasionados de su oficio, dedicados a ofrecer cortes de precisión, afeitados clásicos y arreglo experto en un ambiente limpio y acogedor. Con una gran atención al detalle y un compromiso con la satisfacción del cliente, nos aseguramos de que cada cliente se vaya sintiéndose renovado, seguro y luciendo lo mejor posible. Entra en Dukos, relájate con buena música y déjanos elevar tu estilo."]}
|
|
buttons={[
|
|
{
|
|
text: "Conoce a Nuestro Equipo", href: "#barbers"},
|
|
]}
|
|
showBorder={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Cortes de Pelo Expertos", description: "Desde cortes clásicos hasta desvanecidos modernos, nuestros barberos ofrecen precisión y estilo que se adapta perfectamente a ti.", imageSrc: "http://img.b2bpic.net/free-photo/anonymous-woman-trimming-beard-man_23-2147778907.jpg", imageAlt: "Barbero haciendo un corte de pelo de precisión"},
|
|
{
|
|
title: "Afeitados Clásicos con Espuma Caliente", description: "Disfruta de una relajante toalla caliente y afeitado con navaja para un acabado más suave y el máximo confort.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg", imageAlt: "Barbero realizando un afeitado clásico con espuma caliente"},
|
|
{
|
|
title: "Recorte Profesional de Barba", description: "Mantén tu barba impecablemente estilizada y arreglada con nuestros servicios expertos de recorte y modelado.", imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-lies-with-open-eyes-while-barber-cuts-his-beard_1304-2776.jpg", imageAlt: "Barbero recortando la barba de un hombre"},
|
|
{
|
|
title: "Reserva Online Fácil", description: "Agenda tu próxima visita en minutos, reduciendo los tiempos de espera y asegurando la disponibilidad de tu barbero preferido.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-yellow-calendar_23-2148693387.jpg", imageAlt: "Smartphone mostrando una interfaz de reserva online"},
|
|
]}
|
|
title="Nuestros Servicios Destacados"
|
|
description="Experimenta lo mejor en el cuidado masculino con nuestra gama de servicios personalizados, diseñados para que te veas impecable y te sientas genial."
|
|
/>
|
|
</div>
|
|
|
|
<div id="barbers" data-section="barbers">
|
|
<TeamCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
members={[
|
|
{
|
|
id: "1", name: "Ricardo 'Rico' Gomez", role: "Estilista Principal", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665445.jpg", imageAlt: "Retrato de Ricardo Gomez, Estilista Principal"},
|
|
{
|
|
id: "2", name: "Javier 'Javi' Soto", role: "Barbero Senior", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665414.jpg", imageAlt: "Retrato de Javier Soto, Barbero Senior"},
|
|
{
|
|
id: "3", name: "Marco 'Maki' Valdez", role: "Barbero Aprendiz", imageSrc: "http://img.b2bpic.net/free-photo/dangerous-beard-hipster-with-tattooed-hands-wrench-crazy-man-run-into-camera-with-aggressive-face-scare-concept_343059-46.jpg", imageAlt: "Retrato de Marco Valdez, Barbero Aprendiz"},
|
|
]}
|
|
title="Conoce a Nuestros Barberos Maestros"
|
|
description="Nuestro equipo de profesionales capacitados se dedica al arte de la barbería, aportando años de experiencia y pasión por la perfección a cada cliente."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "haircut", badge: "Popular", badgeIcon: Star,
|
|
price: "$25", subtitle: "Corte de Pelo de Precisión", buttons: [
|
|
{
|
|
text: "Agendar Corte", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Corte de cualquier estilo", "Afeitado de cuello", "Lavado y peinado de cabello"],
|
|
},
|
|
{
|
|
id: "shave", badge: "Clásico", badgeIcon: Scissors,
|
|
price: "$30", subtitle: "Afeitado Tradicional", buttons: [
|
|
{
|
|
text: "Agendar Afeitado", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Tratamiento de toalla caliente", "Afeitado con navaja", "Bálsamo para después del afeitado"],
|
|
},
|
|
{
|
|
id: "beard", badge: "Refinamiento", badgeIcon: Sparkles,
|
|
price: "$20", subtitle: "Recorte y Diseño de Barba", buttons: [
|
|
{
|
|
text: "Agendar Recorte de Barba", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Recorte y delineado de barba", "Acabado con toalla caliente", "Aplicación de aceite para barba"],
|
|
},
|
|
{
|
|
id: "combo", badge: "Mejor Valor", badgeIcon: Award,
|
|
price: "$45", subtitle: "Combo Corte y Afeitado", buttons: [
|
|
{
|
|
text: "Agendar Combo", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Corte de Pelo de Precisión", "Afeitado Tradicional", "Recorte de Barba (opcional)"],
|
|
},
|
|
]}
|
|
title="Nuestros Precios"
|
|
description="Cuidado de calidad adaptado a tus necesidades. Encuentra el paquete de servicio perfecto a continuación."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Eduardo C.", handle: "Residente Local", testimonial: "Dukos es simplemente la mejor barbería de San Mateo Atenco. Siempre un corte perfecto y una gran conversación. ¡Muy recomendable!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-thumb-up-beach_1149-1081.jpg", imageAlt: "Eduardo C."},
|
|
{
|
|
id: "2", name: "Fernando L.", handle: "Cliente Frecuente", testimonial: "El ambiente es fantástico y los barberos son verdaderos artistas. Mi barba nunca se ha visto mejor. Dukos nunca decepciona.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg", imageAlt: "Fernando L."},
|
|
{
|
|
id: "3", name: "Gustavo A.", handle: "Primera Visita", testimonial: "Buscaba un nuevo barbero y encontré Dukos. La reserva online fue fácil y el servicio impecable. ¡Ahora soy un cliente habitual!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-with-shaving-foam-his-face-holding-razor-looking-front-surprised-happy-standing-purple-wall_141793-50721.jpg", imageAlt: "Gustavo A."},
|
|
{
|
|
id: "4", name: "Hector G.", handle: "Visitante", testimonial: "De visita por la ciudad y necesitaba un corte rápido y de calidad. ¡Dukos cumplió! Profesional y eficiente. Exactamente lo que necesitaba.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-waiting-new-haircut_23-2148353450.jpg", imageAlt: "Hector G."},
|
|
{
|
|
id: "5", name: "Ivan S.", handle: "Cliente Antiguo", testimonial: "Durante años, he confiado en Dukos con mi cabello. La calidad constante, el personal amable y los excelentes precios me hacen volver.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-finished-grooming-long-gray-beard_23-2148181941.jpg", imageAlt: "Ivan S."},
|
|
{
|
|
id: "6", name: "Jorge M.", handle: "Cliente Satisfecho", testimonial: "Siempre es un placer visitar. La tienda está limpia, la música es buena y los barberos son los mejores en el negocio.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-talking-phone_23-2148718087.jpg", imageAlt: "Jorge M."},
|
|
]}
|
|
showRating={true}
|
|
title="Lo Que Dicen Nuestros Clientes"
|
|
description="Escucha directamente de nuestros clientes satisfechos sobre su experiencia en Dukos Barber Shop."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Empresas de San Mateo", "Noticias Locales de Atenco", "Revista de Aseo MX", "Blog de Cabello y Estilo", "Cámara de Comercio Local", "Gremio de Barberos de México", "Premios Lo Mejor de San Mateo"]}
|
|
title="Confiado por la Comunidad"
|
|
description="Nuestro compromiso con la excelencia nos ha valido el reconocimiento y la confianza en San Mateo Atenco y más allá."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "¿Necesito cita o puedo entrar sin cita?", content: "Aunque siempre aceptamos clientes sin cita, recomendamos encarecidamente reservar una cita online para asegurar tiempos de espera mínimos y garantizar la disponibilidad de tu barbero preferido."},
|
|
{
|
|
id: "2", title: "¿Qué métodos de pago aceptan?", content: "Aceptamos efectivo, así como todas las principales tarjetas de crédito y débito para tu comodidad."},
|
|
{
|
|
id: "3", title: "¿Ofrecen servicios para niños?", content: "¡Sí, damos la bienvenida a clientes de todas las edades! Nuestros barberos también están capacitados para ofrecer excelentes cortes de pelo para niños."},
|
|
{
|
|
id: "4", title: "¿Dónde están ubicados en San Mateo Atenco?", content: "Nos encontramos convenientemente ubicados en el corazón de San Mateo Atenco. Por favor, consulta nuestra sección de contacto para la dirección exacta y un mapa."},
|
|
{
|
|
id: "5", title: "¿Qué medidas de seguridad están tomando?", content: "La salud y seguridad de nuestros clientes y personal son nuestra máxima prioridad. Mantenemos un ambiente meticulosamente limpio, esterilizamos las herramientas a fondo y seguimos todas las directrices de salud locales."},
|
|
]}
|
|
title="Preguntas Frecuentes"
|
|
description="¿Tienes preguntas sobre nuestros servicios o reservas? Tenemos las respuestas."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Agenda Tu Cita"
|
|
description="¿Listo para tu nuevo look? Rellena el formulario a continuación para programar tu visita a Dukos Barber Shop."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Tu Nombre", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Tu Correo Electrónico", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Tu Número de Teléfono (Opcional)"},
|
|
]}
|
|
multiSelect={{
|
|
name: "service", label: "Selecciona un Servicio", options: [
|
|
"Corte de Pelo de Precisión", "Afeitado Tradicional", "Recorte y Diseño de Barba", "Combo Corte y Afeitado"],
|
|
}}
|
|
textarea={{
|
|
name: "message", placeholder: "¿Alguna petición especial o detalle?", rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg"
|
|
imageAlt="Vista exterior de la Barbería Dukos"
|
|
mediaPosition="right"
|
|
buttonText="Confirmar Cita"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Servicios", items: [
|
|
{
|
|
label: "Cortes de Pelo", href: "#services"},
|
|
{
|
|
label: "Afeitados", href: "#services"},
|
|
{
|
|
label: "Recorte de Barba", href: "#services"},
|
|
{
|
|
label: "Reservas", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
title: "Compañía", items: [
|
|
{
|
|
label: "Nosotros", href: "#about"},
|
|
{
|
|
label: "Nuestro Equipo", href: "#barbers"},
|
|
{
|
|
label: "Precios", href: "#pricing"},
|
|
{
|
|
label: "Preguntas Frecuentes", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
title: "Conectar", items: [
|
|
{
|
|
label: "Instagram", href: "https://instagram.com/dukosbarber"},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com/dukosbarber"},
|
|
{
|
|
label: "Google Maps", href: "https://maps.google.com/?q=Dukos+Barber+Shop+San+Mateo+Atenco"},
|
|
{
|
|
label: "Contáctanos", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/vintage-barber-shop-illustration_53876-78901.jpg"
|
|
logoAlt="Logotipo de la Barbería Dukos"
|
|
logoText="Barbería Dukos"
|
|
copyrightText="© 2024 Barbería Dukos. Todos los derechos reservados."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |