src/pages/HomePage.tsx

@@ -1,16 +1,21 @@
-import { motion } from "motion/react";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
+
 import { StyleProvider } from "@/components/ui/StyleProvider";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import HeroWorkScrollStack from "@/components/sections/hero/HeroWorkScrollStack";
-import AboutTestimonialParallax from "@/components/sections/about/AboutTestimonialParallax";
-import FeaturesBentoGridCta from "@/components/sections/features/FeaturesBentoGridCta";
-import ContactSplitFormParallax from "@/components/sections/contact/ContactSplitFormParallax";
 import LoaderReveal from "@/components/ui/LoaderReveal";
 import CornerGlowBackground from "@/components/ui/CornerGlowBackground";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ServicesSection from './HomePage/sections/Services';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+export default function HomePage(): React.JSX.Element {
   return (
-    <StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
+<StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
       <LoaderReveal
         imageSrc="http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9483.jpg"
         title="Carlos Benítez Armoa"
@@ -19,71 +24,13 @@ export default function HomePage() {
       <SiteBackgroundSlot />
       <CornerGlowBackground position="fixed" />
 
-      <HeroWorkScrollStack
-        heroAnimationDelay={4}
-        tag="Cloud & AI Engineering"
-        title="Carlos Benítez"
-        titleHighlight="Armoa"
-        description="Lic. en Análisis de Sistemas | Cloud Computing Specialist (GCP/AWS) | AI Engineer"
-        descriptionMuted="Creando el futuro mediante arquitectura escalable e inteligencia artificial."
-        primaryButton={{
-          text: "Ver Prototipos",          href: "#proyectos",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9483.jpg",          avatarLabel: "Proyectos"}}
-        secondaryButton={{ text: "Contactar", href: "#contact" }}
-        sectionTag="Portafolio"
-        sectionTitle="Showcase de Prototipos"
-        sectionDescription="Proyectos de alta fidelidad, optimizados y listos para despliegue."
-        items={[
-          { title: "Cloud Architecture", description: "Migración y escalabilidad en GCP/AWS", imageSrc: "http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg", tag: "Cloud" },
-          { title: "AI Automation", description: "Modelos inteligentes y automatización", imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg", tag: "AI" },
-          { title: "Rapid Prototyping", description: "Landing pages y sistemas escalables", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", tag: "Dev" }
-        ]}
-      />
+      <HeroSection />
 
-      <div id="about" data-section="about">
-        <AboutTestimonialParallax
-          tag="Sobre Mí"
-          quote="Especialista en diseñar soluciones en la nube, integrar inteligencia artificial avanzada y crear prototipos funcionales de alta fidelidad ultra rápidos para agilizar el despliegue y la validación de ideas."
-          author="Carlos Benítez Armoa"
-          role="Cloud Computing & AI Engineer"
-          imageSrc="http://img.b2bpic.net/free-photo/businessman-using-laptop-dark-office_74855-2593.jpg"
-          socialLinks={[
-            { icon: "Instagram", label: "Instagram", href: "https://instagram.com/carlos_benitez615" },
-            { icon: "Github", label: "TikTok", href: "https://tiktok.com/@carlos_benitez_ia" },
-            { icon: "Linkedin", label: "LinkedIn", href: "#" }
-          ]}
-        />
-      </div>
+      <AboutSection />
 
-      <div id="services" data-section="services">
-        <FeaturesBentoGridCta
-          tag="Áreas de Expertise"
-          title="Soluciones Tecnológicas Premium"
-          description="Un enfoque integral que fusiona la potencia de la nube con la inteligencia del futuro."
-          features={[
-            { title: "Cloud Computing", description: "Arquitectura escalable en GCP y AWS, optimización de costos y despliegue global.", imageSrc: "http://img.b2bpic.net/free-photo/modern-server-facility-operating-advanced-ai-tasks-3d-rendering_482257-124597.jpg" },
-            { title: "Inteligencia Artificial", description: "Integración de LLMs, automatización inteligente y flujos de trabajo con IA.", imageSrc: "http://img.b2bpic.net/free-photo/ai-cloud-concept-with-robot-face_23-2149739753.jpg" },
-            { title: "Desarrollo Ágil", description: "Desarrollo web moderno, responsive y enfocado en la experiencia de usuario.", imageSrc: "http://img.b2bpic.net/free-photo/coder-workstation-programming-computer-writing-lines-code-close-up_482257-118817.jpg" },
-            { title: "Prototipado", description: "Proyectos de alta fidelidad en un solo archivo, rápidos y eficientes.", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-taking-notes-office_23-2149749859.jpg" }
-          ]}
-          ctaButton={{
-            text: "Hablar sobre mi proyecto",            href: "#contact"}}
-        />
-      </div>
+      <ServicesSection />
 
-      <div id="contact" data-section="contact">
-        <ContactSplitFormParallax
-          tag="Contacto"
-          title="Trabajemos Juntos"
-          description="Estoy disponible para nuevos desafíos tecnológicos. ¿Tienes una idea? Vamos a construirla."
-          inputs={[
-            { name: "nombre", type: "text", placeholder: "Tu nombre", required: true },
-            { name: "email", type: "email", placeholder: "Tu email", required: true }
-          ]}
-          textarea={{ name: "mensaje", placeholder: "Cuéntame sobre tu proyecto", rows: 5, required: true }}
-          buttonText="Enviar mensaje"
-          imageSrc="http://img.b2bpic.net/free-photo/top-view-office-desk-with-keyboard-tablet_1156-8.jpg"
-        />
-      </div>
+      <ContactSection />
     </StyleProvider>
   );
-}
+}

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTestimonialParallax from "@/components/sections/about/AboutTestimonialParallax";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+            <AboutTestimonialParallax
+              tag="Sobre Mí"
+              quote="Especialista en diseñar soluciones en la nube, integrar inteligencia artificial avanzada y crear prototipos funcionales de alta fidelidad ultra rápidos para agilizar el despliegue y la validación de ideas."
+              author="Carlos Benítez Armoa"
+              role="Cloud Computing & AI Engineer"
+              imageSrc="http://img.b2bpic.net/free-photo/businessman-using-laptop-dark-office_74855-2593.jpg"
+              socialLinks={[
+                { icon: "Instagram", label: "Instagram", href: "https://instagram.com/carlos_benitez615" },
+                { icon: "Github", label: "TikTok", href: "https://tiktok.com/@carlos_benitez_ia" },
+                { icon: "Linkedin", label: "LinkedIn", href: "#" }
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactSplitFormParallax from "@/components/sections/contact/ContactSplitFormParallax";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+            <ContactSplitFormParallax
+              tag="Contacto"
+              title="Trabajemos Juntos"
+              description="Estoy disponible para nuevos desafíos tecnológicos. ¿Tienes una idea? Vamos a construirla."
+              inputs={[
+                { name: "nombre", type: "text", placeholder: "Tu nombre", required: true },
+                { name: "email", type: "email", placeholder: "Tu email", required: true }
+              ]}
+              textarea={{ name: "mensaje", placeholder: "Cuéntame sobre tu proyecto", rows: 5, required: true }}
+              buttonText="Enviar mensaje"
+              imageSrc="http://img.b2bpic.net/free-photo/top-view-office-desk-with-keyboard-tablet_1156-8.jpg"
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,309 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { useRef, useEffect } from "react";
+import { motion } from "motion/react";
+import { ArrowRight } from "lucide-react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+const primaryButton = {
+  text: "Ver Prototipos",
+  href: "#proyectos",
+  avatarSrc: "https://storage.googleapis.com/webild/users/user_3FCG92KENocdL7iaVAs56mPasBN/uploaded-1781573045656-rnyvslys.jpg",
+  avatarLabel: "Proyectos"
+};
+const items = [
+  {
+    title: "Cloud Architecture",
+    description: "Migración y escalabilidad en GCP/AWS",
+    imageSrc: "http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg",
+    tag: "Cloud"
+  },
+  {
+    title: "AI Automation",
+    description: "Modelos inteligentes y automatización",
+    imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg",
+    tag: "AI"
+  },
+  {
+    title: "Rapid Prototyping",
+    description: "Landing pages y sistemas escalables",
+    imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
+    tag: "Dev"
+  }
+];
+const secondaryButton = {
+  text: "Contactar",
+  href: "#contact"
+};
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface HeroWorkScrollStackProps {
+  tag: string;
+  title: string;
+  titleHighlight: string;
+  description: string;
+  descriptionMuted: string;
+  primaryButton: { text: string; href: string; avatarSrc: string; avatarLabel: string };
+  sectionTag: string;
+  sectionTitle: string;
+  sectionDescription: string;
+  items: [
+    { title: string; description: string; imageSrc: string; tag: string },
+    { title: string; description: string; imageSrc: string; tag: string },
+    { title: string; description: string; imageSrc: string; tag: string }
+  ];
+  secondaryButton?: { text: string; href: string };
+  heroAnimationDelay?: number;
+}
+
+const HeroInline = () => {
+  const animationRef = useRef<HTMLDivElement>(null);
+  const placeholderRef = useRef<HTMLDivElement>(null);
+  const card1Ref = useRef<HTMLDivElement>(null);
+  const card2Ref = useRef<HTMLDivElement>(null);
+  const card3Ref = useRef<HTMLDivElement>(null);
+  const handlePrimaryClick = useButtonClick(primaryButton.href);
+  const handleSecondaryClick = useButtonClick(secondaryButton?.href || "#");
+
+  useEffect(() => {
+    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
+
+    const ctx = gsap.context(() => {
+      const cardRefs = [card1Ref.current, card2Ref.current, card3Ref.current];
+      const placeholder = placeholderRef.current;
+      if (!placeholder) return;
+
+      const placeholderRect = placeholder.getBoundingClientRect();
+      const placeholderCenterY = placeholderRect.top + placeholderRect.height / 2;
+
+      if (isDesktop) {
+        // DESKTOP: Scrub animation tied to scroll position
+        const xOffsets = ["32rem", "14.5rem", "-1.8rem"];
+        const yAdjustments = [0, -48, 0];
+        const rotations = [-5, 0, 5];
+        const scales = [1.35, 1.3, 1.25];
+        const zIndexes = [30, 20, 10];
+
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: animationRef.current,
+            start: "top top",
+            end: "bottom bottom",
+            scrub: 1,
+          },
+        });
+
+        cardRefs.forEach((card, i) => {
+          if (!card) return;
+          const cardRect = card.getBoundingClientRect();
+          const cardCenterY = cardRect.top + cardRect.height / 2;
+          const yOffset = placeholderCenterY - cardCenterY;
+
+          gsap.set(card, {
+            x: xOffsets[i],
+            y: yOffset + yAdjustments[i],
+            rotation: rotations[i],
+            scale: scales[i],
+            zIndex: zIndexes[i],
+            willChange: "transform",
+            force3D: true,
+          });
+
+          tl.to(card, { x: 0, y: 0, rotation: 0, scale: 1, duration: 0.4, ease: "none" }, 0);
+          tl.to(card, { zIndex: 1, duration: 0.1, ease: "none" }, 0.3);
+        });
+      } else {
+        // MOBILE: Toggle animation - play/reverse on scroll
+        const xOffsets = ["2.5rem", "0.5rem", "-1rem"];
+        const yAdjustments = [-10, -30, 10];
+        const rotations = [-5, 0, 5];
+        const scales = [0.65, 0.7, 0.75];
+        const zIndexes = [30, 20, 10];
+
+        cardRefs.forEach((card, i) => {
+          if (!card) return;
+          const cardRect = card.getBoundingClientRect();
+          const cardCenterY = cardRect.top + cardRect.height / 2;
+          const yOffset = placeholderCenterY - cardCenterY;
+
+          gsap.set(card, {
+            x: xOffsets[i],
+            y: yOffset + yAdjustments[i],
+            rotation: rotations[i],
+            scale: scales[i],
+            zIndex: zIndexes[i],
+            willChange: "transform",
+            force3D: true,
+          });
+
+          gsap.to(card, {
+            x: 0,
+            y: 0,
+            rotation: 0,
+            scale: 1,
+            duration: 1.2,
+            ease: "power2.inOut",
+            scrollTrigger: {
+              trigger: placeholder,
+              start: "top 35%",
+              toggleActions: "play none none reverse",
+            },
+          });
+        });
+      }
+    }, animationRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <div ref={animationRef}>
+      <div id="hero" data-section="hero">
+        <section aria-label="Hero section" className="relative h-fit md:h-svh pt-30 pb-20 md:py-0 flex items-center overflow-hidden md:overflow-visible">
+          <HeroBackgroundSlot />
+
+          <div className="w-content-width mx-auto">
+            <div className="flex flex-col md:flex-row items-center gap-10 md:gap-20 w-full">
+              <motion.div
+                initial={{ y: 10, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ duration: 1.8, ease: [0.16, 1, 0.3, 1], delay: 4 ?? 0 }}
+                className="w-full md:w-[46%] flex flex-col items-center md:items-start gap-3"
+              >
+                <div className="card backdrop-blur flex items-center gap-2 px-3 py-1 rounded">
+                  <span className="size-2 rounded-full bg-green-500 animate-pulsate [--accent:#22c55e]" />
+                  <p className="text-sm leading-snug font-medium text-foreground">{"Cloud & AI Engineering"}</p>
+                </div>
+
+                <h1 className="text-6xl md:text-7xl 2xl:text-8xl font-medium leading-[1.05] tracking-tight text-center md:text-left">
+                  <span className="inline pb-[0.1em] -mb-[0.1em] bg-linear-to-r from-foreground to-primary-cta bg-clip-text text-transparent">
+                    {"Carlos Benítez"}{" "}
+                    <span className="font-bold">{"Armoa"}</span>
+                  </span>
+                </h1>
+
+                <p className="text-base md:text-lg font-medium leading-snug text-center md:text-left max-w-[95%]">
+                  {"Lic. en Análisis de Sistemas | Cloud Computing Specialist (GCP/AWS) | AI Engineer"}{" "}
+                  <span className="text-foreground/50">{"Creando el futuro mediante arquitectura escalable e inteligencia artificial."}</span>
+                </p>
+
+                <a
+                  href={primaryButton.href}
+                  onClick={handlePrimaryClick}
+                  className="group flex items-center gap-3 mt-2 text-primary-cta-text rounded-full pl-3 pr-6 py-3 w-fit primary-button transition-all duration-300"
+                >
+                  <div className="flex items-center">
+                    <div className="card p-px rounded-full transition-transform duration-500 ease-out group-hover:-rotate-6">
+                      <img
+                        src={primaryButton.avatarSrc}
+                        className="w-9 h-9 rounded-full object-cover"
+                        alt=""
+                      />
+                    </div>
+                    <div className="grid grid-cols-[0fr] group-hover:grid-cols-[1fr] transition-all duration-500 ease-out">
+                      <div className="overflow-hidden flex items-center">
+                        <span className="text-primary-cta-text text-sm font-medium mx-2 transition-transform duration-500 ease-out -translate-x-3 group-hover:translate-x-0">
+                          +
+                        </span>
+                        <div className="card p-px rounded-full shrink-0 transition-transform duration-500 ease-out -translate-x-5 group-hover:translate-x-0 group-hover:rotate-6">
+                          <span className="w-9 h-9 rounded-full flex items-center justify-center">
+                            <span className="text-foreground text-xs font-bold">{primaryButton.avatarLabel}</span>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <span className="text-base font-medium whitespace-nowrap">{primaryButton.text}</span>
+                </a>
+              </motion.div>
+
+              <div ref={placeholderRef} className="w-full md:w-[54%] relative h-80 md:h-96">
+                <div className="absolute inset-0 card rounded-2xl md:hidden" />
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div id="work" data-section="work">
+        <section aria-label="Work section" className="py-20 md:pt-0">
+          <div className="flex flex-col gap-8 w-content-width mx-auto">
+            <div className="flex flex-col items-center gap-2">
+              <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+                <p>{"Portafolio"}</p>
+              </div>
+
+              <TextAnimation
+                text={"Showcase de Prototipos"}
+                variant="slide-up"
+                gradientText={true}
+                tag="h2"
+                className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+              />
+
+              <TextAnimation
+                text={"Proyectos de alta fidelidad, optimizados y listos para despliegue."}
+                variant="slide-up"
+                gradientText={false}
+                tag="p"
+                className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+              />
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-5">
+              {items.map((item, index) => {
+                const cardRef = index === 0 ? card1Ref : index === 1 ? card2Ref : card3Ref;
+                return (
+                  <div key={item.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5">
+                    <div
+                      ref={cardRef}
+                      className="aspect-4/3 rounded-2xl shadow-2xl relative card p-2 xl:p-3 2xl:p-4"
+                    >
+                      <div className="w-full h-full rounded-xl overflow-hidden relative">
+                        <ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
+                        <span className="absolute bottom-2 left-2 xl:bottom-3 xl:left-3 2xl:bottom-4 2xl:left-4 px-3 py-1.5 text-xs font-medium text-primary-cta-text rounded-full backdrop-blur-xl bg-primary-cta-text/15 border border-primary-cta-text/20">
+                          {item.tag}
+                        </span>
+                      </div>
+                    </div>
+                    <p className="text-lg md:text-xl lg:text-2xl leading-snug">
+                      <span className="font-semibold text-foreground">{item.title}. </span>
+                      <span className="text-foreground/50">{item.description}</span>
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+
+            {secondaryButton && (
+              <div className="flex justify-center">
+                <a
+                  href={secondaryButton.href}
+                  onClick={handleSecondaryClick}
+                  className="group flex items-center gap-2 px-6 py-3 text-base font-medium rounded-full secondary-button text-secondary-cta-text transition-all duration-300"
+                >
+                  <span>{secondaryButton.text}</span>
+                  <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-1" />
+                </a>
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -0,0 +1,25 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import FeaturesBentoGridCta from "@/components/sections/features/FeaturesBentoGridCta";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+            <FeaturesBentoGridCta
+              tag="Áreas de Expertise"
+              title="Soluciones Tecnológicas Premium"
+              description="Un enfoque integral que fusiona la potencia de la nube con la inteligencia del futuro."
+              features={[
+                { title: "Cloud Computing", description: "Arquitectura escalable en GCP y AWS, optimización de costos y despliegue global.", imageSrc: "http://img.b2bpic.net/free-photo/modern-server-facility-operating-advanced-ai-tasks-3d-rendering_482257-124597.jpg" },
+                { title: "Inteligencia Artificial", description: "Integración de LLMs, automatización inteligente y flujos de trabajo con IA.", imageSrc: "http://img.b2bpic.net/free-photo/ai-cloud-concept-with-robot-face_23-2149739753.jpg" },
+                { title: "Desarrollo Ágil", description: "Desarrollo web moderno, responsive y enfocado en la experiencia de usuario.", imageSrc: "http://img.b2bpic.net/free-photo/coder-workstation-programming-computer-writing-lines-code-close-up_482257-118817.jpg" },
+                { title: "Prototipado", description: "Proyectos de alta fidelidad en un solo archivo, rápidos y eficientes.", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-taking-notes-office_23-2149749859.jpg" }
+              ]}
+              ctaButton={{
+                text: "Hablar sobre mi proyecto",            href: "#contact"}}
+            />
+          </div>
+  );
+}