Merge version_2_1782728871062 into main

Merge version_2_1782728871062 into main

src/pages/HomePage.tsx

@@ -1,185 +1,27 @@
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-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 ProductsSection from './HomePage/sections/Products';
+import PricingSection from './HomePage/sections/Pricing';
+import SocialProofSection from './HomePage/sections/SocialProof';
+import FaqSection from './HomePage/sections/Faq';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardCarousel
-      tag="India's Trusted Retail"
-      title="Premium Fireworks, Expertly Curated"
-      description="Providing quality, safety-checked, and licensed pyrotechnic experiences for all your celebrations."
-      primaryButton={{
-        text: "Visit Our Store",
-        href: "/contact",
-      }}
-      secondaryButton={{
-        text: "Learn About Us",
-        href: "/about",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/burning-bengal-fire-bottle_23-2147981509.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/lighting-sparkler-stick-blue_23-2147779172.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-matchsticks-with-geometric-shapes_23-2149600201.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/gift-box-with-candy-cane-table_23-2147965689.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-couple-playing-with-rifle_23-2148287904.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/flaming-bengal-lights-bottle-beverage_23-2147988572.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesImageBento
-      tag="Catalog Highlights"
-      title="Our Product Range"
-      description="Explore our curated inventory of licensed, high-quality fireworks."
-      items={[
-        {
-          title: "Sparklers",
-          description: "Classic and long-lasting handheld joy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/sparkler-burning-pink_23-2147779134.jpg",
-        },
-        {
-          title: "Ground Items",
-          description: "Spinners, fountains, and ground bloomers.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-man-holding-alcohol-bottle-decorated-with-confetti-birthday-party_23-2148092594.jpg",
-        },
-        {
-          title: "Aerial Shells",
-          description: "Multi-effect sky displays.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-pepernoten-dessert_23-2149766687.jpg",
-        },
-        {
-          title: "Rockets",
-          description: "High altitude pyrotechnics.",
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-playing-game_23-2148287941.jpg",
-        },
-        {
-          title: "Gift Packs",
-          description: "Assorted combos for festive occasions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/burning-bengal-light-bottle_23-2147981512.jpg",
-        },
-        {
-          title: "Novelties",
-          description: "Unique special effects.",
-          imageSrc: "http://img.b2bpic.net/free-photo/rocket-made-from-school-supplies-green-chalkboard-back-s_1232-3281.jpg",
-        },
-        {
-          title: "Classics",
-          description: "Traditional crackers for celebrations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-person-with-mask-gloves-buying-food-supermarket_342744-1154.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSimpleCards
-      tag="Retail Membership"
-      title="Partner Programs"
-      description="Custom licensing and bulk supply management for retailers."
-      plans={[
-        {
-          tag: "Starter",
-          price: "₹999",
-          description: "Essential inventory tracking",
-          features: [
-            "Limited Stock",
-            "Basic Reporting",
-          ],
-        },
-        {
-          tag: "Professional",
-          price: "₹2499",
-          description: "Advanced analytics",
-          features: [
-            "Multi-store sync",
-            "Advanced Analytics",
-            "Safety Audits",
-          ],
-        },
-        {
-          tag: "Enterprise",
-          price: "Custom",
-          description: "Full scale support",
-          features: [
-            "API Access",
-            "Compliance Dashboard",
-            "24/7 Support",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Network"
-      title="Licensed Partners"
-      description="Working with the top distributors across the nation."
-      names={[
-        "FireWorks Pro",
-        "Sky Master",
-        "Lumina Spark",
-        "Apex Pyrotechnics",
-        "Festive Joy",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <SocialProofSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Support"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about retail safety and compliance."
-      categories={[
-        {
-          name: "General",
-          items: [
-            {
-              question: "Are your products licensed?",
-              answer: "Yes, every product meets national safety standards.",
-            },
-          ],
-        },
-        {
-          name: "Sales",
-          items: [
-            {
-              question: "Can I buy in bulk?",
-              answer: "We offer wholesale packages for certified retail stores.",
-            },
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
     </>
   );
 }

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTabbedAccordion
+          tag="Support"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about retail safety and compliance."
+          categories={[
+            {
+              name: "General",
+              items: [
+                {
+                  question: "Are your products licensed?",
+                  answer: "Yes, every product meets national safety standards.",
+                },
+              ],
+            },
+            {
+              name: "Sales",
+              items: [
+                {
+                  question: "Can I buy in bulk?",
+                  answer: "We offer wholesale packages for certified retail stores.",
+                },
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,90 @@
+/* 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";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+
+const primaryButton = {
+  text: "Visit Our Store",
+  href: "/contact"
+};
+const secondaryButton = {
+  href: "/about",
+  text: "Learn About Us"
+};
+
+type HeroOverlayProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  avatarsSrc?: string[];
+  avatarsLabel?: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section
+      aria-label="Hero section"
+      className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
+    >
+      <HeroBackgroundSlot />
+      <ImageOrVideo
+        imageSrc={"https://images.unsplash.com/photo-1533230392305-61884485521b?q=80&w=2070&auto=format&fit=crop"}
+        className="absolute inset-0 w-full h-full object-cover rounded-none"
+      />
+
+      <div
+        className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
+        aria-hidden="true"
+      />
+      <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/50 to-background/90 z-[5]"></div>
+
+      <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
+        <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
+          <div className="w-fit px-3 py-1 mb-1 text-sm card rounded">
+            <p>{"India's Trusted Retail"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Premium Fireworks, Expertly Curated"}
+            variant="fade-blur"
+            gradientText={true}
+            tag="h1"
+            className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-white text-balance"
+          />
+
+          <TextAnimation
+            text={"Providing quality, safety-checked, and licensed pyrotechnic experiences for all your celebrations."}
+            variant="fade-blur"
+            gradientText={false}
+            tag="p"
+            className="text-lg md:text-xl text-white leading-snug text-balance"
+          />
+
+          <div className="flex flex-wrap gap-3 mt-2 md:mt-3">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+          </div>
+
+          {undefined && undefined.length > 0 && (
+            <div className="mt-3 md:mt-4">
+              <AvatarGroup size="lg" labelClassName="text-primary-cta-text" />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,51 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSimpleCards
+          tag="Retail Membership"
+          title="Partner Programs"
+          description="Custom licensing and bulk supply management for retailers."
+          plans={[
+            {
+              tag: "Starter",
+              price: "₹999",
+              description: "Essential inventory tracking",
+              features: [
+                "Limited Stock",
+                "Basic Reporting",
+              ],
+            },
+            {
+              tag: "Professional",
+              price: "₹2499",
+              description: "Advanced analytics",
+              features: [
+                "Multi-store sync",
+                "Advanced Analytics",
+                "Safety Audits",
+              ],
+            },
+            {
+              tag: "Enterprise",
+              price: "Custom",
+              description: "Full scale support",
+              features: [
+                "API Access",
+                "Compliance Dashboard",
+                "24/7 Support",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesImageBento
+          tag="Catalog Highlights"
+          title="Our Product Range"
+          description="Explore our curated inventory of licensed, high-quality fireworks."
+          items={[
+            {
+              title: "Sparklers",
+              description: "Classic and long-lasting handheld joy.",
+              imageSrc: "http://img.b2bpic.net/free-photo/sparkler-burning-pink_23-2147779134.jpg",
+            },
+            {
+              title: "Ground Items",
+              description: "Spinners, fountains, and ground bloomers.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-man-holding-alcohol-bottle-decorated-with-confetti-birthday-party_23-2148092594.jpg",
+            },
+            {
+              title: "Aerial Shells",
+              description: "Multi-effect sky displays.",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-pepernoten-dessert_23-2149766687.jpg",
+            },
+            {
+              title: "Rockets",
+              description: "High altitude pyrotechnics.",
+              imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-playing-game_23-2148287941.jpg",
+            },
+            {
+              title: "Gift Packs",
+              description: "Assorted combos for festive occasions.",
+              imageSrc: "http://img.b2bpic.net/free-photo/burning-bengal-light-bottle_23-2147981512.jpg",
+            },
+            {
+              title: "Novelties",
+              description: "Unique special effects.",
+              imageSrc: "http://img.b2bpic.net/free-photo/rocket-made-from-school-supplies-green-chalkboard-back-s_1232-3281.jpg",
+            },
+            {
+              title: "Classics",
+              description: "Traditional crackers for celebrations.",
+              imageSrc: "http://img.b2bpic.net/free-photo/female-person-with-mask-gloves-buying-food-supermarket_342744-1154.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/SocialProof.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="Network"
+          title="Licensed Partners"
+          description="Working with the top distributors across the nation."
+          names={[
+            "FireWorks Pro",
+            "Sky Master",
+            "Lumina Spark",
+            "Apex Pyrotechnics",
+            "Festive Joy",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}