From 91efea5372324603c1c40be5181d062e8d4932f6 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Wed, 25 Dec 2024 06:45:20 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style:=20make=20it=20beautiful?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/download/NetworkSpeed.tsx | 27 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/download/NetworkSpeed.tsx b/src/components/download/NetworkSpeed.tsx
index 6696cca9..f3a9ddc2 100644
--- a/src/components/download/NetworkSpeed.tsx
+++ b/src/components/download/NetworkSpeed.tsx
@@ -20,20 +20,29 @@ export function NetworkSpeed({ speed }: NetworkSpeedProps) {
   };
 
   return (
-    <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg">
-      <div className="flex items-center gap-2 mb-4">
-        <Wifi className="h-5 w-5 text-cornflower-blue" />
-        <h2 className="text-xl font-semibold text-gray-900">Network Speed</h2>
+    <div className="bg-white/90 backdrop-blur-lg p-8 rounded-xl shadow-lg hover:scale-105 transform transition-all">
+      <div className="flex items-center gap-3 mb-5">
+        <Wifi className="h-7 w-7 text-cornflower-blue" />
+        <h2 className="text-2xl font-extrabold text-gray-900">Network Speed</h2>
       </div>
       
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <span className={`text-2xl font-bold ${getSpeedClass(speed)}`}>
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <span className={`text-4xl font-bold ${getSpeedClass(speed)}`}>
             {speed} Mbps
           </span>
         </div>
-        <p className="text-gray-600">{getRecommendation(speed)}</p>
+        <p className="text-lg text-gray-700">{getRecommendation(speed)}</p>
+      </div>
+      
+      <div className="mt-6 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className={`font-medium ${getSpeedClass(speed)}`}>Speed Quality:</span>
+          <span className={`${getSpeedClass(speed)} font-semibold`}>
+            {speed >= 100 ? 'Excellent' : speed >= 50 ? 'Good' : speed >= 20 ? 'Moderate' : 'Poor'}
+          </span>
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}