Merge version_3 into main

Merge version_3 into main

src/app/about/page.tsx

@@ -9,7 +9,7 @@ import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwe
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import { Heart, Users, BrainCircuit, Target, BookOpen, ShieldCheck, Clock } from "lucide-react";
+import { Heart, ShieldCheck } from "lucide-react";
 
 export default function AboutPage() {
   return (
@@ -50,6 +50,7 @@ export default function AboutPage() {
         <div id="founder" data-section="founder">
             <TextAbout
               title="The Vision Behind Palante STS"
+              useInvertedBackground={false}
               className="py-20"
             />
         </div>
@@ -57,6 +58,7 @@ export default function AboutPage() {
         <div id="why-i-started" data-section="why-i-started">
             <TextAbout
               title="Why I Started"
+              useInvertedBackground={true}
               className="py-20 bg-accent/10"
             />
         </div>
@@ -66,6 +68,7 @@ export default function AboutPage() {
               title="What Makes Palante Different"
               animationType="slide-up"
               textboxLayout="split"
+              useInvertedBackground={false}
               features={[
                 { id: "d1", title: "Heart-Centered", subtitle: "Empathy first", category: "Methodology", value: "100%" },
                 { id: "d2", title: "Structured Care", subtitle: "Proven framework", category: "Methodology", value: "Proven" }
@@ -76,9 +79,9 @@ export default function AboutPage() {
         <div id="what-i-bring" data-section="what-i-bring">
             <MetricCardThree
               title="What I Bring To Your Family"
-              gridVariant="uniform-all-items-equal"
               animationType="slide-up"
               textboxLayout="default"
+              useInvertedBackground={false}
               metrics={[
                 { id: "b1", icon: ShieldCheck, title: "Integrity", value: "Always" },
                 { id: "b2", icon: Heart, title: "Advocacy", value: "Active" }
@@ -89,6 +92,7 @@ export default function AboutPage() {
         <div id="who-i-serve" data-section="who-i-serve">
             <TextAbout
               title="Who I Serve"
+              useInvertedBackground={true}
               className="py-20 bg-accent/10"
             />
         </div>
@@ -96,6 +100,7 @@ export default function AboutPage() {
         <div id="when-families-reach-out" data-section="when-families-reach-out">
             <TextAbout
               title="When Families Reach Out"
+              useInvertedBackground={false}
               className="py-20"
             />
         </div>
@@ -106,6 +111,7 @@ export default function AboutPage() {
               title="Let's Connect"
               description="We are here to support your family's journey."
               background={{ variant: "sparkles-gradient" }}
+              useInvertedBackground={false}
             />
         </div>