From ca1c447ccc77c6f9cf81be5380c8908848cff227 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Tue, 7 Jan 2025 03:12:48 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20chore:=20mass=20changes=20in=20t?=
 =?UTF-8?q?he=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/ToolsShowcase.tsx | 37 ++++++++++++++++-----------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/home/ToolsShowcase.tsx b/src/components/home/ToolsShowcase.tsx
index 861cbc3a..152b4016 100644
--- a/src/components/home/ToolsShowcase.tsx
+++ b/src/components/home/ToolsShowcase.tsx
@@ -2,12 +2,12 @@ import { motion } from "framer-motion";
 import { Terminal, Shield, Wifi, Globe, Lock, Database } from "lucide-react";
 
 const tools = [
-  { name: "Network Analysis", icon: Globe, color: "text-blue-500" },
-  { name: "Penetration Testing", icon: Shield, color: "text-green-500" },
-  { name: "Wireless Security", icon: Wifi, color: "text-purple-500" },
-  { name: "Cryptography", icon: Lock, color: "text-red-500" },
-  { name: "Forensics", icon: Database, color: "text-yellow-500" },
-  { name: "Exploitation", icon: Terminal, color: "text-pink-500" },
+  { name: "Network Analysis", icon: Globe, color: "from-blue-500 to-blue-400" },
+  { name: "Penetration Testing", icon: Shield, color: "from-green-500 to-green-400" },
+  { name: "Wireless Security", icon: Wifi, color: "from-purple-500 to-purple-400" },
+  { name: "Cryptography", icon: Lock, color: "from-red-500 to-red-400" },
+  { name: "Forensics", icon: Database, color: "from-yellow-500 to-yellow-400" },
+  { name: "Exploitation", icon: Terminal, color: "from-pink-500 to-pink-400" },
 ];
 
 export function ToolsShowcase() {
@@ -15,15 +15,17 @@ export function ToolsShowcase() {
     <section className="py-20 bg-gradient-to-b from-gray-50 to-gray-100">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header Section */}
-        <div className="text-center mb-12">
-          <h2 className="text-4xl font-extrabold text-gray-900">Security Tools Suite</h2>
+        <div className="text-center mb-16">
+          <h2 className="text-5xl font-extrabold text-gray-900">
+            Security Tools Suite
+          </h2>
           <p className="mt-4 text-lg text-gray-600">
-            A comprehensive toolkit tailored for security professionals.
+            A comprehensive toolkit tailored for security professionals. Explore our powerful tools designed to safeguard and analyze your digital presence.
           </p>
         </div>
 
         {/* Tools Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-12">
           {tools.map((tool, index) => (
             <motion.div
               key={tool.name}
@@ -37,19 +39,24 @@ export function ToolsShowcase() {
               whileHover={{
                 scale: 1.1,
                 rotate: 1,
-                boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)",
+                boxShadow: "0 30px 60px rgba(0, 0, 0, 0.3)",
               }}
-              className="flex flex-col items-center p-8 bg-white rounded-xl shadow-md hover:shadow-2xl transition-transform duration-300"
+              className="flex flex-col items-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-transform duration-300"
               aria-label={tool.name}
             >
               {/* Icon Section */}
               <div
-                className={`p-6 rounded-full shadow-inner bg-gradient-to-br from-gray-100 via-gray-50 to-gray-200 mb-6 transition-transform`}
+                className={`p-6 rounded-full bg-gradient-to-br ${tool.color} shadow-lg mb-6 transform transition-transform`}
               >
-                <tool.icon className={`h-14 w-14 ${tool.color}`} />
+                <tool.icon className="h-14 w-14 text-white" />
               </div>
               {/* Tool Name */}
-              <h3 className="text-xl font-semibold text-gray-800">{tool.name}</h3>
+              <h3 className="text-2xl font-bold text-gray-800 text-center">
+                {tool.name}
+              </h3>
+              <p className="mt-2 text-gray-500 text-center text-sm">
+                Explore cutting-edge features for {tool.name.toLowerCase()}.
+              </p>
             </motion.div>
           ))}
         </div>