Merge version_2_1781564371836 into main

Merge version_2_1781564371836 into main

src/components/Layout.tsx

@@ -47,7 +47,7 @@ export default function Layout() {
       </main>
       <SectionErrorBoundary name="footer">
         <FooterMinimal
-      brand="Cocina Económica La Sabrosura - Hecho con amor y sazón mexicano"
+      brand="Cocina Económica La Sabrosura - Hecho con amor y sazón mexicano | Tel: 449 371 0740"
       copyright="© 2024 La Sabrosura. Todos los derechos reservados."
       socialLinks={[
         {

src/pages/HomePage.tsx

@@ -1,148 +1,27 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// 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.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import BuffetSection from './HomePage/sections/Buffet';
+import ServiciosSection from './HomePage/sections/Servicios';
+import HorariosSection from './HomePage/sections/Horarios';
+import ContactoSection from './HomePage/sections/Contacto';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplit
-      tag="Cocina Económica Familiar"
-      title="La Sabrosura"
-      description="Delicioso BUFFET 😋 y comida por litro · Servicio a domicilio con la sazón de casa."
-      primaryButton={{
-        text: "¡Llámanos ahora!",
-        href: "tel:4493710740",
-      }}
-      secondaryButton={{
-        text: "Ver Horarios",
-        href: "#horarios",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/fresh-lemons-table-bowl_23-2148879057.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="buffet" data-section="buffet">
-    <SectionErrorBoundary name="buffet">
-          <FeaturesComparison
-      tag="Especial de la Casa"
-      title="El buffet más rico"
-      description="¡Disfruta una gran variedad de guisados mexicanos por solo $120! Incluye bebida del día."
-      negativeItems={[
-        "Sin preocupaciones",
-        "Sin cocinar hoy",
-      ]}
-      positiveItems={[
-        "Variedad ilimitada",
-        "Bebida incluida",
-        "Sazón auténtico",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <BuffetSection />
 
-  <div id="servicios" data-section="servicios">
-    <SectionErrorBoundary name="servicios">
-          <FeaturesRevealCardsBento
-      tag="Nuestros Servicios"
-      title="Sabor y tradición"
-      description="Ofrecemos lo mejor de la comida casera todos los días."
-      items={[
-        {
-          title: "Buffet Diario",
-          description: "Variedad de platillos cada día.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-delicious-food-arrangement_23-2148510936.jpg",
-        },
-        {
-          title: "Comida por Litro",
-          description: "Ideal para llevar a casa.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/mexican-food-tablecloth-near-blackboard_23-2147740799.jpg",
-        },
-        {
-          title: "Servicio a Domicilio",
-          description: "Te lo llevamos a la puerta.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/delivery-icon-front-side_187299-39627.jpg",
-        },
-        {
-          title: "Calidad Premium",
-          description: "Ingredientes frescos seleccionados.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/ornamental-plate-mexican-food_23-2147740706.jpg",
-        },
-        {
-          title: "Precios Justos",
-          description: "El sabor que vale lo que pagas.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arrangement-tamales-ingredients_23-2148942255.jpg",
-        },
-        {
-          title: "Sazón Casero",
-          description: "Como la cocina de la abuela.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/sticker-template-with-food-delivery-banner-isolated_1308-61345.jpg",
-        },
-        {
-          title: "Atención Cálida",
-          description: "Te recibimos con una sonrisa.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-catering-food_23-2148482444.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServiciosSection />
 
-  <div id="horarios" data-section="horarios">
-    <SectionErrorBoundary name="horarios">
-          <MetricsFeatureCards
-      tag="Horarios de Servicio"
-      title="Te esperamos"
-      description="Consulta nuestros horarios y disponibilidad."
-      metrics={[
-        {
-          value: "1-6 PM",
-          title: "Lunes a Viernes",
-          features: [
-            "Buffet Abierto",
-            "Comida a domicilio",
-          ],
-        },
-        {
-          value: "CERRADO",
-          title: "Sábado y Domingo",
-          features: [
-            "Descanse con nosotros",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <HorariosSection />
 
-  <div id="contacto" data-section="contacto">
-    <SectionErrorBoundary name="contacto">
-          <ContactCta
-      tag="Visítanos"
-      text="Estamos en Refugio Miranda Aguayo, Aguascalientes, México. ¡Ven a comer rico hoy!"
-      primaryButton={{
-        text: "Llamar ahora",
-        href: "tel:4493710740",
-      }}
-      secondaryButton={{
-        text: "Ver Ubicación",
-        href: "https://maps.google.com",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactoSection />
     </>
   );
 }

src/pages/HomePage/sections/Buffet.tsx

@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "buffet" section.
+
+import React from 'react';
+import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function BuffetSection(): React.JSX.Element {
+  return (
+    <div id="buffet" data-section="buffet">
+        <SectionErrorBoundary name="buffet">
+              <FeaturesComparison
+          tag="Especial de la Casa"
+          title="El buffet más rico"
+          description="¡Disfruta una gran variedad de guisados mexicanos por solo $120! Incluye bebida del día."
+          negativeItems={[
+            "Sin preocupaciones",
+            "Sin cocinar hoy",
+          ]}
+          positiveItems={[
+            "Variedad ilimitada",
+            "Bebida incluida",
+            "Sazón auténtico",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contacto.tsx

@@ -0,0 +1,27 @@
+// 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="Visítanos"
+          text="Estamos en Refugio Miranda Aguayo, Aguascalientes, México. ¡Ven a comer rico hoy!"
+          primaryButton={{
+            text: "Llamar ahora",
+            href: "tel:4493710740",
+          }}
+          secondaryButton={{
+            text: "Ver Ubicación",
+            href: "https://maps.google.com",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplit
+          tag="Cocina Económica Familiar"
+          title="La Sabrosura"
+          description="Delicioso BUFFET 😋 y comida por litro · Servicio a domicilio con la sazón de casa."
+          primaryButton={{
+            text: "¡Llámanos ahora!",
+            href: "tel:4493710740",
+          }}
+          secondaryButton={{
+            text: "Ver Horarios",
+            href: "#horarios",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/fresh-lemons-table-bowl_23-2148879057.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Horarios.tsx

@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "horarios" section.
+
+import React from 'react';
+import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HorariosSection(): React.JSX.Element {
+  return (
+    <div id="horarios" data-section="horarios">
+        <SectionErrorBoundary name="horarios">
+              <MetricsFeatureCards
+          tag="Horarios de Servicio"
+          title="Te esperamos"
+          description="Consulta nuestros horarios y disponibilidad."
+          metrics={[
+            {
+              value: "1-6 PM",
+              title: "Lunes a Viernes",
+              features: [
+                "Buffet Abierto",
+                "Comida a domicilio",
+              ],
+            },
+            {
+              value: "CERRADO",
+              title: "Sábado y Domingo",
+              features: [
+                "Descanse con nosotros",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Servicios.tsx

@@ -0,0 +1,162 @@
+/* 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 TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+const items = [
+  {
+    title: "Buffet Diario",
+    description: "Variedad de platillos cada día.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/front-view-delicious-food-arrangement_23-2148510936.jpg"
+  },
+  {
+    title: "Comida por Litro",
+    description: "Ideal para llevar a casa.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/mexican-food-tablecloth-near-blackboard_23-2147740799.jpg"
+  },
+  {
+    title: "Servicio a Domicilio",
+    description: "Te lo llevamos a la puerta.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/delivery-icon-front-side_187299-39627.jpg"
+  },
+  {
+    title: "Calidad Premium",
+    description: "Ingredientes frescos seleccionados.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/ornamental-plate-mexican-food_23-2147740706.jpg"
+  },
+  {
+    title: "Precios Justos",
+    description: "El sabor que vale lo que pagas.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arrangement-tamales-ingredients_23-2148942255.jpg"
+  },
+  {
+    title: "Sazón Casero",
+    description: "Como la cocina de la abuela.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-vector/sticker-template-with-food-delivery-banner-isolated_1308-61345.jpg"
+  },
+  {
+    title: "Atención Cálida",
+    description: "Te recibimos con una sonrisa.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/high-angle-catering-food_23-2148482444.jpg"
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  href: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesRevealCardsBentoProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
+}
+
+const ServiciosInline = () => {
+  const gridClasses = [
+    "md:col-span-2",
+    "md:col-span-4",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-2",
+    "md:col-span-2",
+    "md:col-span-2",
+  ];
+
+  const staggerDelays = [
+    0,
+    0.1,
+    0,
+    0.1,
+    0,
+    0.1,
+    0.2,
+  ];
+
+  return (
+    <section aria-label="Features reveal cards bento section" className="py-20">
+      <div className="flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"Nuestros Servicios"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Sabor y tradición"}
+            variant="fade-blur"
+            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={"Ofrecemos lo mejor de la comida casera todos los días. Pedidos al 449 371 0740."}
+            variant="fade-blur"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
+          {items.map((item, index) => (
+            <ScrollReveal key={item.title} variant="fade" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
+              <a href={item.href} className="block relative overflow-hidden rounded">
+                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden">
+                  <ImageOrVideo
+                    imageSrc={item.imageSrc}
+                    videoSrc={item.videoSrc}
+                    className="rounded group-hover:scale-105 transition-transform duration-500"
+                  />
+                </div>
+                <div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
+                <div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
+                  <div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
+                    <div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
+                    <h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
+                      {item.title}
+                    </h3>
+                    <div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
+                      <p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function ServiciosSection() {
+  return (
+    <div data-webild-section="servicios" id="servicios">
+      <ServiciosInline />
+    </div>
+  );
+}