g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stats

Browse Source
This commit is contained in:
NotII
2025-03-28 22:09:52 +00:00
parent 2fd5b8c331
commit 0567e04deb
4 changed files with 276 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
app/page.tsx
View File

@@ -1,187 +1,183 @@
"use client";
import Link from "next/link"; 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 { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; 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 ( return (
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen bg-black text-white">
{/* Header Navigation */} {/* Header Navigation */}
<header className="py-4 px-6 md:px-10 flex items-center justify-between border-b"> <HomeNavbar />
<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>
{/* Hero Section */} {/* 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"> <div className="space-y-4 max-w-3xl">
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter"> <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> </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. Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
</p> </p>
</div> </div>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<Link href="/dashboard"> <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 Go to Dashboard
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link href="/auth/register"> <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 Create Account
</Button> </Button>
</Link> </Link>
</div> </div>
</section> </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 */} {/* 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="max-w-6xl mx-auto space-y-10">
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<h2 className="text-3xl md:text-4xl font-bold">Powerful Features</h2> <h2 className="text-3xl md:text-4xl font-bold text-white">Powerful Features</h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <p className="text-gray-400 max-w-2xl mx-auto">
Everything you need to manage orders, track metrics, and grow your business. Everything you need to manage orders, track metrics, and grow your business.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-3 gap-6">
<Card> <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
<CardHeader> <div className="mb-4">
<div className="p-2 w-fit rounded-md bg-primary/10"> <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
<Shield className="h-6 w-6 text-primary" /> <Shield className="h-6 w-6 text-[#FF7A00]" />
</div> </div>
<CardTitle className="mt-4">Cryptocurrency Payments</CardTitle> <h3 className="mt-4 text-xl font-semibold text-white">Cryptocurrency Payments</h3>
</CardHeader> </div>
<CardContent> <p className="text-gray-400 text-sm">
<CardDescription>
Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security. Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
</CardDescription> </p>
</CardContent>
</Card>
<Card>
<CardHeader>
<div className="p-2 w-fit rounded-md bg-primary/10">
<LineChart className="h-6 w-6 text-primary" />
</div> </div>
<CardTitle className="mt-4">Order Tracking</CardTitle> <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
</CardHeader> <div className="mb-4">
<CardContent> <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
<CardDescription> <LineChart className="h-6 w-6 text-[#FF7A00]" />
</div>
<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. Manage and track orders from receipt to delivery with our intuitive order management system.
</CardDescription> </p>
</CardContent>
</Card>
<Card>
<CardHeader>
<div className="p-2 w-fit rounded-md bg-primary/10">
<Zap className="h-6 w-6 text-primary" />
</div> </div>
<CardTitle className="mt-4">Fast Performance</CardTitle> <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
</CardHeader> <div className="mb-4">
<CardContent> <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
<CardDescription> <Zap className="h-6 w-6 text-[#FF7A00]" />
</div>
<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. Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
</CardDescription> </p>
</CardContent> </div>
</Card>
</div> </div>
</div> </div>
</section> </section>
{/* Benefits 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="max-w-6xl mx-auto space-y-10">
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<h2 className="text-3xl md:text-4xl font-bold">Why Choose Ember</h2> <h2 className="text-3xl md:text-4xl font-bold text-white">Why Choose Ember</h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <p className="text-gray-400 max-w-2xl mx-auto">
Our platform is designed to make e-commerce management simple and efficient. Our platform is designed to make e-commerce management simple and efficient.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-10"> <div className="grid md:grid-cols-2 gap-10">
<div className="space-y-4"> <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold">Centralized Management</h3> <h3 className="text-xl font-semibold text-white">Centralized Management</h3>
<p className="text-muted-foreground"> <p className="text-gray-400">
Manage all aspects of your e-commerce business from a single dashboard. Manage all aspects of your e-commerce business from a single dashboard.
</p> </p>
</div> </div>
<div className="space-y-4"> <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold">Advanced Analytics</h3> <h3 className="text-xl font-semibold text-white">Advanced Analytics</h3>
<p className="text-muted-foreground"> <p className="text-gray-400">
Gain insights into your business with detailed analytics and reporting tools. Gain insights into your business with detailed analytics and reporting tools.
</p> </p>
</div> </div>
<div className="space-y-4"> <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold">Customer Management</h3> <h3 className="text-xl font-semibold text-white">Customer Management</h3>
<p className="text-muted-foreground"> <p className="text-gray-400">
Keep track of customer information and purchase history to provide better service. Keep track of customer information and purchase history to provide better service.
</p> </p>
</div> </div>
<div className="space-y-4"> <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold">Inventory Control</h3> <h3 className="text-xl font-semibold text-white">Inventory Control</h3>
<p className="text-muted-foreground"> <p className="text-gray-400">
Manage your inventory with precision to avoid stock-outs and overstocking. Manage your inventory with precision to avoid stock-outs and overstocking.
</p> </p>
</div> </div>
</div> </div>
<div className="flex justify-center mt-10"> <div className="flex justify-center mt-10">
<Link href="/dashboard"> <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> </Link>
</div> </div>
</div> </div>
</section> </section>
{/* Footer */} {/* 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"> <div className="max-w-6xl mx-auto text-center">
<h3 className="font-bold text-lg mb-2">Ember</h3> <h3 className="font-bold text-lg mb-2 text-white">Ember</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-gray-400">
The complete e-commerce management solution for modern businesses. The complete e-commerce management solution for modern businesses.
</p> </p>
</div> </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> <p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
</div> </div>
</footer> </footer>

92
components/home-navbar.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { LogIn } from "lucide-react";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { useState } from "react";
export function HomeNavbar() {
const [menuOpen, setMenuOpen] = useState(false);
return (
<header className="py-4 px-6 md:px-10 flex items-center justify-between border-b border-gray-800 bg-black text-white">
<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-gray-400 hover:text-white transition-colors">
Features
</Link>
<Link href="#benefits" className="text-sm text-gray-400 hover:text-white transition-colors">
Benefits
</Link>
<Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">
<Button variant="ghost" className="text-gray-400 hover:text-white hover:bg-gray-900">
<LogIn className="h-4 w-4 mr-2" />
Log In
</Button>
</Link>
<Link href="/auth/login">
<Button className="bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">Get Started</Button>
</Link>
</nav>
<div className="md:hidden">
<Button variant="ghost" size="icon" onClick={() => setMenuOpen(!menuOpen)} className="text-white hover:bg-gray-900">
<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>
{/* Mobile menu */}
{menuOpen && (
<div className="md:hidden absolute top-16 left-0 right-0 bg-[#1C1C1C] border-b border-gray-800 p-4 z-50">
<div className="flex flex-col gap-4">
<Link
href="#features"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Features
</Link>
<Link
href="#benefits"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Benefits
</Link>
<Link
href="/auth/login"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Log In
</Link>
<Link
href="/auth/register"
className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
onClick={() => setMenuOpen(false)}
>
Create Account
</Link>
</div>
</div>
)}
</header>
);
}

30
components/theme-switcher.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
export function ThemeSwitcher() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Required for server-side rendering
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="ml-2"
>
{theme === "dark" ? (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
)}
</Button>
);
}

47
lib/stats-service.ts Normal file
View File

@@ -0,0 +1,47 @@
export interface PlatformStats {
orders: {
completed: number;
};
vendors: {
total: number;
};
transactions: {
volume: number;
averageOrderValue: number;
};
}
export async function fetchPlatformStats(): Promise<PlatformStats> {
const BASE_API_URL = process.env.SERVER_API_URL || 'http://localhost:3001/api';
try {
const response = await fetch(`${BASE_API_URL}/stats/platform`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
cache: 'no-store'
});
if (!response.ok) {
throw new Error(`API error: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Error fetching platform stats:', error);
// Return fallback data if API fails
return {
orders: {
completed: 15800
},
vendors: {
total: 2400
},
transactions: {
volume: 3200000,
averageOrderValue: 220
}
};
}
}