171 lines
7.2 KiB
TypeScript
171 lines
7.2 KiB
TypeScript
import { buttonVariants } from "@/components/ui/button";
|
|
import { page_routes } from "@/lib/routes";
|
|
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, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
|
|
export const metadata = getMetadata({
|
|
title: "WooNooW - The Ultimate WooCommerce Enhancement Suite",
|
|
});
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center px-4 py-8 text-center sm:py-20">
|
|
<Link
|
|
href="/docs/resources/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">
|
|
<div
|
|
className={cn(
|
|
"group rounded-full border border-black/5 bg-black/5 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-accent dark:border-white/5 dark:bg-transparent dark:hover:bg-accent",
|
|
)}
|
|
>
|
|
<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>🚀 v1.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-[900px] pb-8">
|
|
<h1 className="mb-4 text-3xl font-bold sm:text-6xl bg-clip-text text-transparent bg-linear-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-16">
|
|
<Link
|
|
href={`/docs${page_routes[0].href}`}
|
|
className={buttonVariants({
|
|
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="/docs/features"
|
|
className={buttonVariants({
|
|
variant: "outline",
|
|
className: "px-8",
|
|
size: "lg",
|
|
})}
|
|
>
|
|
Explore Features
|
|
</Link>
|
|
</div>
|
|
|
|
{/* The Gap Analysis */}
|
|
<div className="w-full max-w-5xl mb-20 text-left">
|
|
<div className="grid grid-cols-1 lg: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-2 lg:grid-cols-4 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>
|
|
);
|
|
}
|