src/app/about/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+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";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeLargeTitles"
+        background="grid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "hero" },
+                { name: "Our Process", id: "how-it-works" },
+                { name: "Services", id: "services" },
+                { name: "Contact", id: "contact" },
+              ]}
+              brandName="Palante STS"
+            />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroBillboardTestimonial
+              title="Our Story: Compassion at the Core"
+              description="Guided by personal experience, Ronnie Konishi founded Palante STS to ensure families never have to face life's biggest transitions alone."
+              background={{ variant: "sparkles-gradient" }}
+              testimonials={[]}
+            />
+        </div>
+
+        <div id="founder" data-section="founder">
+            <TextAbout
+              title="The Vision Behind Palante STS"
+              className="py-20"
+            />
+        </div>
+
+        <div id="why-i-started" data-section="why-i-started">
+            <TextAbout
+              title="Why I Started"
+              className="py-20 bg-accent/10"
+            />
+        </div>
+
+        <div id="what-makes-us-different" data-section="what-makes-us-different">
+            <FeatureCardTwentyEight
+              title="What Makes Palante Different"
+              animationType="slide-up"
+              textboxLayout="split"
+              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" }
+              ]}
+            />
+        </div>
+
+        <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"
+              metrics={[
+                { id: "b1", icon: ShieldCheck, title: "Integrity", value: "Always" },
+                { id: "b2", icon: Heart, title: "Advocacy", value: "Active" }
+              ]}
+            />
+        </div>
+
+        <div id="who-i-serve" data-section="who-i-serve">
+            <TextAbout
+              title="Who I Serve"
+              className="py-20 bg-accent/10"
+            />
+        </div>
+
+        <div id="when-families-reach-out" data-section="when-families-reach-out">
+            <TextAbout
+              title="When Families Reach Out"
+              className="py-20"
+            />
+        </div>
+
+        <div id="contact" data-section="contact">
+            <ContactCenter
+              tag="Get Started"
+              title="Let's Connect"
+              description="We are here to support your family's journey."
+              background={{ variant: "sparkles-gradient" }}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              logoText="Palante STS"
+              columns={[{ items: [{ label: "Home", href: "/" }] }]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,6 +33,7 @@ export default function LandingPage() {
                 { name: "Our Process", id: "how-it-works" },
                 { name: "Services", id: "services" },
                 { name: "Support", id: "pain-points" },
+                { name: "About", id: "about" },
                 { name: "Contact", id: "contact" },
               ]}
               brandName="Palante STS"
@@ -149,4 +150,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}