Update src/app/about/page.tsx

Merge version_13 into main

src/app/about/page.tsx

@@ -6,7 +6,7 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
 
 export default function AboutPage() {
   return (
@@ -38,7 +38,7 @@ export default function AboutPage() {
           />
         </div>
 
-        <div id="about-header" data-section="about-header">
+        <div id="about-header" data-section="about-header" style={{ backgroundColor: "#F5F5F0" }}>
           <TextSplitAbout
             title="Ronnie Konishi"
             description={[
@@ -48,7 +48,7 @@ export default function AboutPage() {
           />
         </div>
 
-        <div id="about-story" data-section="about-story">
+        <div id="about-story" data-section="about-story" style={{ backgroundColor: "#F5F5F0" }}>
           <TextSplitAbout
             title="The Story"
             description={[
@@ -58,7 +58,7 @@ export default function AboutPage() {
           />
         </div>
 
-        <div id="about-mission" data-section="about-mission">
+        <div id="about-mission" data-section="about-mission" style={{ backgroundColor: "#F5F5F0" }}>
           <TextSplitAbout
             title="Why I Founded Palante STS"
             description={[
@@ -69,7 +69,7 @@ export default function AboutPage() {
           />
         </div>
 
-        <div id="bring-to-family" data-section="bring-to-family">
+        <div id="bring-to-family" data-section="bring-to-family" style={{ backgroundColor: "#F5F5F0" }}>
           <MetricSplitMediaAbout
             title="What I Bring to Your Family"
             description="My role is to be your anchor. I combine professional real estate strategy with deep senior care knowledge to ensure you never have to navigate this journey alone."
@@ -84,18 +84,22 @@ export default function AboutPage() {
           />
         </div>
 
-        <div id="who-i-serve" data-section="who-i-serve">
-          <FeatureCardTwentyOne
+        <div id="who-i-serve" data-section="who-i-serve" style={{ backgroundColor: "#F5F5F0" }}>
+          <FeatureBento
             title="Who I Serve"
             description="I partner with families in Southern California seeking professional guidance during senior transitions."
-            accordionItems={[
-              { id: "s1", title: "Families in Transition", content: "Supporting adult children caring for aging parents." },
-              { id: "s2", title: "Seniors Moving Forward", content: "Helping seniors find the right community and downsizing comfortably." },
-              { id: "s3", title: "Real Estate Needs", content: "Those needing expert home sale management as part of their transition." }
-            ]}
+            animationType="slide-up"
+            textboxLayout="split"
             useInvertedBackground={true}
-            mediaPosition="right"
-            videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
+            features={[
+              {
+                title: "Families in Transition",                description: "Supporting adult children caring for aging parents.",                bentoComponent: "media-stack",                items: [
+                  { imageSrc: "https://images.unsplash.com/photo-1554629947-320078873099" },
+                  { imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2" },
+                  { imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" }
+                ]
+              }
+            ]}
           />
         </div>
 
@@ -112,4 +116,4 @@ export default function AboutPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}