AI Tools Dashboard

A modern, responsive AI tools dashboard built with Next.js that showcases various AI models and tools. This project replicates a specific design with a focus on accessibility, responsive design, and smooth user interactions.

🚀 Features

• Hero Carousel: Interactive carousel showcasing featured AI models (WAN 2.2, Open Source models)
• Responsive Design: Fully responsive layout that works across all device sizes
• Dark/Light Mode: Theme toggle with proper contrast ratios
• Accessibility Compliant: WCAG-compliant contrast ratios and semantic HTML
• Smooth Animations: Carousel transitions and hover effects
• Modern UI: Clean, professional interface with proper spacing and typography

🛠️ Technologies Used

• Next.js - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Modern icon library
• shadcn/ui - High-quality UI components

📦 Installation

1. Clone the repository: ```bash git clone https://github.com/banksawesome/internship-assignment cd internship-assignment ```

2. Install dependencies: ``` npm install ```

3. Run the development server: ``` npm run dev ```

4. Open http://localhost:3000 in your browser.

🔍 For Reviewers

When reviewing this project, please pay attention to:

✅ Design Fidelity

• Hero section matches the provided reference design exactly
• Carousel arrows are positioned correctly
• Navigation center section has proper background and shadow
• Color scheme and typography are consistent

✅ Functionality

• Carousel slides smoothly between different model showcases
• Navigation arrows work correctly
• Dark/light mode toggle functions properly
• All interactive elements respond to user input

✅ Responsive Design

• Layout maintains horizontal scrolling on smaller screens
• Cards don't stack vertically but slide horizontally
• Navigation remains functional across all screen sizes
• Text remains readable at all viewport sizes

✅ Accessibility

• All text has sufficient contrast ratios (WCAG AA compliant)
• Interactive elements are keyboard accessible
• Images have appropriate alt text
• Semantic HTML structure is used

✅ Code Quality

• TypeScript types are properly defined
• Components are well-structured and reusable
• CSS classes follow Tailwind best practices
• No console errors or warnings

🎨 Design Specifications

The project replicates a specific AI tools dashboard design with:

• Hero Section: Two-card carousel showing "WAN 2.2" and "Open Source" models
• Color Palette: Professional color scheme with proper contrast
• Typography: Clean, readable fonts with appropriate sizing
• Spacing: Consistent spacing using Tailwind's spacing scale

🚨 Known Issues

• Ensure all contrast ratios meet WCAG AA standards
• Verify carousel functionality across different browsers
• Test responsive behavior on various device sizes

📝 Development Notes

This project was built with a focus on:

1. Pixel-perfect design replication
2. Accessibility compliance
3. Smooth user interactions
4. Clean, maintainable code

📄 License

This project is for demonstration purposes. Please check with the original design owner for usage rights.