feat(init): initial the project files

2025-09-05 21:06:37 +02:00 · 2024-12-03 16:11:52 +05:30
commit c380ae83dc
24 changed files with 5110 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.bolt
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "snigdha-os-website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from './components/layout/Navbar';
+import Footer from './components/layout/Footer';
+import Home from './pages/Home';
+import About from './pages/About';
+import Features from './pages/Features';
+import Download from './pages/Download';
+import Developers from './pages/Developers';
+
+function App() {
+  return (
+    <Router>
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <main className="flex-grow">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/features" element={<Features />} />
+            <Route path="/download" element={<Download />} />
+            <Route path="/developers" element={<Developers />} />
+          </Routes>
+        </main>
+        <Footer />
+      </div>
+    </Router>
+  );
+}
+
+export default App;
--- a/src/components/home/ImageSlider.tsx
+++ b/src/components/home/ImageSlider.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const slides = [
+  {
+    type: 'video',
+    url: "https://cdn.videvo.net/videvo_files/video/premium/video0036/small_watermarked/computer_code00_preview.mp4",
+    title: "Next-Gen Security",
+    description: "Experience advanced security features and protection"
+  },
+  {
+    type: 'image',
+    url: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&q=80&w=1920",
+    title: "Developer's Choice",
+    description: "Built for modern development workflows"
+  },
+  {
+    type: 'video',
+    url: "https://cdn.videvo.net/videvo_files/video/premium/video0036/small_watermarked/computer_code02_preview.mp4",
+    title: "Community Powered",
+    description: "Supported by a growing community of innovators"
+  }
+];
+
+export default function ImageSlider() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(true);
+
+  const prevSlide = () => {
+    const isFirstSlide = currentIndex === 0;
+    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const nextSlide = () => {
+    const isLastSlide = currentIndex === slides.length - 1;
+    const newIndex = isLastSlide ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+  };
+
+  useEffect(() => {
+    let timer;
+    if (isPlaying) {
+      timer = setInterval(() => {
+        nextSlide();
+      }, 8000); // Longer interval for videos
+    }
+    return () => clearInterval(timer);
+  }, [currentIndex, isPlaying]);
+
+  const renderSlideContent = () => {
+    const slide = slides[currentIndex];
+    if (slide.type === 'video') {
+      return (
+        <video
+          autoPlay
+          muted
+          loop
+          className="absolute inset-0 w-full h-full object-cover"
+          onPlay={() => setIsPlaying(false)}
+          onEnded={() => setIsPlaying(true)}
+        >
+          <source src={slide.url} type="video/mp4" />
+        </video>
+      );
+    }
+    return (
+      <div
+        style={{
+          backgroundImage: `url(${slide.url})`,
+        }}
+        className="w-full h-full bg-center bg-cover"
+      />
+    );
+  };
+
+  return (
+    <div className="relative h-[600px] w-full group">
+      <div className="w-full h-full bg-black relative overflow-hidden">
+        {renderSlideContent()}
+        <div className="absolute inset-0 bg-black/50 flex items-center justify-center flex-col text-white text-center px-4">
+          <h2 className="text-4xl md:text-5xl font-bold mb-4">{slides[currentIndex].title}</h2>
+          <p className="text-xl md:text-2xl max-w-2xl">{slides[currentIndex].description}</p>
+        </div>
+      </div>
+
+      {/* Navigation Arrows */}
+      <div className="hidden group-hover:block absolute top-[50%] -translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
+        <ChevronLeft onClick={prevSlide} className="h-6 w-6" />
+      </div>
+      <div className="hidden group-hover:block absolute top-[50%] -translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
+        <ChevronRight onClick={nextSlide} className="h-6 w-6" />
+      </div>
+
+      {/* Dots */}
+      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
+        {slides.map((_, slideIndex) => (
+          <div
+            key={slideIndex}
+            onClick={() => setCurrentIndex(slideIndex)}
+            className={`w-3 h-3 rounded-full cursor-pointer transition-all ${
+              currentIndex === slideIndex ? 'bg-white scale-125' : 'bg-white/50'
+            }`}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/home/PenTestTools.tsx
+++ b/src/components/home/PenTestTools.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { 
+  Wifi, 
+  Network, 
+  Key, 
+  Bug, 
+  Fingerprint, 
+  Radio, 
+  Database, 
+  Shield,
+  Smartphone,
+  Webhook
+} from 'lucide-react';
+
+const tools = [
+  {
+    icon: <Wifi className="h-6 w-6" />,
+    name: "Aircrack-ng",
+    category: "Wireless",
+    description: "Complete suite for wireless network security assessment"
+  },
+  {
+    icon: <Network className="h-6 w-6" />,
+    name: "Nmap",
+    category: "Network Analysis",
+    description: "Powerful network discovery and security scanning tool"
+  },
+  {
+    icon: <Key className="h-6 w-6" />,
+    name: "John the Ripper",
+    category: "Password Attacks",
+    description: "Advanced password cracker with multiple attack modes"
+  },
+  {
+    icon: <Bug className="h-6 w-6" />,
+    name: "Metasploit",
+    category: "Exploitation",
+    description: "Framework for developing and executing exploit code"
+  },
+  {
+    icon: <Fingerprint className="h-6 w-6" />,
+    name: "Wireshark",
+    category: "Packet Analysis",
+    description: "Network protocol analyzer for detailed traffic inspection"
+  },
+  {
+    icon: <Radio className="h-6 w-6" />,
+    name: "Kismet",
+    category: "Wireless",
+    description: "Wireless network and device detector, sniffer, and IDS"
+  },
+  {
+    icon: <Database className="h-6 w-6" />,
+    name: "SQLmap",
+    category: "Web",
+    description: "Automated SQL injection and database takeover tool"
+  },
+  {
+    icon: <Shield className="h-6 w-6" />,
+    name: "Burp Suite",
+    category: "Web",
+    description: "Integrated platform for web application security testing"
+  },
+  {
+    icon: <Smartphone className="h-6 w-6" />,
+    name: "Frida",
+    category: "Mobile",
+    description: "Dynamic instrumentation toolkit for mobile app testing"
+  },
+  {
+    icon: <Webhook className="h-6 w-6" />,
+    name: "Hydra",
+    category: "Password Attacks",
+    description: "Fast network authentication cracker"
+  }
+];
+
+export default function PenTestTools() {
+  return (
+    <section className="py-20 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl font-bold text-gray-900">Featured Security Tools</h2>
+          <p className="mt-4 text-xl text-gray-600">Comprehensive suite of pre-installed penetration testing tools</p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {tools.map((tool, index) => (
+            <div key={index} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+              <div className="flex items-start space-x-4">
+                <div className="bg-[#754ffe] p-3 rounded-lg text-white">
+                  {tool.icon}
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold mb-1">{tool.name}</h3>
+                  <span className="text-sm text-[#754ffe] font-medium">{tool.category}</span>
+                  <p className="mt-2 text-gray-600">{tool.description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Github, Twitter, Youtube } from 'lucide-react';
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div>
+            <h3 className="text-xl font-bold mb-4">Snigdha OS</h3>
+            <p className="text-gray-400">The Next Generation Security-Focused Operating System</p>
+          </div>
+          <div>
+            <h4 className="text-lg font-semibold mb-4">Quick Links</h4>
+            <ul className="space-y-2">
+              <li><a href="/download" className="text-gray-400 hover:text-[#754ffe]">Download</a></li>
+              <li><a href="/docs" className="text-gray-400 hover:text-[#754ffe]">Documentation</a></li>
+              <li><a href="/tools" className="text-gray-400 hover:text-[#754ffe]">Tools</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-lg font-semibold mb-4">Community</h4>
+            <ul className="space-y-2">
+              <li><a href="/forums" className="text-gray-400 hover:text-[#754ffe]">Forums</a></li>
+              <li><a href="/blog" className="text-gray-400 hover:text-[#754ffe]">Blog</a></li>
+              <li><a href="/support" className="text-gray-400 hover:text-[#754ffe]">Support</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-lg font-semibold mb-4">Connect</h4>
+            <div className="flex space-x-4">
+              <a href="https://github.com/snigdha-os" className="text-gray-400 hover:text-[#754ffe]">
+                <Github className="h-6 w-6" />
+              </a>
+              <a href="https://twitter.com/snigdhaos" className="text-gray-400 hover:text-[#754ffe]">
+                <Twitter className="h-6 w-6" />
+              </a>
+              <a href="https://youtube.com/snigdhaos" className="text-gray-400 hover:text-[#754ffe]">
+                <Youtube className="h-6 w-6" />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
+          <p>&copy; {new Date().getFullYear()} Snigdha OS. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Menu, X, Terminal } from 'lucide-react';
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const navLinks = [
+    { path: '/', label: 'Home' },
+    { path: '/about', label: 'About' },
+    { path: '/features', label: 'Features' },
+    { path: '/download', label: 'Download' },
+    { path: '/developers', label: 'Developers' }
+  ];
+
+  return (
+    <nav className="bg-white shadow-md">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center">
+            <NavLink to="/" className="flex items-center">
+              <Terminal className="h-8 w-8 text-[#754ffe]" />
+              <span className="ml-2 text-xl font-bold text-gray-900">Snigdha OS</span>
+            </NavLink>
+          </div>
+          
+          <div className="hidden md:flex items-center space-x-8">
+            {navLinks.map(({ path, label }) => (
+              <NavLink
+                key={path}
+                to={path}
+                className={({isActive}) => 
+                  `${isActive ? 'text-[#754ffe]' : 'text-gray-700'} hover:text-[#754ffe] transition-colors`
+                }
+              >
+                {label}
+              </NavLink>
+            ))}
+          </div>
+
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="text-gray-700 hover:text-[#754ffe]"
+            >
+              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isOpen && (
+        <div className="md:hidden">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+            {navLinks.map(({ path, label }) => (
+              <NavLink
+                key={path}
+                to={path}
+                className="block px-3 py-2 text-gray-700 hover:text-[#754ffe]"
+                onClick={() => setIsOpen(false)}
+              >
+                {label}
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Shield, Users, Globe } from 'lucide-react';
+
+export default function About() {
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">About Kali Linux</h1>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Kali Linux is an open-source, Debian-based Linux distribution geared towards various information security tasks.
+          </p>
+        </div>
+
+        {/* Mission Section */}
+        <div className="bg-white rounded-lg shadow-lg p-8 mb-16">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">Our Mission</h2>
+          <p className="text-gray-600 leading-relaxed">
+            Kali Linux aims to provide security professionals and IT administrators with the most comprehensive and trusted suite of security tools. Our mission is to enable cybersecurity professionals and enthusiasts to perform thorough security auditing and penetration testing with enterprise-grade tools.
+          </p>
+        </div>
+
+        {/* Key Points */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <Shield className="h-12 w-12 text-[#754ffe] mb-4" />
+            <h3 className="text-xl font-semibold mb-2">Security Focus</h3>
+            <p className="text-gray-600">
+              Built specifically for penetration testing and security auditing, with hundreds of tools pre-installed.
+            </p>
+          </div>
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <Users className="h-12 w-12 text-[#754ffe] mb-4" />
+            <h3 className="text-xl font-semibold mb-2">Community Driven</h3>
+            <p className="text-gray-600">
+              Supported by a vast community of security professionals and enthusiasts worldwide.
+            </p>
+          </div>
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <Globe className="h-12 w-12 text-[#754ffe] mb-4" />
+            <h3 className="text-xl font-semibold mb-2">Global Impact</h3>
+            <p className="text-gray-600">
+              Used by cybersecurity professionals and organizations around the world.
+            </p>
+          </div>
+        </div>
+
+        {/* History Section */}
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">Our History</h2>
+          <div className="space-y-4 text-gray-600">
+            <p>
+              Kali Linux was released in 2013 as a complete, top-to-bottom rebuild of BackTrack Linux. It adheres completely to Debian development standards and features a vast array of penetration testing tools from various security and forensics domains.
+            </p>
+            <p>
+              The distribution is developed and maintained by Offensive Security, a leading provider of information security training and penetration testing services.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/Developers.tsx
+++ b/src/pages/Developers.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Code, GitBranch, Users, MessageSquare } from 'lucide-react';
+
+export default function Developers() {
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">Developers</h1>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Join the Kali Linux development community and contribute to the most advanced penetration testing distribution.
+          </p>
+        </div>
+
+        {/* Get Involved Section */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+          <div className="bg-white p-8 rounded-lg shadow-lg">
+            <Code className="h-12 w-12 text-[#754ffe] mb-4" />
+            <h2 className="text-2xl font-bold mb-4">Get Involved</h2>
+            <p className="text-gray-600 mb-6">
+              There are many ways to contribute to Kali Linux. Whether you're a developer, security researcher, or documentation writer, your contributions are valuable.
+            </p>
+            <ul className="space-y-3 text-gray-600">
+              <li className="flex items-center">
+                <GitBranch className="h-5 w-5 mr-2 text-[#754ffe]" />
+                Submit pull requests
+              </li>
+              <li className="flex items-center">
+                <MessageSquare className="h-5 w-5 mr-2 text-[#754ffe]" />
+                Report bugs
+              </li>
+              <li className="flex items-center">
+                <Users className="h-5 w-5 mr-2 text-[#754ffe]" />
+                Join discussions
+              </li>
+            </ul>
+          </div>
+
+          <div className="bg-white p-8 rounded-lg shadow-lg">
+            <h2 className="text-2xl font-bold mb-4">Development Resources</h2>
+            <div className="space-y-4">
+              <a href="https://github.com/kali-linux" className="block p-4 border border-gray-200 rounded-lg hover:border-[#754ffe] transition-colors">
+                <h3 className="font-semibold mb-2">GitHub Repository</h3>
+                <p className="text-gray-600">Access our source code and contribute to development</p>
+              </a>
+              <a href="/docs/development" className="block p-4 border border-gray-200 rounded-lg hover:border-[#754ffe] transition-colors">
+                <h3 className="font-semibold mb-2">Development Documentation</h3>
+                <p className="text-gray-600">Learn about our development process and guidelines</p>
+              </a>
+              <a href="/community" className="block p-4 border border-gray-200 rounded-lg hover:border-[#754ffe] transition-colors">
+                <h3 className="font-semibold mb-2">Community Forums</h3>
+                <p className="text-gray-600">Discuss development topics with other contributors</p>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Current Projects */}
+        <div className="bg-white rounded-lg shadow-lg p-8 mb-16">
+          <h2 className="text-2xl font-bold mb-6">Current Projects</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="p-4 border border-gray-200 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">Tool Development</h3>
+              <p className="text-gray-600">Help improve existing tools or develop new security tools for Kali Linux.</p>
+            </div>
+            <div className="p-4 border border-gray-200 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">Documentation</h3>
+              <p className="text-gray-600">Contribute to our documentation and help make Kali more accessible.</p>
+            </div>
+            <div className="p-4 border border-gray-200 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">Testing</h3>
+              <p className="text-gray-600">Help test new features and tools before they're released.</p>
+            </div>
+            <div className="p-4 border border-gray-200 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">Localization</h3>
+              <p className="text-gray-600">Help translate Kali Linux tools and documentation.</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Contact Section */}
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          <h2 className="text-2xl font-bold mb-6">Get in Touch</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <a href="/irc" className="p-4 text-center border border-gray-200 rounded-lg hover:border-[#754ffe] transition-colors">
+              <h3 className="font-semibold mb-2">IRC Channel</h3>
+              <p className="text-gray-600">Chat with developers in real-time</p>
+            </a>
+            <a href="/mailing-list" className="p-4 text-center border border-gray-200 rounded-lg hover:border-[#754ffe] transition-colors">
+              <h3 className="font-semibold mb-2">Mailing List</h3>
+              <p className="text-gray-600">Subscribe to development discussions</p>
+            </a>
+            <a href="/bug-tracker" className="p-4 text-center border border-gray-200 rounded-lg hover:border-[#754ffe] transition-colors">
+              <h3 className="font-semibold mb-2">Bug Tracker</h3>
+              <p className="text-gray-600">Report issues and track bugs</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/Download.tsx
+++ b/src/pages/Download.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Download, Laptop, HardDrive, Cloud } from 'lucide-react';
+
+export default function DownloadPage() {
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">Download Kali Linux</h1>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Choose the installation option that best suits your needs
+          </p>
+        </div>
+
+        {/* Download Options */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+          <div className="bg-white p-6 rounded-lg shadow-lg text-center">
+            <Laptop className="h-12 w-12 text-[#754ffe] mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2">Installer Images</h3>
+            <p className="text-gray-600 mb-4">
+              Full installation images for various architectures
+            </p>
+            <button className="bg-[#754ffe] text-white px-6 py-2 rounded-lg font-semibold hover:bg-[#6344d5] transition-colors inline-flex items-center">
+              <Download className="h-5 w-5 mr-2" />
+              Download ISO
+            </button>
+          </div>
+
+          <div className="bg-white p-6 rounded-lg shadow-lg text-center">
+            <HardDrive className="h-12 w-12 text-[#754ffe] mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2">Virtual Machines</h3>
+            <p className="text-gray-600 mb-4">
+              Pre-configured VMs for VMware and VirtualBox
+            </p>
+            <button className="bg-[#754ffe] text-white px-6 py-2 rounded-lg font-semibold hover:bg-[#6344d5] transition-colors inline-flex items-center">
+              <Download className="h-5 w-5 mr-2" />
+              Download VM
+            </button>
+          </div>
+
+          <div className="bg-white p-6 rounded-lg shadow-lg text-center">
+            <Cloud className="h-12 w-12 text-[#754ffe] mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2">ARM Images</h3>
+            <p className="text-gray-600 mb-4">
+              Images for Raspberry Pi and other ARM devices
+            </p>
+            <button className="bg-[#754ffe] text-white px-6 py-2 rounded-lg font-semibold hover:bg-[#6344d5] transition-colors inline-flex items-center">
+              <Download className="h-5 w-5 mr-2" />
+              Download ARM
+            </button>
+          </div>
+        </div>
+
+        {/* System Requirements */}
+        <div className="bg-white rounded-lg shadow-lg p-8 mb-16">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">System Requirements</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div>
+              <h3 className="text-lg font-semibold mb-3">Minimum Requirements</h3>
+              <ul className="space-y-2 text-gray-600">
+                <li>• 2 GB RAM</li>
+                <li>• 20 GB disk space</li>
+                <li>• x64 processor</li>
+                <li>• USB boot support</li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold mb-3">Recommended</h3>
+              <ul className="space-y-2 text-gray-600">
+                <li>• 4 GB RAM</li>
+                <li>• 50 GB disk space</li>
+                <li>• Multi-core processor</li>
+                <li>• Graphics card</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Installation Guide */}
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">Installation Guide</h2>
+          <div className="space-y-4">
+            <p className="text-gray-600">
+              Follow these steps to install Kali Linux:
+            </p>
+            <ol className="list-decimal list-inside space-y-2 text-gray-600">
+              <li>Download the appropriate image for your system</li>
+              <li>Create a bootable USB drive or DVD</li>
+              <li>Boot from the installation media</li>
+              <li>Follow the installation wizard</li>
+            </ol>
+            <p className="text-gray-600 mt-4">
+              For detailed installation instructions, please refer to our documentation.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/Features.tsx
+++ b/src/pages/Features.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Terminal, Lock, Cpu, Cloud, Database, Shield } from 'lucide-react';
+
+export default function Features() {
+  const features = [
+    {
+      icon: <Terminal className="h-8 w-8" />,
+      title: "600+ Security Tools",
+      description: "Pre-installed penetration testing and security tools covering various security domains."
+    },
+    {
+      icon: <Lock className="h-8 w-8" />,
+      title: "Multi-language Support",
+      description: "Tools and documentation available in multiple languages for global accessibility."
+    },
+    {
+      icon: <Cpu className="h-8 w-8" />,
+      title: "Wide Hardware Support",
+      description: "Supports ARM architecture (RPi), wireless interfaces, and GPU cracking."
+    },
+    {
+      icon: <Cloud className="h-8 w-8" />,
+      title: "Cloud Compatible",
+      description: "Can be run on various cloud platforms and virtual environments."
+    },
+    {
+      icon: <Database className="h-8 w-8" />,
+      title: "Customizable",
+      description: "Fully customizable environment with various desktop environments available."
+    },
+    {
+      icon: <Shield className="h-8 w-8" />,
+      title: "Enterprise Ready",
+      description: "Suitable for both individual and enterprise-level security testing."
+    }
+  ];
+
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">Features</h1>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Discover the powerful features that make Kali Linux the premier platform for security testing.
+          </p>
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+              <div className="text-[#754ffe] mb-4">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+              <p className="text-gray-600">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Tools Categories */}
+        <div className="mt-20">
+          <h2 className="text-3xl font-bold text-center mb-12">Tool Categories</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <h3 className="text-xl font-semibold mb-4 text-[#754ffe]">Information Gathering</h3>
+              <ul className="space-y-2 text-gray-600">
+                <li>• Network scanning and enumeration</li>
+                <li>• OSINT tools</li>
+                <li>• DNS analysis</li>
+                <li>• Web reconnaissance</li>
+              </ul>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <h3 className="text-xl font-semibold mb-4 text-[#754ffe]">Vulnerability Analysis</h3>
+              <ul className="space-y-2 text-gray-600">
+                <li>• Automated scanning tools</li>
+                <li>• Database assessment</li>
+                <li>• Cisco tools</li>
+                <li>• Fuzzing tools</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { ArrowRight, Shield, Settings, Activity } from 'lucide-react';
+import ImageSlider from '../components/home/ImageSlider';
+import PenTestTools from '../components/home/PenTestTools';
+
+export default function Home() {
+  return (
+    <div>
+      {/* Hero Section with Slider */}
+      <ImageSlider />
+
+      {/* Penetration Testing Tools Section */}
+      <PenTestTools />
+
+      {/* Features Section */}
+      <section className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-center mb-12">Why Choose Snigdha OS?</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center">
+              <Shield className="mx-auto mb-4 h-20 w-20 text-[#754ffe]" />
+              <h3 className="text-xl font-semibold mb-2">Enhanced Security</h3>
+              <p className="text-gray-600">Built with advanced encryption and secure protocols to safeguard your data.</p>
+            </div>
+            <div className="text-center">
+              <Settings className="mx-auto mb-4 h-20 w-20 text-[#754ffe]" />
+              <h3 className="text-xl font-semibold mb-2">Fully Customizable</h3>
+              <p className="text-gray-600">Tailor the OS to meet your specific needs and workflows.</p>
+            </div>
+            <div className="text-center">
+              <Activity className="mx-auto mb-4 h-20 w-20 text-[#754ffe]" />
+              <h3 className="text-xl font-semibold mb-2">Lightweight Design</h3>
+              <p className="text-gray-600">Optimized for performance on both modern and older hardware.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl font-bold mb-12">What Our Users Say</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div className="bg-white shadow-lg rounded-lg p-6">
+              <p className="text-gray-600 italic mb-4">
+                "Snigdha OS has revolutionized how I approach cybersecurity tasks. The built-in tools are fantastic!"
+              </p>
+              <h4 className="font-semibold text-lg">- Alex J.</h4>
+            </div>
+            <div className="bg-white shadow-lg rounded-lg p-6">
+              <p className="text-gray-600 italic mb-4">
+                "A game-changer for developers and penetration testers. Highly recommend!"
+              </p>
+              <h4 className="font-semibold text-lg">- Priya K.</h4>
+            </div>
+            <div className="bg-white shadow-lg rounded-lg p-6">
+              <p className="text-gray-600 italic mb-4">
+                "Runs seamlessly on my older laptop. The lightweight design is truly impressive."
+              </p>
+              <h4 className="font-semibold text-lg">- Mark L.</h4>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ Section */}
+      <section className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2>
+          <div className="space-y-8">
+            <div>
+              <h3 className="text-xl font-semibold mb-2">Is Snigdha OS free to use?</h3>
+              <p className="text-gray-600">Yes, Snigdha OS is completely free and open-source.</p>
+            </div>
+            <div>
+              <h3 className="text-xl font-semibold mb-2">What hardware is supported?</h3>
+              <p className="text-gray-600">Snigdha OS is optimized to run on both modern and older hardware configurations.</p>
+            </div>
+            <div>
+              <h3 className="text-xl font-semibold mb-2">Can I customize Snigdha OS?</h3>
+              <p className="text-gray-600">Absolutely! Snigdha OS is highly customizable to meet your specific needs.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-gray-100 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl font-bold mb-4">Ready to Experience Snigdha OS?</h2>
+          <p className="text-xl text-gray-600 mb-8">Join the next generation of secure computing</p>
+          <a
+            href="/download"
+            className="bg-[#754ffe] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[#6344d5] transition-colors inline-flex items-center"
+          >
+            Download Snigdha OS
+            <ArrowRight className="ml-2 h-5 w-5" />
+          </a>
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});