Update src/app/about/page.tsx

src/app/about/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { History, Leaf, Smile } from "lucide-react";
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Utensils } from "lucide-react";
 
-export default function LandingPage() {
+export default function AboutPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -23,122 +22,45 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Order Online",
-          id: "/order",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      button={{
-        text: "Order Now",
-        href: "/order",
-      }}
-      brandName="The Kitchen on Main"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "About", id: "/about" },
+              { name: "Order Online", id: "/order" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Order Now", href: "/order" }}
+            brandName="The Kitchen on Main"
+          />
+        </div>
 
-  <div id="about-story" data-section="about-story">
-      <AboutMetric
-      useInvertedBackground={false}
-      title="Welcome to The Kitchen on Main"
-      metrics={[
-        {
-          label: "Community Heritage",
-          value: "10+ Years",
-          icon: History,
-        },
-        {
-          label: "Local Ingredients",
-          value: "Farm Fresh",
-          icon: Leaf,
-        },
-        {
-          label: "Happy Neighbors",
-          value: "5000+",
-          icon: Smile,
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about-hero" data-section="about-hero">
+          <TestimonialAboutCard
+            tag="Our Story"
+            tagIcon={Utensils}
+            title="Heart of Fortville Comfort"
+            description="Founded with a simple mission: bring genuine, elevated comfort food to our community. We believe in high-quality ingredients, locally sourced whenever possible, to create dishes that feel like home."
+            subdescription="From our kitchen to your table, every burger is grilled to order and every salad is prepared fresh daily. We are proud to be a gathering spot for families, friends, and anyone looking for a delicious meal on Main Street."
+            icon={Utensils}
+            imageSrc="http://img.b2bpic.net/free-photo/chef-preparing-food-restaurant_23-2148154867.jpg?_wi=1"
+            imageAlt="Chef preparing gourmet meal"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Our Story"
-      description={[
-        "Started as a small local cafe, we have grown into a cornerstone of Fortville dining.",
-        "Focusing on local, farm-to-table ingredients to bring you the best flavor.",
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Menu",
-              href: "/menu",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Order Online",
-              href: "/order",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Fortville, IN",
-              href: "#",
-            },
-            {
-              label: "Open Daily",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="The Kitchen on Main"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }] },
+              { items: [{ label: "Order Online", href: "/order" }, { label: "Contact", href: "/contact" }] },
+              { items: [{ label: "Fortville, IN", href: "#" }, { label: "Open Daily", href: "#" }] },
+            ]}
+            logoText="The Kitchen on Main"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}