📝 docs: update in content

src/components/about/TeamSection.tsx

@@ -1,45 +1,88 @@
 import { motion } from 'framer-motion';
-import { Users } from 'lucide-react';
+import { Users, Shield, BookOpen, MessageSquare } from 'lucide-react';
 
 const teamStructure = [
   {
     title: 'Core Development',
-    description: 'Responsible for the base system and core tools integration',
+    description: 'Responsible for the base system and core tools integration.',
+    icon: Users,
+    link: '#',
   },
   {
     title: 'Security Tools',
-    description: 'Maintains and updates the vast collection of security tools',
+    description: 'Maintains and updates the vast collection of security tools.',
+    icon: Shield,
+    link: '#',
   },
   {
     title: 'Documentation',
-    description: 'Creates and maintains user documentation and guides',
+    description: 'Creates and maintains user documentation and guides.',
+    icon: BookOpen,
+    link: '#',
   },
   {
     title: 'Community Management',
-    description: 'Manages community interactions and contributions',
+    description: 'Manages community interactions and contributions.',
+    icon: MessageSquare,
+    link: '#',
   },
 ];
 
 export function TeamSection() {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="container mx-auto px-6 py-12">
+      {/* <h2 className="text-3xl font-bold text-center text-gray-900 mb-10">
+        Meet Our Teams
+      </h2> */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
         {teamStructure.map((team, index) => (
           <motion.div
             key={team.title}
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
-          transition={{ delay: index * 0.1 }}
-          className="bg-white/80 backdrop-blur-sm p-8 rounded-lg shadow-xl hover:scale-105 hover:shadow-2xl transition-all duration-300"
+            viewport={{ once: true }}
+            transition={{ delay: index * 0.1, duration: 0.6 }}
+            className="group bg-white/90 backdrop-blur-lg p-8 rounded-xl shadow-lg hover:shadow-2xl hover:scale-105 transition-transform duration-300"
           >
-          <div className="flex items-center justify-center gap-4 mb-6">
-            <div className="p-3 bg-cornflower-blue/20 rounded-full">
-              <Users className="h-8 w-8 text-cornflower-blue" />
+            {/* Icon and Title */}
+            <div className="flex items-center gap-4 mb-6">
+              <div className="p-4 bg-blue-100 rounded-full">
+                <team.icon className="h-8 w-8 text-blue-600" />
               </div>
-            <h3 className="text-xl font-bold text-gray-900">{team.title}</h3>
+              <h3 className="text-xl font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
+                {team.title}
+              </h3>
             </div>
-          <p className="text-gray-600 text-lg leading-relaxed">{team.description}</p>
+            {/* Description */}
+            <p className="text-gray-700 text-lg leading-relaxed mb-4">
+              {team.description}
+            </p>
+            {/* Optional Link/Button */}
+            {team.link && (
+              <a
+                href={team.link}
+                className="text-blue-600 font-medium text-sm inline-flex items-center group-hover:underline"
+              >
+                Learn More
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4 ml-1"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M17 8l4 4m0 0l-4 4m4-4H3"
+                  />
+                </svg>
+              </a>
+            )}
           </motion.div>
         ))}
       </div>
+    </div>
   );
 }