🚀 feat: add a toast notification

src/components/about/MissionSection.tsx

@@ -7,11 +7,11 @@ export function MissionSection() {
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1 }}
       transition={{ duration: 0.6 }}
-      className="bg-gradient-to-r from-cornflower-blue/10 to-white p-10 rounded-lg shadow-xl"
+      className="p-10 rounded-lg"
     >
-      <div className="flex items-center gap-4 mb-6">
+      <div className="flex items-center gap-4 mb-6 justify-center text-center">
         <Target className="h-8 w-8 text-cornflower-blue" />
-        <h2 className="text-3xl font-extrabold text-gray-900">Our Mission</h2>
+          <h2 className="text-3xl font-extrabold text-gray-900">Our Mission</h2>
       </div>
       
       <div className="max-w-3xl mx-auto">

src/components/developers/TeamMemberCard.tsx

@@ -33,9 +33,23 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
         </div>
       </div>
 
-      <p className="mt-4 text-gray-600 flex-grow">{description}</p>
-      
-      <div className="mt-4 flex items-center gap-4 text-sm text-gray-500">
+      {/* Show full description on hover */}
+      <motion.p
+        className="mt-4 text-gray-600 flex-grow line-clamp-2"
+        whileHover={{ opacity: 1 }}
+        initial={{ opacity: 0.7 }}
+        transition={{ duration: 0.3 }}
+      >
+        {description}
+      </motion.p>
+
+      {/* Additional information shown when hovering */}
+      <motion.div
+        className="mt-4 flex items-center gap-4 text-sm text-gray-500"
+        whileHover={{ opacity: 1 }}
+        initial={{ opacity: 0.5 }}
+        transition={{ duration: 0.3 }}
+      >
         <div className="flex items-center gap-1">
           <Users className="h-4 w-4" />
           <span>{user.followers.toLocaleString()} followers</span>
@@ -44,8 +58,8 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
           <Book className="h-4 w-4" />
           <span>{user.public_repos} repos</span>
         </div>
-      </div>
-      
+      </motion.div>
+
       <a
         href={user.html_url}
         target="_blank"

src/components/features/SearchBar.tsx

@@ -9,7 +9,6 @@ interface SearchBarProps {
 export function SearchBar({ value, onChange }: SearchBarProps) {
   return (
     <div className="relative">
-      <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 transition-all" />
       <input
         type="text"
         value={value}
@@ -17,6 +16,7 @@ export function SearchBar({ value, onChange }: SearchBarProps) {
         placeholder="Search tools..."
         className="w-full pl-12 pr-6 py-3 bg-white/80 backdrop-blur-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-cornflower-blue focus:border-cornflower-blue outline-none transition-all duration-300 ease-in-out hover:border-gray-300 hover:bg-white/90"
       />
+      <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 transition-all" />
     </div>
   );
 }

src/components/features/Toast.tsx

@@ -0,0 +1,28 @@
+// Toast.tsx
+import { motion } from 'framer-motion';
+
+interface ToastProps {
+  message: string;
+  onClose: () => void;
+}
+
+export const Toast = ({ message, onClose }: ToastProps) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    exit={{ opacity: 0, y: 20 }}
+    transition={{ duration: 0.3 }}
+    className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-cornflower-blue text-white px-4 py-2 rounded-lg shadow-lg"
+  >
+    <div className="flex items-center gap-2">
+      <span>{message}</span>
+    </div>
+    <button
+      onClick={onClose}
+      className="absolute top-0 right-0 p-1 text-white hover:bg-cornflower-blue/80 rounded-full"
+      aria-label="Close toast"
+    >
+      &times;
+    </button>
+  </motion.div>
+);

src/components/features/ToolCard.tsx

@@ -1,5 +1,7 @@
 import { motion } from 'framer-motion';
-import { Terminal } from 'lucide-react';
+import { Terminal, Clipboard } from 'lucide-react';
+import { useState } from 'react';
+import { Toast } from './Toast'; // Make sure to import the Toast component
 
 interface ToolCardProps {
   name: string;
@@ -9,27 +11,63 @@ interface ToolCardProps {
 }
 
 export function ToolCard({ name, description, category, command }: ToolCardProps) {
+  const [copied, setCopied] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(command)
+      .then(() => {
+        setCopied(true);
+        setShowToast(true);
+        setTimeout(() => {
+          setCopied(false);
+          setShowToast(false);
+        }, 3000); // Hide toast after 3 seconds
+      })
+      .catch((error) => console.error('Failed to copy: ', error));
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       whileHover={{ scale: 1.05, y: -5 }}
       transition={{ duration: 0.3 }}
-      className="bg-gradient-to-r from-cornflower-blue/10 to-white p-6 rounded-lg shadow-lg border border-gray-100 transform hover:shadow-2xl transition-all"
+      className="bg-white p-6 rounded-lg shadow-xl border border-gray-100 transform hover:shadow-2xl transition-all"
     >
       <div className="flex items-center gap-4 mb-4">
-        <div className="p-3 bg-cornflower-blue/20 rounded-full">
-          <Terminal className="h-6 w-6 text-cornflower-blue" />
+        <div className="p-4 bg-cornflower-blue/20 rounded-full">
+          <Terminal className="h-7 w-7 text-cornflower-blue" />
         </div>
         <h3 className="text-2xl font-semibold text-gray-900">{name}</h3>
       </div>
-      
+
       <p className="text-gray-600 text-lg mb-4">{description}</p>
-      
-      <div className="flex items-center justify-between">
+
+      <div className="flex items-center justify-between mt-4">
         <span className="text-sm font-medium text-cornflower-blue">{category}</span>
-        <code className="text-sm bg-gray-100 px-3 py-1 rounded">{command}</code>
+        <div className="flex items-center gap-2">
+          <code className="text-sm bg-gray-100 px-3 py-1 rounded text-gray-800">{command}</code>
+          <button
+            onClick={handleCopyClick}
+            className="p-2 bg-cornflower-blue/20 rounded-full hover:bg-cornflower-blue/30 transition-all"
+            aria-label="Copy command"
+          >
+            {copied ? (
+              <span className="text-sm text-cornflower-blue">Copied!</span>
+            ) : (
+              <Clipboard className="h-5 w-5 text-cornflower-blue" />
+            )}
+          </button>
+        </div>
       </div>
+
+      {showToast && (
+        <Toast
+          message="Command copied! Paste it in your terminal with Ctrl + Shift + V (Cmd + Shift + V on Mac)"
+          onClose={() => setShowToast(false)}
+        />
+      )}
     </motion.div>
   );
 }

src/data/gallery.ts

@@ -1,6 +1,6 @@
 export const galleryImages = [
   {
-    src: '/images/snigdhaos-plama-01.png',
+    src: '/images/snigdhaos-plasma-01.png',
     alt: 'Snigdha OS Plasma 6 - Application Dashbord',
     category: 'Plasma',
   },
@@ -29,6 +29,36 @@ export const galleryImages = [
     alt: 'Snigdha OS Plasma 6 - Control Hub',
     category: 'Plasma',
   },
+  {
+    src: '/images/snigdhaos-gnome-01.png',
+    alt: 'Snigdha OS Gnome Desktop - Main',
+    category: 'Gnome',
+  },
+  {
+    src: '/images/snigdhaos-gnome-02.png',
+    alt: 'Snigdha OS Gnome Desktop - Menu',
+    category: 'Gnome',
+  },
+  {
+    src: '/images/snigdhaos-gnome-03.png',
+    alt: 'Snigdha OS Gnome Desktop - Control',
+    category: 'Gnome',
+  },
+  {
+    src: '/images/snigdhaos-gnome-04.png',
+    alt: 'Snigdha OS Gnome Desktop - Folders',
+    category: 'Gnome',
+  },
+  {
+    src: '/images/snigdhaos-gnome-05.png',
+    alt: 'Snigdha OS Gnome Desktop - All Apps',
+    category: 'Gnome',
+  },
+  {
+    src: '/images/snigdhaos-gnome-06.png',
+    alt: 'Snigdha OS Gnome Desktop - Terminal',
+    category: 'Gnome',
+  },
 ];
 
-export const categories = ['All', 'Plasma'];
+export const categories = ['All', 'Plasma', 'Gnome'];

src/data/tools.ts

@@ -12,315 +12,315 @@ export const tools: Tool[] = [
     name: 'Nmap',
     description: 'Network exploration tool and security scanner',
     category: 'Information Gathering',
-    command: 'nmap',
+    command: 'sudo pacman -S nmap',
   },
   {
     id: '2',
     name: 'Wireshark',
     description: 'Network protocol analyzer for real-time packet capture',
     category: 'Sniffing & Spoofing',
-    command: 'wireshark',
+    command: 'sudo pacman -S wireshark',
   },
   {
     id: '3',
     name: 'Metasploit',
     description: 'Penetration testing framework',
     category: 'Exploitation Tools',
-    command: 'msfconsole',
+    command: 'sudo pacman -S metasploit',
   },
   {
     id: '4',
     name: 'Burp Suite',
     description: 'Web vulnerability scanner and proxy tool',
     category: 'Web Applications',
-    command: 'burpsuite',
+    command: 'sudo pacman -S burpsuite',
   },
   {
     id: '5',
     name: 'Aircrack-ng',
     description: 'Complete suite for wireless network security assessment',
     category: 'Wireless Attacks',
-    command: 'aircrack-ng',
+    command: 'sudo pacman -S aircrack-ng',
   },
   {
     id: '6',
     name: 'John the Ripper',
     description: 'Password cracker and hash analyzer',
     category: 'Password Attacks',
-    command: 'john',
+    command: 'sudo pacman -S john',
   },
   {
     id: '7',
     name: 'Hydra',
     description: 'Brute-force password cracking tool',
     category: 'Password Attacks',
-    command: 'hydra',
+    command: 'sudo pacman -S hydra',
   },
   {
     id: '8',
     name: 'Nikto',
     description: 'Web server scanner for vulnerabilities',
     category: 'Web Applications',
-    command: 'nikto',
+    command: 'sudo pacman -S nikto',
   },
   {
     id: '9',
     name: 'Airgeddon',
     description: 'Multi-use bash script for wireless pentesting',
     category: 'Wireless Attacks',
-    command: 'airgeddon',
+    command: 'sudo pacman -S airgeddon',
   },
   {
     id: '10',
     name: 'OWASP ZAP',
     description: 'Open-source web application security scanner',
     category: 'Web Applications',
-    command: 'zap',
+    command: 'sudo pacman -S zap',
   },
   {
     id: '11',
     name: 'Ettercap',
     description: 'Comprehensive suite for man-in-the-middle attacks',
     category: 'Sniffing & Spoofing',
-    command: 'ettercap',
+    command: 'sudo pacman -S ettercap',
   },
   {
     id: '12',
     name: 'Kali Linux',
     description: 'Linux distribution with pre-installed security tools',
     category: 'All',
-    command: 'kali',
+    command: 'sudo pacman -S kali-linux',
   },
   {
     id: '13',
     name: 'Netcat',
     description: 'Network utility for reading/writing network connections',
     category: 'Information Gathering',
-    command: 'nc',
+    command: 'sudo pacman -S netcat',
   },
   {
     id: '14',
     name: 'Netdiscover',
     description: 'Network discovery tool for locating devices on a network',
     category: 'Information Gathering',
-    command: 'netdiscover',
+    command: 'sudo pacman -S netdiscover',
   },
   {
     id: '15',
     name: 'SQLmap',
     description: 'Automated SQL injection and database takeover tool',
     category: 'Exploitation Tools',
-    command: 'sqlmap',
+    command: 'sudo pacman -S sqlmap',
   },
   {
     id: '16',
     name: 'Gobuster',
     description: 'Directory and DNS busting tool for web enumeration',
     category: 'Information Gathering',
-    command: 'gobuster',
+    command: 'sudo pacman -S gobuster',
   },
   {
     id: '17',
     name: 'Nikto2',
     description: 'Web scanner for vulnerabilities, similar to Nikto',
     category: 'Web Applications',
-    command: 'nikto2',
+    command: 'sudo pacman -S nikto2',
   },
   {
     id: '18',
     name: 'The Harvester',
     description: 'Information gathering tool for open-source intelligence (OSINT)',
     category: 'Information Gathering',
-    command: 'theharvester',
+    command: 'sudo pacman -S theharvester',
   },
   {
     id: '19',
     name: 'Social-Engineer Toolkit (SET)',
     description: 'Penetration testing framework for social engineering',
     category: 'Exploitation Tools',
-    command: 'setoolkit',
+    command: 'sudo pacman -S setoolkit',
   },
   {
     id: '20',
     name: 'Burp Suite Pro',
     description: 'Advanced web vulnerability scanner with additional features',
     category: 'Web Applications',
-    command: 'burpsuite_pro',
+    command: 'sudo pacman -S burpsuite_pro',
   },
   {
     id: '21',
     name: 'Beef',
     description: 'The Browser Exploitation Framework for testing browser security',
     category: 'Exploitation Tools',
-    command: 'beef',
+    command: 'sudo pacman -S beef',
   },
   {
     id: '22',
     name: 'Sn1per',
     description: 'Automated pentesting tool for information gathering',
     category: 'Information Gathering',
-    command: 'sn1per',
+    command: 'sudo pacman -S sn1per',
   },
   {
     id: '23',
     name: 'Responder',
     description: 'Lateral movement tool for exploiting network protocols',
     category: 'Sniffing & Spoofing',
-    command: 'responder',
+    command: 'sudo pacman -S responder',
   },
   {
     id: '24',
     name: 'Sublist3r',
     description: 'Subdomain enumeration tool for information gathering',
     category: 'Information Gathering',
-    command: 'sublist3r',
+    command: 'sudo pacman -S sublist3r',
   },
   {
     id: '25',
     name: 'Hashcat',
     description: 'Advanced password cracking tool',
     category: 'Password Attacks',
-    command: 'hashcat',
+    command: 'sudo pacman -S hashcat',
   },
   {
     id: '26',
     name: 'Mimikatz',
     description: 'Windows credential dumper for obtaining passwords',
     category: 'Exploitation Tools',
-    command: 'mimikatz',
+    command: 'sudo pacman -S mimikatz',
   },
   {
     id: '27',
     name: 'HashID',
     description: 'Hash identifier tool for identifying hash types',
     category: 'Password Attacks',
-    command: 'hashid',
+    command: 'sudo pacman -S hashid',
   },
   {
     id: '28',
     name: 'BloodHound',
     description: 'Active Directory enumeration tool for post-exploitation',
     category: 'Exploitation Tools',
-    command: 'bloodhound',
+    command: 'sudo pacman -S bloodhound',
   },
   {
     id: '29',
     name: 'Lynis',
     description: 'Security auditing tool for Unix-based systems',
     category: 'Information Gathering',
-    command: 'lynis',
+    command: 'sudo pacman -S lynis',
   },
   {
     id: '30',
     name: 'Wfuzz',
     description: 'Web fuzzing tool for finding vulnerabilities in web apps',
     category: 'Web Applications',
-    command: 'wfuzz',
+    command: 'sudo pacman -S wfuzz',
   },
   {
     id: '31',
     name: 'Cobalt Strike',
     description: 'Adversary simulation software for penetration testers',
     category: 'Exploitation Tools',
-    command: 'cobaltstrike',
+    command: 'sudo pacman -S cobaltstrike',
   },
   {
     id: '32',
     name: 'Shodan',
     description: 'Search engine for Internet-connected devices',
     category: 'Information Gathering',
-    command: 'shodan',
+    command: 'sudo pacman -S shodan',
   },
   {
     id: '33',
     name: 'CloudBrute',
     description: 'Brute force cloud storage services',
     category: 'Password Attacks',
-    command: 'cloudbrute',
+    command: 'sudo pacman -S cloudbrute',
   },
   {
     id: '34',
     name: 'FuzzBunch',
     description: 'A penetration testing framework developed by the NSA',
     category: 'Exploitation Tools',
-    command: 'fuzzbunch',
+    command: 'sudo pacman -S fuzzbunch',
   },
   {
     id: '35',
     name: 'PowerSploit',
     description: 'A PowerShell-based exploitation framework',
     category: 'Exploitation Tools',
-    command: 'powersploit',
+    command: 'sudo pacman -S powersploit',
   },
   {
     id: '36',
     name: 'Powershell Empire',
     description: 'Post-exploitation and agent-based framework',
     category: 'Exploitation Tools',
-    command: 'empire',
+    command: 'sudo pacman -S empire',
   },
   {
     id: '37',
     name: 'Reaver',
     description: 'Wi-Fi Protected Setup (WPS) attack tool',
     category: 'Wireless Attacks',
-    command: 'reaver',
+    command: 'sudo pacman -S reaver',
   },
   {
     id: '38',
     name: 'Kismet',
     description: 'Wireless network detector, sniffer, and intrusion detection system',
     category: 'Wireless Attacks',
-    command: 'kismet',
+    command: 'sudo pacman -S kismet',
   },
   {
     id: '39',
     name: 'Nikto3',
     description: 'Web server scanner that identifies vulnerabilities',
     category: 'Web Applications',
-    command: 'nikto3',
+    command: 'sudo pacman -S nikto3',
   },
   {
     id: '40',
     name: 'Scapy',
     description: 'Network manipulation tool for penetration testing',
     category: 'Sniffing & Spoofing',
-    command: 'scapy',
+    command: 'sudo pacman -S scapy',
   },
   {
     id: '41',
     name: 'SSLScan',
     description: 'SSL scanner for finding vulnerabilities in SSL implementations',
     category: 'Web Applications',
-    command: 'sslscan',
+    command: 'sudo pacman -S sslscan',
   },
   {
     id: '42',
     name: 'Gophish',
     description: 'Open-source phishing framework for social engineering testing',
     category: 'Social Engineering',
-    command: 'gophish',
+    command: 'sudo pacman -S gophish',
   },
   {
     id: '43',
     name: 'Empire',
     description: 'Post-exploitation framework with PowerShell agents',
     category: 'Exploitation Tools',
-    command: 'empire',
+    command: 'sudo pacman -S empire',
   },
   {
     id: '44',
     name: 'Pipal',
     description: 'Password analysis tool to identify weak passwords',
     category: 'Password Attacks',
-    command: 'pipal',
+    command: 'sudo pacman -S pipal',
   },
   {
     id: '45',
     name: 'Rekall',
     description: 'Forensic memory analysis tool for investigating malware',
     category: 'Forensics',
-    command: 'rekall',
+    command: 'sudo pacman -S rekall',
   },
 ];
 

src/pages/About.tsx

@@ -5,46 +5,46 @@ import { MissionSection } from '../components/about/MissionSection';
 
 export default function About() {
   return (
-    <div className="py-16 bg-gradient-to-b from-gray-50 via-white to-gray-100">
+    <div className="py-16 bg-gray-50">
       <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
         {/* Hero Section */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="text-center mb-16"
+          className="text-center mb-12"
         >
-          <h1 className="text-5xl font-extrabold text-gray-900">
+          <h1 className="text-4xl font-bold text-gray-900">
             About Snigdha OS
           </h1>
-          <p className="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
-            The most advanced penetration testing distribution, made for security professionals.
+          <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
+            The most advanced penetration testing distribution, crafted for security professionals.
           </p>
         </motion.div>
 
         {/* Content Sections */}
-        <div className="space-y-20">
+        <div className="space-y-16">
           {/* Mission Section */}
-          <section className="bg-cornflower-blue/5 rounded-2xl p-8 shadow-lg">
+          <section className="bg-white rounded-lg p-6 shadow-sm">
             <MissionSection />
           </section>
 
           {/* Team Section */}
           <section>
-            <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <h2 className="text-2xl font-semibold text-gray-900 text-center mb-8">
               Our Team Structure
             </h2>
-            <div className="overflow-hidden rounded-xl shadow-md bg-white p-6">
+            <div className="rounded-lg shadow-sm bg-white p-6">
               <TeamSection />
             </div>
           </section>
 
           {/* Timeline Section */}
           <section>
-            <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <h2 className="text-2xl font-semibold text-gray-900 text-center mb-8">
               Release Timeline
             </h2>
-            <div className="bg-gray-50 p-6 rounded-lg shadow-lg">
+            <div className="bg-white p-6 rounded-lg shadow-sm">
               <Timeline />
             </div>
           </section>