Merge version_2_1781822625556 into main

Merge version_2_1781822625556 into main

src/pages/HomePage.tsx

@@ -1,138 +1,33 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-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 AboutSection from './HomePage/sections/About';
+import PortfolioSection from './HomePage/sections/Portfolio';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardBrand
-      brand="VISIONS OF LIGHT"
-      description="Professional art portfolio featuring curated works in oil, watercolor, and abstract expressions. Bringing imagination to life through texture and color."
-      primaryButton={{
-        text: "View Portfolio",        href: "#portfolio"}}
-      secondaryButton={{
-        text: "Contact Me",        href: "#contact"}}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-art-studio-composition_23-2147868355.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutMediaOverlay
-      tag="About the Artist"
-      title="Capturing Emotion Through Texture"
-      description="With over 10 years of experience in fine arts, I explore the intersections of light, shadow, and human experience. Each piece is a journey into the subconscious, meant to provoke thought and inspire tranquility."
-      imageSrc="http://img.b2bpic.net/free-photo/female-artist-painting-studio_1303-11442.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="portfolio" data-section="portfolio">
-    <SectionErrorBoundary name="portfolio">
-          <FeaturesRevealCardsBento
-      tag="Gallery"
-      title="Selected Works"
-      description="Browse my curated selection of paintings. Click to explore details."
-      items={[
-        {
-          title: "Golden Hour",          description: "18x24 oil on canvas exploring light.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-woman-with-creative-plastic-unusual-black-mask-bright-colorful-makeup-with-black-face_158538-13987.jpg"},
-        {
-          title: "Azure Serenity",          description: "30x30 textured landscape.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/watercolor-forest-landscape-painting_23-2152018046.jpg"},
-        {
-          title: "Crimson Storm",          description: "Abstract expressionism on linen.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/spatula-brush-blots-paint_23-2147895749.jpg"},
-        {
-          title: "Quiet Reflections",          description: "Charcoal and graphite study.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-boxing-day-celebration_23-2151040908.jpg"},
-        {
-          title: "Floral Dance",          description: "Impressionist floral study.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-landscape-watercolor-paint-texture_1409-2614.jpg"},
-        {
-          title: "Minimalist Echo",          description: "Subtle tones and lines.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/cool-blue-textured-background-wavy-pattern-abstract-art_53876-153428.jpg"},
-        {
-          title: "Midnight Muse",          description: "Deep oil colors with glaze.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/artist-concept-with-smiling-woman_23-2147781661.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PortfolioSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-      tag="The Process"
-      title="Creative Discipline"
-      description="Artistry is a craft refined by consistency and dedication."
-      metrics={[
-        {
-          value: "150+",          title: "Completed Works",          description: "Across several mediums.",          imageSrc: "http://img.b2bpic.net/free-photo/tubes-near-palette-spatula_23-2147895731.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Client Feedback"
-      title="Kind Words from Collectors"
-      description="Stories from those who share my pieces in their homes."
-      testimonials={[
-        {
-          name: "Anna P.",          role: "Collector",          quote: "The texture and depth of the painting are incredible in person.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/worker-thinking-about-new-idea_23-2147601360.jpg"},
-        {
-          name: "David M.",          role: "Designer",          quote: "A true professional. Highly recommended for interior projects.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/mom-daughter-are-drawing_1157-18816.jpg"},
-        {
-          name: "Sarah J.",          role: "Patron",          quote: "Every piece feels like a fragment of a dream.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg"},
-        {
-          name: "Marcus R.",          role: "Collector",          quote: "I am proud to display these works in my living room.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-group-students-learning-draw-sketch-together-art-class-using-pencil-canvas-create-vase-model-personal-growth-workshop-drawing-skills-development_482257-47336.jpg"},
-        {
-          name: "Elena K.",          role: "Artist",          quote: "Beautiful composition and daring color choices.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-artist-sculpture_23-2148002563.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSplitMedia
-      tag="Inquiries"
-      title="Frequently Asked Questions"
-      description="Have questions about commissions or availability?"
-      items={[
-        {
-          question: "Do you accept commissions?",          answer: "Yes, I take a limited number of commissions per month."},
-        {
-          question: "Are paintings framed?",          answer: "All paintings are sold unframed unless otherwise noted."},
-        {
-          question: "How do you handle shipping?",          answer: "We provide professional packing and insured worldwide shipping."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/painting-concept-with-brushes_23-2147781600.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get in touch"
-      text="Ready to own an original or have a question about my work? Let's talk."
-      primaryButton={{
-        text: "Email Me",        href: "mailto:art@visionsoflight.com"}}
-      secondaryButton={{
-        text: "Visit Instagram",        href: "https://instagram.com"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,21 @@
+// 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 AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutMediaOverlay
+          tag="About the Artist"
+          title="Capturing Emotion Through Texture"
+          description="With over 10 years of experience in fine arts, I explore the intersections of light, shadow, and human experience. Each piece is a journey into the subconscious, meant to provoke thought and inspire tranquility."
+          imageSrc="http://img.b2bpic.net/free-photo/female-artist-painting-studio_1303-11442.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,23 @@
+// 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 ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Get in touch"
+          text="Ready to own an original or have a question about my work? Let's talk."
+          primaryButton={{
+            text: "Email Me",        href: "mailto:art@visionsoflight.com"}}
+          secondaryButton={{
+            text: "Visit Instagram",        href: "https://instagram.com"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,29 @@
+// 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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSplitMedia
+          tag="Inquiries"
+          title="Frequently Asked Questions"
+          description="Have questions about commissions or availability?"
+          items={[
+            {
+              question: "Do you accept commissions?",          answer: "Yes, I take a limited number of commissions per month."},
+            {
+              question: "Are paintings framed?",          answer: "All paintings are sold unframed unless otherwise noted."},
+            {
+              question: "How do you handle shipping?",          answer: "We provide professional packing and insured worldwide shipping."},
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/painting-concept-with-brushes_23-2147781600.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,24 @@
+// 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 HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardBrand
+          brand="VISIONS OF LIGHT"
+          description="Professional art portfolio featuring curated works in oil, watercolor, and abstract expressions. Bringing imagination to life through texture and color."
+          primaryButton={{
+            text: "View Portfolio",        href: "#portfolio"}}
+          secondaryButton={{
+            text: "Contact Me",        href: "#contact"}}
+          imageSrc="http://img.b2bpic.net/free-photo/modern-art-studio-composition_23-2147868355.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+          tag="The Process"
+          title="Creative Discipline"
+          description="Artistry is a craft refined by consistency and dedication."
+          metrics={[
+            {
+              value: "150+",          title: "Completed Works",          description: "Across several mediums.",          imageSrc: "http://img.b2bpic.net/free-photo/tubes-near-palette-spatula_23-2147895731.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Portfolio.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: "Golden Hour",
+    description: "18x24 oil on canvas exploring light.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-woman-with-creative-plastic-unusual-black-mask-bright-colorful-makeup-with-black-face_158538-13987.jpg"
+  },
+  {
+    title: "Azure Serenity",
+    description: "30x30 textured landscape.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/watercolor-forest-landscape-painting_23-2152018046.jpg"
+  },
+  {
+    title: "Crimson Storm",
+    description: "Abstract expressionism on linen.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/spatula-brush-blots-paint_23-2147895749.jpg"
+  },
+  {
+    title: "Quiet Reflections",
+    description: "Charcoal and graphite study.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-boxing-day-celebration_23-2151040908.jpg"
+  },
+  {
+    title: "Floral Dance",
+    description: "Impressionist floral study.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/abstract-landscape-watercolor-paint-texture_1409-2614.jpg"
+  },
+  {
+    title: "Minimalist Echo",
+    description: "Subtle tones and lines.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/cool-blue-textured-background-wavy-pattern-abstract-art_53876-153428.jpg"
+  },
+  {
+    title: "Midnight Muse",
+    description: "Deep oil colors with glaze.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/artist-concept-with-smiling-woman_23-2147781661.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 PortfolioInline = () => {
+  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>{"Gallery"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Selected Works"}
+            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={"Browse my curated selection of paintings. Click to explore details."}
+            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-blur" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
+              <a href={item.href} className={cls("block relative overflow-hidden rounded-2xl border-[8px] border-white shadow-xl bg-white transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl hover:z-10", index % 2 === 0 ? "md:rotate-1 md:hover:rotate-0" : "md:-rotate-1 md:hover:rotate-0")}>
+                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden rounded-xl">
+                  <ImageOrVideo
+                    imageSrc={item.imageSrc}
+                    videoSrc={item.videoSrc}
+                    className="rounded-xl 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 PortfolioSection() {
+  return (
+    <div data-webild-section="portfolio" id="portfolio">
+      <PortfolioInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialRatingCards
+          tag="Client Feedback"
+          title="Kind Words from Collectors"
+          description="Stories from those who share my pieces in their homes."
+          testimonials={[
+            {
+              name: "Anna P.",          role: "Collector",          quote: "The texture and depth of the painting are incredible in person.",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/worker-thinking-about-new-idea_23-2147601360.jpg"},
+            {
+              name: "David M.",          role: "Designer",          quote: "A true professional. Highly recommended for interior projects.",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/mom-daughter-are-drawing_1157-18816.jpg"},
+            {
+              name: "Sarah J.",          role: "Patron",          quote: "Every piece feels like a fragment of a dream.",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg"},
+            {
+              name: "Marcus R.",          role: "Collector",          quote: "I am proud to display these works in my living room.",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-group-students-learning-draw-sketch-together-art-class-using-pencil-canvas-create-vase-model-personal-growth-workshop-drawing-skills-development_482257-47336.jpg"},
+            {
+              name: "Elena K.",          role: "Artist",          quote: "Beautiful composition and daring color choices.",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/female-artist-sculpture_23-2148002563.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}