231 lines
14 KiB
TypeScript
231 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Instagram, Facebook, Twitter } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="BUBBU"
|
|
navItems={[
|
|
{ name: "Inicio", id: "#hero" },
|
|
{ name: "Sobre Nosotros", id: "#about" },
|
|
{ name: "Servicios", id: "#services" },
|
|
{ name: "Galería", id: "#gallery" },
|
|
{ name: "Testimonios", id: "#testimonials" },
|
|
{ name: "Contacto", id: "#contact" }
|
|
]}
|
|
button={{
|
|
text: "Reservar Cita", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="BUBBU"
|
|
description="En Bubbu transformamos cada visita en una experiencia de bienestar, cuidado y cariño. Baños profesionales, cortes especializados y atención personalizada para que tu compañero salga limpio, feliz y más hermoso que nunca."
|
|
buttons={[
|
|
{ text: "Reservar Cita", href: "#contact" },
|
|
{ text: "WhatsApp", href: "https://wa.me/###########" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/front-view-beautiful-woman-dog_23-2148777162.jpg"
|
|
imageAlt="Perro feliz después de un tratamiento de estética en Bubbu"
|
|
mediaAnimation="background-highlight"
|
|
buttonAnimation="text-stagger"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Hero section"
|
|
/>
|
|
</div>
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Más que una peluquería canina"
|
|
description="Sabemos que tu mascota es parte de tu familia. Por eso brindamos una experiencia segura, cómoda y llena de atención personalizada para que cada visita sea especial."
|
|
metrics={[
|
|
{ value: "🐾", title: "Trato Cariñoso" },
|
|
{ value: "🧼", title: "Ambiente Limpio" },
|
|
{ value: "✨", title: "Productos Premium" },
|
|
{ value: "💖", title: "Profesionales Apasionados" },
|
|
{ value: "🐶", title: "Resultados que Enamoran" },
|
|
{ value: "💬", title: "Atención Personalizada" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-girl-posing-with-dog_23-2148861605.jpg"
|
|
imageAlt="Personal de Bubbu con un perro en un ambiente acogedor"
|
|
useInvertedBackground={true}
|
|
mediaAnimation="text-stagger"
|
|
metricsAnimation="text-stagger"
|
|
ariaLabel="About section"
|
|
/>
|
|
</div>
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentySeven
|
|
title="Todo lo que tu mascota necesita"
|
|
description="Ofrecemos una gama completa de servicios de estética y peluquería para garantizar que tu amigo peludo se vea y se sienta lo mejor posible."
|
|
features={[
|
|
{
|
|
id: "s1", title: "Baño Premium", descriptions: ["Limpieza profunda con productos suaves que dejan el pelaje limpio, brillante y perfumado."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48809.jpg", imageAlt: "Perro disfrutando de un baño premium"
|
|
},
|
|
{
|
|
id: "s2", title: "Corte y Estilismo", descriptions: ["Cortes adaptados a cada raza, personalidad y necesidad."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/washing-process-small-dog-sits-table-dog-spaying-by-professional_1157-48817.jpg", imageAlt: "Perro recibiendo un corte de pelo especializado"
|
|
},
|
|
{
|
|
id: "s3", title: "Cepillado Profesional", descriptions: ["Eliminamos nudos y ayudamos a mantener un pelaje saludable y sin enredos."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-cleaning-product_23-2148104525.jpg", imageAlt: "Perro siendo cepillado profesionalmente"
|
|
},
|
|
{
|
|
id: "s4", title: "Limpieza e Higiene", descriptions: ["Cuidado integral para orejas, ojos y dientes, para que tu mascota se sienta cómoda y feliz."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-cleaning-dog_23-2149652645.jpg", imageAlt: "Groomer realizando limpieza dental a un perro"
|
|
}
|
|
]}
|
|
animationType="entrance-slide"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Feature section"
|
|
/>
|
|
</div>
|
|
<div id="experience" data-section="experience">
|
|
<MetricCardTwo
|
|
title="Porque ellos también merecen un día de spa"
|
|
description="Desde el momento en que llegan, nuestros visitantes reciben atención cálida, paciencia y cuidado. Nos tomamos el tiempo para conocer a cada mascota, respetar su personalidad y brindar una experiencia libre de estrés. Nuestro objetivo no es solamente que se vean bien. Queremos que se sientan bien."
|
|
metrics={[
|
|
{ id: "m1", value: "🧡", description: "Cuidado con Amor" },
|
|
{ id: "m2", value: "🐾", description: "Bienestar Asegurado" },
|
|
{ id: "m3", value: "✨", description: "Transformación Feliz" }
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="entrance-3d-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Metrics section"
|
|
/>
|
|
</div>
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Lo que dicen nuestros clientes"
|
|
description="La satisfacción de nuestros clientes y el bienestar de sus mascotas son nuestra mayor recompensa. Lee algunas de las experiencias que nos han compartido."
|
|
testimonials={[
|
|
{ id: "t1", name: "Sofía M.", role: "Dueña de Max", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-pet-lifestyle_23-2149180492.jpg", imageAlt: "Sofía M. con su perro Max" },
|
|
{ id: "t2", name: "Carlos P.", role: "Dueño de Bella", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-showing-his-cute-dog-pointing-finger-black-pug-smiling-standing-white-background_1258-75843.jpg", imageAlt: "Carlos P. con su perro Bella" },
|
|
{ id: "t3", name: "Ana L.", role: "Dueña de Toby", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/adorable-chihuahua-dog-with-female-owner_23-2149880067.jpg", imageAlt: "Ana L. con su perro Toby" },
|
|
{ id: "t4", name: "Diego R.", role: "Dueño de Luna", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/girls-dog-sitting-row_329181-8186.jpg", imageAlt: "Diego R. con su perro Luna" },
|
|
{ id: "t5", name: "Valeria G.", role: "Dueña de Coco", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/old-person-with-their-pet-dog_23-2149429288.jpg", imageAlt: "Valeria G. con su perro Coco" },
|
|
{ id: "t6", name: "Javier S.", role: "Dueño de Pelusa", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-couple-summer-forest-with-dogs_1157-22792.jpg", imageAlt: "Javier S. con su perro Pelusa" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "5", label: "Estrellas" },
|
|
{ value: "+100", label: "Clientes Felices" },
|
|
{ value: "+5", label: "Años de Experiencia" }
|
|
]}
|
|
animationType="entrance-3d-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Testimonials section"
|
|
/>
|
|
</div>
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardFour
|
|
title="Galería de la Belleza Canina"
|
|
description="Explora la magia de Bubbu con nuestras fotos de antes y después, y momentos felices de nuestros clientes."
|
|
products={[
|
|
{ id: "p1", name: "Antes y Después", price: "Transformación", variant: "Corte de Razas", imageSrc: "http://img.b2bpic.net/free-photo/girl-her-dogs-high-view_23-2148797471.jpg", imageAlt: "Perro antes y después del grooming" },
|
|
{ id: "p2", name: "Clientes Felices", price: "Sonrisas Peludas", variant: "Sesiones de Juego", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-kitchen-holding-cute-white-maltese-dog_1153-9862.jpg", imageAlt: "Perro feliz después del baño" },
|
|
{ id: "p3", name: "Momentos de Spa", price: "Relajación Total", variant: "Baños Relajantes", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-her-cute-french-bulldog-warm-outfit_1303-19383.jpg", imageAlt: "Perro relajándose en el spa" },
|
|
{ id: "p4", name: "Cortes Especializados", price: "Estilo Único", variant: "Pelaje Brillante", imageSrc: "http://img.b2bpic.net/free-photo/cute-dog-sitting-bag_52683-123651.jpg", imageAlt: "Perro con un corte de pelo elegante" },
|
|
{ id: "p5", name: "Baños Premium", price: "Frescura y Limpieza", variant: "Aroma Duradero", imageSrc: "http://img.b2bpic.net/free-photo/portrait-adorable-beagle-taking-bath_23-2151793761.jpg", imageAlt: "Perro limpio y fresco después del baño" },
|
|
{ id: "p6", name: "Amigos Peludos", price: "Amor Incondicional", variant: "Momentos Bubbu", imageSrc: "http://img.b2bpic.net/free-photo/cute-teenage-girl-with-dog-pet-girl-playing-with-her-pet-dog-home_169016-68107.jpg", imageAlt: "Perro juguetón en el salón" }
|
|
]}
|
|
gridVariant="bento-grid"
|
|
animationType="entrance-slide"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Product section"
|
|
/>
|
|
</div>
|
|
<div id="why-choose-us" data-section="why-choose-us">
|
|
<SocialProofOne
|
|
title="Tu tranquilidad es nuestra prioridad"
|
|
description="Sabemos que dejar a tu mascota en manos de alguien más requiere confianza. Por eso trabajamos con los más altos estándares de calidad y cariño."
|
|
names={[
|
|
"Atención amable y cercana", "Espacios limpios y seguros", "Técnicas profesionales", "Productos seleccionados", "Paciencia y cariño", "Resultados garantizados"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showCard={false}
|
|
ariaLabel="Social proof section"
|
|
/>
|
|
</div>
|
|
<div id="promo" data-section="promo">
|
|
<PricingCardNine
|
|
title="Primera visita con regalo especial"
|
|
description="Agenda hoy y permite que tu mascota disfrute una experiencia Bubbu. Porque cada peludito merece verse espectacular."
|
|
plans={[
|
|
{
|
|
id: "promo", title: "Paquete de Bienvenida", price: "¡Gratis!", period: "Con tu primer baño y corte", features: ["Baño Premium", "Corte y Estilismo", "Cepillado Profesional", "Regalo sorpresa"],
|
|
button: { text: "Reservar Ahora", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-fancy-man-glasses-raising-glass-champagne-giving-microphone-cute-pug-party_1258-180850.jpg", imageAlt: "Perro feliz con un lazo de regalo"
|
|
},
|
|
{
|
|
id: "premium", title: "Paquete Completo", price: "$50", period: "Por servicio", features: ["Baño Premium","Corte y Estilismo","Cepillado Profesional","Limpieza de Oídos y Dientes"],
|
|
button: {text:"Ver Detalles",href:"#services"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fluffy-white-dog_23-2148777143.jpg", imageAlt: "Perro con un pelaje brillante"
|
|
}
|
|
]}
|
|
animationType="entrance-slide"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Pricing section"
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Tu mascota merece lo mejor.\nHaz que cada baño sea una experiencia de bienestar, belleza y amor. Reserva hoy mismo y descubre por qué tantas familias confían en Bubbu."
|
|
buttons={[
|
|
{ text: "AGENDAR CITA", href: "#" },
|
|
{ text: "ESCRIBIR POR WHATSAPP", href: "https://wa.me/###########" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Contact section"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="BUBBU"
|
|
copyrightText="© 2024 Bubbu. Todos los derechos reservados."
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
|
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
|
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
|
|
]}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|