🚀 feat: add a toast notification

.github/workflows/cz.yml

@@ -0,0 +1,38 @@
+name: Check Conventional Commit
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check-commit-message:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2
+
+    - name: Check Conventional Commit
+      run: |
+        # Define the conventional commit types with emojis
+        TYPES=("🚀 feat" "🐛 fix" "📝 docs" "✨ style" "🛠 refactor" "⚡️ perf" "🔬 test" "🔧 build" "🤖 ci" "🧹 chore" "⏪ revert")
+
+        # Extract the commit type and emoji from the commit message
+        COMMIT_MSG=$(git log --format=%B -n 1)
+        for type in "${TYPES[@]}"; do
+          type_emoji=${type}
+          type=${type_emoji#* }
+          emoji=${type_emoji% *}
+          if [[ $COMMIT_MSG == $emoji* ]]; then
+            echo "Commit message is a conventional commit"
+            exit 0
+          fi
+        done
+
+        # If we reach here, the commit message is not a conventional commit
+        echo "Commit message is not a conventional commit"
+        exit 1

CONTRIBUTING.md

@@ -1,27 +1,27 @@
-# Contributing to Snigdha OS Web Dev 🌐
+# Contributing to Snigdha OS Web 🌐
 
-Thank you for your interest in contributing to the Snigdha OS Web Dev project! We're excited to have you help us improve the web presence of Snigdha OS. Whether you're fixing a bug, adding a feature, or improving the documentation, your contributions are highly valued.
+Thank you for your interest in contributing to the **Snigdha OS Web** project! We’re excited to have you help us enhance the web presence of Snigdha OS. Whether you're fixing bugs, adding features, or improving documentation, your contributions are highly appreciated!
 
 ## 🛠 How to Contribute
 
 ### 1. **Fork the Repository** 🍴
 
-Start by forking the Snigdha OS Web Dev repository to your own GitHub account. This creates a personal copy of the project where you can make changes without affecting the original project.
+To begin, fork the Snigdha OS Web repository to your GitHub account. This creates your personal copy of the project, where you can freely make changes without affecting the original repository.
 
-- Navigate to the [Snigdha OS Web Dev repository](https://github.com/Snigdha-OS/snigdhaos-web-dev).
+- Navigate to the [Snigdha OS Web repository](https://github.com/Snigdha-OS/Snigdha-OS.github.io).
-- Click on the "Fork" button at the top right of the page.
+- Click the "Fork" button at the top right corner of the page.
 
 ### 2. **Clone Your Fork** 🚀
 
-Clone the forked repository to your local machine:
+Next, clone the forked repository to your local machine:
 
 ```bash
-git clone https://github.com/your-username/snigdhaos-web-dev.git
+git clone https://github.com/your-username/Snigdha-OS.github.io.git
 ```
 
 ### 3. **Create a New Branch** 🧑‍💻
 
-Once you have the repository cloned, create a new branch for your work. This helps keep your contributions organized.
+Before you start making changes, create a new branch to keep your work organized and separate from the main codebase.
 
 ```bash
 git checkout -b feature/your-branch-name
@@ -29,14 +29,15 @@ git checkout -b feature/your-branch-name
 
 ### 4. **Make Your Changes** ✏️
 
-Now you can make changes! Whether you're fixing a bug, adding a feature, or improving documentation, make sure to follow the guidelines for code style and project structure.
+Now you’re ready to make changes! Whether you're fixing bugs, adding a new feature, or improving documentation, follow these guidelines:
 
-- **For Code**: Ensure that your code follows the project's coding standards and is well-documented.
+- **For Code**: Ensure your code follows the project's coding standards and is well-commented.
-- **For Documentation**: Follow the formatting guidelines and be clear with your explanations.
+- **For Documentation**: Use the correct formatting and provide clear, concise explanations.
+- **For Styles/Design**: Make sure any design improvements align with the project's visual identity.
 
 ### 5. **Commit Your Changes** 💾
 
-Commit your changes with a clear and descriptive message.
+Commit your changes with a clear, descriptive message that explains what you've done.
 
 ```bash
 git add .
@@ -45,7 +46,7 @@ git commit -m "Add/modify [brief description of changes]"
 
 ### 6. **Push Your Changes** 🔼
 
-Push your branch to your forked repository:
+Push your new branch with your changes to your forked repository:
 
 ```bash
 git push origin feature/your-branch-name
@@ -53,58 +54,58 @@ git push origin feature/your-branch-name
 
 ### 7. **Open a Pull Request (PR)** 🔄
 
-Once your changes are ready, open a pull request to merge your work back into the original repository.
+Once you’ve made your changes and pushed them to your fork, open a pull request (PR) to merge them back into the original repository.
 
-- Go to your fork on GitHub and click the "New Pull Request" button.
+- Go to your fork on GitHub and click the “New Pull Request” button.
-- Select your branch and the base branch (usually `master` or `develop`).
+- Choose your branch and compare it with the base branch (usually `master` or `develop`).
-- Provide a clear description of the changes in the PR, explaining the problem it solves or the feature it adds.
+- Write a detailed description of your changes and the issue they address (if any).
 
 ### 8. **Address Feedback** 💬
 
-After opening the PR, maintainers may review your changes and provide feedback. Be prepared to make additional changes based on their suggestions.
+After opening the PR, the maintainers will review your changes and may provide feedback. Be ready to make further updates based on their suggestions.
 
-### 9. **Celebrate** 🎉
+### 9. **Celebrate!** 🎉
-
-Once your pull request is merged, celebrate! You've just contributed to Snigdha OS Web Dev and made the web experience better for everyone!
 
+Once your PR is merged, congratulations! You've contributed to Snigdha OS Web and made the web experience better for everyone.
 
+Snigdha OS Web
 
 ## 📝 Code of Conduct
 
-Please follow the [Snigdha OS Code of Conduct](https://github.com/Snigdha-OS/snigdhaos-web-dev/blob/master/CODE_OF_CONDUCT.md) when contributing to this repository. We want to foster a welcoming and inclusive environment for all contributors.
+Please adhere to the [Snigdha OS Code of Conduct](https://github.com/Snigdha-OS/Snigdha-OS.github.io/blob/master/CODE_OF_CONDUCT.md) when contributing to this repository. We strive to maintain a welcoming and inclusive environment for all contributors.
-
 
+Snigdha OS Web
 
 ## 🚨 Reporting Issues
 
-If you find any issues or bugs, please follow the steps below to report them:
+If you encounter any issues or bugs, please follow the steps below to report them:
-
-1. Check if the issue has already been reported.
-2. If not, open an issue in the [Issues section](https://github.com/Snigdha-OS/snigdhaos-web-dev/issues).
-3. Provide as much detail as possible: 
-   - Describe the issue clearly.
-   - Include steps to reproduce the issue.
-   - If possible, attach logs or screenshots.
 
+1. **Search for Existing Issues**: Check if the issue has already been reported before opening a new one.
+2. **Open a New Issue**: If the issue hasn’t been reported, go to the [Issues section](https://github.com/Snigdha-OS/Snigdha-OS.github.io/issues) and create a new issue.
+3. **Provide Detailed Information**: Include as much detail as possible:
+   - A clear description of the issue.
+   - Steps to reproduce the issue.
+   - Any relevant logs or screenshots that can help maintainers understand the problem.
 
+Snigdha OS Web
 
 ## 💡 Ideas for Contribution
 
-You can contribute in various ways:
+There are many ways you can contribute to the Snigdha OS Web project:
-
-- **Bug Fixes**: Help us by identifying and fixing issues in the web app.
-- **Feature Requests**: Have an idea for a new feature? Open an issue or a pull request!
-- **Documentation**: Contribute to improving the documentation by clarifying instructions or adding new information.
-- **Styling/Design**: Help us make the website look better by improving the UI and UX.
 
+- **Bug Fixes**: Help us identify and resolve bugs in the web app.
+- **New Features**: Got an idea for a new feature? Feel free to open an issue or submit a PR!
+- **Documentation Improvements**: Enhance the documentation by clarifying instructions, adding examples, or updating outdated content.
+- **UI/UX Improvements**: Contribute to making the website visually appealing and easy to use by improving its design.
 
+Snigdha OS Web
 
 ## 📜 License
 
-By contributing, you agree that your contributions will be licensed under the [MIT License](https://github.com/Snigdha-OS/snigdhaos-web-dev/blob/master/LICENSE).
+By contributing to this repository, you agree that your contributions will be licensed under the [MIT License](https://github.com/Snigdha-OS/Snigdha-OS.github.io/blob/master/LICENSE).
-
 
+Snigdha OS Web
 
 ## 🤝 Thank You!
 
-Thank you for being a part of the Snigdha OS Web Dev community! Every contribution helps us make Snigdha OS better for everyone. We look forward to your contributions!
+Thank you for being a part of the Snigdha OS Web community! Every contribution, no matter how big or small, helps make Snigdha OS better for everyone. We look forward to your contributions!

index.html

@@ -32,6 +32,8 @@
     <!-- Canonical Link to prevent duplicate content issues -->
     <link rel="canonical" href="https://snigdha-os.github.io/" />
 
+    <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+
     <!-- Structured Data: JSON-LD for better understanding of page content -->
     <script type="application/ld+json">
       {

package.json

@@ -25,7 +25,7 @@
     "validate": "npm run lint && npm run type-check && npm run test"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.63.0",
+    "@tanstack/react-query": "^5.64.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.17.0",
     "lucide-react": "^0.344.0",
@@ -44,7 +44,7 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^9.18.0",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-react-refresh": "^0.4.18",
     "gh-pages": "^6.3.0",
     "globals": "^15.14.0",
     "husky": "^8.0.3",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@tanstack/react-query':
-        specifier: ^5.63.0
+        specifier: ^5.64.0
-        version: 5.63.0(react@18.3.1)
+        version: 5.64.0(react@18.3.1)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -61,8 +61,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0(eslint@9.18.0(jiti@1.21.7))
       eslint-plugin-react-refresh:
-        specifier: ^0.4.16
+        specifier: ^0.4.18
-        version: 0.4.16(eslint@9.18.0(jiti@1.21.7))
+        version: 0.4.18(eslint@9.18.0(jiti@1.21.7))
       gh-pages:
         specifier: ^6.3.0
         version: 6.3.0
@@ -954,11 +954,11 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
-  '@tanstack/query-core@5.62.16':
+  '@tanstack/query-core@5.64.0':
-    resolution: {integrity: sha512-9Sgft7Qavcd+sN0V25xVyo0nfmcZXBuODy3FVG7BMWTg1HMLm8wwG5tNlLlmSic1u7l1v786oavn+STiFaPH2g==}
+    resolution: {integrity: sha512-/MPJt/AaaMzdWJZTafgMyYhEX/lGjQrNz8+NDQSk8fNoU5PHqh05FhQaBrEQafW2PeBHsRbefEf//qKMiSAbQQ==}
 
-  '@tanstack/react-query@5.63.0':
+  '@tanstack/react-query@5.64.0':
-    resolution: {integrity: sha512-QWizLzSiog8xqIRYmuJRok9VELlXVBAwtINgVCgW1SNvamQwWDO5R0XFSkjoBEj53x9Of1KAthLRBUC5xmtVLQ==}
+    resolution: {integrity: sha512-tBMzlROROUcTDMpDt1NC3n9ndKnJHPB3RCpa6Bf9f31TFvqhLz879x8jldtKU+6IwMSw1Pn4K1AKA+2SYyA6TA==}
     peerDependencies:
       react: ^18 || ^19
 
@@ -1394,8 +1394,8 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
-  eslint-plugin-react-refresh@0.4.16:
+  eslint-plugin-react-refresh@0.4.18:
-    resolution: {integrity: sha512-slterMlxAhov/DZO8NScf6mEeMBBXodFUolijDvrtTxyezyLoTQaa73FyYus/VbTdftd8wBgBxPMRk3poleXNQ==}
+    resolution: {integrity: sha512-IRGEoFn3OKalm3hjfolEWGqoF/jPqeEYFp+C8B0WMzwGwBMvlRDQd06kghDhF0C61uJ6WfSDhEZE/sAQjduKgw==}
     peerDependencies:
       eslint: '>=8.40'
 
@@ -3562,11 +3562,11 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@tanstack/query-core@5.62.16': {}
+  '@tanstack/query-core@5.64.0': {}
 
-  '@tanstack/react-query@5.63.0(react@18.3.1)':
+  '@tanstack/react-query@5.64.0(react@18.3.1)':
     dependencies:
-      '@tanstack/query-core': 5.62.16
+      '@tanstack/query-core': 5.64.0
       react: 18.3.1
 
   '@types/babel__core@7.20.5':
@@ -4042,7 +4042,7 @@ snapshots:
     dependencies:
       eslint: 9.18.0(jiti@1.21.7)
 
-  eslint-plugin-react-refresh@0.4.16(eslint@9.18.0(jiti@1.21.7)):
+  eslint-plugin-react-refresh@0.4.18(eslint@9.18.0(jiti@1.21.7)):
     dependencies:
       eslint: 9.18.0(jiti@1.21.7)
 

push.sh

@@ -6,77 +6,72 @@
 # Define the conventional commit types with new emojis
 TYPES=("🚀 feat" "🐛 fix" "📝 docs" "✨ style" "🛠 refactor" "⚡️ perf" "🔬 test" "🔧 build" "🤖 ci" "🧹 chore" "⏪ revert")
 
-# Function to display an error and exit
+# Function to display an error and exit and
 error_exit() {
-    echo -e "\033[1;31m[ERROR]\033[0m $1"  # Prints the error message in red color
+    echo -e "\033[1;31m[ERROR]\033[0m $1"
-    exit 1  # Exits the script with a non-zero status
+    exit 1
 }
 
 # Ensure the script is run in a Git repository
 git rev-parse --is-inside-work-tree > /dev/null 2>&1 || error_exit "This is not a Git repository."
 
-# Get the current branch name using Git
+# Get the current branch name
 branch=$(git rev-parse --abbrev-ref HEAD)
 
-# Pull the latest changes from the remote repository to stay up-to-date
+# Pull the latest changes from the remote repository
 echo "Pulling latest changes from remote branch '$branch'..."
 git pull origin "$branch" || error_exit "Failed to pull changes from the remote repository. Please resolve any conflicts manually."
 
-# Check if there are any changes to commit (both staged and unstaged)
+# Prompt the user to select a commit type
-if git diff --quiet && git diff --cached --quiet; then
-    error_exit "No changes detected to commit."  # If no changes, exit the script
-fi
-
-# Prompt the user to select a commit type from the predefined list of types
 echo "Select a commit type:"
 select type in "${TYPES[@]}"; do
-    if [[ -n "$type" ]]; then  # If a valid selection is made, break the loop
+    if [[ -n "$type" ]]; then
         break
     else
-        echo "Invalid selection. Please try again."  # If invalid, prompt again
+        echo "Invalid selection. Please try again."
     fi
 done
 
-# Extract the commit type (e.g., "feat") and emoji (e.g., "🚀") from the selected type
+# Extract the commit type and emoji from the selection
-type_emoji=${type}  # The full emoji and type (e.g., "🚀 feat")
+type_emoji=${type}
-type=${type_emoji#* }  # Extract the commit type (e.g., "feat") by removing the emoji
+type=${type_emoji#* }
-emoji=${type_emoji% *}  # Extract the emoji (e.g., "🚀") by removing the type
+emoji=${type_emoji% *}
 
-# Prompt the user to enter a short description for the commit
+# Prompt the user to enter a short description
 read -p "Enter a short description: " desc
-if [ -z "$desc" ]; then  # If the description is empty, exit with an error
+if [ -z "$desc" ]; then
     error_exit "A short description is required!"
 fi
 
 # Prompt the user to enter a longer description (optional)
 read -p "Enter a longer description (optional): " long_desc
 
-# Create the commit message using the emoji, type, and description
+# Create the commit message
 commit_msg="$emoji $type: $desc"
 
-# If the user provided a longer description, append it to the commit message
+# If a longer description was provided, add it to the commit message
 if [ -n "$long_desc" ]; then
-    commit_msg+="\n\n$long_desc"  # Adds the longer description to the commit message
+    commit_msg+="\n\n$long_desc"
 fi
 
-# Print the commit message to the console for review
+# Print the commit message to the console
 echo -e "\nCommit message:"
-echo -e "\033[1;36m$commit_msg\033[0m"  # Prints the commit message in cyan color
+echo -e "\033[1;36m$commit_msg\033[0m"
 
-# Stage all changes for commit
+# Stage all changes
 git add .
 
-# Commit the changes with the constructed commit message
+# Commit the changes with the conventional commit message
 if git commit -m "$commit_msg"; then
-    echo -e "\033[1;32mCommit successful!\033[0m"  # If commit is successful, print success message in green
+    echo -e "\033[1;32mCommit successful!\033[0m"
 else
-    error_exit "Commit failed. Please check your changes and try again."  # If commit fails, show error and exit
+    error_exit "Commit failed."
 fi
 
 # Push the changes to the remote repository
 echo "Pushing changes to remote branch '$branch'..."
 if git push origin "$branch"; then
-    echo -e "\033[1;32mChanges pushed to remote branch '$branch'.\033[0m"  # If push is successful, print success message in green
+    echo -e "\033[1;32mChanges pushed to remote branch '$branch'.\033[0m"
 else
-    error_exit "Push failed. Please check your connection or branch permissions."  # If push fails, show error and exit
+    error_exit "Push failed. Please check your connection or branch permissions."
-fi
+fi

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/ContributorCard.tsx

@@ -11,33 +11,34 @@ interface ContributorCardProps {
 export function ContributorCard({ login, avatarUrl, contributions, profileUrl }: ContributorCardProps) {
   return (
     <motion.div
-      whileHover={{ y: -5 }}
+      whileHover={{ y: -5, scale: 1.02 }}
-      className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-gray-200"
+      whileTap={{ scale: 0.98 }}
+      className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-gray-200 shadow-md w-72 h-48 transition-all flex flex-col justify-between"
     >
       <div className="flex items-center gap-4">
         <img
           src={avatarUrl}
           alt={`${login}'s avatar`}
-          className="w-24 h-24 rounded-full"
+          className="w-20 h-20 rounded-full object-cover"
         />
         <div>
-          <h3 className="font-semibold text-gray-900">{login}</h3>
+          <h3 className="font-semibold text-gray-900 text-lg truncate">{login}</h3>
           <div className="flex items-center gap-2 text-sm text-gray-600">
             <GitCommit className="h-4 w-4" />
             <span>{contributions} contributions</span>
           </div>
         </div>
       </div>
-      
+      <motion.a
-      <a
         href={profileUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="mt-4 flex items-center gap-2 text-sm text-cornflower-blue hover:underline"
+        whileHover={{ x: 5 }}
+        className="mt-4 flex items-center gap-2 text-sm text-blue-600 hover:underline"
       >
         <Github className="h-4 w-4" />
         View Profile
-      </a>
+      </motion.a>
     </motion.div>
   );
-}
+}

src/components/developers/TeamMemberCard.tsx

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion';
-import { MapPin, Users, Book } from 'lucide-react';
+import { MapPin, Users, Book, Github } from 'lucide-react'; // Added Github icon
-import type { GithubUser  } from '../../lib/github';
+import type { GithubUser } from '../../lib/github';
 
 interface TeamMemberCardProps {
-  user: GithubUser ;
+  user: GithubUser;
   role: string;
   description: string;
 }
@@ -13,7 +13,7 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
     <motion.div
       whileHover={{ scale: 1.05 }}
       transition={{ type: 'spring', stiffness: 300 }}
-      className="bg-white shadow-lg rounded-lg p-6 border border-gray-200 flex flex-col justify-between"
+      className="bg-gradient-to-r from-white to-blue-50 shadow-lg rounded-lg p-6 border border-gray-200 flex flex-col justify-between"
     >
       <div className="flex items-start gap-4">
         <img
@@ -33,9 +33,23 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
         </div>
       </div>
 
-      <p className="mt-4 text-gray-600 flex-grow">{description}</p>
+      {/* Show full description on hover */}
-      
+      <motion.p
-      <div className="mt-4 flex items-center gap-4 text-sm text-gray-500">
+        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,16 +58,17 @@ 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"
         rel="noopener noreferrer"
         className="mt-4 inline-flex items-center text-sm text-cornflower-blue hover:underline transition-colors duration-200"
       >
+        <Github className="h-4 w-4 mr-2" /> {/* Added spacing after the icon */}
         View GitHub Profile →
       </a>
     </motion.div>
   );
-}
+}

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">
+        <div className="p-4 bg-cornflower-blue/20 rounded-full">
-          <Terminal className="h-6 w-6 text-cornflower-blue" />
+          <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/team.ts

@@ -9,6 +9,11 @@ export const teamMembers = [
     role: 'Co-Maintainer & Tools Developer',
     description: 'Specializes in integrating security tools and maintaining critical packages for enhanced system functionality.',
   },
+  {
+    username: 'XlebyllleK',
+    role: 'Key Developer',
+    description: 'Plays a pivotal role in core development, focusing on innovative solutions and system optimizations to enhance functionality.',
+  },
   {
     username: 'iconized',
     role: 'Co-Maintainer & Server Designer',

src/data/testimonials.ts

@@ -13,5 +13,10 @@ export const testimonials = [
     content: "साइबर सुरक्षा के क्षेत्र में शुरुआती और पेशेवर दोनों के लिए आदर्श। व्यापक दस्तावेज़ीकरण एक बेहतरीन संसाधन है।",
     author: "विक्रम अय्यर",
     role: "साइबर सुरक्षा सलाहकार"
+  },
+  {
+    content: "স্নিগ্ধা ওএস আমাদের সাইবার নিরাপত্তার কাজে বিপ্লব এনেছে। এর সহজ ইন্টারফেস এবং শক্তিশালী টুলগুলি অসাধারণ।",
+    author: "সুব্রত ঘোষ",
+    role: "সাইবার নিরাপত্তা বিশেষজ্ঞ"
   }
 ];

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">
+          <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
-            The most advanced penetration testing distribution, made for security professionals.
+            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>

vite.config.ts

@@ -3,39 +3,59 @@ import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import ViteSitemap from 'vite-plugin-sitemap';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [
+  const isProduction = mode === 'production';
-    react(),
+
-    ViteSitemap({
+  return {
-      hostname: 'https://www.snigdhaos.org',
+    plugins: [
-      outDir: './dist',
+      react(),
-      changefreq: 'daily',
+      ViteSitemap({
-      priority: 0.7,
+        hostname: process.env.VITE_SITE_URL || 'https://www.snigdhaos.org',
-      // lastmod: true,
+        outDir: './dist',
-    }),
+        changefreq: 'daily',
-  ],
+        priority: 0.7,
-  resolve: {
+        }),
-    alias: {
+    ],
-      '@': resolve(__dirname, './src'),
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, './src'),
+      },
     },
-  },
+    css: {
-  build: {
+      preprocessorOptions: {
-    rollupOptions: {
+        scss: {
-      output: {
+          additionalData: `@import "@/styles/global.scss";`, // Import global SCSS
-        entryFileNames: 'script.js',
-        assetFileNames: ({ name }) => {
-          if (name && name.endsWith('.css')) {
-            return 'style.css';
-          }
-          return 'assets/[name]-[hash][extname]';
         },
       },
     },
-  },
+    build: {
-  optimizeDeps: {
+      rollupOptions: {
-    exclude: ['lucide-react'],
+        output: {
-  },
+          entryFileNames: 'script.js',
-  server: {
+          chunkFileNames: '[name].js',
-    open: true, // Automatically open the browser when running the development server
+          assetFileNames: ({ name }) => {
-  },
+            if (name && name.endsWith('.css')) {
+              return 'style.css';
+            }
+            return 'assets/[name]-[hash][extname]';
+          },
+        },
+      },
+      terserOptions: {
+        compress: {
+          drop_console: isProduction, // Remove console logs in production
+          drop_debugger: isProduction, // Remove debugger in production
+        },
+      },
+    },
+    optimizeDeps: {
+      exclude: ['lucide-react'],
+    },
+    server: {
+      open: true,
+      port: 5173, // Default port
+      strictPort: false, // Allow using a different port if 5173 is taken
+    },
+    envDir: './env', // Define directory for environment variables
+  };
 });