Merge version_3 into main

Merge version_3 into main

src/app/link-in-bio/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import { Metadata } from "next";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import CardStack from '@/components/cardStack/CardStack';
+import ButtonIconArrow from '@/components/button/ButtonIconArrow';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export const metadata: Metadata = {
+  title: "Jane Doe | Link in Bio",  description: "Connect with Jane Doe across her website, social media, and projects."};
+
+export default function LinkInBioPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="mediumSizeLargeTitles"
+        background="fluid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              {
+                name: "Home",                id: "#home"
+              },
+              {
+                name: "About",                id: "#about"
+              },
+              {
+                name: "Features",                id: "#features"
+              },
+              {
+                name: "Widgets",                id: "#widgets"
+              },
+              {
+                name: "Contact",                id: "#contact"
+              },
+              {
+                name: "Link in Bio",                id: "/link-in-bio"
+              }
+            ]}
+            brandName="CDNJS Widgets"
+            button={{
+              text: "Get Started",              href: "https://cdnjs.com/libraries"
+            }}
+          />
+        </div>
+
+        <div id="profile" data-section="profile">
+          <HeroBillboardGallery
+            background={{ variant: "plain" }}
+            title="Jane Doe"
+            description="Web Developer | Content Creator | Open Source Enthusiast"
+            mediaItems={[
+              {
+                imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=1500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",                imageAlt: "Jane Doe profile picture"
+              },
+            ]}
+            mediaAnimation="slide-up"
+          />
+        </div>
+
+        <div id="links" data-section="links">
+          <CardStack
+            title="My Links"
+            description="Connect with me across the web!"
+            animationType="slide-up"
+            gridVariant="uniform-all-items-equal"
+            className="pb-20"
+            containerClassName="max-w-md mx-auto"
+            gridClassName="grid-cols-1 gap-4"
+            textboxLayout="default"
+          >
+            <ButtonIconArrow text="My Website" href="https://www.example.com" />
+            <ButtonIconArrow text="Follow on Twitter" href="https://twitter.com/example" />
+            <ButtonIconArrow text="Connect on LinkedIn" href="https://linkedin.com/in/example" />
+            <ButtonIconArrow text="GitHub Projects" href="https://github.com/example" />
+            <ButtonIconArrow text="YouTube Channel" href="https://youtube.com/example" />
+            <ButtonIconArrow text="Support My Work" href="https://patreon.com/example" />
+          </CardStack>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Resources",                items: [
+                  {
+                    label: "Libraries",                    href: "https://cdnjs.com/libraries"
+                  },
+                  {
+                    label: "API Docs",                    href: "https://cdnjs.com/api"
+                  },
+                  {
+                    label: "Blog",                    href: "#"
+                  },
+                ],
+              },
+              {
+                title: "Community",                items: [
+                  {
+                    label: "GitHub",                    href: "https://github.com/cdnjs/cdnjs"
+                  },
+                  {
+                    label: "Twitter",                    href: "https://twitter.com/cdnjs"
+                  },
+                  {
+                    label: "Discord",                    href: "#"
+                  },
+                ],
+              },
+              {
+                title: "About Us",                items: [
+                  {
+                    label: "About CDNJS",                    href: "#about"
+                  },
+                  {
+                    label: "Sponsors",                    href: "https://cdnjs.com/sponsors"
+                  },
+                  {
+                    label: "Contact",                    href: "#contact"
+                  },
+                ],
+              },
+            ]}
+            logoText="CDNJS Widgets"
+            copyrightText="© 2024 CDNJS Widgets. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -42,6 +42,8 @@ export default function LandingPage() {
           name: "Widgets",          id: "#widgets"},
         {
           name: "Contact",          id: "#contact"},
+        {
+          name: "Link in Bio",          id: "/link-in-bio"}
       ]}
       brandName="CDNJS Widgets"
       button={{
@@ -286,4 +288,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}