Merge version_2 into main #2
370
src/app/page.tsx
370
src/app/page.tsx
@@ -5,11 +5,12 @@ import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -26,265 +27,128 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Nosotros",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Servicios",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contacto",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Carmen Roca"
|
||||
/>
|
||||
</div>
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<ButtonDirectionalHover
|
||||
text="Reservar Cita"
|
||||
href="#contact"
|
||||
className="shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Tu belleza, nuestro arte, tu confianza"
|
||||
description="Cada corte, cada color, cada tratamiento es diseñado solo para ti. En Carmen Roca, no solo transformamos tu cabello: te devolvemos la seguridad de sentirte hermosa."
|
||||
buttons={[
|
||||
{
|
||||
text: "Reservar mi cita ahora",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=1",
|
||||
imageAlt: "Salon Luxury Interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=1",
|
||||
imageAlt: "Expert Stylist",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=1",
|
||||
imageAlt: "Beauty Atmosphere",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=1",
|
||||
imageAlt: "Satisfied Client",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-work_52683-130989.jpg",
|
||||
imageAlt: "Hair Treatment",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17095.jpg",
|
||||
imageAlt: "Modern Decor",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Inicio", id: "hero" },
|
||||
{ name: "Nosotros", id: "about" },
|
||||
{ name: "Servicios", id: "services" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="Carmen Roca"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Experticia y Pasión"
|
||||
description="Con más de una década transformando la confianza de nuestras clientas, Carmen Roca Peluquería combina técnicas avanzadas con una atención personalizada que entiende tus necesidades."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
title: "Años de experiencia",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
title: "Transformaciones únicas",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
title: "Clientas satisfechas",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-dentist-standing-with-arms-crossed_107420-73977.jpg"
|
||||
imageAlt="Carmen Roca Styling Studio"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "plain" }}
|
||||
title="Tu belleza, nuestro arte, tu confianza"
|
||||
description="Cada corte, cada color, cada tratamiento es diseñado solo para ti. En Carmen Roca, no solo transformamos tu cabello: te devolvemos la seguridad de sentirte hermosa."
|
||||
buttons={[{ text: "Reservar mi cita ahora", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=1", imageAlt: "Salon Luxury Interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=1", imageAlt: "Expert Stylist" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=1", imageAlt: "Beauty Atmosphere" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=1", imageAlt: "Satisfied Client" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-work_52683-130989.jpg", imageAlt: "Hair Treatment" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17095.jpg", imageAlt: "Modern Decor" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Coloración Personalizada",
|
||||
description: "Diseñamos tonos únicos que resaltan tus facciones y cuidan la salud de tu fibra capilar.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=2",
|
||||
imageAlt: "Coloring",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Cortes de Vanguardia",
|
||||
description: "Diseños personalizados adaptados a tu estilo de vida y estructura facial, garantizando confianza.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=2",
|
||||
imageAlt: "Cuts",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Tratamientos de Nutrición",
|
||||
description: "Cuidado intensivo para devolverle el brillo y la vitalidad a tu cabello desde la raíz hasta las puntas.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=2",
|
||||
imageAlt: "Treatments",
|
||||
},
|
||||
]}
|
||||
title="Nuestra Especialidad"
|
||||
description="Servicios de alta gama diseñados para realzar tu belleza natural con total profesionalismo."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Experticia y Pasión"
|
||||
description="Con más de una década transformando la confianza de nuestras clientas, Carmen Roca Peluquería combina técnicas avanzadas con una atención personalizada que entiende tus necesidades."
|
||||
metrics={[
|
||||
{ value: "15+", title: "Años de experiencia" },
|
||||
{ value: "5k+", title: "Transformaciones únicas" },
|
||||
{ value: "98%", title: "Clientas satisfechas" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-dentist-standing-with-arms-crossed_107420-73977.jpg"
|
||||
imageAlt="Carmen Roca Styling Studio"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Laura G.",
|
||||
handle: "Profesional",
|
||||
testimonial: "La mejor atención que he recibido. Entendieron exactamente lo que buscaba para mi cabello.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-office-worker-tallking-lady-black-dress_1157-40482.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elena M.",
|
||||
handle: "Novia",
|
||||
testimonial: "Mi experiencia para el día de mi boda fue impecable. Sentí que estaba en manos de expertos.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bride-getting-hair-done-front-view_23-2149860774.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sofía P.",
|
||||
handle: "Regular",
|
||||
testimonial: "La consistencia y la calidad de los productos me dan la seguridad de volver cada mes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-girl-making-faces_651396-708.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Andrea R.",
|
||||
handle: "Directiva",
|
||||
testimonial: "Carmen Roca no solo me dejó el cabello increíble, sino que me hizo sentir renovada y segura.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Valentina C.",
|
||||
handle: "Clienta Premium",
|
||||
testimonial: "El ambiente es sofisticado y los resultados siempre superan mis expectativas. Altamente recomendado.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Lo que dicen de nosotros"
|
||||
description="Clientas felices que encontraron en Carmen Roca su lugar de confianza y transformación."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: 1, title: "Coloración Personalizada", description: "Diseñamos tonos únicos que resaltan tus facciones y cuidan la salud de tu fibra capilar.", imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-hairbrush_107420-12147.jpg?_wi=2", imageAlt: "Coloring" },
|
||||
{ id: 2, title: "Cortes de Vanguardia", description: "Diseños personalizados adaptados a tu estilo de vida y estructura facial, garantizando confianza.", imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg?_wi=2", imageAlt: "Cuts" },
|
||||
{ id: 3, title: "Tratamientos de Nutrición", description: "Cuidado intensivo para devolverle el brillo y la vitalidad a tu cabello desde la raíz hasta las puntas.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-typing-laptop_23-2148304954.jpg?_wi=2", imageAlt: "Treatments" },
|
||||
]}
|
||||
title="Nuestra Especialidad"
|
||||
description="Servicios de alta gama diseñados para realzar tu belleza natural con total profesionalismo."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "¿Necesito cita previa?",
|
||||
content: "Sí, recomendamos agendar con antelación para garantizar tu espacio y tiempo de atención personalizada.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "¿Tienen servicios de estética?",
|
||||
content: "Sí, ofrecemos una gama integral de tratamientos de estética y cuidado facial profesional.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "¿Trabajan con clientas internacionales?",
|
||||
content: "Absolutamente, nuestro equipo habla varios idiomas para atender a turistas y residentes internacionales.",
|
||||
},
|
||||
]}
|
||||
title="Preguntas Frecuentes"
|
||||
description="Resolvemos tus dudas para que tu experiencia en el salón sea perfecta."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Laura G.", handle: "Profesional", testimonial: "La mejor atención que he recibido. Entendieron exactamente lo que buscaba para mi cabello.", imageSrc: "http://img.b2bpic.net/free-photo/woman-office-worker-tallking-lady-black-dress_1157-40482.jpg" },
|
||||
{ id: "2", name: "Elena M.", handle: "Novia", testimonial: "Mi experiencia para el día de mi boda fue impecable. Sentí que estaba en manos de expertos.", imageSrc: "http://img.b2bpic.net/free-photo/bride-getting-hair-done-front-view_23-2149860774.jpg" },
|
||||
{ id: "3", name: "Sofía P.", handle: "Regular", testimonial: "La consistencia y la calidad de los productos me dan la seguridad de volver cada mes.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-girl-making-faces_651396-708.jpg" },
|
||||
{ id: "4", name: "Andrea R.", handle: "Directiva", testimonial: "Carmen Roca no solo me dejó el cabello increíble, sino que me hizo sentir renovada y segura.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg" },
|
||||
{ id: "5", name: "Valentina C.", handle: "Clienta Premium", testimonial: "El ambiente es sofisticado y los resultados siempre superan mis expectativas. Altamente recomendado.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-dress-playing-with-hair-smiling-looking-thoughtful-standing-white-copy-space_176420-41096.jpg?_wi=2" },
|
||||
]}
|
||||
title="Lo que dicen de nosotros"
|
||||
description="Clientas felices que encontraron en Carmen Roca su lugar de confianza y transformación."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contacto"
|
||||
title="Agenda tu transformación"
|
||||
description="Estamos listos para atenderte. Reserva tu espacio y comienza tu viaje de belleza."
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "¿Necesito cita previa?", content: "Sí, recomendamos agendar con antelación para garantizar tu espacio y tiempo de atención personalizada." },
|
||||
{ id: "f2", title: "¿Tienen servicios de estética?", content: "Sí, ofrecemos una gama integral de tratamientos de estética y cuidado facial profesional." },
|
||||
{ id: "f3", title: "¿Trabajan con clientas internacionales?", content: "Absolutamente, nuestro equipo habla varios idiomas para atender a turistas y residentes internacionales." },
|
||||
]}
|
||||
title="Preguntas Frecuentes"
|
||||
description="Resolvemos tus dudas para que tu experiencia en el salón sea perfecta."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bright-interior-cozy-room-with-chair-home-decor-modern-interior-details-decor_169016-4204.jpg"
|
||||
imageAlt="Carmen Roca Salon"
|
||||
columns={[
|
||||
{
|
||||
title: "Servicios",
|
||||
items: [
|
||||
{
|
||||
label: "Corte y Color",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Estética Facial",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Nosotros",
|
||||
items: [
|
||||
{
|
||||
label: "Nuestro Equipo",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Trayectoria",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto",
|
||||
items: [
|
||||
{
|
||||
label: "Reservas",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Ubicación",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contacto"
|
||||
title="Agenda tu transformación"
|
||||
description="Estamos listos para atenderte. Reserva tu espacio y comienza tu viaje de belleza."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Carmen Roca"
|
||||
columns={[
|
||||
{ items: [{ label: "Servicios", href: "#services" }, { label: "Corte y Color", href: "#services" }] },
|
||||
{ items: [{ label: "Nosotros", href: "#about" }, { label: "Nuestro Equipo", href: "#about" }] },
|
||||
{ items: [{ label: "Reservas", href: "#contact" }, { label: "Ubicación", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-source-sans-3), sans-serif;
|
||||
font-family: var(--font-playfair), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-source-sans-3), sans-serif;
|
||||
font-family: var(--font-playfair), sans-serif;
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #c6b180;
|
||||
--background: #F5F1ED;
|
||||
--card: #FEFDFB;
|
||||
--foreground: #2C2C2C;
|
||||
--primary-cta: #D4AF8F;
|
||||
--primary-cta-text: #2b180a;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta: #2C2C2C;
|
||||
--secondary-cta-text: #2b180a;
|
||||
--accent: #2b180a;
|
||||
--background-accent: #afa094;
|
||||
--accent: #D4AF8F;
|
||||
--background-accent: #D4AF8F;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user