236 lines
13 KiB
TypeScript
236 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Sparkles } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Servicios", id: "services" },
|
|
{ name: "Productos", id: "products" },
|
|
{ name: "Nosotros", id: "about" },
|
|
{ name: "Testimonios", id: "testimonials" },
|
|
{ name: "Contacto", id: "contact" }
|
|
]}
|
|
button={{ text: "Reservar Cita", href: "contact" }}
|
|
brandName="Cloud Studio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Cloud Studio"
|
|
description="Tu espacio de bienestar y estética integral. Servicios premium de maquillaje, uñas, tratamientos faciales, corporales, radiofrecuencia facial, masaje facial y cuidado experto en cejas y pestañas."
|
|
buttons={[
|
|
{ text: "Reservar Cita", href: "contact" },
|
|
{ text: "Conoce Nuestros Servicios", href: "services" }
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-woman-relaxing-spa-salon_176420-7544.jpg"
|
|
imageAlt="Studio de belleza y bienestar premium"
|
|
frameStyle="card"
|
|
mediaAnimation="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "En Cloud Studio creamos experiencias de" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/process-removing-jellied-alginate-mask-from-face-woman-facial-rejuvenation-procedure-skin-care-beauty-salon_158595-7719.jpg", alt: "Tratamiento profesional de belleza" },
|
|
{ type: "text", content: "lujo y bienestar bajo un mismo techo" }
|
|
]}
|
|
buttons={[{ text: "Ver Más", href: "services" }]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Productos Profesionales Premium"
|
|
description="Continúa tu rutina de cuidado en casa con nuestros productos profesionales de marcas líderes en la industria. Mantén los resultados de tus tratamientos y cuida tu piel con expertos."
|
|
tag="Skincare de Lujo"
|
|
products={[
|
|
{
|
|
id: "1", name: "iS Clinical Serum", price: "$85.000 - $120.000", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cosmetic-products-arangement_23-2148978203.jpg", imageAlt: "Productos iS Clinical profesionales"
|
|
},
|
|
{
|
|
id: "2", name: "Centella's Essence", price: "$65.000 - $95.000", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-aesthetic-cosmetic-product-with-fresh-background_23-2151382789.jpg", imageAlt: "Productos Centella's profesionales"
|
|
},
|
|
{
|
|
id: "3", name: "Tratamientos Especializados", price: "$40.000 - $75.000", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-wearing-eye-patches_23-2149628033.jpg", imageAlt: "Productos para lashes y cejas"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
title="Nuestros Servicios Especializados"
|
|
description="Acceso a tratamientos de belleza y bienestar de clase mundial, con profesionales certificados y productos de primera calidad."
|
|
tag="Servicios"
|
|
features={[
|
|
{
|
|
title: "Maquillaje Profesional", description: "Maquillaje artístico para eventos, novias y makeup diario con técnicas profesionales.", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Cuidado de Uñas", description: "Manicura, pedicura y diseños creativos con productos de última generación.", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Tratamientos Faciales", description: "Limpiezas profundas, hidratación y tratamientos anti-edad personalizados.", bentoComponent: "map"
|
|
},
|
|
{
|
|
title: "Radiofrecuencia Facial", description: "Tecnología RF para lifting, reducción de arrugas y rejuvenecimiento sin cirugía.", bentoComponent: "line-chart"
|
|
},
|
|
{
|
|
title: "Masaje Facial", description: "Relajación, mejora de circulación y rejuvenecimiento con técnicas ancestrales y modernas.", bentoComponent: "reveal-icon", icon: Sparkles
|
|
},
|
|
{
|
|
title: "Cejas y Pestañas", description: "Lifting, laminado, extensiones y diseño experto en cejas y pestañas.", bentoComponent: "globe"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Cloud Studio cambió completamente mi relación con el cuidado personal. Los profesionales son expertos, los productos son de primera calidad y la experiencia es totalmente relajante. Recomiendo ampliamente todos sus servicios."
|
|
rating={5}
|
|
author="María González, Cliente Regular"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/attractive-young-woman-standing-looking-mirror_7502-7379.jpg", alt: "María González" },
|
|
{ src: "http://img.b2bpic.net/free-photo/blonde-woman-floral-dress-cafe_273609-4288.jpg", alt: "Cliente Cloud Studio" },
|
|
{ src: "http://img.b2bpic.net/free-photo/beauty-face-young-woman-skin-care-concept-closeup-portrait-isolated-white_1258-104364.jpg", alt: "Cliente satisfecho" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-enterprising-young-woman-making-remark-holding-forefinger-up_1262-14330.jpg", alt: "Cliente Cloud Studio" },
|
|
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg", alt: "Cliente regular" },
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133185.jpg", alt: "Cliente satisfecho Cloud Studio" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Preguntas Frecuentes"
|
|
description="Resuelve tus dudas sobre nuestros servicios, productos y cómo reservar tu cita."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "¿Cómo reservo una cita en Cloud Studio?", content: "Puedes reservar tu cita a través de nuestro formulario de contacto, llamándonos directamente o visitando nuestro estudio. Nos adaptamos a tu horario y disponibilidad."
|
|
},
|
|
{
|
|
id: "2", title: "¿Cuáles son los productos que utilizan?", content: "Trabajamos con marcas profesionales premium como iS Clinical y Centella's, reconocidas internacionalmente por su calidad y resultados efectivos en cuidado de la piel."
|
|
},
|
|
{
|
|
id: "3", title: "¿Los tratamientos son personalizados?", content: "Sí, cada cliente recibe una evaluación inicial para crear un plan de tratamiento personalizado según sus necesidades específicas de piel y objetivos de belleza."
|
|
},
|
|
{
|
|
id: "4", title: "¿Cuánto duran típicamente los tratamientos?", content: "La duración varía según el servicio: maquillaje (45-90 min), manicura/pedicura (60-90 min), faciales (60-120 min), radiofrecuencia (60 min), masaje facial (50 min), cejas y pestañas (30-45 min)."
|
|
},
|
|
{
|
|
id: "5", title: "¿Ofrecen paquetes o membresías?", content: "Sí, disponemos de paquetes especiales y planes de membresía con descuentos exclusivos para clientes frecuentes. Contacta para conocer nuestras promociones actuales."
|
|
},
|
|
{
|
|
id: "6", title: "¿Los profesionales están certificados?", content: "Absolutamente. Nuestro equipo está completamente certificado en sus respectivas disciplinas con formación continua en las últimas técnicas y tendencias de la industria."
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/dermatologist-performing-laser-hair-removal-patient_107420-65627.jpg"
|
|
imageAlt="Tratamiento facial profesional en Cloud Studio"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Contáctanos"
|
|
title="Reserva tu cita y comienza tu transformación"
|
|
description="Suscríbete a nuestro newsletter para recibir consejos de belleza, promociones exclusivas y actualizaciones sobre nuevos servicios y productos premium."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="tu@email.com"
|
|
buttonText="Suscribirse"
|
|
termsText="Al suscribirte aceptas recibir comunicaciones de Cloud Studio. Respetamos tu privacidad."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Cloud Studio"
|
|
columns={[
|
|
{
|
|
title: "Servicios", items: [
|
|
{ label: "Maquillaje Profesional", href: "#services" },
|
|
{ label: "Cuidado de Uñas", href: "#services" },
|
|
{ label: "Tratamientos Faciales", href: "#services" },
|
|
{ label: "Radiofrecuencia y Masaje Facial", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Productos", items: [
|
|
{ label: "iS Clinical", href: "#products" },
|
|
{ label: "Centella's", href: "#products" },
|
|
{ label: "Skincare Premium", href: "#products" },
|
|
{ label: "Consulta Personalizada", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Empresa", items: [
|
|
{ label: "Sobre Nosotros", href: "#about" },
|
|
{ label: "Testimonios", href: "#testimonials" },
|
|
{ label: "Preguntas Frecuentes", href: "#faq" },
|
|
{ label: "Contacto", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Política de Privacidad", href: "#" },
|
|
{ label: "Términos de Servicio", href: "#" },
|
|
{ label: "Política de Cookies", href: "#" },
|
|
{ label: "Política de Devoluciones", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Cloud Studio. Todos los derechos reservados. Belleza y bienestar integral."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|