Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
@@ -66,12 +66,18 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <MetricSplitMediaAbout
+      title="From Our Small Kusina to Your Home"
+      description="Tess started with a single oven and a handful of cherished family recipes in her small home kusina. Today, that passion lives on in every batch of Pandesal and Ensaymada we bake, bringing the warmth of Filipino traditions to our community."
+      metrics={[
+        { value: "10+", title: "Years of Passion" },
+        { value: "500+", title: "Batches Baked Daily" },
+        { value: "100%", title: "Authentic Filipino" }
+      ]}
       useInvertedBackground={false}
-      title="Our Filipino Heritage"
-      description="At Mabuhay Bakery, we believe that food is the ultimate language of community. Inspired by our roots, we bring family recipes to life, using high-quality ingredients to serve you that familiar home-cooked warmth every single day. Salamat for letting us be part of your story."
-      buttons={[{ text: "Learn More" }]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-baker-with-tray_23-2149233682.jpg"
+      mediaAnimation="slide-up"
+      metricsAnimation="slide-up"
     />
   </div>
 

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfaf8;
+  --background: #fdfaf0;
   --card: #ffffff;
-  --foreground: #2b180a;
+  --foreground: #4a3c2e;
-  --primary-cta: #6d3a9c;
+  --primary-cta: #d97757;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #fbfaf8;
+  --secondary-cta: #fdfaf0;
   --secondary-cta-text: #2b180a;
-  --accent: #2e8b57;
+  --accent: #738a5b;
-  --background-accent: #f3eee6;
+  --background-accent: #fcebb9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);