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

218
app/page.tsx
View File

@@ -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>

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
}
};
}
}