Merge version_2_1783032760399 into main

Merge version_2_1783032760399 into main
This commit was merged in pull request #3.
This commit is contained in:
2026-07-02 22:55:12 +00:00
7 changed files with 274 additions and 116 deletions

View File

@@ -1,125 +1,31 @@
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import ContactCta from '@/components/sections/contact/ContactCta';
import FeaturesBento from '@/components/sections/features/FeaturesBento';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in the sibling sections/ folder (one file per section).
// Edit those section files directly. Non-block content (wrappers,
// non-inlinable sections) is preserved inline; extracted section blocks
// become component refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import ProductosSection from './HomePage/sections/Productos';
import PorQueElegirnosSection from './HomePage/sections/PorQueElegirnos';
import GaleriaSection from './HomePage/sections/Galeria';
import OpinionesSection from './HomePage/sections/Opiniones';
import ContactoSection from './HomePage/sections/Contacto';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardCarousel
tag="Calidad Premium"
title="Transforma tu estilo hoy mismo"
description="Extensiones de cabello 100% natural para un look radiante y lleno de volumen."
primaryButton={{ text: "Ver Catálogo", href: "#productos" }}
secondaryButton={{ text: "Contactar", href: "#contacto" }}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/fashion-girls-city_1157-4965.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/graceful-lady-with-long-blonde-hair-having-fun-weekend-posing-with-pleasure-enthusiastic-caucasian-woman-with-tanned-skin-laughing-while-standing-near-window_197531-9221.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5406.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-lady-posing-black-dress_549566-282.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-beautiful-young-woman-looking-camera_1301-4449.jpg" },
]}
textAnimation="slide-up"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="productos" data-section="productos">
<SectionErrorBoundary name="productos">
<FeaturesImageBento
tag="Nuestra Selección"
title="Extensiones de alta gama"
description="Elige entre nuestra amplia variedad de tonos y texturas diseñadas para mezclarse perfectamente."
items={[
{ title: "Clip-in Premium", description: "Fáciles y versátiles.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-caucasian-smiling-brunette-woman-model-bright-pink-summer-stylish-clothes-isolated-white-background_158538-2977.jpg" },
{ title: "Tape-in Invisible", description: "Efecto natural garantizado.", imageSrc: "http://img.b2bpic.net/free-photo/showing-cute-portrait-fresh-holding_1187-6233.jpg" },
{ title: "Keratin Fusion", description: "Durabilidad a largo plazo.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-composition-with-basket_23-2147817685.jpg" },
{ title: "Micro Rings", description: "Sin adhesivos químicos.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-curly-hair-shampoo_23-2151307479.jpg" },
{ title: "Bundles de seda", description: "Brillo incomparable.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-shiny-flowing-brown-hair-beauty-portrait_23-2151989124.jpg" },
{ title: "Kit de Mantenimiento", description: "Todo para tu cuidado.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-products-assortment_23-2148491140.jpg" },
{ title: "Técnicas Personalizadas", description: "Adapta tu diseño.", imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-supplies-spray-bottle_23-2148352921.jpg" },
]}
textAnimation="fade-blur"
/>
</SectionErrorBoundary>
</div>
<ProductosSection />
<div id="por-que-elegirnos" data-section="por-que-elegirnos">
<SectionErrorBoundary name="por-que-elegirnos">
<AboutTestimonial
tag="Experiencia"
quote="Nuestras extensiones son seleccionadas manualmente para asegurar la máxima calidad, suavidad y durabilidad, proporcionando una experiencia de lujo en cada aplicación."
author="María Elena"
role="Fundadora y Estilista Senior"
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"
textAnimation="fade"
/>
</SectionErrorBoundary>
</div>
<PorQueElegirnosSection />
<div id="galeria" data-section="galeria">
<SectionErrorBoundary name="galeria">
<FeaturesBento
tag="Estilos Realizados"
title="Inspiración para tu nuevo look"
description="Mira cómo nuestras clientas han transformado su cabello con nuestros servicios."
features={[
{
title: "Transformaciones Increíbles",
description: "Mira el antes y después de nuestras clientas.",
bentoComponent: "media-stack",
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2509.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-sensual-brunette-female-with-long-curly-hair-dressed-warm-black-pullover_613910-7398.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-black-crop-top-standing-white-background-high-quality-photo_114579-52859.jpg" }]
},
{
title: "Calidad Certificada",
description: "Nuestros estándares de seguridad.",
bentoComponent: "checklist-timeline",
heading: "Pasos hacia la excelencia",
subheading: "Desde la selección hasta el mantenimiento",
checklistItems: [{ label: "Selección del cabello", detail: "100% natural, grado premium." }, { label: "Aplicación profesional", detail: "Respetando la salud capilar." }, { label: "Guía de mantenimiento", detail: "Cuidado duradero garantizado." }],
completedLabel: "Look final"
}
]}
textAnimation="slide-up"
/>
</SectionErrorBoundary>
</div>
<GaleriaSection />
<div id="opiniones" data-section="opiniones">
<SectionErrorBoundary name="opiniones">
<TestimonialTrustCard
quote="¡Simplemente fascinada! El color es exacto y la textura increíblemente suave. Son las mejores extensiones que he usado en años."
rating={5}
author="Sofía C."
avatars={[
{ name: "Ana", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg" },
{ name: "Beatriz", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-girl-with-blonde-wavy-hair-modern-luxury-room-young-woman-smiling-wearing-stylish-elegant-black-dress-with-paillettes-sleeves_197531-2859.jpg" },
{ name: "Carla", imageSrc: "http://img.b2bpic.net/free-photo/girl-adult-white-hair-blond_1139-778.jpg" },
{ name: "Diana", imageSrc: "http://img.b2bpic.net/free-photo/sexy-woman-lingerie-home_624325-3118.jpg" },
{ name: "Elena", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg" }
]}
textAnimation="fade-blur"
/>
</SectionErrorBoundary>
</div>
<OpinionesSection />
<div id="contacto" data-section="contacto">
<SectionErrorBoundary name="contacto">
<ContactCta
tag="Reserva tu cita"
text="¿Lista para el cambio que siempre quisiste? Escríbenos hoy y recibe una asesoría personalizada sin costo."
primaryButton={{ text: "WhatsApp", href: "https://wa.me/1234567890" }}
secondaryButton={{ text: "Llamar ahora", href: "tel:1234567890" }}
textAnimation="slide-up"
/>
</SectionErrorBoundary>
</div>
<ContactoSection />
</>
);
}
}

View File

@@ -0,0 +1,22 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contacto" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactoSection(): React.JSX.Element {
return (
<div id="contacto" data-section="contacto">
<SectionErrorBoundary name="contacto">
<ContactCta
tag="Reserva tu cita"
text="¿Lista para el cambio que siempre quisiste? Escríbenos hoy y recibe una asesoría personalizada sin costo."
primaryButton={{ text: "WhatsApp", href: "https://wa.me/1234567890" }}
secondaryButton={{ text: "Llamar ahora", href: "tel:1234567890" }}
textAnimation="slide-up"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "galeria" section.
import React from 'react';
import FeaturesBento from '@/components/sections/features/FeaturesBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function GaleriaSection(): React.JSX.Element {
return (
<div id="galeria" data-section="galeria">
<SectionErrorBoundary name="galeria">
<FeaturesBento
tag="Estilos Realizados"
title="Inspiración para tu nuevo look"
description="Mira cómo nuestras clientas han transformado su cabello con nuestros servicios."
features={[
{
title: "Transformaciones Increíbles",
description: "Mira el antes y después de nuestras clientas.",
bentoComponent: "media-stack",
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2509.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-sensual-brunette-female-with-long-curly-hair-dressed-warm-black-pullover_613910-7398.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-black-crop-top-standing-white-background-high-quality-photo_114579-52859.jpg" }]
},
{
title: "Calidad Certificada",
description: "Nuestros estándares de seguridad.",
bentoComponent: "checklist-timeline",
heading: "Pasos hacia la excelencia",
subheading: "Desde la selección hasta el mantenimiento",
checklistItems: [{ label: "Selección del cabello", detail: "100% natural, grado premium." }, { label: "Aplicación profesional", detail: "Respetando la salud capilar." }, { label: "Guía de mantenimiento", detail: "Cuidado duradero garantizado." }],
completedLabel: "Look final"
}
]}
textAnimation="slide-up"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,111 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
const primaryButton = {
text: "Ver Catálogo",
href: "#productos"
};
const secondaryButton = {
text: "Contactar",
href: "#contacto"
};
const items = [
{
imageSrc: "http://img.b2bpic.net/free-photo/fashion-girls-city_1157-4965.jpg"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/graceful-lady-with-long-blonde-hair-having-fun-weekend-posing-with-pleasure-enthusiastic-caucasian-woman-with-tanned-skin-laughing-while-standing-near-window_197531-9221.jpg"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5406.jpg"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-lady-posing-black-dress_549566-282.jpg"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-beautiful-young-woman-looking-camera_1301-4449.jpg"
}
];
type HeroBillboardCarouselProps = {
tag: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
items: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
textAnimation: "slide-up" | "fade-blur" | "fade";
};
const HeroInline = () => {
const duplicated = [...items, ...items, ...items, ...items];
return (
<section
aria-label="Hero section"
className="relative flex flex-col items-center justify-center gap-8 md:gap-10 w-full min-h-svh pt-25 pb-20 md:pt-30"
>
<HeroBackgroundSlot />
<div className="flex flex-col items-center gap-3 w-content-width mx-auto text-center">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{"Calidad Premium"}</p>
</div>
<TextAnimation
text={"Transforma tu estilo hoy mismo"}
variant={"slide-up"}
gradientText={true}
tag="h1"
className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={"Extensiones de cabello 100% natural para un look radiante y lleno de volumen."}
variant={"slide-up"}
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
/>
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
<a href={primaryButton.href} className="relative inline-flex items-center justify-center px-8 py-3 overflow-hidden font-medium text-foreground bg-white/20 rounded-2xl backdrop-blur-lg border border-white/40 shadow-[0_8px_32px_0_rgba(255,255,255,0.2)] group transition-all duration-300 hover:bg-white/30 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.3)] hover:scale-105">
<span className="absolute inset-0 w-full h-full bg-gradient-to-br from-white/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
<span className="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-white/30 to-transparent opacity-50 rounded-b-2xl"></span>
<span className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/60 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out"></span>
<span className="relative z-10 drop-shadow-sm">{primaryButton.text}</span>
</a>
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
</div>
</div>
<div className="w-content-width mx-auto overflow-hidden mask-fade-x">
<div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
{duplicated.map((item, i) => (
<div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mr-3 md:mr-5 p-2 xl:p-3 2xl:p-4 card rounded-lg overflow-hidden">
<ImageOrVideo
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
className="w-full h-full rounded-lg object-cover"
/>
</div>
))}
</div>
</div>
</section>
);
};
export default function HeroSection() {
return (
<div data-webild-section="hero" data-section="hero" id="hero">
<HeroInline />
</div>
);
}

View File

@@ -0,0 +1,28 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "opiniones" section.
import React from 'react';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function OpinionesSection(): React.JSX.Element {
return (
<div id="opiniones" data-section="opiniones">
<SectionErrorBoundary name="opiniones">
<TestimonialTrustCard
quote="¡Simplemente fascinada! El color es exacto y la textura increíblemente suave. Son las mejores extensiones que he usado en años."
rating={5}
author="Sofía C."
avatars={[
{ name: "Ana", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg" },
{ name: "Beatriz", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-girl-with-blonde-wavy-hair-modern-luxury-room-young-woman-smiling-wearing-stylish-elegant-black-dress-with-paillettes-sleeves_197531-2859.jpg" },
{ name: "Carla", imageSrc: "http://img.b2bpic.net/free-photo/girl-adult-white-hair-blond_1139-778.jpg" },
{ name: "Diana", imageSrc: "http://img.b2bpic.net/free-photo/sexy-woman-lingerie-home_624325-3118.jpg" },
{ name: "Elena", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg" }
]}
textAnimation="fade-blur"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,23 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "por-que-elegirnos" section.
import React from 'react';
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function PorQueElegirnosSection(): React.JSX.Element {
return (
<div id="por-que-elegirnos" data-section="por-que-elegirnos">
<SectionErrorBoundary name="por-que-elegirnos">
<AboutTestimonial
tag="Experiencia"
quote="Nuestras extensiones son seleccionadas manualmente para asegurar la máxima calidad, suavidad y durabilidad, proporcionando una experiencia de lujo en cada aplicación."
author="María Elena"
role="Fundadora y Estilista Senior"
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"
textAnimation="fade"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,30 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "productos" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProductosSection(): React.JSX.Element {
return (
<div id="productos" data-section="productos">
<SectionErrorBoundary name="productos">
<FeaturesImageBento
tag="Nuestra Selección"
title="Extensiones de alta gama"
description="Elige entre nuestra amplia variedad de tonos y texturas diseñadas para mezclarse perfectamente."
items={[
{ title: "Clip-in Premium", description: "Fáciles y versátiles.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-caucasian-smiling-brunette-woman-model-bright-pink-summer-stylish-clothes-isolated-white-background_158538-2977.jpg" },
{ title: "Tape-in Invisible", description: "Efecto natural garantizado.", imageSrc: "http://img.b2bpic.net/free-photo/showing-cute-portrait-fresh-holding_1187-6233.jpg" },
{ title: "Keratin Fusion", description: "Durabilidad a largo plazo.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-composition-with-basket_23-2147817685.jpg" },
{ title: "Micro Rings", description: "Sin adhesivos químicos.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-curly-hair-shampoo_23-2151307479.jpg" },
{ title: "Bundles de seda", description: "Brillo incomparable.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-shiny-flowing-brown-hair-beauty-portrait_23-2151989124.jpg" },
{ title: "Kit de Mantenimiento", description: "Todo para tu cuidado.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-products-assortment_23-2148491140.jpg" },
{ title: "Técnicas Personalizadas", description: "Adapta tu diseño.", imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-supplies-spray-bottle_23-2148352921.jpg" },
]}
textAnimation="fade-blur"
/>
</SectionErrorBoundary>
</div>
);
}