feat: restructure docs into store, marketing, builder, and config sections

app/page.tsx

@@ -1,21 +1,29 @@
 import { buttonVariants } from "@/components/ui/button";
 import { page_routes } from "@/lib/routes-config";
-import { ArrowRightIcon, FileJson, GitCommitHorizontal, SquarePlay } from "lucide-react";
+import {
+  ArrowRightIcon,
+  LayoutDashboard,
+  Bell,
+  Key,
+  Zap,
+  Layers,
+  ShoppingBag
+} from "lucide-react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import AnimatedShinyText from "@/components/ui/animated-shiny-text";
 import { getMetadata } from "@/app/layout";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 export const metadata = getMetadata({
-  title: "Home",
+  title: "WooNooW - The Ultimate WooCommerce Enhancement Suite",
 });
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center px-2 py-8 text-center sm:py-36">
+    <div className="flex flex-col items-center justify-center px-4 py-8 text-center sm:py-20">
       <Link
-        href="/docs/changelog/version-1"
+        href="/docs/changelog"
         className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
       >
         <div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
@@ -25,71 +33,137 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 Release v2.0.0-beta.1</span>
+              <span>🚀 v2.0 Released: Multi-Channel Notifications</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>
         </div>
       </Link>
-      <div className="w-full max-w-[800px] pb-8">
-        <h1 className="mb-4 text-2xl font-bold sm:text-5xl">DocuBook Starter Templates</h1>
-        <p className="mb-8 sm:text-xl text-muted-foreground">
-          Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
-          <Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
-            Read Documentations
-          </Link>
+
+      <div className="w-full max-w-[900px] pb-8">
+        <h1 className="mb-4 text-3xl font-bold sm:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-lime-500">
+          Fill the Gap. <br />Elevate Your Store.
+        </h1>
+        <p className="mb-8 sm:text-xl text-muted-foreground max-w-2xl mx-auto">
+          WooNooW bridges the divide between standard WooCommerce and a premium e-commerce experience.
+          Unified dashboard, SPA performance, and enterprise-grade tools in one suite.
         </p>
       </div>
-      <div className="flex flex-row items-center gap-6 mb-10">
+
+      <div className="flex flex-row items-center gap-6 mb-16">
         <Link
-          href={`/docs${page_routes[0].href}`}
+          href="/docs/getting-started/introduction"
           className={buttonVariants({
-            className: "px-6 bg-accent text-white hover:bg-primary dark:bg-accent dark:hover:bg-primary",
+            className: "px-8 bg-black text-white hover:bg-neutral-800 dark:bg-white dark:text-black dark:hover:bg-neutral-200",
             size: "lg",
           })}
         >
           Get Started
         </Link>
         <Link
-          href="https://www.youtube.com/channel/UCWRCKHQCS-LCjd2WfDJCvRg?sub_confirmation=1"
-          target="_blank"
+          href="/docs/features"
           className={buttonVariants({
-            variant: "secondary",
-            className: "px-6 bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            variant: "outline",
+            className: "px-8",
             size: "lg",
           })}
         >
-          Subscribe Now
+          Explore Features
         </Link>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
-        <Card className="px-2 py-6">
-          <CardHeader className="flex flex-row justify-center items-center gap-3">
-            <FileJson className="size-6 text-primary" />
-            <CardTitle className="text-xl">docu.json</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p>Edit the docu.json file to change the content in the header, footer and sidebar.</p>
-          </CardContent>
-        </Card>
-        <Card className="px-2 py-6">
-          <CardHeader className="flex flex-row justify-center items-center gap-3">
-            <GitCommitHorizontal className="size-6 text-primary" />
-            <CardTitle className="text-xl">CHANGELOG.md</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p>Manage changes to each version of your application in the CHANGELOG.md file.</p>
-          </CardContent>
-        </Card>
-        <Card className="px-2 py-6">
-          <CardHeader className="flex flex-row justify-center items-center gap-3">
-            <SquarePlay className="size-6 text-primary" />
-            <CardTitle className="text-xl">Docu Play</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p>Easy to write interactive markdown content with a playground.</p>
-          </CardContent>
-        </Card>
+
+      {/* The Gap Analysis */}
+      <div className="w-full max-w-5xl mb-20 text-left">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Production Reality (The Problem) */}
+          <div className="p-8 rounded-2xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900/30">
+            <h3 className="text-xl font-bold mb-4 text-red-700 dark:text-red-400 flex items-center gap-2">
+              <ShoppingBag className="w-5 h-5" />
+              Standard WooCommerce
+            </h3>
+            <ul className="space-y-3 text-sm text-muted-foreground">
+              <li className="flex gap-2">
+                <span className="text-red-500">✕</span> Disjointed UX using multiple plugins
+              </li>
+              <li className="flex gap-2">
+                <span className="text-red-500">✕</span> Slow standard page loads (MPA)
+              </li>
+              <li className="flex gap-2">
+                <span className="text-red-500">✕</span> Basic, rigid email notifications
+              </li>
+              <li className="flex gap-2">
+                <span className="text-red-500">✕</span> Complex license management via 3rd parties
+              </li>
+            </ul>
+          </div>
+
+          {/* The WooNooW Solution */}
+          <div className="p-8 rounded-2xl bg-green-50 dark:bg-green-950/20 border border-green-100 dark:border-green-900/30">
+            <h3 className="text-xl font-bold mb-4 text-green-700 dark:text-green-400 flex items-center gap-2">
+              <Zap className="w-5 h-5" />
+              With WooNooW
+            </h3>
+            <ul className="space-y-3 text-sm text-muted-foreground">
+              <li className="flex gap-2">
+                <span className="text-green-600">✓</span> <strong>Unified SPA Dashboard</strong> for customers
+              </li>
+              <li className="flex gap-2">
+                <span className="text-green-600">✓</span> <strong>Multi-Channel</strong> (WhatsApp, SMS, Email)
+              </li>
+              <li className="flex gap-2">
+                <span className="text-green-600">✓</span> <strong>Built-in Licensing</strong> & OAuth Server
+              </li>
+              <li className="flex gap-2">
+                <span className="text-green-600">✓</span> <strong>Modular Architecture</strong> with Bridge Pattern
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full max-w-6xl">
+        <h2 className="text-2xl font-bold mb-8">Core Modules</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Card className="text-left hover:border-green-500/50 transition-colors">
+            <CardHeader>
+              <LayoutDashboard className="size-8 text-green-500 mb-2" />
+              <CardTitle>Customer SPA</CardTitle>
+              <CardDescription>
+                React-based frontend that replaces standard My Account pages with a lightning-fast interface.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+
+          <Card className="text-left hover:border-green-500/50 transition-colors">
+            <CardHeader>
+              <Bell className="size-8 text-green-500 mb-2" />
+              <CardTitle>Notification Engine</CardTitle>
+              <CardDescription>
+                Advanced template engine supporting Email, SMS, WhatsApp, and Telegram out of the box.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+
+          <Card className="text-left hover:border-green-500/50 transition-colors">
+            <CardHeader>
+              <Key className="size-8 text-green-500 mb-2" />
+              <CardTitle>License Manager</CardTitle>
+              <CardDescription>
+                Complete OAuth2 server implementation for managing software licenses and updates.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+
+          <Card className="text-left hover:border-green-500/50 transition-colors">
+            <CardHeader>
+              <Layers className="size-8 text-green-500 mb-2" />
+              <CardTitle>Developer Friendly</CardTitle>
+              <CardDescription>
+                Extend functionality using our Bridge Pattern and Module Registry APIs.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </div>
       </div>
     </div>
   );