Showcase

app/(marketing)/page.tsx

@@ -57,9 +57,9 @@ export default async function Home() {
       <div className="bg-image bg-cover bg-no-repeat bg-center flex flex-col items-center min-h-screen">
         <section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 xl:gap-32 my-28">
           <div className="text-center lg:text-left w-full lg:w-2/3">
-            <Link href="/themes" className="mb-4 inline-block">
+            <Link href="/docs/components/calendar" className="mb-4 inline-block">
               <Badge>
-                Introducing RetroUI Themes!
+                New Calendar & Carousel components!
                 <PaintbrushIcon className="ml-2 h-4 w-4 inline-block" />
               </Badge>
             </Link>

app/(marketing)/showcase/page.tsx

@@ -0,0 +1,52 @@
+import showcaseData from "@/showcase.json";
+import { Card, Text, Button } from "@/components/retroui";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+
+export default function ShowcasePage() {
+    return (
+        <div className="max-w-6xl mx-auto py-12 px-4 lg:px-0">
+            <div className="mb-12 flex flex-col gap-2 items-start">
+                <Text as="h1">
+                    Showcase
+                </Text>
+                <Text className="text-lg text-muted-foreground mb-4">
+                    Build something cool using RetroUI? Share it with the community.
+                </Text>
+                <Button asChild>
+                    <Link href="https://github.com/Logging-Studio/RetroUI/discussions/102" target="_blank">
+                        Add Your Project
+                    </Link>
+                </Button>
+            </div>
+
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {Object.entries(showcaseData).map(([key, value]) => (
+                    <li key={key}>
+                        <Card className="hover:shadow">
+                            <Card.Header>
+                                <Image
+                                    src={value.cover}
+                                    alt={value.name}
+                                    width={600}
+                                    height={400}
+                                    className="mb-6 border-2 border-muted-foreground"
+                                />
+                                <div className="flex items-center justify-between gap-2">
+                                    <Card.Title>{value.name}</Card.Title>
+
+                                    <Button asChild size="sm" variant="secondary">
+                                        <Link href={value.url} target="_blank" rel="noopener noreferrer">
+                                            Visit <ArrowUpRight className="ml-2 h-4 w-4" />
+                                        </Link>
+                                    </Button>
+                                </div>
+                            </Card.Header>
+                        </Card>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/TopNav.tsx

@@ -49,7 +49,7 @@ export default function TopNav() {
           </div>
 
           {/* Navigation Links */}
-          <div className="hidden md:flex space-x-6">
+          <div className="hidden md:flex space-x-4">
             {navConfig.topNavItems.map((item) => (
               <Link
                 key={item.title}

config/navigation.ts

@@ -10,6 +10,7 @@ export const navConfig: INavigationConfig = {
     { title: "Components", href: `${componentsRoute}/button` },
     { title: "Themes", href: "/themes" },
     { title: "Blog", href: "/blogs" },
+    { title: "Showcase", href: "/showcase" },
   ],
   sideNavItems: [
     {

showcase.json

@@ -0,0 +1,26 @@
+{
+    "pouf.chat": {
+        "name": "Pouf Chat",
+        "url": "https://pouf.chat",
+        "cover": "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/pouf.chat.png",
+        "color": "purple-200"
+    },
+    "buildersguild.space": {
+        "name": "Builders Guild",
+        "url": "https://buildersguild.space",
+        "cover": "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/buildersguild.space.png",
+        "color": "orange-200"
+    },
+    "startcod.ing": {
+        "name": "Start Coding",
+        "url": "https://startcoding.ing",
+        "cover": "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/startcod.ing.png",
+        "color": "yellow-200"
+    },
+    "rewardkitty.com": {
+        "name": "Reward Kitty",
+        "url": "https://rewardkitty.com",
+        "cover": "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/showcase/rewardkitty.com.png",
+        "color": "blue-200"
+    }
+}