refactor: update stats area component with new metrics and layout (#105)

Author: aimensahnoun

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "request-scan",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

package.json

@@ -1,11 +1,11 @@
 /** @format */
 
-import { Activity, ArrowRightLeft, Building, DollarSign } from "lucide-react";
+import { Activity, Building, DollarSign } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 export function StatsArea() {
   return (
-    <div className="grid max-w-full gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4 grid-cols-1 px-10 md:px-0">
+    <div className="grid max-w-full gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-3 grid-cols-1 px-10 md:px-0">
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
           <CardTitle className="text-sm font-medium">
@@ -14,16 +14,7 @@ export function StatsArea() {
           <DollarSign className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold">$800+ Million</div>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Requests</CardTitle>
-          <ArrowRightLeft className="h-4 w-4 text-muted-foreground" />
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">13,000</div>
+          <div className="text-2xl font-bold">$1+ Billion</div>
         </CardContent>
       </Card>
       <Card>
@@ -34,16 +25,18 @@ export function StatsArea() {
           <Building className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold">2,000+ Companies</div>
+          <div className="text-2xl font-bold">3,000+ Companies</div>
         </CardContent>
       </Card>
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Payments</CardTitle>
+          <CardTitle className="text-sm font-medium">
+            Monthly Payments
+          </CardTitle>
           <Activity className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold">15,000</div>
+          <div className="text-2xl font-bold">30,000+</div>
         </CardContent>
       </Card>
     </div>