src/app/about/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Play } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="noise"
+        cardStyle="inset"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Pricing", id: "#pricing" },
+              { name: "API", id: "#api" },
+              { name: "Features", id: "#features" },
+              { name: "Blog", id: "#blog" },
+              { name: "About", id: "/about" },
+            ]}
+            brandName="Ssemble"
+            button={{ text: "Sign In", href: "#" }}
+          />
+        </div>
+
+        <div id="about" data-section="about" className="py-24">
+          <TestimonialAboutCard
+            useInvertedBackground={true}
+            tag="About Us"
+            title="Revolutionizing Video Content with AI"
+            description="Ssemble was founded on the belief that creating professional-grade content should be accessible to everyone. Our platform leverages cutting-edge AI to automate the tedious parts of video editing, allowing creators to focus on what matters: their story."
+            subdescription="From viral shorts to long-form narratives, we provide the tools to make your content shine."
+            icon={Play}
+            imageSrc="http://img.b2bpic.net/free-photo/close-up-neon-pen_23-2150835492.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Ssemble © 2024"
+            leftLink={{ text: "Clipping Service", href: "#" }}
+            rightLink={{ text: "Terms & Privacy", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,6 +34,7 @@ export default function LandingPage() {
         { name: "API", id: "#api" },
         { name: "Features", id: "#features" },
         { name: "Blog", id: "#blog" },
+        { name: "About", id: "/about" },
       ]}
       brandName="Ssemble"
       button={{
@@ -49,7 +50,7 @@ export default function LandingPage() {
         {
           text: "Get Clips",          href: "#"},
         {
-          text: "See How It Works",          href: "#about"},
+          text: "See How It Works",          href: "/about"},
       ]}
       buttonAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=1"