From 907831d6a7a32c66939ca16a81ee5ffd142a5686 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Thu, 10 Apr 2025 00:52:42 +0100
Subject: [PATCH] :3 blehhh

---
 app/page.tsx                          |  57 +-------------
 components/animated-stats-section.tsx | 103 +++++++++++++-------------
 2 files changed, 54 insertions(+), 106 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index e7e6e5a..5a59cc3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -111,67 +111,12 @@ export default async function Home() {
           </div>
         </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 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 className="text-sm text-zinc-500">
               © {new Date().getFullYear()} Ember. All rights reserved.
             </div>
diff --git a/components/animated-stats-section.tsx b/components/animated-stats-section.tsx
index 68c3c12..c7eafdd 100644
--- a/components/animated-stats-section.tsx
+++ b/components/animated-stats-section.tsx
@@ -8,7 +8,7 @@ const formatCurrency = (value: number) => {
   return new Intl.NumberFormat('en-GB', {
     style: 'currency',
     currency: 'GBP',
-    minimumFractionDigits: 0,
+    minimumFractionDigits: 2,
   }).format(value);
 };
 
@@ -18,62 +18,65 @@ interface AnimatedStatsProps {
 
 export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
   return (
-    <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
-      <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]">
-          <Package className="h-8 w-8" />
+    <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
+      <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">
+          <Package className="h-6 w-6 text-[#D53F8C]" />
+          <div className="mt-4 text-3xl font-bold text-white">
+            <AnimatedCounter 
+              value={stats.orders.completed} 
+              duration={2000}
+              suffix="+"
+            />
+          </div>
+          <h3 className="mt-2 text-lg font-medium text-white">
+            Completed Orders
+          </h3>
+          <p className="mt-1 text-sm text-zinc-500">
+            Successfully fulfilled orders across our platform
+          </p>
         </div>
-        <div className="text-3xl font-bold text-white">
-          <AnimatedCounter 
-            value={stats.orders.completed} 
-            duration={2000}
-            suffix="+"
-          />
-        </div>
-        <h3 className="text-xl font-bold text-white">
-          Completed Orders
-        </h3>
-        <p className="text-center text-zinc-400">
-          Successfully fulfilled orders across our platform
-        </p>
       </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 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 
+              value={stats.vendors.total} 
+              duration={2000}
+              suffix="+"
+            />
+          </div>
+          <h3 className="mt-2 text-lg font-medium text-white">
+            Registered Vendors
+          </h3>
+          <p className="mt-1 text-sm text-zinc-500">
+            Active sellers offering products on our marketplace
+          </p>
         </div>
-        <div className="text-3xl font-bold text-white">
-          <AnimatedCounter 
-            value={stats.vendors.total} 
-            duration={2000}
-            suffix="+"
-          />
-        </div>
-        <h3 className="text-xl font-bold text-white">
-          Registered Vendors
-        </h3>
-        <p className="text-center text-zinc-400">
-          Active sellers offering products on our marketplace
-        </p>
       </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 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 
+              value={stats.transactions.volume} 
+              duration={2500}
+              formatter={formatCurrency}
+            />
+          </div>
+          <h3 className="mt-2 text-lg font-medium text-white">
+            Transaction Volume
+          </h3>
+          <p className="mt-1 text-sm text-zinc-500">
+            Total value of successful transactions processed
+          </p>
         </div>
-        <div className="text-3xl font-bold text-white">
-          <AnimatedCounter 
-            value={stats.transactions.volume} 
-            duration={2500}
-            formatter={formatCurrency}
-          />
-        </div>
-        <h3 className="text-xl font-bold text-white">
-          Transaction Volume
-        </h3>
-        <p className="text-center text-zinc-400">
-          Total value of successful transactions processed
-        </p>
       </div>
     </div>
   );