From 5da7b644aef5c2ca500b11978e7b2e41164add0d Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 17:18:55 +0000
Subject: [PATCH] Bob AI: Changed color palette to beige and sage green theme

---
 src/index.css                                |  18 +--
 src/pages/HomePage.tsx                       | 122 ++++---------------
 src/pages/HomePage/sections/Contact.tsx      |  18 +++
 src/pages/HomePage/sections/Features.tsx     |  33 +++++
 src/pages/HomePage/sections/FeaturesIcon.tsx |  24 ++++
 src/pages/HomePage/sections/Hero.tsx         |  24 ++++
 src/pages/HomePage/sections/Pricing.tsx      |  31 +++++
 src/pages/HomePage/sections/Testimonials.tsx |  23 ++++
 8 files changed, 183 insertions(+), 110 deletions(-)
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Features.tsx
 create mode 100644 src/pages/HomePage/sections/FeaturesIcon.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Pricing.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx

diff --git a/src/index.css b/src/index.css
index af2d2d2..8d15e32 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/darkTheme/lightPurple */
-  --background: #050012;
-  --card: #040121;
-  --foreground: #f0e6ff;
-  --primary-cta: #c89bff;
-  --primary-cta-text: #050012;
-  --secondary-cta: #1d123b;
-  --secondary-cta-text: #f0e6ff;
-  --accent: #684f7b;
-  --background-accent: #65417c;
+  --background: #F5F5DC;
+  --card: #E8E4D9;
+  --foreground: #2D3A26;
+  --primary-cta: #8A9A5B;
+  --primary-cta-text: #FFFFFF;
+  --secondary-cta: #D2B48C;
+  --secondary-cta-text: #2D3A26;
+  --accent: #6B8E23;
+  --background-accent: #A3B18A;
 
   /* @layout/border-radius/soft */
   --radius: 1.5rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 4014b36..cdd911c 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,115 +1,35 @@
-import { Zap, Shield, Layers, Users, Rocket, Target, Clock, Globe } from "lucide-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 HeroCenteredLogos from "@/components/sections/hero/HeroCenteredLogos";
-import FeaturesBento from "@/components/sections/features/FeaturesBento";
-import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
-import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
-import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
-import ContactCta from "@/components/sections/contact/ContactCta";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import FeaturesSection from './HomePage/sections/Features';
+import FeaturesIconSection from './HomePage/sections/FeaturesIcon';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import PricingSection from './HomePage/sections/Pricing';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+export default function HomePage(): React.JSX.Element {
   return (
-    <StyleProvider siteBackground="aurora" heroBackground="lightRaysCenter" buttonVariant="arrow">
+<StyleProvider siteBackground="aurora" heroBackground="lightRaysCenter" buttonVariant="arrow">
         <SiteBackgroundSlot />
 
-        <div id="hero" data-section="hero">
-          <HeroCenteredLogos
-            avatarsSrc={[
-              "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-suit-cross-arms-chest-looking-like-real-professional-smili_1258-122403.jpg",              "http://img.b2bpic.net/free-photo/young-woman-standing-near-desk-kitchen_231208-775.jpg",              "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",              "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5103.jpg"]}
-            avatarText="Trusted by 500+ design-forward teams"
-            title="Harmonious Design for Modern SaaS"
-            description="Crafted with a refined beige and sage aesthetic. Elevate your brand presence with intuitive flow and sophisticated layouts."
-            primaryButton={{ text: "Get Started", href: "#pricing" }}
-            secondaryButton={{ text: "Explore Features", href: "#features" }}
-            names={["Bloom", "Verdant", "Sage", "Terra", "Haven", "Earthy"]}
-            imageSrc=""
-            hideMedia
-          />
-        </div>
+        <HeroSection />
 
-        <div id="features" data-section="features">
-          <FeaturesBento
-            tag="Organic Growth"
-            title="Designed for Clarity"
-            description="Functional components that balance aesthetic elegance with enterprise performance."
-            features={[
-              {
-                title: "Data Insights",                description: "Visualizing your growth with intuitive, clean dashboards.",                bentoComponent: "animated-bar-chart"},
-              {
-                title: "Seamless Operations",                description: "Optimized performance to keep your workflow fluid.",                bentoComponent: "info-card-marquee",                infoCards: [
-                  { icon: Zap, label: "Speed", value: "Ultra" },
-                  { icon: Globe, label: "Global", value: "50ms" },
-                  { icon: Clock, label: "Uptime", value: "99.9%" },
-                ],
-              },
-              {
-                title: "Secure Foundations",                description: "Robust infrastructure wrapped in elegant user interfaces.",                bentoComponent: "orbiting-icons",                centerIcon: Shield,
-                orbitIcons: [Layers, Users, Target],
-              },
-            ]}
-          />
-        </div>
+        <FeaturesSection />
 
-        <div data-section="features-icon">
-          <FeaturesIconCards
-            tag="Our Philosophy"
-            title="Designed by creators, for creators"
-            description="We blend nature-inspired color palettes with functional engineering to build products that feel right."
-            features={[
-              { icon: Layers, title: "Modular Systems", description: "Composable components that adapt to your unique vision." },
-              { icon: Rocket, title: "Effortless Flow", description: "Smooth transitions and intuitive user journeys at every touchpoint." },
-              { icon: Shield, title: "Calm Security", description: "High-grade protection that remains quiet and unobtrusive." },
-              { icon: Zap, title: "Swift Execution", description: "Performance-tuned framework ready for high-demand applications." },
-            ]}
-          />
-        </div>
+        <FeaturesIconSection />
 
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialTrustCard
-            quote="The sage and beige aesthetic brought a level of professional warmth to our dashboard that we haven't found anywhere else. Truly sophisticated work."
-            rating={5}
-            author="Elena Vance, Lead Designer at Verdant Labs"
-            avatars={[
-              { name: "Elena Vance", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-suit-cross-arms-chest-looking-like-real-professional-smili_1258-122403.jpg" },
-              { name: "Mark H.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-near-desk-kitchen_231208-775.jpg" },
-              { name: "Sofia K.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg" },
-              { name: "Liam P.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5103.jpg" },
-            ]}
-          />
-        </div>
+        <TestimonialsSection />
 
-        <div id="pricing" data-section="pricing">
-          <PricingLayeredCards
-            tag="Transparent Tiers"
-            title="Find your perfect plan"
-            description="Flexible options designed for teams of any size, start your 14-day trial today."
-            plans={[
-              {
-                tag: "Essential",                price: "$35/mo",                description: "For individuals and small creative studios",                primaryButton: { text: "Begin Trial", href: "#" },
-                features: ["Single workspace", "Core analytics", "Basic integrations", "Email support"],
-              },
-              {
-                tag: "Growth",                price: "$85/mo",                description: "For teams scaling their product footprint",                primaryButton: { text: "Begin Trial", href: "#" },
-                features: ["Five workspaces", "Advanced analytics", "Priority support", "SSO enabled"],
-              },
-              {
-                tag: "Custom",                price: "Custom",                description: "Tailored solutions for enterprise-grade growth",                primaryButton: { text: "Contact Us", href: "#contact" },
-                features: ["Unlimited workspaces", "Custom reporting", "Dedicated success manager", "99.99% SLA"],
-              },
-            ]}
-          />
-        </div>
+        <PricingSection />
 
-        <div id="contact" data-section="contact">
-          <ContactCta
-            tag="Join Our Journey"
-            text="Ready to build something truly beautiful and efficient? Let's connect."
-            primaryButton={{ text: "Get Started", href: "#pricing" }}
-            secondaryButton={{ text: "Request Demo", href: "#" }}
-          />
-        </div>
+        <ContactSection />
 
       </StyleProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..296e8a4
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,18 @@
+// 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";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactCta
+                tag="Join Our Journey"
+                text="Ready to build something truly beautiful and efficient? Let's connect."
+                primaryButton={{ text: "Get Started", href: "#pricing" }}
+                secondaryButton={{ text: "Request Demo", href: "#" }}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx
new file mode 100644
index 0000000..727900f
--- /dev/null
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,33 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import { Zap, Shield, Layers, Users, Rocket, Target, Clock, Globe } from "lucide-react";
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+              <FeaturesBento
+                tag="Organic Growth"
+                title="Designed for Clarity"
+                description="Functional components that balance aesthetic elegance with enterprise performance."
+                features={[
+                  {
+                    title: "Data Insights",                description: "Visualizing your growth with intuitive, clean dashboards.",                bentoComponent: "animated-bar-chart"},
+                  {
+                    title: "Seamless Operations",                description: "Optimized performance to keep your workflow fluid.",                bentoComponent: "info-card-marquee",                infoCards: [
+                      { icon: Zap, label: "Speed", value: "Ultra" },
+                      { icon: Globe, label: "Global", value: "50ms" },
+                      { icon: Clock, label: "Uptime", value: "99.9%" },
+                    ],
+                  },
+                  {
+                    title: "Secure Foundations",                description: "Robust infrastructure wrapped in elegant user interfaces.",                bentoComponent: "orbiting-icons",                centerIcon: Shield,
+                    orbitIcons: [Layers, Users, Target],
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/FeaturesIcon.tsx b/src/pages/HomePage/sections/FeaturesIcon.tsx
new file mode 100644
index 0000000..91490ca
--- /dev/null
+++ b/src/pages/HomePage/sections/FeaturesIcon.tsx
@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features-icon" section.
+
+import React from 'react';
+import { Zap, Shield, Layers, Users, Rocket, Target, Clock, Globe } from "lucide-react";
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+
+export default function FeaturesIconSection(): React.JSX.Element {
+  return (
+    <div data-section="features-icon">
+              <FeaturesIconCards
+                tag="Our Philosophy"
+                title="Designed by creators, for creators"
+                description="We blend nature-inspired color palettes with functional engineering to build products that feel right."
+                features={[
+                  { icon: Layers, title: "Modular Systems", description: "Composable components that adapt to your unique vision." },
+                  { icon: Rocket, title: "Effortless Flow", description: "Smooth transitions and intuitive user journeys at every touchpoint." },
+                  { icon: Shield, title: "Calm Security", description: "High-grade protection that remains quiet and unobtrusive." },
+                  { icon: Zap, title: "Swift Execution", description: "Performance-tuned framework ready for high-demand applications." },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..f3440d6
--- /dev/null
+++ b/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 HeroCenteredLogos from "@/components/sections/hero/HeroCenteredLogos";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+              <HeroCenteredLogos
+                avatarsSrc={[
+                  "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-suit-cross-arms-chest-looking-like-real-professional-smili_1258-122403.jpg",              "http://img.b2bpic.net/free-photo/young-woman-standing-near-desk-kitchen_231208-775.jpg",              "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",              "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5103.jpg"]}
+                avatarText="Trusted by 500+ design-forward teams"
+                title="Harmonious Design for Modern SaaS"
+                description="Crafted with a refined beige and sage aesthetic. Elevate your brand presence with intuitive flow and sophisticated layouts."
+                primaryButton={{ text: "Get Started", href: "#pricing" }}
+                secondaryButton={{ text: "Explore Features", href: "#features" }}
+                names={["Bloom", "Verdant", "Sage", "Terra", "Haven", "Earthy"]}
+                imageSrc=""
+                hideMedia
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Pricing.tsx b/src/pages/HomePage/sections/Pricing.tsx
new file mode 100644
index 0000000..8b39f2a
--- /dev/null
+++ b/src/pages/HomePage/sections/Pricing.tsx
@@ -0,0 +1,31 @@
+// 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 PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+              <PricingLayeredCards
+                tag="Transparent Tiers"
+                title="Find your perfect plan"
+                description="Flexible options designed for teams of any size, start your 14-day trial today."
+                plans={[
+                  {
+                    tag: "Essential",                price: "$35/mo",                description: "For individuals and small creative studios",                primaryButton: { text: "Begin Trial", href: "#" },
+                    features: ["Single workspace", "Core analytics", "Basic integrations", "Email support"],
+                  },
+                  {
+                    tag: "Growth",                price: "$85/mo",                description: "For teams scaling their product footprint",                primaryButton: { text: "Begin Trial", href: "#" },
+                    features: ["Five workspaces", "Advanced analytics", "Priority support", "SSO enabled"],
+                  },
+                  {
+                    tag: "Custom",                price: "Custom",                description: "Tailored solutions for enterprise-grade growth",                primaryButton: { text: "Contact Us", href: "#contact" },
+                    features: ["Unlimited workspaces", "Custom reporting", "Dedicated success manager", "99.99% SLA"],
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..8fdc250
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,23 @@
+// 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 TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+              <TestimonialTrustCard
+                quote="The sage and beige aesthetic brought a level of professional warmth to our dashboard that we haven't found anywhere else. Truly sophisticated work."
+                rating={5}
+                author="Elena Vance, Lead Designer at Verdant Labs"
+                avatars={[
+                  { name: "Elena Vance", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-suit-cross-arms-chest-looking-like-real-professional-smili_1258-122403.jpg" },
+                  { name: "Mark H.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-near-desk-kitchen_231208-775.jpg" },
+                  { name: "Sofia K.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg" },
+                  { name: "Liam P.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5103.jpg" },
+                ]}
+              />
+            </div>
+  );
+}
-- 
2.49.1