Update page.tsx
This commit is contained in:
NotII
325
app/page.tsx
325
app/page.tsx
@@ -6,13 +6,19 @@ import { fetchPlatformStats } from "@/lib/stats-service";
|
|||||||
import { HomeNavbar } from "@/components/home-navbar";
|
import { HomeNavbar } from "@/components/home-navbar";
|
||||||
import { Suspense } from "react";
|
import { Suspense } from "react";
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
const PY_20 = 20;
|
||||||
|
const PY_32 = 32;
|
||||||
|
const PX_6 = 6;
|
||||||
|
const PX_10 = 10;
|
||||||
|
|
||||||
// Format number with commas
|
// Format number with commas
|
||||||
function formatNumber(num: number): string {
|
function formatNumberValue(num: number): string {
|
||||||
return new Intl.NumberFormat().format(Math.round(num));
|
return new Intl.NumberFormat().format(Math.round(num));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Format currency
|
// Format currency
|
||||||
function formatCurrency(amount: number): string {
|
function formatCurrencyValue(amount: number): string {
|
||||||
return new Intl.NumberFormat('en-GB', {
|
return new Intl.NumberFormat('en-GB', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: 'GBP',
|
currency: 'GBP',
|
||||||
@@ -22,167 +28,172 @@ function formatCurrency(amount: number): string {
|
|||||||
|
|
||||||
// This is a server component
|
// This is a server component
|
||||||
export default async function Home() {
|
export default async function Home() {
|
||||||
const stats = await fetchPlatformStats();
|
try {
|
||||||
|
const stats = await fetchPlatformStats();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-h-screen bg-black text-white">
|
<div className="flex flex-col min-h-screen bg-black text-white">
|
||||||
<HomeNavbar />
|
<HomeNavbar />
|
||||||
|
|
||||||
{/* 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 bg-black">
|
<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-[#D53F8C]">Management</span>
|
Streamlined E-commerce <span className="text-[#D53F8C]">Management</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xl md:text-2xl text-gray-400 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>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4">
|
|
||||||
<Link href="/dashboard">
|
|
||||||
<Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">
|
|
||||||
Go to Dashboard
|
|
||||||
<ArrowRight className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
<Link href="/auth/register">
|
|
||||||
<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">
|
|
||||||
<Package className="h-12 w-12 text-[#D53F8C] mb-4" />
|
|
||||||
<div className="text-4xl font-bold text-[#D53F8C] 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 around the world</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
|
|
||||||
<Users className="h-12 w-12 text-[#D53F8C] mb-4" />
|
|
||||||
<div className="text-4xl font-bold text-[#D53F8C] 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">
|
|
||||||
<CreditCard className="h-12 w-12 text-[#D53F8C] mb-4" />
|
|
||||||
<div className="text-4xl font-bold text-[#D53F8C] 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 by our platform</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Features Section */}
|
|
||||||
<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 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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid md:grid-cols-3 gap-6">
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
<div className="p-6 rounded-md bg-[#1C1C1C] border-0">
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
|
|
||||||
<Shield className="h-6 w-6 text-[#D53F8C]" />
|
|
||||||
</div>
|
|
||||||
<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="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
|
|
||||||
<LineChart className="h-6 w-6 text-[#D53F8C]" />
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-6 rounded-md bg-[#1C1C1C] border-0">
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
|
|
||||||
<Zap className="h-6 w-6 text-[#D53F8C]" />
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Benefits Section */}
|
|
||||||
<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 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 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 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 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 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">
|
<Link href="/dashboard">
|
||||||
<Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">Start Now</Button>
|
<Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">
|
||||||
|
Go to Dashboard
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/auth/register">
|
||||||
|
<Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
|
||||||
|
Create Account
|
||||||
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Statistics Section */}
|
||||||
<footer className="py-10 px-6 md:px-10 border-t border-gray-800 bg-black">
|
<section className="py-16 px-6 md:px-10 bg-black">
|
||||||
<div className="max-w-6xl mx-auto text-center">
|
<div className="max-w-6xl mx-auto">
|
||||||
<h3 className="font-bold text-lg mb-2 text-white">Ember</h3>
|
<Suspense fallback={<div className="text-center">Loading statistics...</div>}>
|
||||||
<p className="text-sm text-gray-400">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
The complete e-commerce management solution for modern businesses.
|
<div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
|
||||||
</p>
|
<Package className="h-12 w-12 text-[#D53F8C] mb-4" />
|
||||||
</div>
|
<div className="text-4xl font-bold text-[#D53F8C] mb-2">{formatNumberValue(stats.orders.completed)}+</div>
|
||||||
<div className="mt-10 text-center text-sm text-gray-500">
|
<div className="text-xl font-semibold text-white mb-1">Orders Processed</div>
|
||||||
<p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
|
<p className="text-sm text-gray-400">Successfully delivered to customers around the world</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
<div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
|
||||||
</div>
|
<Users className="h-12 w-12 text-[#D53F8C] mb-4" />
|
||||||
);
|
<div className="text-4xl font-bold text-[#D53F8C] mb-2">{formatNumberValue(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">
|
||||||
|
<CreditCard className="h-12 w-12 text-[#D53F8C] mb-4" />
|
||||||
|
<div className="text-4xl font-bold text-[#D53F8C] mb-2">{formatCurrencyValue(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 by our platform</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<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 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">
|
||||||
|
<div className="p-6 rounded-md bg-[#1C1C1C] border-0">
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
|
||||||
|
<Shield className="h-6 w-6 text-[#D53F8C]" />
|
||||||
|
</div>
|
||||||
|
<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="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
|
||||||
|
<LineChart className="h-6 w-6 text-[#D53F8C]" />
|
||||||
|
</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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 rounded-md bg-[#1C1C1C] border-0">
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
|
||||||
|
<Zap className="h-6 w-6 text-[#D53F8C]" />
|
||||||
|
</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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Benefits Section */}
|
||||||
|
<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 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 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 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 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 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" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">Start Now</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<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 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-gray-500">
|
||||||
|
<p> {new Date().getFullYear()} Ember. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return <div>Error loading page</div>;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user