wise-bot
Khushi# 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.
Comments (0)
Sign in to leave a comment
System Requirements
wise-bot
Introduction
The wise-bot project aims to develop an intelligent chatbot platform tailored to provide users with insightful and contextually relevant responses. This document outlines the system requirements for the wise-bot project, ensuring a comprehensive understanding of its functionalities, user interactions, and design elements.
System Overview
The wise-bot platform is designed to be a versatile and user-friendly chatbot that can engage with users across various domains. It leverages advanced AI models to deliver accurate and meaningful interactions, catering to a global audience with locale-specific adaptations for users in India, such as currency and timezone considerations.
Functional Requirements
- As a User, I should be able to interact with the chatbot to receive insightful responses.
- As a User, I should be able to ask questions across various domains and receive contextually relevant answers.
- As an Admin, I should be able to configure the chatbot's settings and manage its responses.
- As a Developer, I should be able to integrate the chatbot into different platforms and applications.
- As a User, I should be able to receive responses in my preferred language.
- As an Admin, I should be able to monitor and analyze user interactions with the chatbot.
- As a User, I should be able to provide feedback on the chatbot's responses.
User Personas
- User: Individuals interacting with the chatbot for information and assistance.
- Admin: Personnel responsible for configuring and managing the chatbot's operations.
- Developer: Technical staff integrating the chatbot into various platforms.
Core User Flows
- User initiates a chat -> wise-bot processes the query -> wise-bot provides a response -> User provides feedback.
- Admin logs into the dashboard -> configures chatbot settings -> monitors user interactions -> analyzes feedback.
- Developer accesses API documentation -> integrates wise-bot into a platform -> tests chatbot functionality -> deploys integration.
Visuals Colors and Theme
- primary: #1A73E8 (a deep blue for brand identity)
- primary_light: #4D90FE (a lighter blue for hover states)
- secondary: #FF7043 (a coral hue for emphasis)
- accent: #FFC107 (a vibrant amber for CTAs and active states)
- highlight: #FF9800 (a warm orange for notifications)
- bg: #FFFFFF (a clean white for the background)
- surface: rgba(255, 255, 255, 0.9) (a translucent white for cards/panels)
- text: #212121 (a dark gray for primary text)
- text_muted: #757575 (a softer gray for secondary text)
- border: rgba(0, 0, 0, 0.1) (a subtle gray for borders)
Signature Design Concept
The wise-bot homepage will feature an interactive "knowledge galaxy" where each star represents a different domain of expertise. Users can click on stars to explore topics, drag to rotate the galaxy, and hover to see connections between related topics. This dynamic visualization will be built using @react-three/fiber and @react-three/drei for a 3D experience, making the homepage both engaging and informative.
Interaction Model & Motion Direction
The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll through the page. Decorative elements will move at different speeds, enhancing the storytelling aspect of the platform. Internal pages will maintain a "static" interaction model for clarity and ease of use, focusing on content delivery.
Non-Functional Requirements
- The system should support high concurrency to handle multiple user interactions simultaneously.
- The platform must ensure data privacy and comply with relevant regulations.
- The chatbot should provide responses with minimal latency to enhance user experience.
- The system should be scalable to accommodate future growth and additional features.
Tech Stack
- Frontend: React for Web
- Backend: Python, FastAPI
- Database: MySQL or MariaDB, using Alembic for migrations
- AI Models: GPT 5.4 for user-friendly responses
- AI Tools: Litellm for LLM Routing, Langchain
- Orchestration: Docker, docker-compose, Kubernetes
Assumptions and Constraints
- The chatbot will primarily serve English-speaking users but should be adaptable for other languages.
- The system will operate under the assumption of a stable internet connection for optimal performance.
- Constraints include adherence to data protection laws and ensuring high availability.
Glossary
- AI: Artificial Intelligence
- API: Application Programming Interface
- CTA: Call to Action
- LLM: Large Language Model
- UI: User Interface
This document serves as a comprehensive guide for the development and implementation of the wise-bot project, ensuring alignment with user needs and project goals.
No comments yet. Be the first!