From 83101dac51631e6a900099ad9102471af0285e64 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 12:40:10 +0000
Subject: [PATCH 1/3] Bob AI: Update global theme colors to black, blue, and
 white.

---
 src/index.css                               |  16 +-
 src/pages/HomePage.tsx                      | 172 +++-----------------
 src/pages/HomePage/sections/About.tsx       |  24 +++
 src/pages/HomePage/sections/Contact.tsx     |  27 +++
 src/pages/HomePage/sections/Faq.tsx         |  62 +++++++
 src/pages/HomePage/sections/Hero.tsx        |  50 ++++++
 src/pages/HomePage/sections/Services.tsx    |  29 ++++
 src/pages/HomePage/sections/Testimonial.tsx |  20 +++
 8 files changed, 239 insertions(+), 161 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.tsx
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Services.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonial.tsx

diff --git a/src/index.css b/src/index.css
index 0584f85..b1f2bc8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/neutral */
-  --background: #ffffff;
-  --card: #f5f5f5;
-  --foreground: #171717;
-  --primary-cta: #171717;
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #005eff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f5f5f5;
-  --secondary-cta-text: #171717;
-  --accent: #171717;
-  --background-accent: #171717;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #000000;
+  --accent: #005eff;
+  --background-accent: #000000;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 4ac7766..7fdb980 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,16 +1,22 @@
+// 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 { motion } from "motion/react";
 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() {
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
         <LoaderReveal
@@ -29,157 +35,17 @@ export default function HomePage() {
           
         </motion.div>
 
-        <HeroWorkScrollStack
-          heroAnimationDelay={4}
-          tag="1 spot left this month"
-          title="Design that"
-          titleHighlight="commands attention."
-          description="Design engineered for performance, not just aesthetics."
-          descriptionMuted="I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."
-          primaryButton={{
-            text: "Book a call with me",
-            href: "#contact",
-            avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
-            avatarLabel: "You",
-          }}
-          sectionTag="Selected Work"
-          sectionTitle="Projects That Speak for Themselves"
-          sectionDescription="A curated selection of design work that drove real business results for ambitious brands."
-          items={[
-            {
-              title: "HydroFlow Product Launch",
-              description: "Beverage brand shoot. Every frame engineered to sell.",
-              imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-1.webp",
-              tag: "Product Shot",
-            },
-            {
-              title: "Webild Athlete Campaign",
-              description: "Sports tech shoot. Wearables captured in raw motion.",
-              imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-2.webp",
-              tag: "Photography",
-            },
-            {
-              title: "Maru Residence",
-              description: "Architectural interior shoot. Minimal compositions.",
-              imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-3.webp",
-              tag: "Interior Design",
-            },
-          ]}
-          secondaryButton={{ text: "View all my projects", href: "#" }}
-        />
+        <HeroSection />
 
-        <TestimonialTrustCard
-          quote="Working with Joseph felt like having a seasoned design partner who truly understood our vision for KYMA and brought it to life in ways we hadn't even imagined."
-          rating={5}
-          author="Thomas Weber — Co-founder of KYMA"
-          avatars={[
-            { name: "Thomas Weber", imageSrc: "https://randomuser.me/api/portraits/men/75.jpg" },
-          ]}
-        />
+        <TestimonialSection />
 
-        <div id="about" data-section="about">
-          <AboutTestimonialParallax
-            tag="About"
-            quote="I don't design to decorate — I design to solve. Sharp, intentional work that moves brands forward."
-            author="Joseph Alexander"
-            role="Independent Designer"
-            imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
-            socialLinks={[
-              { icon: "Twitter", label: "Twitter", href: "#" },
-              { icon: "Linkedin", label: "LinkedIn", href: "#" },
-              { icon: "Instagram", label: "Instagram", href: "#" },
-            ]}
-          />
-        </div>
+        <AboutSection />
 
-        <div id="services" data-section="services">
-          <FeaturesBentoGridCta
-            tag="Services"
-            title="What I Bring to the Table"
-            description="End-to-end creative services designed to make your brand impossible to ignore — from the first frame to the final pixel."
-            features={[
-              { title: "Photography", description: "Art-directed shoots that capture your brand's personality. Every image is color-graded and built to stop the scroll.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp" },
-              { title: "Product Design", description: "User-centered interfaces for apps and SaaS products. From wireframe to pixel-perfect UI — intuitive experiences that keep users coming back.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp" },
-              { title: "Website", description: "Conversion-focused websites that look sharp and perform. Clean layouts, strategic CTAs, and responsive design that turns traffic into revenue.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp" },
-              { title: "Videos", description: "Brand films and product videos engineered for engagement. Story-driven visuals that convert viewers into customers.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp" },
-            ]}
-            ctaButton={{
-              text: "Book a call with me",
-              href: "#contact",
-              avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
-              avatarLabel: "You",
-            }}
-          />
-        </div>
+        <ServicesSection />
 
-        <FaqTabbedAccordion
-          tag="FAQ"
-          title="Frequently Asked Questions"
-          description="Everything you need to know before we start working together."
-          categories={[
-            {
-              name: "General",
-              items: [
-                { question: "What type of clients do you work with?", answer: "I work with ambitious brands, startups, and established businesses that value premium creative work. Whether you're launching a new product or refreshing your brand identity, I bring the same level of craft and attention to detail." },
-                { question: "What's your availability like?", answer: "I typically take on 2–3 projects at a time to ensure each client gets my full attention. Reach out to check my current availability — I'm happy to discuss timelines." },
-                { question: "Do you work remotely or on-site?", answer: "Primarily remote, but I'm open to on-site work for shoots, workshops, or strategy sessions depending on the project scope and location." },
-                { question: "Can I see more examples of your work?", answer: "Absolutely. The projects on this site are a curated selection. I'm happy to share additional case studies relevant to your industry during our initial call." },
-              ],
-            },
-            {
-              name: "Pricing",
-              items: [
-                { question: "How do you structure your pricing?", answer: "I offer project-based pricing tailored to scope and deliverables. Every engagement starts with a discovery call so I can provide an accurate, transparent quote — no surprises." },
-                { question: "Do you require a deposit?", answer: "Yes, I require a 50% deposit to secure your spot and begin work. The remaining balance is due upon delivery of final assets." },
-                { question: "Do you offer retainer packages?", answer: "I do. For clients with ongoing creative needs, monthly retainers offer priority access, discounted rates, and faster turnaround times." },
-                { question: "What's included in a typical project quote?", answer: "Quotes include all creative direction, production, editing, and delivery of final files. Revisions are built in — I want you to be thrilled with the result." },
-              ],
-            },
-            {
-              name: "Process",
-              items: [
-                { question: "What does your process look like?", answer: "Discovery call → Creative brief → Concept development → Production → Review & refinement → Final delivery. I keep you in the loop at every stage with clear timelines and checkpoints." },
-                { question: "How long does a typical project take?", answer: "Most projects wrap within 2–4 weeks depending on complexity. Larger campaigns or multi-deliverable projects may extend further, and I'll set expectations upfront." },
-                { question: "How many revisions are included?", answer: "Two rounds of revisions are standard. In practice, my clients rarely need more than one — I invest heavily in understanding your vision before production begins." },
-                { question: "What do you need from me to get started?", answer: "A brief overview of your brand, goals, and any existing assets or references. I'll guide you through the rest during our kickoff call." },
-              ],
-            },
-            {
-              name: "Results",
-              items: [
-                { question: "What kind of results can I expect?", answer: "My work is designed to drive measurable outcomes — higher engagement, increased conversions, and a brand presence that commands attention. I'll share relevant case studies during our call." },
-                { question: "Do you track performance metrics?", answer: "While I focus on the creative, I design everything with performance in mind. I'm happy to collaborate with your marketing team to align on KPIs and measure impact." },
-                { question: "Can you share client testimonials?", answer: "Yes — I have testimonials and references available. Many of my clients see 2–3x improvements in engagement after implementing new creative assets." },
-                { question: "What makes your work different?", answer: "I combine strategic thinking with high-end execution. Every project is approached as a partnership — I'm invested in your success, not just delivering files." },
-              ],
-            },
-          ]}
-          cta={{
-            imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
-            name: "More questions? Reach out anytime.",
-            role: "joseph@alexandercreative.com",
-            buttonText: "Book a call",
-            buttonHref: "#contact",
-          }}
-        />
+        <FaqSection />
 
-        <div id="contact" data-section="contact">
-          <ContactSplitFormParallax
-            tag="Get in Touch"
-            title="Let's Build"
-            description="Have a project in mind? Drop me a message and I'll get back to you within 24 hours."
-            inputs={[
-              { name: "name", type: "text", placeholder: "Your name", required: true },
-              { name: "email", type: "email", placeholder: "Your email", required: true }
-            ]}
-            textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 5, required: true }}
-            buttonText="Send Message"
-            imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/contact.webp"
-            ctaLinks={[
-              { icon: "Video", label: "Book a Call", href: "#" },
-            ]}
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..d04b60f
--- /dev/null
+++ b/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 design to decorate — I design to solve. Sharp, intentional work that moves brands forward."
+                author="Joseph Alexander"
+                role="Independent Designer"
+                imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
+                socialLinks={[
+                  { icon: "Twitter", label: "Twitter", href: "#" },
+                  { icon: "Linkedin", label: "LinkedIn", href: "#" },
+                  { icon: "Instagram", label: "Instagram", href: "#" },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..8aaa44c
--- /dev/null
+++ b/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"
+                description="Have a project in mind? Drop me a message and I'll get back to you within 24 hours."
+                inputs={[
+                  { name: "name", type: "text", placeholder: "Your name", required: true },
+                  { name: "email", type: "email", placeholder: "Your email", required: true }
+                ]}
+                textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 5, required: true }}
+                buttonText="Send Message"
+                imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/contact.webp"
+                ctaLinks={[
+                  { icon: "Video", label: "Book a Call", href: "#" },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..f443e8b
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,62 @@
+// 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="Frequently Asked Questions"
+                description="Everything you need to know before we start working together."
+                categories={[
+                  {
+                    name: "General",
+                    items: [
+                      { question: "What type of clients do you work with?", answer: "I work with ambitious brands, startups, and established businesses that value premium creative work. Whether you're launching a new product or refreshing your brand identity, I bring the same level of craft and attention to detail." },
+                      { question: "What's your availability like?", answer: "I typically take on 2–3 projects at a time to ensure each client gets my full attention. Reach out to check my current availability — I'm happy to discuss timelines." },
+                      { question: "Do you work remotely or on-site?", answer: "Primarily remote, but I'm open to on-site work for shoots, workshops, or strategy sessions depending on the project scope and location." },
+                      { question: "Can I see more examples of your work?", answer: "Absolutely. The projects on this site are a curated selection. I'm happy to share additional case studies relevant to your industry during our initial call." },
+                    ],
+                  },
+                  {
+                    name: "Pricing",
+                    items: [
+                      { question: "How do you structure your pricing?", answer: "I offer project-based pricing tailored to scope and deliverables. Every engagement starts with a discovery call so I can provide an accurate, transparent quote — no surprises." },
+                      { question: "Do you require a deposit?", answer: "Yes, I require a 50% deposit to secure your spot and begin work. The remaining balance is due upon delivery of final assets." },
+                      { question: "Do you offer retainer packages?", answer: "I do. For clients with ongoing creative needs, monthly retainers offer priority access, discounted rates, and faster turnaround times." },
+                      { question: "What's included in a typical project quote?", answer: "Quotes include all creative direction, production, editing, and delivery of final files. Revisions are built in — I want you to be thrilled with the result." },
+                    ],
+                  },
+                  {
+                    name: "Process",
+                    items: [
+                      { question: "What does your process look like?", answer: "Discovery call → Creative brief → Concept development → Production → Review & refinement → Final delivery. I keep you in the loop at every stage with clear timelines and checkpoints." },
+                      { question: "How long does a typical project take?", answer: "Most projects wrap within 2–4 weeks depending on complexity. Larger campaigns or multi-deliverable projects may extend further, and I'll set expectations upfront." },
+                      { question: "How many revisions are included?", answer: "Two rounds of revisions are standard. In practice, my clients rarely need more than one — I invest heavily in understanding your vision before production begins." },
+                      { question: "What do you need from me to get started?", answer: "A brief overview of your brand, goals, and any existing assets or references. I'll guide you through the rest during our kickoff call." },
+                    ],
+                  },
+                  {
+                    name: "Results",
+                    items: [
+                      { question: "What kind of results can I expect?", answer: "My work is designed to drive measurable outcomes — higher engagement, increased conversions, and a brand presence that commands attention. I'll share relevant case studies during our call." },
+                      { question: "Do you track performance metrics?", answer: "While I focus on the creative, I design everything with performance in mind. I'm happy to collaborate with your marketing team to align on KPIs and measure impact." },
+                      { question: "Can you share client testimonials?", answer: "Yes — I have testimonials and references available. Many of my clients see 2–3x improvements in engagement after implementing new creative assets." },
+                      { question: "What makes your work different?", answer: "I combine strategic thinking with high-end execution. Every project is approached as a partnership — I'm invested in your success, not just delivering files." },
+                    ],
+                  },
+                ]}
+                cta={{
+                  imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
+                  name: "More questions? Reach out anytime.",
+                  role: "joseph@alexandercreative.com",
+                  buttonText: "Book a call",
+                  buttonHref: "#contact",
+                }}
+              />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..1178357
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,50 @@
+// 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="1 spot left this month"
+                title="Design that"
+                titleHighlight="commands attention."
+                description="Design engineered for performance, not just aesthetics."
+                descriptionMuted="I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."
+                primaryButton={{
+                  text: "Book a call with me",
+                  href: "#contact",
+                  avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
+                  avatarLabel: "You",
+                }}
+                sectionTag="Selected Work"
+                sectionTitle="Projects That Speak for Themselves"
+                sectionDescription="A curated selection of design work that drove real business results for ambitious brands."
+                items={[
+                  {
+                    title: "HydroFlow Product Launch",
+                    description: "Beverage brand shoot. Every frame engineered to sell.",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-1.webp",
+                    tag: "Product Shot",
+                  },
+                  {
+                    title: "Webild Athlete Campaign",
+                    description: "Sports tech shoot. Wearables captured in raw motion.",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-2.webp",
+                    tag: "Photography",
+                  },
+                  {
+                    title: "Maru Residence",
+                    description: "Architectural interior shoot. Minimal compositions.",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-3.webp",
+                    tag: "Interior Design",
+                  },
+                ]}
+                secondaryButton={{ text: "View all my projects", href: "#" }}
+              />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..9523117
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,29 @@
+// 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="What I Bring to the Table"
+                description="End-to-end creative services designed to make your brand impossible to ignore — from the first frame to the final pixel."
+                features={[
+                  { title: "Photography", description: "Art-directed shoots that capture your brand's personality. Every image is color-graded and built to stop the scroll.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp" },
+                  { title: "Product Design", description: "User-centered interfaces for apps and SaaS products. From wireframe to pixel-perfect UI — intuitive experiences that keep users coming back.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp" },
+                  { title: "Website", description: "Conversion-focused websites that look sharp and perform. Clean layouts, strategic CTAs, and responsive design that turns traffic into revenue.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp" },
+                  { title: "Videos", description: "Brand films and product videos engineered for engagement. Story-driven visuals that convert viewers into customers.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp" },
+                ]}
+                ctaButton={{
+                  text: "Book a call with me",
+                  href: "#contact",
+                  avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
+                  avatarLabel: "You",
+                }}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonial.tsx b/src/pages/HomePage/sections/Testimonial.tsx
new file mode 100644
index 0000000..8f77d31
--- /dev/null
+++ b/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="Working with Joseph felt like having a seasoned design partner who truly understood our vision for KYMA and brought it to life in ways we hadn't even imagined."
+                rating={5}
+                author="Thomas Weber — Co-founder of KYMA"
+                avatars={[
+                  { name: "Thomas Weber", imageSrc: "https://randomuser.me/api/portraits/men/75.jpg" },
+                ]}
+              />
+    </div>
+  );
+}
-- 
2.49.1


From cdcc5c512cd817cfe32741eb992632cd6162ca3f Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 12:40:49 +0000
Subject: [PATCH 2/3] Bob AI: Update hero section content for Velotile agency.

---
 src/pages/HomePage/sections/Hero.tsx | 50 ++++++++--------------------
 1 file changed, 13 insertions(+), 37 deletions(-)

diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index 1178357..f1e8d15 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -8,43 +8,19 @@ export default function HeroSection(): React.JSX.Element {
   return (
     <div id="hero" data-section="hero">
       <HeroWorkScrollStack
-                heroAnimationDelay={4}
-                tag="1 spot left this month"
-                title="Design that"
-                titleHighlight="commands attention."
-                description="Design engineered for performance, not just aesthetics."
-                descriptionMuted="I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."
-                primaryButton={{
-                  text: "Book a call with me",
-                  href: "#contact",
-                  avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
-                  avatarLabel: "You",
-                }}
-                sectionTag="Selected Work"
-                sectionTitle="Projects That Speak for Themselves"
-                sectionDescription="A curated selection of design work that drove real business results for ambitious brands."
-                items={[
-                  {
-                    title: "HydroFlow Product Launch",
-                    description: "Beverage brand shoot. Every frame engineered to sell.",
-                    imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-1.webp",
-                    tag: "Product Shot",
-                  },
-                  {
-                    title: "Webild Athlete Campaign",
-                    description: "Sports tech shoot. Wearables captured in raw motion.",
-                    imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-2.webp",
-                    tag: "Photography",
-                  },
-                  {
-                    title: "Maru Residence",
-                    description: "Architectural interior shoot. Minimal compositions.",
-                    imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-3.webp",
-                    tag: "Interior Design",
-                  },
-                ]}
-                secondaryButton={{ text: "View all my projects", href: "#" }}
-              />
+        heroAnimationDelay={4}
+        tag="Velotile - Motion Design Agency"
+        title="Motion Design that"
+        titleHighlight="commands attention."
+        description="We make the world's best motion design videos."
+        descriptionMuted="From brand films to marketing videos, launch campaigns to product explainers. Our main selling point is storytelling, high-end visuals, and sound design."
+        primaryButton={{"text":"Book a call with us","avatarSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp","href":"#contact","avatarLabel":"You"}}
+        sectionTag="Selected Work"
+        sectionTitle="Projects That Speak for Themselves"
+        sectionDescription="A curated selection of motion design work that drove real business results for ambitious SaaS, AI, and Tech brands."
+        items={[{"tag":"Brand Films","description":"Brand films and marketing videos that captivate.","imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-1.webp","title":"SaaS Launch Campaign"},{"description":"High-end visuals and sound design for tech products.","imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-2.webp","title":"AI Product Explainer","tag":"Product Explainer"},{"description":"Storytelling that drives results.","imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-3.webp","title":"Tech Marketing Video","tag":"Marketing Video"}]}
+        secondaryButton={{ text: "View all my projects", href: "#" }}
+      />
     </div>
   );
 }
-- 
2.49.1


From ee408086d086ef94c4dacba4e07e12842017ae4e Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 12:41:40 +0000
Subject: [PATCH 3/3] Bob AI: Update card color and border radius for liquid
 glass UI.

---
 src/index.css                            |  4 ++--
 src/pages/HomePage/sections/Services.tsx | 22 ++++++----------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/index.css b/src/index.css
index b1f2bc8..cee984f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,7 +6,7 @@
 :root {
   /* @colorThemes/lightTheme/neutral */
   --background: #000000;
-  --card: #0a0a0a;
+  --card: #000000;
   --foreground: #ffffff;
   --primary-cta: #005eff;
   --primary-cta-text: #ffffff;
@@ -16,7 +16,7 @@
   --background-accent: #000000;
 
   /* @layout/border-radius/rounded */
-  --radius: 1rem;
+  --radius: 2rem;
 
   /* @layout/content-width/spacious */
   --width-content-width: clamp(40rem, 67.5vw, 61rem);
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
index 9523117..398843f 100644
--- a/src/pages/HomePage/sections/Services.tsx
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -8,22 +8,12 @@ export default function ServicesSection(): React.JSX.Element {
   return (
     <div id="services" data-section="services">
               <FeaturesBentoGridCta
-                tag="Services"
-                title="What I Bring to the Table"
-                description="End-to-end creative services designed to make your brand impossible to ignore — from the first frame to the final pixel."
-                features={[
-                  { title: "Photography", description: "Art-directed shoots that capture your brand's personality. Every image is color-graded and built to stop the scroll.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp" },
-                  { title: "Product Design", description: "User-centered interfaces for apps and SaaS products. From wireframe to pixel-perfect UI — intuitive experiences that keep users coming back.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp" },
-                  { title: "Website", description: "Conversion-focused websites that look sharp and perform. Clean layouts, strategic CTAs, and responsive design that turns traffic into revenue.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp" },
-                  { title: "Videos", description: "Brand films and product videos engineered for engagement. Story-driven visuals that convert viewers into customers.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp" },
-                ]}
-                ctaButton={{
-                  text: "Book a call with me",
-                  href: "#contact",
-                  avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
-                  avatarLabel: "You",
-                }}
-              />
+        tag="Services"
+        title="What We Bring to the Table"
+        description="End-to-end motion design services designed to make your brand impossible to ignore — from the first frame to the final pixel."
+        features={[{"imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp","description":"High-end brand films that capture your company's vision and story. Every frame is engineered to engage and inspire.","title":"Brand Films"},{"imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp","title":"Product Explainers","description":"Clear, concise, and visually stunning product explainers that break down complex SaaS and Tech products."},{"imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp","title":"Marketing Videos","description":"High-impact marketing videos designed to drive conversions and capture attention across all platforms."},{"imageSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp","title":"Launch Campaigns","description":"Dynamic launch campaigns that build hype and deliver results for your new product or feature release."}]}
+        ctaButton={{"text":"Book a call with us","href":"#contact","avatarLabel":"You","avatarSrc":"https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"}}
+      />
             </div>
   );
 }
-- 
2.49.1