fk it
This commit is contained in:
NotII
237
app/page.tsx
237
app/page.tsx
@@ -1,7 +1,7 @@
|
||||
import { getPlatformStatsServer } from "@/lib/server-api";
|
||||
import { HomeNavbar } from "@/components/home-navbar";
|
||||
import { Suspense } from "react";
|
||||
import { Shield, LineChart, Zap, ArrowRight } from "lucide-react";
|
||||
import { Shield, LineChart, Zap, ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { AnimatedStatsSection } from "@/components/animated-stats-section";
|
||||
@@ -36,142 +36,145 @@ export default async function Home() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-black text-white">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#D53F8C]/10 via-transparent to-transparent pointer-events-none" />
|
||||
<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 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-[#D53F8C]">Management</span>
|
||||
</h1>
|
||||
<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 mt-8">
|
||||
<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">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-10 text-white">Platform Statistics</h2>
|
||||
<AnimatedStatsSection stats={stats as any} />
|
||||
</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.
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="relative flex flex-col items-center px-4 py-20 md:py-32 mx-auto max-w-7xl">
|
||||
<div className="flex flex-col items-center text-center space-y-6 max-w-3xl">
|
||||
<div className="inline-flex items-center px-4 py-2 rounded-full bg-[#D53F8C]/10 border border-[#D53F8C]/20 mb-4">
|
||||
<Sparkles className="h-4 w-4 text-[#D53F8C] mr-2" />
|
||||
<span className="text-sm font-medium text-[#D53F8C]">Secure Crypto Payments</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-bold tracking-tight">
|
||||
The Future of <span className="text-[#D53F8C]">E-commerce</span> Management
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-zinc-400 max-w-2xl">
|
||||
Streamline your online business with our all-in-one platform. Secure payments, order tracking, and analytics in one place.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-4">
|
||||
<Link href="/dashboard">
|
||||
<Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0 h-12 px-8">
|
||||
Get Started
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/auth/register">
|
||||
<Button size="lg" variant="outline" className="border-zinc-800 text-white hover:bg-zinc-900 h-12 px-8">
|
||||
Create Account
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="relative py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto space-y-20">
|
||||
<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]" />
|
||||
{[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Payments",
|
||||
description: "Built-in cryptocurrency support with maximum privacy and security for your transactions."
|
||||
},
|
||||
{
|
||||
icon: LineChart,
|
||||
title: "Real-time Analytics",
|
||||
description: "Track your business performance with detailed insights and reporting tools."
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Lightning Fast",
|
||||
description: "Optimized for speed with real-time updates and instant notifications."
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="group relative overflow-hidden rounded-xl bg-gradient-to-b from-zinc-800/30 to-transparent p-6 border border-zinc-800">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#D53F8C]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative">
|
||||
<div className="h-12 w-12 flex items-center justify-center rounded-lg bg-[#D53F8C]/10 mb-4">
|
||||
<feature.icon className="h-6 w-6 text-[#D53F8C]" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
|
||||
<p className="text-sm text-zinc-400">{feature.description}</p>
|
||||
</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>
|
||||
|
||||
{/* Stats Section */}
|
||||
<div className="relative">
|
||||
<AnimatedStatsSection stats={stats as any} />
|
||||
</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>
|
||||
<section className="relative py-24 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{
|
||||
title: "Centralized Dashboard",
|
||||
description: "Manage your entire e-commerce operation from a single, intuitive interface."
|
||||
},
|
||||
{
|
||||
title: "Customer Insights",
|
||||
description: "Understand your customers better with detailed purchase history and behavior analytics."
|
||||
},
|
||||
{
|
||||
title: "Inventory Management",
|
||||
description: "Keep track of your stock levels and get alerts when it's time to reorder."
|
||||
},
|
||||
{
|
||||
title: "Automated Reports",
|
||||
description: "Get detailed reports and insights delivered automatically to your inbox."
|
||||
}
|
||||
].map((benefit, i) => (
|
||||
<div key={i} className="flex items-start space-x-4 p-6 rounded-lg bg-zinc-900/50 border border-zinc-800">
|
||||
<div className="flex-shrink-0">
|
||||
<CheckCircle2 className="h-6 w-6 text-[#D53F8C]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white mb-2">{benefit.title}</h3>
|
||||
<p className="text-sm text-zinc-400">{benefit.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-24 px-4">
|
||||
<div className="relative max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
|
||||
<p className="text-lg text-zinc-400 mb-8">
|
||||
Join thousands of businesses already using Ember to manage their e-commerce operations.
|
||||
</p>
|
||||
<Link href="/dashboard">
|
||||
<Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0 h-12 px-8">
|
||||
Start Now
|
||||
</Button>
|
||||
</Link>
|
||||
</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">
|
||||
<footer className="relative py-12 px-4 mt-auto">
|
||||
<div className="max-w-7xl mx-auto flex flex-col items-center">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h3 className="font-bold text-xl text-white">Ember</h3>
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-[#D53F8C]" />
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 text-center max-w-md mb-6">
|
||||
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 className="text-sm text-zinc-500">
|
||||
© {new Date().getFullYear()} Ember. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user