✨ style: change the visual

src/components/about/MissionSection.tsx

@@ -6,29 +6,58 @@ export function MissionSection() {
     <motion.div
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1 }}
-      className="bg-white/80 backdrop-blur-sm p-8 rounded-lg shadow-sm"
+      transition={{ duration: 0.6 }}
+      className="bg-gradient-to-r from-cornflower-blue/10 to-white p-10 rounded-lg shadow-xl"
     >
-      <div className="flex items-center gap-3 mb-6">
+      <div className="flex items-center gap-4 mb-6">
-        <Target className="h-6 w-6 text-cornflower-blue" />
+        <Target className="h-8 w-8 text-cornflower-blue" />
-        <h2 className="text-2xl font-bold text-gray-900">Our Mission</h2>
+        <h2 className="text-3xl font-extrabold text-gray-900">Our Mission</h2>
       </div>
       
-      <div className="prose prose-gray max-w-none">
+      <div className="max-w-3xl mx-auto">
-        <p className="text-gray-600 leading-relaxed">
+        <p className="text-lg text-gray-700 leading-relaxed mb-6 text-justify">
           Snigdha OS aims to provide security professionals and enthusiasts with the most comprehensive, 
-          reliable, and up-to-date collection of security tools. Our mission is to enable the security 
+          reliable, and up-to-date collection of security tools. Our mission is to empower the security 
-          community to perform professional-grade security auditing and penetration testing with a 
+          community with a standardized platform that allows for professional-grade security auditing and 
-          standardized, well-documented platform.
+          penetration testing, enhancing both efficiency and accuracy.
         </p>
         
-        <h3 className="text-xl font-semibold mt-6 mb-3">Core Values</h3>
+        <h3 className="text-2xl font-semibold mt-6 mb-4 text-gray-900">Core Values</h3>
-        <ul className="space-y-2 text-gray-600">
+        <ul className="space-y-3 text-lg text-gray-600">
-          <li>Open Source: Maintaining transparency and community collaboration</li>
+          <motion.li
-          <li>Security: Providing robust tools for security testing</li>
+            whileHover={{ scale: 1.05 }}
-          <li>Education: Supporting learning and skill development</li>
+            transition={{ type: 'spring', stiffness: 300 }}
-          <li>Community: Fostering a strong, supportive user community</li>
+            className="hover:text-cornflower-blue"
+          >
+            <span className="font-semibold text-gray-800">Open Source: </span> 
+            Maintaining transparency and community collaboration.
+          </motion.li>
+          <motion.li
+            whileHover={{ scale: 1.05 }}
+            transition={{ type: 'spring', stiffness: 300 }}
+            className="hover:text-cornflower-blue"
+          >
+            <span className="font-semibold text-gray-800">Security: </span> 
+            Providing robust tools for security testing.
+          </motion.li>
+          <motion.li
+            whileHover={{ scale: 1.05 }}
+            transition={{ type: 'spring', stiffness: 300 }}
+            className="hover:text-cornflower-blue"
+          >
+            <span className="font-semibold text-gray-800">Education: </span> 
+            Supporting learning and skill development.
+          </motion.li>
+          <motion.li
+            whileHover={{ scale: 1.05 }}
+            transition={{ type: 'spring', stiffness: 300 }}
+            className="hover:text-cornflower-blue"
+          >
+            <span className="font-semibold text-gray-800">Community: </span> 
+            Fostering a strong, supportive user community.
+          </motion.li>
         </ul>
       </div>
     </motion.div>
   );
-}
+}

src/components/about/TeamSection.tsx

@@ -22,22 +22,24 @@ const teamStructure = [
 
 export function TeamSection() {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {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-6 rounded-lg shadow-sm"
+          className="bg-white/80 backdrop-blur-sm p-8 rounded-lg shadow-xl hover:scale-105 hover:shadow-2xl transition-all duration-300"
         >
-          <div className="flex items-center gap-3 mb-3">
+          <div className="flex items-center justify-center gap-4 mb-6">
-            <Users className="h-5 w-5 text-cornflower-blue" />
+            <div className="p-3 bg-cornflower-blue/20 rounded-full">
-            <h3 className="text-lg font-semibold text-gray-900">{team.title}</h3>
+              <Users className="h-8 w-8 text-cornflower-blue" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900">{team.title}</h3>
           </div>
-          <p className="text-gray-600">{team.description}</p>
+          <p className="text-gray-600 text-lg leading-relaxed">{team.description}</p>
         </motion.div>
       ))}
     </div>
   );
-}
+}

src/components/about/Timeline.tsx

@@ -19,22 +19,22 @@ export function Timeline() {
           key={release.version}
           initial={{ opacity: 0, x: -20 }}
           whileInView={{ opacity: 1, x: 0 }}
-          transition={{ delay: index * 0.1 }}
+          transition={{ delay: index * 0.2, duration: 0.8 }}
-          className="relative pl-12 pb-8"
+          className="relative pl-12 pb-12"
         >
-          <div className="absolute left-0 p-2 bg-white rounded-full border-2 border-cornflower-blue">
+          <div className="absolute left-0 top-0 p-2 bg-cornflower-blue/70 rounded-full border-2 border-white shadow-lg">
-            <Calendar className="h-4 w-4 text-cornflower-blue" />
+            <Calendar className="h-5 w-5 text-white" />
           </div>
           
-          <div className="bg-white/80 backdrop-blur-sm p-4 rounded-lg shadow-sm">
+          <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out">
-            <h3 className="text-lg font-semibold text-gray-900">
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">
-              Kali {release.version}
+              Snigdha OS {release.version}
             </h3>
-            <time className="text-sm text-gray-500">{release.date}</time>
+            <time className="text-sm text-gray-500 font-light">{release.date}</time>
-            <p className="mt-1 text-gray-600">{release.description}</p>
+            <p className="mt-2 text-gray-700 text-lg leading-relaxed">{release.description}</p>
           </div>
         </motion.div>
       ))}
     </div>
   );
-}
+}