docs: add swag promo

Author: lorant-one

apps/docs/public/images/docs/swag-promo-01.png

@@ -18,6 +18,7 @@ import {
 import { baseURL, meta, schema, changelog, roadmap, layout } from "@/resources";
 import { formatDate } from "./utils/formatDate";
 import { Products } from "@/product";
+import { PromoCard } from "@/components/PromoCard";
 
 export async function generateMetadata() {
   return Meta.generate({
@@ -329,7 +330,46 @@ export default function Home() {
       <Row
         width={layout.sidebar.width} 
         minWidth={layout.sidebar.width}
-        m={{hide: true}}/>
+        m={{hide: true}}
+        fillHeight>
+          <Column
+            fill
+            position="sticky"
+            style={{maxHeight: "calc(100vh - 3.5rem)", top: "3.5rem"}}
+            gap="-1">
+            <Column fill borderLeft="neutral-alpha-medium" vertical="end">
+              <Background
+                fillWidth
+                height={2}
+                borderTop="neutral-alpha-medium"
+                lines={{
+                  display: true,
+                  color: "neutral-alpha-weak",
+                  angle: -45,
+                  size: "4"
+                }}/>
+              <Row fillWidth padding="24" borderTop="neutral-alpha-medium">
+                <Heading as="h3" variant="heading-strong-m">Support our recent launch!</Heading>
+              </Row>
+            </Column>
+            {[
+              {
+                href: "https://store.dopler.app/product/curiosity-in-code-hooded-long-sleeve",
+                image: "/images/docs/swag-promo-01.png",
+              },
+              {
+                href: "https://store.dopler.app/product/curiosity-in-code-desk-mat",
+                image: "/images/docs/swag-promo-02.png",
+              }
+            ].map((product, index) => (
+              <PromoCard 
+                key={index}
+                href={product.href}
+                image={product.image}
+              />
+            ))}
+          </Column>
+      </Row>
     </Row>
   );
 }

apps/docs/public/images/docs/swag-promo-02.png

@@ -0,0 +1,98 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import {
+  Row,
+  Button,
+  Card,
+  Animation,
+  Hover,
+  LetterFx,
+  Background,
+  Media,
+  Text
+} from "@once-ui-system/core";
+
+export interface PromoCardProps {
+  href: string;
+  image: string;
+  buttonText?: string;
+  showOverlay?: boolean;
+}
+
+export function PromoCard({ 
+  href, 
+  image,
+}: PromoCardProps) {
+  const triggerLetterFxRef = useRef<(() => void) | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Trigger animation when hovered and ref is available
+  useEffect(() => {
+    if (isHovered && triggerLetterFxRef.current) {
+      // Small delay to ensure overlay is mounted
+      const timer = setTimeout(() => {
+        triggerLetterFxRef.current?.();
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [isHovered]);
+
+  const cardContent = (
+    <Card fillWidth href={href} overflow="hidden">
+      <Animation scale={1.05} reverse fade={1} triggerType="hover">
+        <Media src={image} priority sizes="400px"/>
+      </Animation>
+    </Card>
+  );
+
+  return (
+    <Row fillWidth
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Hover
+        trigger={cardContent}
+        overlay={
+          <Row fill padding="4">
+            <Row fill border="neutral-alpha-medium" radius="l" vertical="end" overflow="hidden">
+              <Row fillWidth height="32">
+                <Background
+                  fill
+                  borderTop="neutral-alpha-medium"
+                  lines={{
+                    display: true,
+                    color: "neutral-alpha-weak",
+                    angle: -45,
+                    size: "4"
+                  }}/>
+                <Button data-border="sharp" size="s" suffixIcon="chevronRight">
+                  <Text variant="code-default-s">
+                    <LetterFx
+                      charset={["x", "y", "z", "0", "/", "!", "u", "o"]}
+                      trigger="custom"
+                      onTrigger={(triggerFn) => {
+                        triggerLetterFxRef.current = triggerFn;
+                      }}
+                    >
+                      Buy now
+                    </LetterFx>
+                  </Text>
+                </Button>
+                <Background
+                  fill
+                  borderTop="neutral-alpha-medium"
+                  lines={{
+                    display: true,
+                    color: "neutral-alpha-weak",
+                    angle: -45,
+                    size: "4"
+                  }}/>
+              </Row>
+            </Row>
+          </Row>
+        }
+      />
+    </Row>
+  );
+}

apps/docs/src/app/page.tsx

@@ -4,7 +4,7 @@ import { AvatarGroup, Card, Column, Grid, Media, Row, Text } from "@once-ui-syst
 
 export function Products() {
     return (
-      <Grid fillWidth columns="2" m={{columns: 1}} gap="12" marginTop="16">
+      <Grid fillWidth columns="2" s={{columns: 1}} gap="12" marginTop="16">
         {[
           {
             title: "Once UI Core",

apps/docs/src/components/PromoCard.tsx

@@ -334,28 +334,23 @@ const Sidebar: React.FC<SidebarProps> = ({ initialNavigation, ...rest }) => {
     }
   }, [initialNavigation, hasLoaded]);
 
-  // Create a stable container that doesn't change
-  const containerStyle = useMemo(() => ({
-    maxHeight: "calc(100vh - var(--static-space-64))",
-    top: "4rem"
-  }), []);
-
   return (
     <Column
       fillHeight
       borderRight="neutral-alpha-medium"
       width={layout.sidebar.width} 
       minWidth={layout.sidebar.width}
+      paddingY="4"
       {...rest}>
       <Column 
-        position="sticky"  
+        position="sticky"
         fillHeight
         gap="2" 
         as="nav" 
         overflowY="auto"
         paddingX="12"
         paddingY="16"
-        style={containerStyle} 
+        style={{maxHeight: "calc(100vh - 4rem)", top: "3.5rem"}}
       >
         {hasLoaded ? (
           <SidebarContent key={pathname} navigation={navigation} pathname={pathname} />