stats

app/page.tsx

@@ -1,187 +1,183 @@
-"use client";
-
 import Link from "next/link";
-import { ArrowRight, Shield, Globe, Zap, LineChart, LogIn } from "lucide-react";
+import { ArrowRight, Shield, LineChart, Zap } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { fetchPlatformStats } from "@/lib/stats-service";
+import { HomeNavbar } from "@/components/home-navbar";
+import { Suspense } from "react";
+
+// Format number with commas
+function formatNumber(num: number): string {
+  return new Intl.NumberFormat().format(Math.round(num));
+}
+
+// Format currency
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency: 'GBP',
+    maximumFractionDigits: 0
+  }).format(amount);
+}
+
+// This is a server component
+export default async function Home() {
+  const stats = await fetchPlatformStats();
 
-export default function Home() {
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex flex-col min-h-screen bg-black text-white">
       {/* Header Navigation */}
-      <header className="py-4 px-6 md:px-10 flex items-center justify-between border-b">
-        <div className="flex items-center gap-2">
-          <span className="font-bold text-2xl">Ember</span>
-        </div>
-        <nav className="hidden md:flex gap-6 items-center">
-          <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            Features
-          </Link>
-          <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            Benefits
-          </Link>
-          <Link href="/auth/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            <Button variant="ghost">
-              <LogIn className="h-4 w-4 mr-2" />
-              Log In
-            </Button>
-          </Link>
-          <Link href="/auth/login">
-            <Button>Get Started</Button>
-          </Link>
-        </nav>
-        <div className="md:hidden">
-          <Button variant="ghost" size="icon">
-            <span className="sr-only">Toggle menu</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <line x1="4" x2="20" y1="12" y2="12" />
-              <line x1="4" x2="20" y1="6" y2="6" />
-              <line x1="4" x2="20" y1="18" y2="18" />
-            </svg>
-          </Button>
-        </div>
-      </header>
+      <HomeNavbar />
 
       {/* Hero Section */}
-      <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10">
+      <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10 bg-black">
         <div className="space-y-4 max-w-3xl">
           <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
-            Streamlined E-commerce <span className="text-orange-500">Management</span>
+            Streamlined E-commerce <span className="text-[#FF7A00]">Management</span>
           </h1>
-          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto">
+          <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
             Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
           </p>
         </div>
         <div className="flex flex-col sm:flex-row gap-4">
           <Link href="/dashboard">
-            <Button size="lg" className="gap-2">
+            <Button size="lg" className="gap-2 bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">
               Go to Dashboard
               <ArrowRight className="h-4 w-4" />
             </Button>
           </Link>
           <Link href="/auth/register">
-            <Button size="lg" variant="outline">
+            <Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
               Create Account
             </Button>
           </Link>
         </div>
       </section>
 
+      {/* Statistics Section */}
+      <section className="py-16 px-6 md:px-10 bg-black">
+        <div className="max-w-6xl mx-auto">
+          <Suspense fallback={<div className="text-center">Loading statistics...</div>}>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
+                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatNumber(stats.orders.completed)}+</div>
+                <div className="text-xl font-semibold text-white mb-1">Orders Processed</div>
+                <p className="text-sm text-gray-400">Successfully delivered to customers worldwide</p>
+              </div>
+              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
+                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatNumber(stats.vendors.total)}+</div>
+                <div className="text-xl font-semibold text-white mb-1">Registered Vendors</div>
+                <p className="text-sm text-gray-400">Trusted merchants selling on our platform</p>
+              </div>
+              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
+                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatCurrency(stats.transactions.volume)}</div>
+                <div className="text-xl font-semibold text-white mb-1">Transaction Volume</div>
+                <p className="text-sm text-gray-400">Securely processed with cryptocurrency</p>
+              </div>
+            </div>
+          </Suspense>
+        </div>
+      </section>
+
       {/* Features Section */}
-      <section id="features" className="py-20 px-6 md:px-10 bg-muted/40">
+      <section id="features" className="py-20 px-6 md:px-10 bg-black">
         <div className="max-w-6xl mx-auto space-y-10">
           <div className="text-center space-y-4">
-            <h2 className="text-3xl md:text-4xl font-bold">Powerful Features</h2>
-            <p className="text-muted-foreground max-w-2xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-white">Powerful Features</h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
               Everything you need to manage orders, track metrics, and grow your business.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-6">
-            <Card>
-              <CardHeader>
-                <div className="p-2 w-fit rounded-md bg-primary/10">
-                  <Shield className="h-6 w-6 text-primary" />
+            <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
+              <div className="mb-4">
+                <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
+                  <Shield className="h-6 w-6 text-[#FF7A00]" />
                 </div>
-                <CardTitle className="mt-4">Cryptocurrency Payments</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <div className="p-2 w-fit rounded-md bg-primary/10">
-                  <LineChart className="h-6 w-6 text-primary" />
+                <h3 className="mt-4 text-xl font-semibold text-white">Cryptocurrency Payments</h3>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
+              </p>
+            </div>
+            <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
+              <div className="mb-4">
+                <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
+                  <LineChart className="h-6 w-6 text-[#FF7A00]" />
                 </div>
-                <CardTitle className="mt-4">Order Tracking</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Manage and track orders from receipt to delivery with our intuitive order management system.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <div className="p-2 w-fit rounded-md bg-primary/10">
-                  <Zap className="h-6 w-6 text-primary" />
+                <h3 className="mt-4 text-xl font-semibold text-white">Order Tracking</h3>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Manage and track orders from receipt to delivery with our intuitive order management system.
+              </p>
+            </div>
+            <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
+              <div className="mb-4">
+                <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
+                  <Zap className="h-6 w-6 text-[#FF7A00]" />
                 </div>
-                <CardTitle className="mt-4">Fast Performance</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
-                </CardDescription>
-              </CardContent>
-            </Card>
+                <h3 className="mt-4 text-xl font-semibold text-white">Fast Performance</h3>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
+              </p>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Benefits Section */}
-      <section id="benefits" className="py-20 px-6 md:px-10">
+      <section id="benefits" className="py-20 px-6 md:px-10 bg-black">
         <div className="max-w-6xl mx-auto space-y-10">
           <div className="text-center space-y-4">
-            <h2 className="text-3xl md:text-4xl font-bold">Why Choose Ember</h2>
-            <p className="text-muted-foreground max-w-2xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-white">Why Choose Ember</h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
               Our platform is designed to make e-commerce management simple and efficient.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-10">
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Centralized Management</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Centralized Management</h3>
+              <p className="text-gray-400">
                 Manage all aspects of your e-commerce business from a single dashboard.
               </p>
             </div>
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Advanced Analytics</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Advanced Analytics</h3>
+              <p className="text-gray-400">
                 Gain insights into your business with detailed analytics and reporting tools.
               </p>
             </div>
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Customer Management</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Customer Management</h3>
+              <p className="text-gray-400">
                 Keep track of customer information and purchase history to provide better service.
               </p>
             </div>
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Inventory Control</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Inventory Control</h3>
+              <p className="text-gray-400">
                 Manage your inventory with precision to avoid stock-outs and overstocking.
               </p>
             </div>
           </div>
           <div className="flex justify-center mt-10">
             <Link href="/dashboard">
-              <Button size="lg">Start Now</Button>
+              <Button size="lg" className="bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">Start Now</Button>
             </Link>
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="py-10 px-6 md:px-10 border-t">
+      <footer className="py-10 px-6 md:px-10 border-t border-gray-800 bg-black">
         <div className="max-w-6xl mx-auto text-center">
-          <h3 className="font-bold text-lg mb-2">Ember</h3>
-          <p className="text-sm text-muted-foreground">
+          <h3 className="font-bold text-lg mb-2 text-white">Ember</h3>
+          <p className="text-sm text-gray-400">
             The complete e-commerce management solution for modern businesses.
           </p>
         </div>
-        <div className="mt-10 text-center text-sm text-muted-foreground">
+        <div className="mt-10 text-center text-sm text-gray-500">
           <p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
         </div>
       </footer>