Toraka - Entertainment Hub

A modern, responsive web application built with Next.js, TailwindCSS, and Radix UI, designed to provide a seamless entertainment browsing experience.

🚀 Features

• 1:1 Figma Design Implementation - Pixel-perfect recreation of the provided Figma designs
• Responsive Design - Mobile-first approach with stack → grid → rail layout patterns
• Modern Tech Stack - Next.js 15, TypeScript, TailwindCSS, Radix UI Primitives
• Performance Optimized - Built for 90+ Lighthouse scores
• SEO Friendly - Comprehensive meta tags, sitemap, and structured data
• Accessibility First - WCAG compliant with proper ARIA labels and keyboard navigation
• Loading States - Skeleton components for improved perceived performance
• Consistent Hover Effects - Smooth micro-interactions throughout the application
• Dark Theme - Beautiful dark theme with custom color palette

🎨 Design System

Color Palette

• Primary: #1665F4 - Main brand color
• Dark Backgrounds: #0A0F1C, #0D1426, #1A2436
• Accent Colors: #11A4C8, #B57CE9, #69DC94, #DE5757, #C1912B
• Text Colors: #FFFFFF, #CFD9E9, #B9C5D8

Typography

• Font Family: Inter (fallback to SF Pro and system fonts)
• Font Weights: 300, 400, 510, 600, 700
• Responsive Typography: Scales appropriately across all device sizes

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: TailwindCSS with custom configuration
• UI Components: Radix UI Primitives
• Icons: Lucide React + Custom SVG assets from Figma
• Animations: CSS animations with Tailwind utilities
• Performance: Image optimization, bundle splitting, and caching strategies

📱 Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: 1024px - 1280px
• Wide: > 1280px

🚀 Getting Started

1. Install dependencies

   npm install

2. Run the development server

   npm run dev

3. Open your browser Navigate to http://localhost:3000

📦 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🌟 Key Features Implemented

✅ Navigation Header - Responsive header with logo, navigation, search, and user menu ✅ User Dropdown - Profile menu with settings and sign out ✅ Responsive Design - Mobile-first with proper breakpoints ✅ Loading Skeletons - Smooth loading states for all components ✅ Hover Effects - Consistent micro-interactions ✅ SEO Optimization - Meta tags, sitemap, robots.txt ✅ Performance - Optimized for 90+ Lighthouse scores ✅ Accessibility - WCAG compliant with proper ARIA labels

Built with ❤️ using Next.js, TailwindCSS, and Radix UI