I'll convert the website to a dark theme and add relevant cyber forensics images to enhance the visual appeal and authenticity.

I've transformed the website into a sleek dark theme with cyber forensics imagery:

Dark Theme Updates:

Color Scheme:

• Dark gradient backgrounds (gray-900, slate-900, black)
• Cyan accent color (#06b6d4) for highlights and CTAs
• White text with gray variants for hierarchy
• Subtle transparency effects with backdrop blur

Visual Enhancements:

• Added cyber forensics themed placeholder images for courses
• Hero section with forensics lab background imagery
• Enhanced card hover effects with border highlights
• Improved contrast for better accessibility

Cyber Forensics Imagery Added:

Course Thumbnails:

• Digital Evidence Analysis
• Network Traffic Analysis
• Mobile Device Analysis
• Malware Code Analysis
• Cloud Security Investigation
• Legal Documentation

Background Images:

• Cyber Forensics Lab in hero section
• Digital Investigation Tools in CTA section

UI Improvements:

• Glowing borders on hover
• Enhanced button states
• Better visual hierarchy with dark theme
• Smooth color transitions throughout

The dark theme creates a more professional, tech-focused atmosphere that's perfect for cybersecurity education, while the added imagery makes the content more engaging and authentic to the cyber forensics field.

I'll convert the code to a standard React.js setup with Vite, removing Next.js dependencies and adapting it for a Vite environment.

I've successfully converted the cybersecurity ed-tech website to a Vite + React setup with the following key changes:

Vite Setup Features:

📁 Complete Project Structure:

• package.json with all necessary dependencies
• vite.config.js with path aliases
• tailwind.config.js with custom theme
• postcss.config.js for Tailwind processing

🎨 UI Components:

• Custom Button, Input, Card, Badge, and Avatar components
• Utility functions for class merging
• Dark theme CSS variables

🖼️ Real Images:

• Replaced placeholder images with actual Unsplash photos
• Cybersecurity and technology themed images
• Professional instructor photos

⚡ Performance Optimizations:

• Fast Vite dev server
• Optimized build process
• Tree-shaking for smaller bundles

️ Setup Instructions:

1. Install dependencies: npm install
2. Start dev server: npm run dev
3. Build for production: npm run build

The website maintains all the original functionality including:

• Dark theme design
• Course search and filtering
• Responsive layout
• Interactive hover effects
• Professional cybersecurity styling

All Next.js specific features have been removed and replaced with standard React patterns that work perfectly with Vite!