wise-bot

byKhushi

# AI Website Builder Prompt **Project Name:** StreamFlix – Modern Netflix-Inspired Streaming Platform ## Overview Build a premium, responsive video streaming website inspired by Netflix's design language, but do not copy Netflix branding, logos, copyrighted assets, or exact layouts. The design should feel modern, cinematic, elegant, and minimal with smooth animations and an exceptional user experience. The website should look production-ready and suitable for a real streaming platform. --- # Design Style Use: * Dark theme * Background: #0B0B0B * Accent Color: #E50914 * White typography * Large cinematic posters * Glassmorphism where appropriate * Rounded corners (12–18px) * Soft shadows * Smooth hover animations * Motion effects similar to Netflix * Premium UI * Fully responsive * Mobile-first Typography: * Inter * SF Pro * Geist * Clean sans-serif --- # Pages Create the following pages. --- ## 1. Landing Page Hero section * Full-screen background movie banner * Dark overlay * Featured movie title * Movie description * Play button * More Info button Navigation Logo Menu * Home * TV Shows * Movies * New & Popular * My List Right side * Search * Notifications * Profile Avatar Below Hero Horizontal carousels Examples: Trending Now Continue Watching Popular Movies New Releases Sci-Fi Comedy Drama Action Top Rated Each carousel should support horizontal scrolling. Movie cards should include * Poster * Title * Rating * Duration * Genre Hover effect * Scale up * Shadow * Quick actions * Play icon * Add to List * Like --- ## 2. Browse Page Grid layout Filters * Genre * Release Year * Rating * Language Search bar Infinite scrolling Movie cards --- ## 3. Movie Detail Page Large backdrop image Movie poster Information * Title * Rating * Runtime * Genres * Release Year * Description Buttons * Play * Trailer * Add to List Below Cast section Related Movies Reviews Recommended Movies --- ## 4. Video Player Page Cinema mode Custom player Controls * Play * Pause * Skip * Volume * Fullscreen * Picture in Picture * Subtitle selector * Playback Speed Next Episode panel Related videos Comments --- ## 5. Login Modern split-screen Email Password Forgot Password Remember Me Continue with Google Continue with Apple Sign Up link --- ## 6. Sign Up Name Email Password Confirm Password Google Login Apple Login --- ## 7. User Profile Avatar Continue Watching Favorites Watch History Downloads Settings Subscription --- ## 8. Search Page Large search bar Instant search Movie suggestions Categories Trending searches --- ## 9. My List Saved movies Watch later Recently added Remove option --- ## 10. Settings Profile Password Language Theme Playback Quality Notifications Privacy Subscription Billing --- # Components Build reusable components. Navbar Footer Movie Card Carousel Hero Banner Profile Menu Search Modal Sidebar Filter Panel Video Player Buttons Modal Toast Notifications Loading Skeletons Pagination Rating Component Progress Bar --- # Interactions Smooth page transitions Fade animations Card hover animations Loading shimmer Image lazy loading Auto-playing hero background Animated buttons Animated search Smooth scrolling Sticky navbar Hide navbar while scrolling down Reveal while scrolling up --- # Features Search movies Filter movies Add to favorites Continue watching User authentication UI Responsive navigation Dark mode Watch history Recommended movies Movie categories Wishlist Recently watched --- # Sample Data Generate realistic movie data including * Title * Poster * Backdrop * Description * Rating * Genre * Runtime * Release Year Create at least * 50 movies * 10 genres * 8 trending titles * 15 recommended titles Use royalty-free placeholder artwork or generated mock posters. --- # Footer Links Company Careers Terms Privacy Contact Help Center Social Media Newsletter Signup --- # Tech Stack Frontend * Next.js * React * TypeScript * Tailwind CSS Icons * Lucide React Animations * Framer Motion State * Zustand Forms * React Hook Form Validation * Zod --- # Performance Optimize for * Lighthouse score above 95 * Lazy loading * Code splitting * Optimized images * SEO metadata * Accessibility (WCAG AA) * Keyboard navigation * Fast page transitions --- # Deliverables Generate: * Complete responsive website * Production-quality UI * Reusable component architecture * Clean folder structure * Mock streaming data * Smooth animations * Pixel-perfect layouts * Placeholder media assets * Well-commented code * Ready for deployment The final result should evoke the polished, cinematic experience of a modern streaming platform while remaining original in branding, layout, and implementation, avoiding any copyrighted Netflix assets or exact interface replication.