Merge version_13_1782062061118 into main

Merge version_13_1782062061118 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/neutral */
-  --background: #020617;
-  --card: #0f172a;
-  --foreground: #e2e8f0;
-  --primary-cta: #c4d8f9;
-  --primary-cta-text: #020617;
-  --secondary-cta: #041633;
-  --secondary-cta-text: #e2e8f0;
-  --accent: #2d30f3;
-  --background-accent: #1d4ed8;
+  --background: #e3deea;
+  --card: #ffffff;
+  --foreground: #1f2027;
+  --primary-cta: #1f2027;
+  --primary-cta-text: #e3deea;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1f2027;
+  --accent: #627dc6;
+  --background-accent: #627dc6;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,18 +1,24 @@
-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 TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
-import HeroWorkScrollStack from "@/components/sections/hero/HeroWorkScrollStack";
-import AboutTestimonialParallax from "@/components/sections/about/AboutTestimonialParallax";
-import FeaturesBentoGridCta from "@/components/sections/features/FeaturesBentoGridCta";
-import FaqTabbedAccordion from "@/components/sections/faq/FaqTabbedAccordion";
-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 TestimonialSection from './HomePage/sections/Testimonial';
+import AboutSection from './HomePage/sections/About';
+import ServicesSection from './HomePage/sections/Services';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+
+import MetricsMediaCardsSection from './HomePage/sections/MetricsMediaCards';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/man-with-glasses-beard-front-computer-screen_169016-19016.jpg?_wi=1"
         title="Full-stack Developer"
@@ -20,102 +26,18 @@ export default function HomePage() {
       <SiteBackgroundSlot />
       <CornerGlowBackground position="fixed" />
 
-      <HeroWorkScrollStack
-        heroAnimationDelay={4}
-        tag="Open for new collaborations"
-        title="Development that"
-        titleHighlight="scales your vision."
-        description="Full-stack application consulting and high-performance development."
-        descriptionMuted="I blend AI-assisted workflows with modern architecture to deliver scalable, reliable web applications at speed."
-        primaryButton={{
-          text: "Get a consultation",          href: "#contact",          avatarSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg",          avatarLabel: "Contact Me"}}
-        sectionTag="Expertise"
-        sectionTitle="Engineering Standards"
-        sectionDescription="Built for the future: modern stacks, optimized performance, and business-first logic."
-        items={[
-          {
-            title: "Architecture Design",            description: "Database schema planning and robust backend architecture design.",            imageSrc: "https://images.pexels.com/photos/6913227/pexels-photo-6913227.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=6913227",            tag: "Strategy"},
-          {
-            title: "Web Development",            description: "Modern interfaces with Next.js, TypeScript, and Tailwind CSS.",            imageSrc: "http://img.b2bpic.net/free-photo/filter-icon-front-side_187299-45145.jpg",            tag: "Frontend"},
-          {
-            title: "API Integration",            description: "Connecting AI agents, Vector databases, and business systems.",            imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg",            tag: "Integration"},
-        ]}
-        secondaryButton={{ text: "View my capabilities", href: "#services" }}
-      />
+      <HeroSection />
 
-      <TestimonialTrustCard
-        quote="Professional, lightning-fast, and deeply insightful. My project transitioned from concept to reality in record time."
-        rating={5}
-        author="Business Partner"
-        avatars={[
-          { name: "Business Partner", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-drag-queen-indoors_23-2149556820.jpg" },
-        ]}
-      />
+      <TestimonialSection />
 
-      <div id="about" data-section="about">
-        <AboutTestimonialParallax
-          tag="About"
-          quote="I don't just write code; I provide solutions. By leveraging AI-assisted tools and agile workflows, I deliver software that works as hard as your business does."
-          author="Pakpoom Srianoot"
-          role="Full-stack Developer from Thailand"
-          imageSrc="http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg?_wi=2"
-          socialLinks={[
-            { icon: "Github", label: "Github", href: "#" },
-            { icon: "Linkedin", label: "LinkedIn", href: "#" },
-            { icon: "Mail", label: "Email", href: "#" },
-          ]}
-        />
-      </div>
+      <AboutSection />
 
-      <div id="services" data-section="services">
-        <FeaturesBentoGridCta
-          tag="Services"
-          title="Tech Stack & Expert Solutions"
-          description="Comprehensive full-stack services with a focus on UX and scalability."
-          features={[
-            { title: "Frontend Excellence", description: "Building fast, beautiful, and intuitive interfaces with Next.js, TypeScript, and shadcn/ui.", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smart-watch_23-2150201853.jpg" },
-            { title: "Backend Efficiency", description: "High-performance backends using Hono, Bun, Supabase, and Drizzle ORM.", imageSrc: "http://img.b2bpic.net/free-photo/it-expert-supervising-data-center-supercomputers-using-mockup-computer-monitor_482257-118463.jpg" },
-            { title: "AI & Integration", description: "Expertise in AI API implementation, vector search, and complex backend connectivity.", imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-technology-background-with-low-poly-plexus-design_1048-18670.jpg" },
-            { title: "Strategic Consulting", description: "Business logic planning and subscription model architecture to ensure your project scales.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-business-team-watching-presentation-laptop-sitting-workplace-staring-display-smiling-copy-space-business-meeting-concept_74855-11583.jpg" },
-          ]}
-          ctaButton={{
-            text: "Let's discuss your project",            href: "#contact",            avatarSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg",            avatarLabel: "Contact Me"}}
-        />
-      </div>
+      <ServicesSection />
+      <MetricsMediaCardsSection />
 
-      <FaqTabbedAccordion
-        tag="FAQ"
-        title="Common Questions"
-        description="Everything you need to know about my development process."
-        categories={[
-          {
-            name: "Process",            items: [
-              { question: "How do you ensure project speed?", answer: "I utilize Agentic workflows like Cursor and Claude to automate boilerplate, allowing me to focus on business-critical logic." },
-              { question: "Do you provide ongoing support?", answer: "Yes, I offer ongoing maintenance and architectural consulting for projects we build together." },
-            ],
-          },
-        ]}
-        cta={{
-          imageSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg?_wi=3",          name: "Ready to start?",          role: "Let's talk through your business goals.",          buttonText: "Send a message",          buttonHref: "#contact"}}
-      />
+      <FaqSection />
 
-      <div id="contact" data-section="contact">
-        <ContactSplitFormParallax
-          tag="Get in Touch"
-          title="Let's Build Something Great"
-          description="I work with both local and international clients. Reach out to start your project."
-          inputs={[
-            { name: "name", type: "text", placeholder: "Name", required: true },
-            { name: "email", type: "email", placeholder: "Email", required: true },
-          ]}
-          textarea={{ name: "message", placeholder: "Project details...", rows: 5, required: true }}
-          buttonText="Send"
-          imageSrc="http://img.b2bpic.net/free-photo/minimalist-spacious-interior-design_23-2150378903.jpg"
-          ctaLinks={[
-            { icon: "MessageSquare", label: "Line Official", href: "#" },
-          ]}
-        />
-      </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="About"
+              quote="I don't just write code; I provide solutions. By leveraging AI-assisted tools and agile workflows, I deliver software that works as hard as your business does."
+              author="Pakpoom Srianoot"
+              role="Full-stack Developer from Thailand"
+              imageSrc="http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg?_wi=2"
+              socialLinks={[
+                { icon: "Github", label: "Github", href: "#" },
+                { icon: "Linkedin", label: "LinkedIn", href: "#" },
+                { icon: "Mail", label: "Email", href: "#" },
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,27 @@
+// 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="Get in Touch"
+              title="Let's Build Something Great"
+              description="I work with both local and international clients. Reach out to start your project."
+              inputs={[
+                { name: "name", type: "text", placeholder: "Name", required: true },
+                { name: "email", type: "email", placeholder: "Email", required: true },
+              ]}
+              textarea={{ name: "message", placeholder: "Project details...", rows: 5, required: true }}
+              buttonText="Send"
+              imageSrc="http://img.b2bpic.net/free-photo/minimalist-spacious-interior-design_23-2150378903.jpg"
+              ctaLinks={[
+                { icon: "MessageSquare", label: "Line Official", href: "#" },
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,27 @@
+// 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";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+      <FaqTabbedAccordion
+              tag="FAQ"
+              title="Common Questions"
+              description="Everything you need to know about my development process."
+              categories={[
+                {
+                  name: "Process",            items: [
+                    { question: "How do you ensure project speed?", answer: "I utilize Agentic workflows like Cursor and Claude to automate boilerplate, allowing me to focus on business-critical logic." },
+                    { question: "Do you provide ongoing support?", answer: "Yes, I offer ongoing maintenance and architectural consulting for projects we build together." },
+                  ],
+                },
+              ]}
+              cta={{
+                imageSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg?_wi=3",          name: "Ready to start?",          role: "Let's talk through your business goals.",          buttonText: "Send a message",          buttonHref: "#contact"}}
+            />
+    </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,34 @@
+// 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 HeroWorkScrollStack from "@/components/sections/hero/HeroWorkScrollStack";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+      <HeroWorkScrollStack
+              heroAnimationDelay={4}
+              tag="Open for new collaborations"
+              title="Development that"
+              titleHighlight="scales your vision."
+              description="Full-stack application consulting and high-performance development."
+              descriptionMuted="I blend AI-assisted workflows with modern architecture to deliver scalable, reliable web applications at speed."
+              primaryButton={{
+                text: "Get a consultation",          href: "#contact",          avatarSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg",          avatarLabel: "Contact Me"}}
+              sectionTag="Expertise"
+              sectionTitle="Engineering Standards"
+              sectionDescription="Built for the future: modern stacks, optimized performance, and business-first logic."
+              items={[
+                {
+                  title: "Architecture Design",            description: "Database schema planning and robust backend architecture design.",            imageSrc: "https://images.pexels.com/photos/6913227/pexels-photo-6913227.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=6913227",            tag: "Strategy"},
+                {
+                  title: "Web Development",            description: "Modern interfaces with Next.js, TypeScript, and Tailwind CSS.",            imageSrc: "http://img.b2bpic.net/free-photo/filter-icon-front-side_187299-45145.jpg",            tag: "Frontend"},
+                {
+                  title: "API Integration",            description: "Connecting AI agents, Vector databases, and business systems.",            imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg",            tag: "Integration"},
+              ]}
+              secondaryButton={{ text: "View my capabilities", href: "#services" }}
+            />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (MetricsMediaCards).
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="metrics" id="metrics">
+      <MetricsMediaCards
+        tag="Metrics"
+        metrics={[{"description":"ส่งมอบงานได้รวดเร็วและตรงตามกำหนดเวลา","imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop","title":"ความรวดเร็ว","value":"100%"},{"description":"ระบบมีความเสถียรและพร้อมใช้งานตลอดเวลา","imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop","title":"Uptime","value":"99.9%"},{"title":"ความพึงพอใจ","value":"100%","description":"ความพึงพอใจจากลูกค้าที่ได้รับการส่งมอบงาน","imageSrc":"https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop"}]}
+        description="ผลลัพธ์และตัวชี้วัดที่แสดงถึงความสำเร็จในการพัฒนาซอฟต์แวร์และแอปพลิเคชัน"
+        title="สถิติและผลงาน"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/MetricsMediaCards.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (MetricsMediaCards).
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+
+export default function MetricsMediaCardsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="metrics-media-cards" id="metrics-media-cards">
+      <MetricsMediaCards
+        title="สถิติและผลงาน"
+        tag="Metrics"
+        description="ผลลัพธ์และตัวชี้วัดที่แสดงถึงความสำเร็จในการพัฒนาซอฟต์แวร์และแอปพลิเคชัน"
+        metrics={[{"imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop","value":"100%","title":"ความรวดเร็ว","description":"ส่งมอบงานได้รวดเร็วและตรงตามกำหนดเวลา"},{"description":"ระบบมีความเสถียรและพร้อมใช้งานตลอดเวลา","title":"Uptime","value":"99.9%","imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop"},{"description":"ความพึงพอใจจากลูกค้าที่ได้รับการส่งมอบงาน","title":"ความพึงพอใจ","imageSrc":"https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop","value":"100%"}]}
+      />
+    </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="Services"
+              title="Tech Stack & Expert Solutions"
+              description="Comprehensive full-stack services with a focus on UX and scalability."
+              features={[
+                { title: "Frontend Excellence", description: "Building fast, beautiful, and intuitive interfaces with Next.js, TypeScript, and shadcn/ui.", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smart-watch_23-2150201853.jpg" },
+                { title: "Backend Efficiency", description: "High-performance backends using Hono, Bun, Supabase, and Drizzle ORM.", imageSrc: "http://img.b2bpic.net/free-photo/it-expert-supervising-data-center-supercomputers-using-mockup-computer-monitor_482257-118463.jpg" },
+                { title: "AI & Integration", description: "Expertise in AI API implementation, vector search, and complex backend connectivity.", imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-technology-background-with-low-poly-plexus-design_1048-18670.jpg" },
+                { title: "Strategic Consulting", description: "Business logic planning and subscription model architecture to ensure your project scales.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-business-team-watching-presentation-laptop-sitting-workplace-staring-display-smiling-copy-space-business-meeting-concept_74855-11583.jpg" },
+              ]}
+              ctaButton={{
+                text: "Let's discuss your project",            href: "#contact",            avatarSrc: "http://img.b2bpic.net/free-photo/man-with-glasses-beard-front-computer-screen_169016-19016.jpg",            avatarLabel: "Contact Me"}}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Testimonial.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonial" section.
+
+import React from 'react';
+import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
+
+export default function TestimonialSection(): React.JSX.Element {
+  return (
+    <div id="testimonial" data-section="testimonial">
+      <TestimonialTrustCard
+              quote="Professional, lightning-fast, and deeply insightful. My project transitioned from concept to reality in record time."
+              rating={5}
+              author="Business Partner"
+              avatars={[
+                { name: "Business Partner", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-drag-queen-indoors_23-2149556820.jpg" },
+              ]}
+            />
+    </div>
+  );
+}