267 lines
16 KiB
TypeScript
267 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#hero"},
|
|
{
|
|
name: "Nosotros", id: "#about"},
|
|
{
|
|
name: "Servicios", id: "#services"},
|
|
{
|
|
name: "Productos", id: "#products"},
|
|
{
|
|
name: "Equipo", id: "#team"},
|
|
{
|
|
name: "Testimonios", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contacto", id: "#contact"},
|
|
]}
|
|
brandName="Indira Pérez Salón & Barber Shop"
|
|
button={{
|
|
text: "Reservar Cita", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Transforma Tu Estilo en Indira Pérez Salón & Barber Shop"
|
|
description="Experimenta un servicio de peluquería y barbería excepcional. Cuidado, amor y atención en cada detalle para un cabello hermoso y un look perfecto."
|
|
tag="5 Estrellas de Excelencia"
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{
|
|
text: "Reservar Cita", href: "#contact"},
|
|
{
|
|
text: "Ver Servicios", href: "#services"},
|
|
]}
|
|
buttonAnimation="opacity"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6346.jpg?_wi=1", imageAlt: "Woman getting her hair styled at Indira Pérez Salón"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-applying-cream-clients-beard_107420-94771.jpg?_wi=1", imageAlt: "Barber providing a shave at Indira Pérez Barber Shop"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="(10+ opiniones)"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={true}
|
|
title="Más que un Salón, una Experiencia de Cuidado y Belleza"
|
|
buttons={[
|
|
{
|
|
text: "Conoce a Indira", href: "#team"},
|
|
]}
|
|
buttonAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "haircut", title: "Cortes y Peinados", subtitle: "Estilos modernos y clásicos para todas las edades.", category: "Peluquería", value: "Desde $25"},
|
|
{
|
|
id: "beard-trim", title: "Arreglo de Barba", subtitle: "Cuidado detallado para una barba impecable.", category: "Barbería", value: "Desde $15"},
|
|
{
|
|
id: "color", title: "Color y Mechas", subtitle: "Transformaciones de color vibrantes y naturales.", category: "Peluquería", value: "Desde $60"},
|
|
{
|
|
id: "manicure", title: "Manicure y Pedicure", subtitle: "Cuidado completo para manos y pies.", category: "Belleza", value: "Desde $20"},
|
|
{
|
|
id: "wash", title: "Lavado y Tratamientos", subtitle: "Terapias capilares para la salud de tu cabello.", category: "Spa Capilar", value: "Desde $30"},
|
|
{
|
|
id: "waxing", title: "Depilación", subtitle: "Servicios de depilación facial y corporal.", category: "Estética", value: "Desde $10"},
|
|
]}
|
|
title="Nuestros Servicios Exclusivos"
|
|
description="Ofrecemos una amplia gama de tratamientos y estilos para hombres y mujeres, utilizando productos de alta calidad para resultados espectaculares."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "prod-1", name: "Shampoo Hidratante Deluxe", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plastic-bottles-pink-background_23-2149449755.jpg", imageAlt: "Shampoo Hidratante Deluxe bottle"},
|
|
{
|
|
id: "prod-2", name: "Acondicionador Reparador", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-dispenser-liquid-soap-female-hands-store_169016-52052.jpg", imageAlt: "Acondicionador Reparador bottle"},
|
|
{
|
|
id: "prod-3", name: "Aceite Esencial para Brillo", price: "$34.50", imageSrc: "http://img.b2bpic.net/free-photo/assortment-natural-argan-oil-dropper_23-2149016627.jpg", imageAlt: "Aceite Esencial para Brillo bottle"},
|
|
{
|
|
id: "prod-4", name: "Gel Fijador Extra Fuerte", price: "$18.00", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317383.jpg", imageAlt: "Gel Fijador Extra Fuerte jar"},
|
|
{
|
|
id: "prod-5", name: "Mascarilla Nutritiva Capilar", price: "$42.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-care-product_23-2151918420.jpg", imageAlt: "Mascarilla Nutritiva Capilar tub"},
|
|
{
|
|
id: "prod-6", name: "Spray Protector Térmico", price: "$22.75", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-using-dry-shampoo_23-2150704971.jpg", imageAlt: "Spray Protector Térmico bottle"},
|
|
]}
|
|
title="Productos Recomendados para un Cuidado Duradero"
|
|
description="Mantén tu estilo y la salud de tu cabello en casa con nuestra selección de productos profesionales."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTen
|
|
useInvertedBackground={false}
|
|
title="Conoce a Nuestra Experta Estilista"
|
|
tag="Pasión y Precisión"
|
|
membersAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "indira", name: "Indira Pérez", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-brunette-woman-hairdresser-stylish-black-dress-workplace-modern-beauty-salon_613910-18835.jpg", imageAlt: "Indira Pérez, dueña y estilista principal"},
|
|
{
|
|
id: "carlos", name: "Carlos Rodríguez", imageSrc: "https://img.b2bpic.net/free-photo/handsome-bearded-barber-hairdresser-isolated-gray-background_613910-18836.jpg", imageAlt: "Carlos Rodríguez, barbero experto"},
|
|
{
|
|
id: "laura", name: "Laura García", imageSrc: "https://img.b2bpic.net/free-photo/manicurist-working-with-nail-file-close-up-selective-focus_613910-18844.jpg", imageAlt: "Laura García, especialista en uñas y estética"},
|
|
]}
|
|
memberVariant="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Wendy Perez", date: "Hace un año", title: "Manos Increíbles y Cuidado Excepcional", quote: "Sin duda alguna sus manos son increíbles. Siempre deja el cabello hermoso y lo cuida súper bien. Se nota que le pone toda la atención y el amor a cada detalle de su trabajo, y el resultado siempre es perfecto. El cabello queda brillante y saludable.", tag: "Peluquería", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-bride-young-woman-with-wedding-hairstyle-silk-robe-drinking-looking-bridesmaids-gray-style-robes-standing-spacious-room-near-window_8353-12010.jpg", avatarAlt: "Avatar de Wendy Perez", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6346.jpg?_wi=2", imageAlt: "happy woman after haircut smiling"},
|
|
{
|
|
id: "2", name: "Wendy Franco", date: "Hace 11 meses", title: "Excelente Profesional y Gran Ser Humano", quote: "Sin duda alguna una excelente profesional y gran ser humano, tengo la dicha de ser su clienta y trabaja hermoso...", tag: "Servicio", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg", avatarAlt: "Avatar de Wendy Franco", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-applying-cream-clients-beard_107420-94771.jpg?_wi=2", imageAlt: "happy woman after haircut smiling"},
|
|
{
|
|
id: "3", name: "Mari Medina", date: "Hace un año", title: "Experiencia Espectacular y Trabajo Pulido", quote: "Mi experiencia en el salón de Indira fue espectacular, iniciando por la actitud a la hora de atender a los clientes; Como tal el trabajo que realiza es muy pulido y te deja con un resultado encantador!!! 100% recomendado.", tag: "Atención", avatarSrc: "http://img.b2bpic.net/free-photo/female-visagiste-with-client-smiling-camera_23-2148113181.jpg", avatarAlt: "Avatar de Mari Medina", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barber-shop-concept_23-2148506323.jpg", imageAlt: "happy woman after haircut smiling"},
|
|
{
|
|
id: "4", name: "Sofía G.", date: "Hace 8 meses", title: "Mi Nuevo Look Favorito", quote: "Indira realmente escucha lo que quieres y lo transforma en algo aún mejor. Amé mi corte y color. ¡Volveré seguro!", tag: "Estilo", avatarSrc: "http://img.b2bpic.net/free-photo/male-female-friends-getting-manicure-together_23-2150285918.jpg", avatarAlt: "Avatar de Sofía G.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-moustache-client_23-2147778841.jpg", imageAlt: "happy woman after haircut smiling"},
|
|
{
|
|
id: "5", name: "Juan M.", date: "Hace 6 meses", title: "La Mejor Barbería de Floridablanca", quote: "El servicio de barbería es impecable. Un ambiente excelente y un corte de barba con mucha precisión. Muy recomendado para caballeros.", tag: "Barbería", avatarSrc: "http://img.b2bpic.net/free-photo/young-lady-keeping-fingers-crossed-white-bathrobe-towel-looking-thoughtful-front-view_176474-50997.jpg", avatarAlt: "Avatar de Juan M.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167366.jpg", imageAlt: "happy woman after haircut smiling"},
|
|
{
|
|
id: "6", name: "Camila R.", date: "Hace 4 meses", title: "Relajación y Profesionalismo", quote: "Cada visita es un momento de desconexión. Me encantan los tratamientos capilares y la atención tan cálida. Se nota la dedicación.", tag: "Spa", avatarSrc: "http://img.b2bpic.net/free-photo/mid-aged-couple-love-home_23-2147986300.jpg", avatarAlt: "Avatar de Camila R.", imageSrc: "http://img.b2bpic.net/free-photo/careful-female-messeur-giving-foot-massage-bright-room_176420-55238.jpg", imageAlt: "happy woman after haircut smiling"},
|
|
]}
|
|
title="Lo Que Dicen Nuestros Clientes Felices"
|
|
description="La satisfacción de nuestros clientes es nuestra mayor motivación. Lee algunas de sus experiencias y descubre por qué nos eligen."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "¿Cómo puedo reservar una cita?", content: "Puedes reservar tu cita directamente a través de nuestro botón 'Reservar Cita' en la página web o llamándonos al 350 4579308."},
|
|
{
|
|
id: "q2", title: "¿Cuáles son sus horarios de atención?", content: "Estamos abiertos de miércoles a sábado, de 9 a.m. a 7 p.m. Te recomendamos revisar nuestra sección de contacto para horarios actualizados y días festivos."},
|
|
{
|
|
id: "q3", title: "¿Ofrecen servicios para hombres y mujeres?", content: "Sí, en Indira Pérez Salón & Barber Shop ofrecemos una gama completa de servicios tanto para hombres como para mujeres, incluyendo peluquería, barbería, manicure, pedicure y más."},
|
|
{
|
|
id: "q4", title: "¿Qué tipos de productos utilizan?", content: "Trabajamos con productos profesionales de alta calidad, seleccionados para garantizar los mejores resultados y el máximo cuidado para tu cabello y piel. También tenemos algunos disponibles para compra."},
|
|
{
|
|
id: "q5", title: "¿Puedo cancelar o modificar mi cita?", content: "Sí, puedes cancelar o modificar tu cita con al menos 24 horas de anticipación. Te pedimos que nos contactes directamente para realizar estos cambios."},
|
|
{
|
|
id: "q6", title: "¿Ofrecen tratamientos capilares específicos?", content: "Sí, contamos con una variedad de tratamientos capilares personalizados para hidratación, reparación, control de caída y brillo, adaptados a las necesidades de tu cabello."},
|
|
]}
|
|
title="¿Tienes Preguntas? Resolvemos Tus Dudas"
|
|
description="Encuentra respuestas a las preguntas más frecuentes sobre nuestros servicios, citas y más."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Visítanos Hoy"
|
|
title="Contáctanos o Agenda Tu Cita"
|
|
description="Estamos listos para atenderte. Escríbenos o haz tu reserva en línea para experimentar la diferencia Indira Pérez."
|
|
inputPlaceholder="Tu Correo Electrónico"
|
|
buttonText="Enviar Mensaje"
|
|
termsText="Al enviar, aceptas nuestros Términos y Condiciones."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoSrc="http://img.b2bpic.net/free-vector/retro-labels-collection_1009-305.jpg"
|
|
logoAlt="Indira Pérez Salón & Barber Shop Logo"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Inicio", href: "#hero"},
|
|
{
|
|
label: "Nosotros", href: "#about"},
|
|
{
|
|
label: "Servicios", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Testimonios", href: "#testimonials"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contacto", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Política de Privacidad", href: "#"},
|
|
{
|
|
label: "Términos y Condiciones", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Indira Pérez Salón & Barber Shop"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|