From 17f786128cb034d85cc900acab3091845aef58e8 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 2 Jul 2026 22:46:40 +0000
Subject: [PATCH] Bob AI: Changed hero section to use 3D tilted cards layout

---
 src/pages/HomePage.tsx                        | 138 +++---------------
 src/pages/HomePage/sections/Contacto.tsx      |  22 +++
 src/pages/HomePage/sections/Galeria.tsx       |  38 +++++
 src/pages/HomePage/sections/Hero.tsx          |  20 +++
 src/pages/HomePage/sections/Opiniones.tsx     |  28 ++++
 .../HomePage/sections/PorQueElegirnos.tsx     |  23 +++
 src/pages/HomePage/sections/Productos.tsx     |  30 ++++
 7 files changed, 183 insertions(+), 116 deletions(-)
 create mode 100644 src/pages/HomePage/sections/Contacto.tsx
 create mode 100644 src/pages/HomePage/sections/Galeria.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Opiniones.tsx
 create mode 100644 src/pages/HomePage/sections/PorQueElegirnos.tsx
 create mode 100644 src/pages/HomePage/sections/Productos.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index d046532..cb64123 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -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 />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/HomePage/sections/Contacto.tsx b/src/pages/HomePage/sections/Contacto.tsx
new file mode 100644
index 0000000..b52736c
--- /dev/null
+++ b/src/pages/HomePage/sections/Contacto.tsx
@@ -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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Galeria.tsx b/src/pages/HomePage/sections/Galeria.tsx
new file mode 100644
index 0000000..61ae660
--- /dev/null
+++ b/src/pages/HomePage/sections/Galeria.tsx
@@ -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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..8139a86
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,20 @@
+// Created by add_section_from_catalog (HeroTiltedCards).
+
+import React from 'react';
+import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" data-section="hero" id="hero">
+      <HeroTiltedCards
+        secondaryButton={{"href":"#contacto","text":"Contactar"}}
+        textAnimation="slide-up"
+        title="Transforma tu estilo hoy mismo"
+        primaryButton={{"href":"#productos","text":"Ver Catálogo"}}
+        description="Extensiones de cabello 100% natural para un look radiante y lleno de volumen."
+        tag="Calidad Premium"
+        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"}]}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Opiniones.tsx b/src/pages/HomePage/sections/Opiniones.tsx
new file mode 100644
index 0000000..965826e
--- /dev/null
+++ b/src/pages/HomePage/sections/Opiniones.tsx
@@ -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>
+  );
+}
diff --git a/src/pages/HomePage/sections/PorQueElegirnos.tsx b/src/pages/HomePage/sections/PorQueElegirnos.tsx
new file mode 100644
index 0000000..f589180
--- /dev/null
+++ b/src/pages/HomePage/sections/PorQueElegirnos.tsx
@@ -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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Productos.tsx b/src/pages/HomePage/sections/Productos.tsx
new file mode 100644
index 0000000..5090e2d
--- /dev/null
+++ b/src/pages/HomePage/sections/Productos.tsx
@@ -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>
+  );
+}