368 lines
11 KiB
TypeScript
368 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="noise"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Inicio",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Experiencia",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Servicios",
|
|
id: "services",
|
|
},
|
|
{
|
|
name: "Opiniones",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Ubicación",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="CUTMAN"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="CUTMAN BARBER SHOP"
|
|
description="Barbería Premium en Juriquilla, Querétaro. Donde cada corte es una obra de arte."
|
|
testimonials={[
|
|
{
|
|
name: "Cliente Distinguido",
|
|
handle: "@cutman",
|
|
testimonial: "La mejor experiencia en barbería que he tenido en años.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg?_wi=1",
|
|
imageAlt: "barber shop interior luxury dark",
|
|
},
|
|
{
|
|
name: "Carlos M.",
|
|
handle: "@carlosm",
|
|
testimonial: "El ambiente es espectacular y el corte impecable.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-cutting-hair-client_23-2147778920.jpg?_wi=1",
|
|
imageAlt: "barber shop interior luxury dark",
|
|
},
|
|
{
|
|
name: "Luis F.",
|
|
handle: "@luisf",
|
|
testimonial: "Gran atención, se nota que son expertos en lo que hacen.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18293.jpg?_wi=1",
|
|
imageAlt: "barber shop interior luxury dark",
|
|
},
|
|
{
|
|
name: "Jorge A.",
|
|
handle: "@jorgea",
|
|
testimonial: "Juriquilla necesitaba un lugar así de profesional.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-beard-man_23-2147778882.jpg?_wi=1",
|
|
imageAlt: "barber shop interior luxury dark",
|
|
},
|
|
{
|
|
name: "Miguel R.",
|
|
handle: "@miguelr",
|
|
testimonial: "La relación calidad-precio es insuperable.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-holding-mousse-near-customer_23-2147778807.jpg?_wi=1",
|
|
imageAlt: "barber shop interior luxury dark",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Reserva tu cita ahora",
|
|
href: "https://wa.me/524424327973",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg?_wi=2"
|
|
imageAlt="barber shop interior luxury dark"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg",
|
|
alt: "Full shot man at barber shop",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg",
|
|
alt: "Male barber giving his client a nice haircut",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg",
|
|
alt: "Young man getting his beard styled at the barber",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/chairs-green-male-barbershop-retro-style_627829-8284.jpg",
|
|
alt: "Chairs in green male barbershop in retro style",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg",
|
|
alt: "Barber shop premium",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Premium Experience",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Expert Styling",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Modern Comfort",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Juriquilla",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Authentic Cuts",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="La experiencia Cutman"
|
|
description="Barbería premium con atención personalizada. Barberas expertas, ambiente relajado tipo spa y el máximo cuidado en cada detalle."
|
|
metrics={[
|
|
{
|
|
value: "4.9",
|
|
title: "Estrellas en Google",
|
|
},
|
|
{
|
|
value: "49+",
|
|
title: "Reseñas de clientes",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-barber-cutting-hair-client_23-2147778920.jpg?_wi=2"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
imageAlt="barber cutting hair professional"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwelve
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "1",
|
|
label: "Corte",
|
|
title: "Corte de Cabello",
|
|
items: [
|
|
"Personalizado a tu estilo",
|
|
"Estructura facial detallada",
|
|
],
|
|
},
|
|
{
|
|
id: "2",
|
|
label: "Barba",
|
|
title: "Arreglo de Barba",
|
|
items: [
|
|
"Definición",
|
|
"Precisión absoluta",
|
|
],
|
|
},
|
|
{
|
|
id: "3",
|
|
label: "Cuidado",
|
|
title: "Acondicionamiento",
|
|
items: [
|
|
"Hidratación profunda",
|
|
"Cuidado profesional",
|
|
],
|
|
},
|
|
{
|
|
id: "4",
|
|
label: "Clásico",
|
|
title: "Rasurado Tradicional",
|
|
items: [
|
|
"Toallas calientes",
|
|
"Experiencia clásica",
|
|
],
|
|
},
|
|
{
|
|
id: "5",
|
|
label: "Skin",
|
|
title: "Facial",
|
|
items: [
|
|
"Limpieza",
|
|
"Hidratación profunda",
|
|
],
|
|
},
|
|
{
|
|
id: "6",
|
|
label: "Detalle",
|
|
title: "Recorte de Cejas",
|
|
items: [
|
|
"Perfilado",
|
|
"Look impecable",
|
|
],
|
|
},
|
|
]}
|
|
title="Nuestros Servicios"
|
|
description="Una gama completa de servicios diseñados para el hombre moderno."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "100%",
|
|
description: "Atención personalizada",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "Expertas",
|
|
description: "Barberas certificadas",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "Premium",
|
|
description: "Ambiente relajado",
|
|
},
|
|
{
|
|
id: "m4",
|
|
value: "4.9★",
|
|
description: "Excelencia en Google",
|
|
},
|
|
]}
|
|
title="¿Por qué Cutman?"
|
|
description="Calidad, dedicación y excelencia en cada servicio."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Victor A.",
|
|
role: "Cliente",
|
|
testimonial: "Me dejó el corte justo como quería, me hicieron sentir consentido. Definitivamente tienen un nuevo cliente.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18293.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Nestor C.",
|
|
role: "Cliente",
|
|
testimonial: "El facial y cuidado que tienen es muy profesional. Fui por un arreglo de barba y me sentí en un spa.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-beard-man_23-2147778882.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Michel G.",
|
|
role: "Cliente",
|
|
testimonial: "La atención y el servicio fue de lo mejor, se tomó su tiempo. Recomiendo mucho el lugar.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-holding-mousse-near-customer_23-2147778807.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Alex R.",
|
|
role: "Cliente",
|
|
testimonial: "Increíble lugar, el trato es sumamente profesional y cómodo.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "David M.",
|
|
role: "Cliente",
|
|
testimonial: "Sin duda la mejor barbería de Querétaro.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woma-washing-man-s-head-barbershop_1157-27166.jpg",
|
|
},
|
|
]}
|
|
title="Lo que dicen nuestros clientes"
|
|
description="La satisfacción de nuestros clientes es nuestro mayor orgullo."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="¿Listo para tu mejor corte?"
|
|
description="Agenda tu cita en menos de un minuto. Estamos en Juriquilla."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Tu nombre",
|
|
},
|
|
{
|
|
name: "phone",
|
|
type: "tel",
|
|
placeholder: "Tu teléfono",
|
|
},
|
|
]}
|
|
buttonText="Escribir por WhatsApp"
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-barber-cutting-hair-client_23-2147778920.jpg?_wi=3"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="CUTMAN"
|
|
leftLink={{
|
|
text: "Juriquilla, Querétaro",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "© 2025 Cutman Barber Shop",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|