Home page

apps/docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/docs/next.config.mjs

@@ -1,11 +1,10 @@
-import { createMDX } from 'fumadocs-mdx/next';
- 
+import { createMDX } from "fumadocs-mdx/next";
+
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
-  transpilePackages: ["@codegen/ui"],
 };
 
 const withMDX = createMDX();
-  
-export default withMDX(config);
+
+export default withMDX(config);

apps/docs/package.json

@@ -11,26 +11,33 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tabler/icons-react": "^3.21.0",
+    "@tsparticles/engine": "^3.7.1",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.7.1",
     "@types/mdx": "^2.0.13",
     "@vercel/og": "^0.6.3",
-    "fumadocs-core": "^13.4.10",
-    "fumadocs-docgen": "^1.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cobe": "^0.6.3",
+    "framer-motion": "^11.11.11",
+    "fumadocs-core": "14.7.3",
+    "fumadocs-docgen": "1.3.4",
     "fumadocs-mdx": "^10.0.2",
     "fumadocs-ui": "^13.4.10",
+    "lucide-react": "^0.471.1",
     "next": "^14.2.3",
     "next-themes": "^0.3.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.5",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@tabler/icons-react": "^3.21.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cobe": "^0.6.3",
-    "framer-motion": "^11.11.11",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },

apps/docs/src/app/globals.css

@@ -4,15 +4,15 @@
 
 /* Color Rose */
 
-@layer base {
+/* @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
     --card-foreground: 20 14.3% 4.1%;
     --popover: 0 0% 100%;
     --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
+    --primary: 230 90% 72%;
     --primary-foreground: 60 9.1% 97.8%;
     --secondary: 60 4.8% 95.9%;
     --secondary-foreground: 24 9.8% 10%;
@@ -24,7 +24,7 @@
     --destructive-foreground: 60 9.1% 97.8%;
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+    --ring: 230 90% 72%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -40,7 +40,7 @@
     --card-foreground: 60 9.1% 97.8%;
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
+    --primary: 250 70% 94%;
     --primary-foreground: 60 9.1% 97.8%;
     --secondary: 12 6.5% 15.1%;
     --secondary-foreground: 60 9.1% 97.8%;
@@ -52,14 +52,14 @@
     --destructive-foreground: 60 9.1% 97.8%;
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+    --ring: 250 70% 94%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-}
+} */
 
 /* Color Violet */
 
@@ -121,7 +121,7 @@
 } */
 
 /* Color Zinc */
-/* 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -177,7 +177,7 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-} */
+}
 
 @layer base {
   * {

apps/docs/src/app/layout.tsx

@@ -26,10 +26,12 @@ export default function RootLayout({
             defaultTheme: "dark",
           }}
         >
-          <Banner  variant="rainbow" changeLayout={true}>CodeGen Docs are under development and will be available soon</Banner>
+          <Banner id="banner" variant="rainbow" changeLayout={true}>
+            CodeGen Docs are under development and will be available soon
+          </Banner>
           {children}
         </RootProvider>
-        </body>
+      </body>
     </html>
   );
 }

apps/docs/src/app/page.tsx

@@ -1,7 +1,27 @@
+import Footer from "../components/footer";
+import { Header } from "../components/header";
+import CATSection from "../components/sections/cat";
+import FaqSection from "../components/sections/faq";
+import FeatureSection from "../components/sections/feature";
+import HeroSection from "../components/sections/hero";
+import InstallationSection from "../components/sections/installation";
+
 export default function Page(): JSX.Element {
   return (
-    <main className="flex flex-col items-center justify-between min-h-screen p-24 bg-background">
-      Welcome this is test route Please redirect to /docs/introduction 🫡.
+    <main className="flex flex-col min-h-screen bg-background relative border">
+      <Header />
+      {/* <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-neutral-200/30 to-neutral-200/0 " /> */}
+      <HeroSection />
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
+      <FeatureSection />
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
+      <InstallationSection />
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
+      <CATSection />
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
+      <FaqSection />
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
+      <Footer />
     </main>
   );
 }

apps/docs/src/app/roadmap/layout.tsx

@@ -0,0 +1,8 @@
+import Footer from "@/src/components/footer";
+import { Header } from "@/src/components/header";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="w-full h-screen flex flex-col relative">{children}</div>
+  );
+}

apps/docs/src/app/roadmap/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { motion } from "framer-motion";
+import { ListTodo, Timer, CheckCircle2, Search } from "lucide-react";
+import { Priority, RoadmapItemsList, RoadmapItemType } from "@/src/lib/lists";
+import { Input } from "@/src/components/ui/input";
+import { Button } from "@/src/components/ui/button";
+import { RoadmapColumn } from "@/src/components/roadmap/roadmapColumn";
+import { Header } from "@/src/components/header";
+import Footer from "@/src/components/footer";
+
+export default function RoadmapPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [priorityFilter, setPriorityFilter] = useState<Priority>("all");
+
+  const filteredItems = useMemo(() => {
+    return RoadmapItemsList.filter((item) => {
+      const matchesSearch =
+        item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesPriority =
+        priorityFilter === "all" || item.priority === priorityFilter;
+      return matchesSearch && matchesPriority;
+    });
+  }, [searchQuery, priorityFilter]);
+
+  const groupedItems = useMemo(() => {
+    return {
+      planned: filteredItems.filter((item) => item.status === "planned"),
+      "in-progress": filteredItems.filter(
+        (item) => item.status === "in-progress",
+      ),
+      complete: filteredItems.filter((item) => item.status === "complete"),
+    };
+  }, [filteredItems]);
+
+  return (
+    <div className="min-h-screen bg-background font-sans">
+      <Header />
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0" />
+
+      <main className="relative">
+        {/* Background Elements */}
+        <div className="absolute inset-0 bg-grid-white/[0.02] bg-grid-primary/[0.02]" />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-[40rem] w-[40rem] rounded-full bg-primary/5 blur-3xl" />
+        </div>
+        <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+
+        {/* Content */}
+        <div className="relative container mx-auto px-4 py-16 md:py-24">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="space-y-4 text-center mb-12"
+          >
+            <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm">
+              <Timer className="mr-2 h-3.5 w-3.5 text-primary" />
+              <span className="text-primary">Development Roadmap</span>
+            </div>
+            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-primary via-primary/70 to-secondary-foreground">
+              Building the Future
+            </h1>
+            <p className="mx-auto max-w-[700px] text-muted-foreground text-sm sm:text-base md:text-lg lg:text-xl">
+              Track our progress as we build the next generation of web
+              development tools.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="flex flex-col gap-4 items-center justify-center mb-12"
+          >
+            <div className="relative w-full max-w-sm">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search updates..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 w-full"
+              />
+            </div>
+            <div className="flex flex-wrap justify-center gap-2">
+              <Button
+                variant={priorityFilter === "all" ? "default" : "outline"}
+                size="sm"
+                onClick={() => setPriorityFilter("all")}
+                className="font-mono"
+              >
+                All
+              </Button>
+              <Button
+                variant={priorityFilter === "high" ? "default" : "outline"}
+                size="sm"
+                onClick={() => setPriorityFilter("high")}
+                className="font-mono"
+              >
+                High Priority
+              </Button>
+              <Button
+                variant={priorityFilter === "medium" ? "default" : "outline"}
+                size="sm"
+                onClick={() => setPriorityFilter("medium")}
+                className="font-mono"
+              >
+                Medium Priority
+              </Button>
+            </div>
+          </motion.div>
+
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            <RoadmapColumn
+              title="Planned"
+              icon={ListTodo}
+              iconColor="text-blue-500"
+              items={groupedItems.planned}
+            />
+            <RoadmapColumn
+              title="In Progress"
+              icon={Timer}
+              iconColor="text-purple-500"
+              items={groupedItems["in-progress"]}
+            />
+            <RoadmapColumn
+              title="Complete"
+              icon={CheckCircle2}
+              iconColor="text-green-500"
+              items={groupedItems.complete}
+            />
+          </div>
+        </div>
+      </main>
+      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
+      <Footer />
+    </div>
+  );
+}

apps/docs/src/app/robots.ts

@@ -0,0 +1,10 @@
+import { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+  };
+}

apps/docs/src/components/FaqItem.tsx

@@ -0,0 +1,37 @@
+import { Minus, Plus } from "lucide-react";
+import { FAQ_Item } from "../lib/lists";
+import { cn } from "../lib/utils";
+
+export function FAQItem({
+  item,
+  isOpen,
+  toggleOpen,
+}: {
+  item: FAQ_Item;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  return (
+    <div className="border-b border-foreground/10 w-full px-10 md:px-0">
+      <div
+        className="flex justify-between items-center w-full py-4 text-left cursor-pointer"
+        onClick={toggleOpen}
+      >
+        <span className="text-sm font-medium">{item.question}</span>
+        {isOpen ? (
+          <Minus className="h-5 w-5 text-primary" />
+        ) : (
+          <Plus className="h-5 w-5 text-primary" />
+        )}
+      </div>
+      <div
+        className={cn(
+          "overflow-hidden transition-all duration-300 ease-in-out",
+          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0",
+        )}
+      >
+        <p className="pb-4 text-muted-foreground text-sm">{item.answer}</p>
+      </div>
+    </div>
+  );
+}