-
- {['all', 'notes', 'pyq', 'syllabus'].map((type) => (
-
setSelectedType(type)}
- className="px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition-all"
- style={{
- fontFamily: 'Poppins, sans-serif',
- backgroundColor: selectedType === type ? '#F97316' : '#F8FAFC',
- color: selectedType === type ? 'white' : '#475569',
- border: `1px solid ${selectedType === type ? '#F97316' : '#E5E7EB'}`,
- }}
- >
- {type === 'all' ? 'All Types' : type.toUpperCase()}
-
- ))}
+
+ {/* Header Badge */}
+
+ Official RIT Learning Management System
- {/* Semester Filter */}
-
- {SEMESTERS.slice(0, 3).map((sem) => (
-
{ setSelectedSem(sem); setSelectedSubject('All Subjects'); }}
- className="px-3 py-1.5 rounded-lg text-xs font-medium transition-all cursor-pointer"
- style={{
- fontFamily: 'Poppins, sans-serif',
- backgroundColor: selectedSem === sem ? '#1E293B' : '#F8FAFC',
- color: selectedSem === sem ? 'white' : '#475569',
- border: `1px solid ${selectedSem === sem ? '#1E293B' : '#E5E7EB'}`,
- }}
- >
- {sem}
-
- ))}
+ {/* Main Heading */}
+
+ Access Academic Notes & Study Materials on{' '}
+
+ Moodle
+
+
+
+
+ All official semester notes, previous year question papers (PYQs), syllabus data, and lab manuals are hosted directly on the official Rajalakshmi Institute of Technology Moodle server.
+
+
+ {/* Primary Launch Action Buttons */}
+
+
+
+
+
{
+ navigator.clipboard.writeText(MOODLE_URL);
+ alert('Moodle URL copied to clipboard!');
+ }}
+ className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-4 rounded-2xl border border-[#E5E7EB] hover:border-[#F97316] bg-[#F8FAFC] hover:bg-white text-sm font-semibold text-[#475569] hover:text-[#F97316] transition-all cursor-pointer"
+ style={{ fontFamily: 'Poppins, sans-serif' }}
+ >
+
- {/* Subject Dropdown */}
- {selectedSem !== 'All' && (
-
-
Subject:
-
setSelectedSubject(e.target.value)}
- className="px-3 py-1.5 rounded-lg text-xs font-medium bg-[#F8FAFC] border border-[#E5E7EB] text-[#475569] focus:outline-none focus:border-[#F97316] transition-all cursor-pointer"
- style={{ fontFamily: 'Poppins, sans-serif' }}
- >
- All Subjects
- {(SUBJECTS_BY_SEM[parseInt(selectedSem)] || []).map((sub) => (
-
- {sub}
-
- ))}
-
+ {/* Feature Highlights Grid */}
+
+
+
+
+
+ 100% Direct & Secure
+
+
+ Authenticates directly on official college server 182.74.17.142.
+
- )}
+
+
+
+
+
+ Official Semester Notes
+
+
+ Complete 1st to 8th Semester course notes, PYQs, and assignments.
+
+
+
+
+
+
+
+ Student Login
+
+
+ Log in using your RIT Register Number and official Moodle password.
+
+
+
+
+ {/* Technical Security Note */}
+
+ ℹ️ Security Note: To protect student session privacy and prevent clickjacking attacks, RIT's Moodle server enforces opening the portal directly in a secure browser tab rather than inside third-party frames (X-Frame-Options: SAMEORIGIN).
+
-
- {/* Results */}
-
- {filtered.map((note) => {
- const typeConfig = TYPE_COLORS[note.type] || { bg: '#F1F5F9', text: '#475569', icon: BookOpen };
- const TypeIcon = typeConfig.icon;
- return (
-
-
-
- {/* Visual PDF Preview Icon */}
-
-
- {/* Text Details */}
-
-
-
-
-
-
- {note.type}
-
-
-
- {note.title}
-
-
- {note.subject} • Sem {note.semester}
-
-
-
-
-
- {note.downloads} downloads · {note.fileSize}
- PDF
-
-
{note.uploadedAt ? `Updated ${note.uploadedAt}` : 'Recently'}
-
handleDownload(note.id, note.downloadUrl)}
- className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-sm font-semibold text-white cursor-pointer"
- style={{
- fontFamily: 'Poppins, sans-serif',
- background: 'linear-gradient(135deg, #F97316, #FB923C)',
- }}
- >
-
-
-
- );
- })}
-
-
- {/* Toolkit Section */}
-
-
-
- {TOOLKIT_ITEMS.map((item) => {
- const iconConfig = TOOLKIT_ICONS[item.title] || { icon: Code, bg: '#FFF7ED', color: '#F97316' };
- const IconComponent = iconConfig.icon;
- return (
-
- {
- if (item.title === 'CS tools') {
- setSelectedToolkit('cs');
- } else if (item.title === 'Business tools') {
- setSelectedToolkit('business');
- } else if (item.title === 'Electrical and Electronic tools') {
- setSelectedToolkit('electrical');
- } else if (item.title === 'Cybersecurity tools') {
- setSelectedToolkit('cybersecurity');
- } else if (item.title === 'AI tools') {
- setSelectedToolkit('ai');
- } else if (item.title === 'Biotech tools') {
- setSelectedToolkit('biotech');
- } else if (item.url && item.url !== '#') {
- window.open(item.url, '_blank');
- }
- }}
- whileHover={{ y: -4, boxShadow: '0 12px 30px -10px rgba(249,115,22,0.15)' }}
- className="flex items-start gap-5 p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group w-full transition-all shadow-xs hover:shadow-md"
- >
-
-
-
-
- {item.title}
-
-
- {item.description}
-
-
-
- );
- })}
-
)}
diff --git a/src/pages/Toolkit/Toolkit.tsx b/src/pages/Toolkit/Toolkit.tsx
new file mode 100644
index 0000000..e7a03d3
--- /dev/null
+++ b/src/pages/Toolkit/Toolkit.tsx
@@ -0,0 +1,1020 @@
+import { useState, useRef, useEffect } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import {
+ Search, Download, BookOpen, ChevronRight, ArrowLeft, ExternalLink, Code, Globe,
+ GitBranch, Cloud, Palette, Shield, DollarSign, BarChart3, Users, Megaphone,
+ TrendingUp, UserCheck, ClipboardList, ShoppingCart, Cpu, Activity, LayoutGrid,
+ Layers, Zap, Settings, Gauge, Radio, Wifi, Bot, Sun, Wrench, Binary, BatteryCharging,
+ CircuitBoard, ShieldCheck, BrainCircuit, FlaskConical, Lock, Terminal, Dna, Microscope,
+ Sparkles, Smartphone, Monitor, Server, CheckCircle2, Database, Briefcase, AlertTriangle, RefreshCw
+} from 'lucide-react';
+import SectionTitle from '@/components/SectionTitle/SectionTitle';
+import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
+import { TOOLKIT_ITEMS } from '@/constants';
+
+const TOOLKIT_ICONS: Record
; bg: string; color: string }> = {
+ 'CS tools': { icon: Code, bg: '#EFF6FF', color: '#3B82F6' },
+ 'Business tools': { icon: Briefcase, bg: '#ECFDF5', color: '#10B981' },
+ 'Cybersecurity tools': { icon: ShieldCheck, bg: '#F5F3FF', color: '#8B5CF6' },
+ 'AI tools': { icon: BrainCircuit, bg: '#FDF2F8', color: '#EC4899' },
+ 'Electrical and Electronic tools': { icon: Zap, bg: '#FEF3C7', color: '#D97706' },
+ 'Biotech tools': { icon: Dna, bg: '#ECFEFF', color: '#06B6D4' },
+};
+
+const PROGRAMMING_LANGUAGES_GUIDES = [
+ {
+ name: 'Python',
+ tagline: 'Simple, Readable & Beginner-Friendly',
+ color: '#3776AB',
+ bg: '#EFF6FF',
+ whatItIs: 'Python is known for its clean, English-like syntax. It lets you write code quickly without worrying about complex computer memory setups, making it the top choice for beginners.',
+ keyConcepts: [
+ 'Writing your first line of code using print("Hello World!")',
+ 'Storing numbers, text, and lists in smart variables',
+ 'Making decisions in code using simple if and else conditions',
+ 'Automating repetitive tasks effortlessly using loops',
+ 'Reusing code blocks with custom functions (def)',
+ 'Using pre-built libraries to build web apps, AI bots, or scrape web data'
+ ],
+ useCases: ['Web Development (Django, FastAPI)', 'Data Science & Analytics', 'Artificial Intelligence & Machine Learning', 'Automation & Web Scraping'],
+ links: [
+ { label: 'Official Python Documentation', url: 'https://docs.python.org/3/' },
+ { label: 'Python for Beginners Guide', url: 'https://www.python.org/about/gettingstarted/' },
+ { label: 'FreeCodeCamp Python Course', url: 'https://www.freecodecamp.org/news/learn-python-free-python-courses-for-beginners/' }
+ ]
+ },
+ {
+ name: 'Java',
+ tagline: 'Build Once, Run Anywhere',
+ color: '#007396',
+ bg: '#E0F2FE',
+ whatItIs: 'Java powers enterprise apps, banking systems, and Android smartphones. Code written in Java can run on any operating system without modification!',
+ keyConcepts: [
+ 'Understanding Classes & Objects — modeling real-world items in code',
+ 'Learning how the main() method serves as the starting trigger',
+ 'Organizing data cleanly using static types like int, String, and boolean',
+ 'Reusing existing code seamlessly with Inheritance & Interfaces',
+ 'Handling errors gracefully so applications never crash unexpectedly',
+ 'Building robust backend services with Spring Boot'
+ ],
+ useCases: ['Enterprise Backend Systems', 'Android Application Development', 'Financial & Banking Systems', 'Large-Scale Web Services'],
+ links: [
+ { label: 'Official Oracle Java Docs', url: 'https://docs.oracle.com/en/java/' },
+ { label: 'W3Schools Java Tutorial', url: 'https://www.w3schools.com/java/' },
+ { label: 'Spring Boot Getting Started', url: 'https://spring.io/guides' }
+ ]
+ },
+ {
+ name: 'C++',
+ tagline: 'Blazing Speed & Hardware Control',
+ color: '#00599C',
+ bg: '#EFF6FF',
+ whatItIs: 'C++ provides ultimate control over memory and hardware. It is the core language powering high-end video games, operating systems, and flight controllers.',
+ keyConcepts: [
+ 'Compiling human-readable code into ultra-fast machine instructions',
+ 'Exploring Pointers (*) & Memory Addresses (&) for direct hardware control',
+ 'Using the Standard Template Library (STL) for instant stacks, queues, and vectors',
+ 'Structuring programs cleanly with Classes, Structs, and Objects',
+ 'Solving complex algorithmic puzzles in competitive programming',
+ 'Building 3D game engines like Unreal Engine'
+ ],
+ useCases: ['Game Engines (Unreal Engine)', 'Operating Systems & Browsers', 'Competitive Programming & DSA', 'Embedded Systems & Robotics'],
+ links: [
+ { label: 'cppreference.com Reference', url: 'https://en.cppreference.com/' },
+ { label: 'LearnCpp Free Tutorials', url: 'https://www.learncpp.com/' },
+ { label: 'GeeksforGeeks C++ Programming', url: 'https://www.geeksforgeeks.org/c-plus-plus/' }
+ ]
+ },
+ {
+ name: 'JavaScript',
+ tagline: 'The Heartbeat of the Web',
+ color: '#D97706',
+ bg: '#FEFCE8',
+ whatItIs: 'JavaScript brings websites to life! Every button click, popup animation, dynamic page update, and live chat on the web is powered by JavaScript.',
+ keyConcepts: [
+ 'Making web pages interactive by responding to user clicks and keypresses',
+ 'Changing text, colors, and layouts dynamically on the screen (DOM)',
+ 'Fetching live data from servers without refreshing the browser (fetch API)',
+ 'Writing clean code using modern Arrow Functions (() => {})',
+ 'Handling background actions smoothly using async / await',
+ 'Building backend web servers using Node.js'
+ ],
+ useCases: ['Interactive Web Interfaces (React, Vue)', 'Backend Web Servers (Node.js)', 'Full-Stack Web Applications', 'Mobile Apps (React Native)'],
+ links: [
+ { label: 'MDN JavaScript Documentation', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript' },
+ { label: 'JavaScript.info Modern Tutorial', url: 'https://javascript.info/' },
+ { label: 'W3Schools JavaScript Guide', url: 'https://www.w3schools.com/js/' }
+ ]
+ },
+ {
+ name: 'TypeScript',
+ tagline: 'JavaScript with Smart Safety Nets',
+ color: '#3178C6',
+ bg: '#EFF6FF',
+ whatItIs: 'TypeScript is JavaScript with built-in type checking! It acts like an intelligent spell-checker for code, preventing bugs and typos before your app even launches.',
+ keyConcepts: [
+ 'Adding clear types (string, number) to catch bugs as you type',
+ 'Creating Interfaces to define exact data structures for your app',
+ 'Enjoying supercharged code suggestions & autocomplete in VS Code',
+ 'Building scalable React and Next.js web applications',
+ 'Catching errors during development instead of in production'
+ ],
+ useCases: ['Enterprise Web Applications', 'Modern React & Next.js Apps', 'Scalable Microservices', 'Large-Scale Team Projects'],
+ links: [
+ { label: 'Official TypeScript Handbook', url: 'https://www.typescriptlang.org/docs/handbook/intro.html' },
+ { label: 'TypeScript in 5 Minutes', url: 'https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html' }
+ ]
+ },
+ {
+ name: 'Go (Golang)',
+ tagline: 'Built by Google for Cloud Speed',
+ color: '#00ADD8',
+ bg: '#ECFEFF',
+ whatItIs: 'Created at Google for simplicity and lightning speed. Go is famous for powering modern cloud infrastructure like Docker and Kubernetes.',
+ keyConcepts: [
+ 'Writing simple, ultra-clean code without unnecessary syntax clutter',
+ 'Running thousands of background tasks at once using Goroutines',
+ 'Passing data safely between parallel tasks using Channels',
+ 'Building super-fast Web APIs in just a few lines of code',
+ 'Compiling your entire project into a single fast binary executable'
+ ],
+ useCases: ['Cloud Platforms (Docker, Kubernetes)', 'High-Speed Microservices', 'DevOps Tools', 'Network Infrastructure'],
+ links: [
+ { label: 'A Tour of Go (Interactive)', url: 'https://go.dev/tour/' },
+ { label: 'Official Go Documentation', url: 'https://go.dev/doc/' }
+ ]
+ },
+ {
+ name: 'Rust',
+ tagline: 'Maximum Speed Without System Crashes',
+ color: '#CE412B',
+ bg: '#FFF7ED',
+ whatItIs: 'Rust gives you the speed of C++ with memory safety. It guarantees that software will not crash due to memory leaks or unexpected buffer glitches.',
+ keyConcepts: [
+ 'Understanding Ownership — how Rust automatically manages memory',
+ 'Sharing data safely across code using Borrowing (&)',
+ 'Handling all possible conditions cleanly with pattern matching (match)',
+ 'Managing packages, builds, and tests using the Cargo tool',
+ 'Building high-security web servers, crypto engines, and WebAssembly apps'
+ ],
+ useCases: ['Systems & Kernel Development', 'WebAssembly (Wasm) Applications', 'High-Performance Networking', 'Blockchain & Security Engines'],
+ links: [
+ { label: 'The Rust Programming Language Book', url: 'https://doc.rust-lang.org/book/' },
+ { label: 'Rust by Example', url: 'https://doc.rust-lang.org/rust-by-example/' }
+ ]
+ },
+ {
+ name: 'C# (.NET)',
+ tagline: 'Modern, Versatile & Game-Ready',
+ color: '#239120',
+ bg: '#ECFDF5',
+ whatItIs: 'Created by Microsoft, C# is an elegant language widely used for building 3D/2D games in Unity, Windows desktop applications, and web services.',
+ keyConcepts: [
+ 'Writing clean Object-Oriented code with concise Properties',
+ 'Filtering, searching, and sorting data in 1 line using LINQ',
+ 'Building immersive video games with the Unity Game Engine',
+ 'Creating high-speed web APIs using ASP.NET Core',
+ 'Building cross-platform desktop & mobile apps with .NET MAUI'
+ ],
+ useCases: ['Unity 3D/2D Game Development', 'Enterprise Web Backends (ASP.NET Core)', 'Windows Desktop Applications', 'Cross-Platform Apps (.NET MAUI)'],
+ links: [
+ { label: 'Official Microsoft C# Documentation', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/' },
+ { label: 'W3Schools C# Guide', url: 'https://www.w3schools.com/cs/' }
+ ]
+ }
+];
+
+const CS_TOOLS_CATEGORIES = [
+ {
+ title: 'Programming Languages',
+ icon: Code,
+ color: '#3B82F6',
+ bg: '#EFF6FF',
+ tools: [
+ { name: 'Python', desc: 'High-level, beginner-friendly language for AI, Web, & Scripts.', url: '#' },
+ { name: 'Java', desc: 'Object-oriented enterprise language running on the JVM.', url: '#' },
+ { name: 'C++', desc: 'High-performance systems programming and game development.', url: '#' },
+ { name: 'JavaScript', desc: 'Core language of the web for frontend and backend.', url: '#' },
+ { name: 'TypeScript', desc: 'Strongly typed superset of JavaScript at scale.', url: '#' },
+ { name: 'Go (Golang)', desc: 'Fast, concurrent language for cloud & microservices.', url: '#' },
+ { name: 'Rust', desc: 'Ultra-fast memory-safe systems programming language.', url: '#' },
+ { name: 'C# (.NET)', desc: 'Versatile OOP language for games, desktop, & web backends.', url: '#' }
+ ]
+ },
+ {
+ title: 'Version Control',
+ icon: GitBranch,
+ color: '#F97316',
+ bg: '#FFF7ED',
+ tools: [
+ { name: 'Source Code Management', desc: 'Git CLI distributed version control system.', url: 'https://git-scm.com/' },
+ { name: 'Repository Hosting', desc: 'GitHub, GitLab, Bitbucket, and Gitea platforms.', url: 'https://github.com/' },
+ { name: 'Git Clients', desc: 'GitHub Desktop, GitKraken, Sourcetree, and Lazygit.', url: 'https://desktop.github.com/' },
+ { name: 'Code Review', desc: 'GitHub Pull Requests, Crucible, and Gerrit review workflows.', url: 'https://github.com/features/code-review' }
+ ]
+ },
+ {
+ title: 'Web Development',
+ icon: Globe,
+ color: '#10B981',
+ bg: '#ECFDF5',
+ tools: [
+ { name: 'Frontend Development', desc: 'React, Vue.js, Angular, Svelte, Tailwind CSS, HTML5/CSS3.', url: 'https://react.dev/' },
+ { name: 'Backend Development', desc: 'Spring Boot, Express.js, Django, FastAPI, NestJS.', url: 'https://spring.io/projects/spring-boot' },
+ { name: 'Full-Stack Development', desc: 'Next.js, Remix, Nuxt.js, and Astro full-stack frameworks.', url: 'https://nextjs.org/' },
+ { name: 'Static Site Generators', desc: 'Gatsby, Hugo, Jekyll, and Eleventy.', url: 'https://www.gatsbyjs.com/' },
+ { name: 'CMS', desc: 'WordPress, Strapi, Sanity, and Ghost Content Management Systems.', url: 'https://strapi.io/' },
+ { name: 'Web Performance', desc: 'Lighthouse, PageSpeed Insights, and Web Vitals analytics.', url: 'https://pagespeed.web.dev/' }
+ ]
+ },
+ {
+ title: 'Mobile Development',
+ icon: Smartphone,
+ color: '#8B5CF6',
+ bg: '#F5F3FF',
+ tools: [
+ { name: 'Android Development', desc: 'Android Studio, Kotlin, Jetpack Compose, and Java.', url: 'https://developer.android.com/studio' },
+ { name: 'iOS Development', desc: 'Xcode, Swift, SwiftUI, and CocoaPods.', url: 'https://developer.apple.com/xcode/' },
+ { name: 'Cross-Platform Development', desc: 'Flutter, React Native, and Expo framework.', url: 'https://flutter.dev/' },
+ { name: 'Mobile Testing', desc: 'Appium, Espresso, and XCUITest automation.', url: 'https://appium.io/' },
+ { name: 'App Deployment', desc: 'Google Play Console, Apple App Store Connect, Fastlane.', url: 'https://play.google.com/console' }
+ ]
+ },
+ {
+ title: 'Databases',
+ icon: Database,
+ color: '#06B6D4',
+ bg: '#ECFEFF',
+ tools: [
+ { name: 'Relational Databases (SQL)', desc: 'PostgreSQL, MySQL, SQLite, and Microsoft SQL Server.', url: 'https://www.postgresql.org/' },
+ { name: 'NoSQL Databases', desc: 'MongoDB, Cassandra, CouchDB, and DynamoDB.', url: 'https://www.mongodb.com/' },
+ { name: 'Graph Databases', desc: 'Neo4j, Amazon Neptune, and ArangoDB.', url: 'https://neo4j.com/' },
+ { name: 'Time-Series Databases', desc: 'InfluxDB, TimescaleDB, and Prometheus.', url: 'https://www.influxdata.com/' },
+ { name: 'In-Memory Databases', desc: 'Redis, Memcached, and Dragonfly.', url: 'https://redis.io/' },
+ { name: 'Database Administration', desc: 'pgAdmin, DBeaver, DataGrip, and phpMyAdmin.', url: 'https://www.dbeaver.io/' },
+ { name: 'Database Modeling', desc: 'dbdiagram.io, Erwin, and MySQL Workbench.', url: 'https://dbdiagram.io/' }
+ ]
+ },
+ {
+ title: 'UI / UX Design',
+ icon: Palette,
+ color: '#EC4899',
+ bg: '#FDF2F8',
+ tools: [
+ { name: 'Wireframing', desc: 'Balsamiq, Figma, and Whimsical wireframing.', url: 'https://balsamiq.com/' },
+ { name: 'Prototyping', desc: 'Figma, Adobe XD, Proto.io, and Framer.', url: 'https://www.figma.com/' },
+ { name: 'Design Systems', desc: 'Storybook, Material Design, and Tailwind UI.', url: 'https://storybook.js.org/' },
+ { name: 'User Research', desc: 'Maze, UserTesting, and Hotjar analytics.', url: 'https://maze.co/' },
+ { name: 'Accessibility Testing', desc: 'axe DevTools, WAVE, and Lighthouse A11y audit.', url: 'https://www.deque.com/axe/' }
+ ]
+ },
+ {
+ title: 'Collaboration',
+ icon: Users,
+ color: '#EAB308',
+ bg: '#FEFCE8',
+ tools: [
+ { name: 'Documentation', desc: 'Confluence, Notion, MkDocs, and Docusaurus.', url: 'https://docusaurus.io/' },
+ { name: 'Team Communication', desc: 'Slack, Microsoft Teams, Discord, and Mattermost.', url: 'https://slack.com/' },
+ { name: 'Project Management', desc: 'Jira, Trello, Asana, and Linear ticket tracking.', url: 'https://linear.app/' },
+ { name: 'Whiteboarding', desc: 'Miro, FigJam, Excalidraw, and Lucidchart.', url: 'https://excalidraw.com/' },
+ { name: 'Knowledge Management', desc: 'Obsidian, Notion, and Slite workspace wiki.', url: 'https://obsidian.md/' }
+ ]
+ },
+ {
+ title: 'Software Engineering',
+ icon: Layers,
+ color: '#D97706',
+ bg: '#FEF3C7',
+ tools: [
+ { name: 'UML & System Design', desc: 'Draw.io, PlantUML, Mermaid.js, and StarUML.', url: 'https://mermaid.js.org/' },
+ { name: 'Architecture Design', desc: 'C4 Model, ArchiMate, and System Architecture patterns.', url: 'https://c4model.com/' },
+ { name: 'Design Patterns', desc: 'Gang of Four (GoF) Creational, Structural, Behavioral patterns.', url: 'https://refactoring.guru/design-patterns' },
+ { name: 'Code Analysis', desc: 'SonarQube, ESLint, Pylint, and SpotBugs linters.', url: 'https://eslint.org/' },
+ { name: 'Debugging', desc: 'GDB, Chrome DevTools, Visual Studio Debugger, and Charles Proxy.', url: 'https://developer.chrome.com/docs/devtools/' },
+ { name: 'Performance Profiling', desc: 'Perf, JProfiler, Py-Spy, and Chrome Memory Profiler.', url: 'https://github.com/benfred/py-spy' }
+ ]
+ },
+ {
+ title: 'Networking',
+ icon: Wifi,
+ color: '#2563EB',
+ bg: '#EFF6FF',
+ tools: [
+ { name: 'Network Analysis', desc: 'Wireshark packet capture and traffic protocol analyzer.', url: 'https://www.wireshark.org/' },
+ { name: 'Packet Simulation', desc: 'Cisco Packet Tracer and GNS3 network topology simulation.', url: 'https://www.netacad.com/courses/packet-tracer' },
+ { name: 'Port Scanning & Recon', desc: 'Nmap and Masscan network discovery tools.', url: 'https://nmap.org/' },
+ { name: 'API & HTTP Debugging', desc: 'Postman, Fiddler, and Charles Proxy HTTP inspection.', url: 'https://www.postman.com/' },
+ { name: 'Remote Terminal & SSH', desc: 'PuTTY, OpenSSH, and Termius terminal clients.', url: 'https://www.putty.org/' }
+ ]
+ }
+];
+
+const BUSINESS_TOOLS_CATEGORIES = [
+ {
+ title: 'Accounting & Finance',
+ icon: DollarSign,
+ color: '#10B981',
+ bg: '#ECFDF5',
+ tools: [
+ { name: 'QuickBooks', desc: 'Cloud accounting software for small and mid-sized businesses.', url: 'https://quickbooks.intuit.com/' },
+ { name: 'Tally Prime', desc: 'India\'s leading accounting and inventory management solution.', url: 'https://tallysolutions.com/' },
+ { name: 'Zoho Books', desc: 'Online accounting software for growing businesses.', url: 'https://www.zoho.com/books/' }
+ ]
+ },
+ {
+ title: 'Business Intelligence',
+ icon: BarChart3,
+ color: '#3B82F6',
+ bg: '#EFF6FF',
+ tools: [
+ { name: 'Power BI', desc: 'Microsoft\'s interactive data visualization and BI tool.', url: 'https://powerbi.microsoft.com/' },
+ { name: 'Tableau', desc: 'Visual analytics platform for data-driven decisions.', url: 'https://www.tableau.com/' },
+ { name: 'Google Looker', desc: 'Business intelligence and data analytics by Google Cloud.', url: 'https://cloud.google.com/looker' }
+ ]
+ },
+ {
+ title: 'CRM',
+ icon: Users,
+ color: '#8B5CF6',
+ bg: '#F5F3FF',
+ tools: [
+ { name: 'Salesforce', desc: 'World\'s leading CRM platform for sales and support.', url: 'https://www.salesforce.com/' },
+ { name: 'HubSpot CRM', desc: 'Free CRM with marketing, sales, and service tools.', url: 'https://www.hubspot.com/products/crm' },
+ { name: 'Zoho CRM', desc: 'AI-powered CRM for customer lifecycle management.', url: 'https://www.zoho.com/crm/' }
+ ]
+ },
+ {
+ title: 'Marketing',
+ icon: Megaphone,
+ color: '#EC4899',
+ bg: '#FDF2F8',
+ tools: [
+ { name: 'Google Ads', desc: 'Online advertising platform for paid search and display.', url: 'https://ads.google.com/' },
+ { name: 'Mailchimp', desc: 'Email marketing and automation platform.', url: 'https://mailchimp.com/' },
+ { name: 'Canva', desc: 'Design tool for social media graphics and presentations.', url: 'https://www.canva.com/' }
+ ]
+ },
+ {
+ title: 'Sales',
+ icon: TrendingUp,
+ color: '#F97316',
+ bg: '#FFF7ED',
+ tools: [
+ { name: 'LinkedIn Sales Navigator', desc: 'Advanced lead generation and prospecting tool.', url: 'https://business.linkedin.com/sales-solutions' },
+ { name: 'Pipedrive', desc: 'Sales CRM and pipeline management tool.', url: 'https://www.pipedrive.com/' },
+ { name: 'Freshsales', desc: 'AI-powered sales CRM for high-velocity teams.', url: 'https://www.freshworks.com/crm/sales/' }
+ ]
+ },
+ {
+ title: 'Human Resources (HR)',
+ icon: UserCheck,
+ color: '#06B6D4',
+ bg: '#ECFEFF',
+ tools: [
+ { name: 'BambooHR', desc: 'HR software for employee records, onboarding, and PTO.', url: 'https://www.bamboohr.com/' },
+ { name: 'Workday', desc: 'Enterprise cloud platform for finance, HR, and planning.', url: 'https://www.workday.com/' },
+ { name: 'Zoho People', desc: 'Cloud HRMS software for managing employee operations.', url: 'https://www.zoho.com/people/' }
+ ]
+ },
+ {
+ title: 'Project & Operations',
+ icon: ClipboardList,
+ color: '#D97706',
+ bg: '#FEF3C7',
+ tools: [
+ { name: 'Asana', desc: 'Work management platform to organize team projects.', url: 'https://asana.com/' },
+ { name: 'Trello', desc: 'Kanban-style project management and list tool.', url: 'https://trello.com/' },
+ { name: 'Smartsheet', desc: 'Enterprise platform for dynamic work and project management.', url: 'https://www.smartsheet.com/' }
+ ]
+ },
+ {
+ title: 'E-Commerce',
+ icon: ShoppingCart,
+ color: '#6366F1',
+ bg: '#EEF2FF',
+ tools: [
+ { name: 'Shopify', desc: 'E-commerce platform for online stores and retail POS.', url: 'https://www.shopify.com/' },
+ { name: 'WooCommerce', desc: 'Open-source e-commerce plugin for WordPress.', url: 'https://woocommerce.com/' },
+ { name: 'Magento (Adobe Commerce)', desc: 'Flexible enterprise e-commerce platform.', url: 'https://business.adobe.com/products/magento/magento-commerce.html' }
+ ]
+ }
+];
+
+const EE_TOOLS_CATEGORIES = [
+ {
+ title: 'Circuit Simulation & CAD',
+ icon: Cpu,
+ color: '#D97706',
+ bg: '#FEF3C7',
+ tools: [
+ { name: 'LTspice', desc: 'High-performance SPICE simulation software for analog circuits.', url: 'https://www.analog.com/en/design-center/design-tools-and-calculators/ltspice-simulator.html' },
+ { name: 'Proteus Design Suite', desc: 'Circuit simulation, schematic capture, and PCB layout.', url: 'https://www.labcenter.com/' },
+ { name: 'Multisim (NI)', desc: 'SPICE simulation and circuit design environment.', url: 'https://www.ni.com/en-in/shop/electronic-test-instrumentation/application-software-for-electronic-test-and-instrumentation-category/what-is-multisim.html' }
+ ]
+ },
+ {
+ title: 'Computation & Analysis',
+ icon: Activity,
+ color: '#0284C7',
+ bg: '#E0F2FE',
+ tools: [
+ { name: 'MATLAB', desc: 'Numerical computing environment for algorithms and data analysis.', url: 'https://www.mathworks.com/products/matlab.html' },
+ { name: 'Simulink', desc: 'Block diagram environment for multi-domain simulation.', url: 'https://www.mathworks.com/products/simulink.html' },
+ { name: 'LabVIEW', desc: 'System design software for test, measurement, and control.', url: 'https://www.ni.com/en-in/shop/labview.html' }
+ ]
+ },
+ {
+ title: 'PCB Design',
+ icon: LayoutGrid,
+ color: '#16A34A',
+ bg: '#DCFCE7',
+ tools: [
+ { name: 'KiCad EDA', desc: 'Open-source electronics design automation suite.', url: 'https://www.kicad.org/' },
+ { name: 'Altium Designer', desc: 'PCB design and electronics development software.', url: 'https://www.altium.com/' },
+ { name: 'Eagle (Autodesk)', desc: 'PCB layout and schematic editing software.', url: 'https://www.autodesk.com/products/eagle/overview' }
+ ]
+ },
+ {
+ title: 'Embedded Systems',
+ icon: Layers,
+ color: '#7C3AED',
+ bg: '#F3E8FF',
+ tools: [
+ { name: 'STM32CubeIDE', desc: 'C/C++ development platform for STM32 microcontrollers.', url: 'https://www.st.com/en/development-tools/stm32cubeide.html' },
+ { name: 'Keil uVision', desc: 'IDE for ARM cortex microcontroller programming.', url: 'https://www.keil.com/' },
+ { name: 'Arduino IDE', desc: 'Open-source software for microcontroller board programming.', url: 'https://www.arduino.cc/en/software' }
+ ]
+ },
+ {
+ title: 'Power Systems',
+ icon: Zap,
+ color: '#EA580C',
+ bg: '#FFEDD5',
+ tools: [
+ { name: 'ETAP', desc: 'Electrical power system analysis and operation software.', url: 'https://etap.com/' },
+ { name: 'PSCAD', desc: 'Power system transient simulation environment.', url: 'https://www.pscad.com/' },
+ { name: 'PowerWorld Simulator', desc: 'Power system visual analysis and power flow tool.', url: 'https://www.powerworld.com/' }
+ ]
+ },
+ {
+ title: 'Control Systems',
+ icon: Settings,
+ color: '#059669',
+ bg: '#D1FAE5',
+ tools: [
+ { name: 'Control System Toolbox (MATLAB)', desc: 'Tools for analyzing and designing control systems.', url: 'https://www.mathworks.com/products/control.html' },
+ { name: 'Scilab Xcos', desc: 'Open-source graphical editor for dynamic systems simulation.', url: 'https://www.scilab.org/' }
+ ]
+ },
+ {
+ title: 'Instrumentation',
+ icon: Gauge,
+ color: '#4F46E5',
+ bg: '#EEF2FF',
+ tools: [
+ { name: 'NI MAX (Measurement & Automation Explorer)', desc: 'Configuration tool for NI hardware devices.', url: 'https://www.ni.com/' },
+ { name: 'Keysight PathWave', desc: 'Test and measurement software suite.', url: 'https://www.keysight.com/' }
+ ]
+ },
+ {
+ title: 'Signal Processing',
+ icon: Radio,
+ color: '#DB2777',
+ bg: '#FCE7F3',
+ tools: [
+ { name: 'GNU Radio', desc: 'Software development toolkit for signal processing & SDR.', url: 'https://www.gnuradio.org/' },
+ { name: 'DSP System Toolbox (MATLAB)', desc: 'Design and simulate signal processing systems.', url: 'https://www.mathworks.com/products/dsp-system.html' }
+ ]
+ }
+];
+
+const CYBERSECURITY_TOOLS_CATEGORIES = [
+ {
+ title: 'Network Scanner',
+ icon: Wifi,
+ color: '#3B82F6',
+ bg: '#EFF6FF',
+ tools: [
+ { name: 'Nmap', desc: 'Network discovery and vulnerability scanning security auditor.', url: 'https://nmap.org/' },
+ { name: 'Masscan', desc: 'Ultra-fast IP port scanner capable of scanning the whole internet.', url: 'https://github.com/robertdavidgraham/masscan' },
+ { name: 'Angry IP Scanner', desc: 'Fast and friendly network scanner for desktop platforms.', url: 'https://angryip.org/' }
+ ]
+ },
+ {
+ title: 'Penetration Testing',
+ icon: ShieldCheck,
+ color: '#8B5CF6',
+ bg: '#F5F3FF',
+ tools: [
+ { name: 'Metasploit Framework', desc: 'World\'s most used penetration testing framework.', url: 'https://www.metasploit.com/' },
+ { name: 'Burp Suite', desc: 'Leading web security testing and vulnerability scanner.', url: 'https://portswigger.net/burp' },
+ { name: 'OWASP ZAP', desc: 'Open-source web application security scanner.', url: 'https://www.zaproxy.org/' }
+ ]
+ },
+ {
+ title: 'Forensics',
+ icon: Terminal,
+ color: '#06B6D4',
+ bg: '#ECFEFF',
+ tools: [
+ { name: 'Autopsy', desc: 'Digital forensics platform and GUI for The Sleuth Kit.', url: 'https://www.autopsy.com/' },
+ { name: 'Volatility', desc: 'Advanced memory forensics framework for incident response.', url: 'https://www.volatilityfoundation.org/' },
+ { name: 'FTK Imager', desc: 'Data preview and forensic imaging tool.', url: 'https://www.exterro.com/ftk-imager' }
+ ]
+ },
+ {
+ title: 'Cryptography',
+ icon: Lock,
+ color: '#EC4899',
+ bg: '#FDF2F8',
+ tools: [
+ { name: 'OpenSSL', desc: 'Robust commercial-grade cryptography toolkit and SSL/TLS CLI.', url: 'https://www.openssl.org/' },
+ { name: 'CyberChef', desc: 'The Cyber Swiss Army Knife for encryption, encoding, and data analysis.', url: 'https://gchq.github.io/CyberChef/' },
+ { name: 'VeraCrypt', desc: 'Free open-source disk encryption software based on TrueCrypt.', url: 'https://www.veracrypt.fr/' }
+ ]
+ },
+ {
+ title: 'Malware Analysis',
+ icon: Bot,
+ color: '#EF4444',
+ bg: '#FEF2F2',
+ tools: [
+ { name: 'Ghidra', desc: 'NSA reverse engineering framework for software analysis.', url: 'https://ghidra-sre.org/' },
+ { name: 'IDA Free', desc: 'Interactive disassembler for binary malware analysis.', url: 'https://hex-rays.com/ida-free/' },
+ { name: 'Cuckoo Sandbox', desc: 'Automated malware analysis system.', url: 'https://cuckoosandbox.org/' }
+ ]
+ },
+ {
+ title: 'Identity Management',
+ icon: UserCheck,
+ color: '#10B981',
+ bg: '#ECFDF5',
+ tools: [
+ { name: 'HashiCorp Vault', desc: 'Manage secrets, keys, and credentials securely.', url: 'https://www.vaultproject.io/' },
+ { name: 'Keycloak', desc: 'Open-source identity and access management for modern apps.', url: 'https://www.keycloak.org/' },
+ { name: 'Okta', desc: 'Enterprise identity cloud platform for workforce authentication.', url: 'https://www.okta.com/' }
+ ]
+ }
+];
+
+const AI_TOOLS_CATEGORIES = [
+ {
+ title: 'Machine Learning Frameworks',
+ icon: BrainCircuit,
+ color: '#EC4899',
+ bg: '#FDF2F8',
+ tools: [
+ { name: 'PyTorch', desc: 'Leading open-source deep learning framework by Meta.', url: 'https://pytorch.org/' },
+ { name: 'TensorFlow', desc: 'End-to-end open-source machine learning platform by Google.', url: 'https://www.tensorflow.org/' },
+ { name: 'Scikit-Learn', desc: 'Simple and efficient tools for predictive data analysis in Python.', url: 'https://scikit-learn.org/' }
+ ]
+ },
+ {
+ title: 'LLM & Generative AI',
+ icon: Bot,
+ color: '#8B5CF6',
+ bg: '#F5F3FF',
+ tools: [
+ { name: 'Hugging Face Transformers', desc: 'Thousands of pretrained models for NLP, Vision, & Audio.', url: 'https://huggingface.co/' },
+ { name: 'LangChain', desc: 'Framework for developing applications powered by language models.', url: 'https://www.langchain.com/' },
+ { name: 'Ollama', desc: 'Run large language models locally on your machine.', url: 'https://ollama.com/' }
+ ]
+ },
+ {
+ title: 'Computer Vision',
+ icon: Microscope,
+ color: '#3B82F6',
+ bg: '#EFF6FF',
+ tools: [
+ { name: 'OpenCV', desc: 'Open-source computer vision and machine learning software library.', url: 'https://opencv.org/' },
+ { name: 'YOLOv8 (Ultralytics)', desc: 'Real-time object detection and image segmentation.', url: 'https://www.ultralytics.com/' },
+ { name: 'MediaPipe', desc: 'Cross-platform ML solutions for live and streaming media.', url: 'https://developers.google.com/mediapipe' }
+ ]
+ },
+ {
+ title: 'Natural Language Processing (NLP)',
+ icon: Sparkles,
+ color: '#10B981',
+ bg: '#ECFDF5',
+ tools: [
+ { name: 'spaCy', desc: 'Industrial-strength Natural Language Processing in Python.', url: 'https://spacy.io/' },
+ { name: 'NLTK', desc: 'Natural Language Toolkit for symbolic and statistical NLP.', url: 'https://www.nltk.org/' },
+ { name: 'Gensim', desc: 'Topic modeling and document similarity analysis for human language.', url: 'https://radimrehurek.com/gensim/' }
+ ]
+ },
+ {
+ title: 'Data Annotation & MLOps',
+ icon: Database,
+ color: '#F97316',
+ bg: '#FFF7ED',
+ tools: [
+ { name: 'MLflow', desc: 'Open-source platform to manage the ML lifecycle.', url: 'https://mlflow.org/' },
+ { name: 'Label Studio', desc: 'Multi-type data labeling and annotation tool.', url: 'https://labelstud.io/' },
+ { name: 'Weights & Biases (W&B)', desc: 'Developer platform for machine learning experiment tracking.', url: 'https://wandb.ai/' }
+ ]
+ }
+];
+
+const BIOTECH_TOOLS_CATEGORIES = [
+ {
+ title: 'Bioinformatics & Sequence Analysis',
+ icon: Dna,
+ color: '#06B6D4',
+ bg: '#ECFEFF',
+ tools: [
+ { name: 'NCBI BLAST', desc: 'Basic Local Alignment Search Tool for nucleotide & protein sequences.', url: 'https://blast.ncbi.nlm.nih.gov/Blast.cgi' },
+ { name: 'Biopython', desc: 'Freely available Python tools for computational molecular biology.', url: 'https://biopython.org/' },
+ { name: 'Clustal Omega', desc: 'Multiple sequence alignment program for DNA/RNA/protein.', url: 'https://www.ebi.ac.uk/Tools/msa/clustalo/' }
+ ]
+ },
+ {
+ title: 'Molecular Modeling & Visualization',
+ icon: FlaskConical,
+ color: '#10B981',
+ bg: '#ECFDF5',
+ tools: [
+ { name: 'PyMOL', desc: 'Molecular visualization system on an open-source foundation.', url: 'https://pymol.org/' },
+ { name: 'UCSF ChimeraX', desc: 'Next-generation interactive molecular visualization and analysis.', url: 'https://www.rbvi.ucsf.edu/chimerax/' },
+ { name: 'AutoDock Vina', desc: 'Molecular docking program for drug discovery and structural biology.', url: 'https://vina.scripps.edu/' }
+ ]
+ },
+ {
+ title: 'Genomics & Next-Gen Sequencing',
+ icon: Microscope,
+ color: '#8B5CF6',
+ bg: '#F5F3FF',
+ tools: [
+ { name: 'SAMtools', desc: 'Utilities for interacting with high-throughput sequencing data.', url: 'http://www.htslib.org/' },
+ { name: 'FASTQC', desc: 'Quality control tool for high-throughput sequence data.', url: 'https://www.bioinformatics.babraham.ac.uk/projects/fastqc/' },
+ { name: 'IGV (Integrative Genomics Viewer)', desc: 'High-performance interactive visualization tool for genomic data.', url: 'https://igv.org/' }
+ ]
+ }
+];
+
+export default function Toolkit() {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const selectedToolkit = searchParams.get('toolkit');
+ const [selectedCategory, setSelectedCategory] = useState(null);
+ const [selectedLanguage, setSelectedLanguage] = useState(null);
+ const [selectedTool, setSelectedTool] = useState<{ name: string; desc: string; url: string; category: string; bg: string; color: string } | null>(null);
+
+ const setSelectedToolkit = (value: string | null) => {
+ if (value) {
+ setSearchParams({ toolkit: value });
+ setSelectedCategory(null);
+ setSelectedLanguage(null);
+ setSelectedTool(null);
+ } else {
+ setSearchParams({});
+ setSelectedCategory(null);
+ setSelectedLanguage(null);
+ setSelectedTool(null);
+ }
+ };
+
+ const toolkitRef = useRef(null);
+
+ return (
+
+ {/* Header */}
+ {!selectedToolkit && (
+
+
+
+
+ Student Toolkit
+
+
+ Student{' '}
+
+ Toolkit
+
+
+
+ Access specialized development environments, IDE configurations, compiler guides, and department toolkits.
+
+
+
+
+ )}
+
+
+ {selectedToolkit ? (
+ (() => {
+ const TOOLKIT_MAP: Record
= {
+ cs: { categories: CS_TOOLS_CATEGORIES, label: 'Computer Science' },
+ business: { categories: BUSINESS_TOOLS_CATEGORIES, label: 'Business' },
+ electrical: { categories: EE_TOOLS_CATEGORIES, label: 'Electrical & Electronics' },
+ cybersecurity: { categories: CYBERSECURITY_TOOLS_CATEGORIES, label: 'Cybersecurity' },
+ ai: { categories: AI_TOOLS_CATEGORIES, label: 'Artificial Intelligence' },
+ biotech: { categories: BIOTECH_TOOLS_CATEGORIES, label: 'Biotechnology' },
+ };
+ const current = TOOLKIT_MAP[selectedToolkit];
+ if (!current) return null;
+ const { categories, label } = current;
+ return (
+
+ {/* Back Button and Title */}
+
+ {
+ if (selectedTool) {
+ setSelectedTool(null);
+ } else if (selectedLanguage !== null) {
+ setSelectedLanguage(null);
+ } else if (selectedCategory !== null) {
+ setSelectedCategory(null);
+ } else {
+ setSelectedToolkit(null);
+ }
+ }}
+ className="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold text-[#475569] bg-white border border-[#E5E7EB] hover:border-[#F97316] hover:text-[#F97316] transition-all cursor-pointer shadow-2xs mb-4"
+ style={{ fontFamily: 'Poppins, sans-serif' }}
+ >
+
+
+
+ {label} Toolkit
+
+
+
+ {selectedLanguage !== null
+ ? `Complete beginner guide, core concepts, use cases, and resources for ${PROGRAMMING_LANGUAGES_GUIDES[selectedLanguage].name}.`
+ : selectedCategory !== null
+ ? `Browse essential ${categories[selectedCategory].title} software, guides, and developer resources.`
+ : `Explore all categories and tools curated for ${label} students.`}
+
+
+
+ {/* Main Content Area */}
+ {selectedLanguage !== null ? (
+ /* ── Detailed Programming Language Guide View ── */
+ (() => {
+ const guide = PROGRAMMING_LANGUAGES_GUIDES[selectedLanguage];
+ return (
+
+
+
+
+
+
+
{guide.name}
+
{guide.tagline}
+
+
+
+ {guide.whatItIs}
+
+
+
+
+
+
+
+ {guide.keyConcepts.map((concept, idx) => (
+
+ •
+ {concept}
+
+ ))}
+
+
+
+
+
+
+
+ {guide.useCases.map((useCase, idx) => (
+
+ {useCase}
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+ })()
+ ) : selectedCategory !== null ? (
+ /* ── Tools inside selected Category ── */
+ (() => {
+ const cat = categories[selectedCategory];
+ const IconComp = cat.icon;
+ return (
+
+
+
+
+
+
{cat.title}
+
+ {cat.tools.length} software tools & resources available
+
+
+
+ {cat.tools.map((tool, idx) => (
+
{
+ if (selectedToolkit === 'cs' && selectedCategory === 0) {
+ setSelectedLanguage(idx);
+ } else {
+ setSelectedTool({ ...tool, category: cat.title, bg: cat.bg, color: cat.color });
+ }
+ }}
+ className="p-6 bg-white hover:bg-[#FFF7ED] rounded-2xl border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group transition-all flex flex-col justify-between"
+ >
+
+
+
+ {tool.name}
+
+
+
+ {tool.desc}
+
+
+ {selectedToolkit === 'cs' && selectedCategory === 0 ? 'View Beginner Guide & Concepts' : 'Explore Tool & Resources'}
+
+
+ ))}
+
+ );
+ })()
+ ) : (
+ /* ── Category Cards Grid ── */
+
+ {categories.map((cat, idx) => {
+ const IconComp = cat.icon;
+ return (
+
setSelectedCategory(idx)}
+ className="p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group transition-all shadow-xs flex flex-col justify-between"
+ >
+
+
+
+
+ {cat.title}
+
+
+ {cat.tools.length} curated tools and guides available.
+
+
+ Browse Tools
+
+
+ );
+ })}
+
+ )}
+
+ {/* Toolkit Section Main */}
+
+
+
+ {TOOLKIT_ITEMS.map((item) => {
+ const iconConfig = TOOLKIT_ICONS[item.title] || { icon: Code, bg: '#FFF7ED', color: '#F97316' };
+ const IconComponent = iconConfig.icon;
+ return (
+
+ {
+ if (item.title === 'CS tools') {
+ setSelectedToolkit('cs');
+ } else if (item.title === 'Business tools') {
+ setSelectedToolkit('business');
+ } else if (item.title === 'Electrical and Electronic tools') {
+ setSelectedToolkit('electrical');
+ } else if (item.title === 'Cybersecurity tools') {
+ setSelectedToolkit('cybersecurity');
+ } else if (item.title === 'AI tools') {
+ setSelectedToolkit('ai');
+ } else if (item.title === 'Biotech tools') {
+ setSelectedToolkit('biotech');
+ } else if (item.url && item.url !== '#') {
+ window.open(item.url, '_blank');
+ }
+ }}
+ whileHover={{ y: -4, boxShadow: '0 12px 30px -10px rgba(249,115,22,0.15)' }}
+ className="flex items-start gap-5 p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group w-full transition-all shadow-xs hover:shadow-md"
+ >
+
+
+
+
+ {item.title}
+
+
+ {item.description}
+
+
+
+ );
+ })}
+
+
+
+ {/* Tool Modal */}
+ {selectedTool && (
+
+
+
+
+
+
+
{selectedTool.name}
+ {selectedTool.category}
+
+
+ {selectedTool.desc}
+
+
+
setSelectedTool(null)}
+ className="px-5 py-2.5 rounded-xl text-xs font-semibold text-[#64748B] hover:bg-[#F1F5F9] transition-all cursor-pointer"
+ >
+ Close
+
+ {selectedTool.url && selectedTool.url !== '#' && (
+
+ Visit Official Website
+ )}
+
+
+ )}
+