Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5bd33b9dbe | |||
| 8d38aea2cd | |||
| 4ee216da80 | |||
| 6a947b40c5 | |||
| f090b99cea |
315
src/app/page.tsx
315
src/app/page.tsx
@@ -2,8 +2,8 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
@@ -29,71 +29,29 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Servicios",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Tienda",
|
||||
id: "product",
|
||||
},
|
||||
{
|
||||
name: "Contacto",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Inicio", id: "hero" },
|
||||
{ name: "Sobre Nosotros", id: "about" },
|
||||
{ name: "Servicios", id: "pricing" },
|
||||
{ name: "Productos", id: "product" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="Estudio Capilar"
|
||||
brandName="Estudio Capilar Colombia"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Expertos en Estilo y Color Capilar en Colombia"
|
||||
description="Desde alisados perfectos hasta balayage de diseño. Transformamos tu cabello con técnicas personalizadas y productos premium."
|
||||
buttons={[
|
||||
{
|
||||
text: "Reservar Cita",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Expertos en Arte Capilar Colombiano"
|
||||
description="Transformamos tu cabello con técnicas de vanguardia, desde alisados de seda hasta balayage de diseño. Productos premium diseñados para el cabello latino."
|
||||
buttons={[{ text: "Reserva tu cita", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=1",
|
||||
imageAlt: "Salon Luxury",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=2",
|
||||
imageAlt: "Hair Transformation",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=3",
|
||||
imageAlt: "Balayage Technique",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=4",
|
||||
imageAlt: "Color Styling",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=5",
|
||||
imageAlt: "Hair Care",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=6",
|
||||
imageAlt: "Professional Result",
|
||||
},
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=1", imageAlt: "Salon luxury hair" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=2", imageAlt: "Professional colorist" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=3", imageAlt: "Healthy hair results" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=4", imageAlt: "Colombian salon aesthetics" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=5", imageAlt: "Balayage mastery" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=6", imageAlt: "Natural hair care" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -101,13 +59,8 @@ export default function LandingPage() {
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Tu mejor versión comienza aquí"
|
||||
buttons={[
|
||||
{
|
||||
text: "Conoce más",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
title="El corazón de la belleza capilar en Colombia"
|
||||
buttons={[{ text: "Nuestra Historia", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -116,61 +69,13 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Nuestros Servicios Estrella"
|
||||
description="Tratamientos exclusivos adaptados a la textura y necesidades de tu cabello."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Alisado Especial",
|
||||
price: "Desde $250.000",
|
||||
period: "sesión",
|
||||
features: [
|
||||
"Alisado progresivo",
|
||||
"Protección térmica",
|
||||
"Brillo intenso",
|
||||
],
|
||||
button: {
|
||||
text: "Reservar",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-pretty-blonde-young-woman-shaking-her-hair_171337-15461.jpg?_wi=7",
|
||||
imageAlt: "modern hair salon interior luxury",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Balayage Diseño",
|
||||
price: "Desde $350.000",
|
||||
period: "sesión",
|
||||
features: [
|
||||
"Diseño personalizado",
|
||||
"Tono natural",
|
||||
"Tratamiento de sellado",
|
||||
],
|
||||
button: {
|
||||
text: "Reservar",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-hairdresser-pink-t-shirt-black-cape-holding-brush-scissors-smiling-green_140725-24204.jpg",
|
||||
imageAlt: "hair stylist professional portrait",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "Color a Pedido",
|
||||
price: "Desde $180.000",
|
||||
period: "sesión",
|
||||
features: [
|
||||
"Tintura premium",
|
||||
"Cuidado post-color",
|
||||
"Brillo de salón",
|
||||
],
|
||||
button: {
|
||||
text: "Reservar",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232288.jpg?_wi=1",
|
||||
imageAlt: "hair serum bottle mock-up",
|
||||
},
|
||||
{ id: "p1", title: "Alisado de Seda", price: "Desde $250.000", period: "sesión", features: ["Nutrición profunda", "Efecto espejo", "Anti-frizz"], button: { text: "Reservar", href: "#contact" } },
|
||||
{ id: "p2", title: "Balayage Premium", price: "Desde $380.000", period: "sesión", features: ["Diseño a medida", "Protección capilar", "Brillo intenso"], button: { text: "Reservar", href: "#contact" } },
|
||||
{ id: "p3", title: "Color & Vitalidad", price: "Desde $190.000", period: "sesión", features: ["Tintura premium", "Sellado de cutícula", "Hidratación"], button: { text: "Reservar", href: "#contact" } },
|
||||
]}
|
||||
title="Nuestros Servicios"
|
||||
description="Tratamientos personalizados según tu tipo de cabello y estilo personal."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -178,66 +83,15 @@ export default function LandingPage() {
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Línea Exclusiva de Cuidado"
|
||||
description="Lleva la calidad de nuestro salón a tu hogar con productos desarrollados para el clima y tipo de cabello colombiano."
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Estudio",
|
||||
name: "Serum Hidratante",
|
||||
price: "$45.000",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232288.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Estudio",
|
||||
name: "Mascarilla Reparadora",
|
||||
price: "$60.000",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-close-up-shot-jar-honey-with-flowers-leaves_23-2148346577.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Estudio",
|
||||
name: "Spray Protector",
|
||||
price: "$35.000",
|
||||
rating: 4,
|
||||
reviewCount: "40",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/snapshot-beautiful-lady-white-wall-girl-refuses-use-shampoo-with-chemicals-favor-natural_197531-13863.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Estudio",
|
||||
name: "Aceite Esencial",
|
||||
price: "$50.000",
|
||||
rating: 5,
|
||||
reviewCount: "200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-product-container-with-art-nouveau-inspired-sun-relief-background_23-2151420642.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Estudio",
|
||||
name: "Tónico Capilar",
|
||||
price: "$40.000",
|
||||
rating: 4,
|
||||
reviewCount: "65",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-supplies-bottle-with-spray-pump_23-2147711586.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Estudio",
|
||||
name: "Acondicionador Profundo",
|
||||
price: "$55.000",
|
||||
rating: 5,
|
||||
reviewCount: "150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-silk-pillow-skincare-product_23-2151968642.jpg",
|
||||
},
|
||||
{ id: "1", brand: "Capilar", name: "Serum Nutritivo", price: "$45.000", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232288.jpg?_wi=2" },
|
||||
{ id: "2", brand: "Capilar", name: "Mascarilla Reparadora", price: "$60.000", rating: 5, reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/top-view-close-up-shot-jar-honey-with-flowers-leaves_23-2148346577.jpg" },
|
||||
{ id: "3", brand: "Capilar", name: "Spray de Brillo", price: "$35.000", rating: 4, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/snapshot-beautiful-lady-white-wall-girl-refuses-use-shampoo-with-chemicals-favor-natural_197531-13863.jpg" },
|
||||
]}
|
||||
title="Catálogo de Cuidado Capilar"
|
||||
description="Productos digitales y físicos para mantener tu cabello siempre radiante."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -245,108 +99,39 @@ export default function LandingPage() {
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Historias de nuestras clientas"
|
||||
description="La confianza es nuestra mayor recompensa. Descubre por qué somos referencia en el país."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Camila R.",
|
||||
role: "Cliente frecuente",
|
||||
company: "Bogotá",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nice-woman-with-photo-frame_1187-5662.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Daniela G.",
|
||||
role: "Balayage lover",
|
||||
company: "Medellín",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman_1303-10235.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Lucía P.",
|
||||
role: "Alisado premium",
|
||||
company: "Cali",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-giving-themselves-scalp-massage_23-2151307470.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sofia M.",
|
||||
role: "Color personalizado",
|
||||
company: "Cartagena",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229812.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Valentina H.",
|
||||
role: "Cuidado capilar",
|
||||
company: "Barranquilla",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-businesswomen-working-office_23-2147955077.jpg",
|
||||
},
|
||||
{ id: "1", name: "María C.", role: "Cliente frecuente", company: "Bogotá", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/nice-woman-with-photo-frame_1187-5662.jpg" },
|
||||
{ id: "2", name: "Lucía P.", role: "Balayage Look", company: "Medellín", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman_1303-10235.jpg" },
|
||||
]}
|
||||
title="Lo que dicen nuestras clientas"
|
||||
description="Experiencias de transformación capilar con nosotros."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contacto"
|
||||
title="Agenda tu cita hoy"
|
||||
description="Reserva tu espacio llamando o vía WhatsApp. Estamos listos para consentirte."
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp: +57 300 000 0000",
|
||||
href: "https://wa.me/573000000000",
|
||||
},
|
||||
title="¿Lista para un cambio?"
|
||||
description="Escríbenos y nuestro equipo te contactará para agendar tu cita de asesoría gratuita."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Tu nombre", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Tu teléfono (WhatsApp)", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Cuéntanos qué tratamiento buscas...", rows: 4 }}
|
||||
buttonText="Enviar consulta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navegación",
|
||||
items: [
|
||||
{
|
||||
label: "Inicio",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Servicios",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Catálogo",
|
||||
href: "#product",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Política de Privacidad",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Términos y Condiciones",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterLogoEmphasis
|
||||
logoText="Estudio Capilar"
|
||||
columns={[
|
||||
{ items: [{ label: "Inicio", href: "#hero" }, { label: "Sobre Nosotros", href: "#about" }, { label: "Servicios", href: "#pricing" }] },
|
||||
{ items: [{ label: "Productos", href: "#product" }, { label: "WhatsApp: +57 300 000 0000" }] },
|
||||
{ items: [{ label: "Carrera 15 # 93-45, Bogotá" }, { label: "Lun-Sáb: 9am - 7pm" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user