src/app/about/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { PawPrint, Clock, Heart } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Adopt", id: "/adopt" },
+              { name: "Process", id: "/process" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Paws & Hearts"
+          />
+        </div>
+
+        <div id="about-us-content" data-section="about-us-content">
+          <AboutMetric
+            title="Paws & Hearts: Our Journey and Impact"
+            metrics={[
+              {
+                icon: PawPrint,
+                label: "Animals Adopted",                value: "5,000+"
+              },
+              {
+                icon: Clock,
+                label: "Years Serving",                value: "10+"
+              },
+              {
+                icon: Heart,
+                label: "Happy Families",                value: "3,000+"
+              }
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Explore",                items: [
+                  { label: "Home", href: "/" },
+                  { label: "About Us", href: "/about" },
+                  { label: "Adoptable Pets", href: "/adopt" }
+                ]
+              },
+              {
+                title: "Get Involved",                items: [
+                  { label: "Adoption Process", href: "/process" },
+                  { label: "Volunteer", href: "/contact" },
+                  { label: "Donate", href: "#" }
+                ]
+              },
+              {
+                title: "Connect",                items: [
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "FAQs", href: "#faq" },
+                  { label: "Blog", href: "#" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2024 Paws & Hearts. All rights reserved."
+            bottomRightText="Made with Love and Paws"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}