:3 blehhh
This commit is contained in:
57
app/page.tsx
57
app/page.tsx
@@ -111,67 +111,12 @@ export default async function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Benefits Section */}
|
|
||||||
<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 */}
|
||||||
<footer className="relative py-12 px-4 mt-auto">
|
<footer className="relative py-12 px-4 mt-auto">
|
||||||
<div className="max-w-7xl mx-auto flex flex-col items-center">
|
<div className="max-w-7xl mx-auto flex flex-col items-center">
|
||||||
<div className="flex items-center gap-2 mb-4">
|
<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>
|
</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 className="text-sm text-zinc-500">
|
<div className="text-sm text-zinc-500">
|
||||||
© {new Date().getFullYear()} Ember. All rights reserved.
|
© {new Date().getFullYear()} Ember. All rights reserved.
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ const formatCurrency = (value: number) => {
|
|||||||
return new Intl.NumberFormat('en-GB', {
|
return new Intl.NumberFormat('en-GB', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: 'GBP',
|
currency: 'GBP',
|
||||||
minimumFractionDigits: 0,
|
minimumFractionDigits: 2,
|
||||||
}).format(value);
|
}).format(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -18,63 +18,66 @@ interface AnimatedStatsProps {
|
|||||||
|
|
||||||
export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
|
export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
|
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
|
||||||
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
|
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
|
||||||
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
|
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
<Package className="h-8 w-8" />
|
<div className="relative flex flex-col items-center">
|
||||||
</div>
|
<Package className="h-6 w-6 text-[#D53F8C]" />
|
||||||
<div className="text-3xl font-bold text-white">
|
<div className="mt-4 text-3xl font-bold text-white">
|
||||||
<AnimatedCounter
|
<AnimatedCounter
|
||||||
value={stats.orders.completed}
|
value={stats.orders.completed}
|
||||||
duration={2000}
|
duration={2000}
|
||||||
suffix="+"
|
suffix="+"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-white">
|
<h3 className="mt-2 text-lg font-medium text-white">
|
||||||
Completed Orders
|
Completed Orders
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-center text-zinc-400">
|
<p className="mt-1 text-sm text-zinc-500">
|
||||||
Successfully fulfilled orders across our platform
|
Successfully fulfilled orders across our platform
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
|
|
||||||
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
|
|
||||||
<Users className="h-8 w-8" />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-3xl font-bold text-white">
|
|
||||||
|
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
|
||||||
|
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
<div className="relative flex flex-col items-center">
|
||||||
|
<Users className="h-6 w-6 text-[#D53F8C]" />
|
||||||
|
<div className="mt-4 text-3xl font-bold text-white">
|
||||||
<AnimatedCounter
|
<AnimatedCounter
|
||||||
value={stats.vendors.total}
|
value={stats.vendors.total}
|
||||||
duration={2000}
|
duration={2000}
|
||||||
suffix="+"
|
suffix="+"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-white">
|
<h3 className="mt-2 text-lg font-medium text-white">
|
||||||
Registered Vendors
|
Registered Vendors
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-center text-zinc-400">
|
<p className="mt-1 text-sm text-zinc-500">
|
||||||
Active sellers offering products on our marketplace
|
Active sellers offering products on our marketplace
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
|
|
||||||
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
|
|
||||||
<CreditCard className="h-8 w-8" />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-3xl font-bold text-white">
|
|
||||||
|
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
|
||||||
|
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
<div className="relative flex flex-col items-center">
|
||||||
|
<CreditCard className="h-6 w-6 text-[#D53F8C]" />
|
||||||
|
<div className="mt-4 text-3xl font-bold text-white">
|
||||||
<AnimatedCounter
|
<AnimatedCounter
|
||||||
value={stats.transactions.volume}
|
value={stats.transactions.volume}
|
||||||
duration={2500}
|
duration={2500}
|
||||||
formatter={formatCurrency}
|
formatter={formatCurrency}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-white">
|
<h3 className="mt-2 text-lg font-medium text-white">
|
||||||
Transaction Volume
|
Transaction Volume
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-center text-zinc-400">
|
<p className="mt-1 text-sm text-zinc-500">
|
||||||
Total value of successful transactions processed
|
Total value of successful transactions processed
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user