<div align="center">

🎬 Navision - Movie & TV Tracker 🍿

<div class="banner"> <svg width="100%" height="180" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#FF5F6D" /> <stop offset="100%" stop-color="#FFC371" /> </linearGradient> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#000" flood-opacity="0.3" /> </filter> </defs> <rect width="100%" height="100%" fill="url(#grad)" rx="15" filter="url(#shadow)" /> <circle cx="60" cy="90" r="20" fill="#ffffff" opacity="0.2" /> <circle cx="740" cy="90" r="20" fill="#ffffff" opacity="0.2" /> <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="60" font-weight="bold" fill="white" text-anchor="middle">NAVISION</text> <text x="50%" y="75%" font-family="Arial, sans-serif" font-size="20" fill="white" text-anchor="middle">Your Ultimate Movie & TV Show Companion</text> </svg> </div> <div class="badges"> <a href="https://github.com/preetam-90/Navision/stargazers"> <img src="https://img.shields.io/github/stars/preetam-90/Navision?style=for-the-badge&logo=github&color=gold" alt="GitHub stars" /> </a> <a href="https://github.com/preetam-90/Navision/blob/main/LICENSE.md"> <img src="https://img.shields.io/github/license/preetam-90/Navision?style=for-the-badge&logo=github&color=blue" alt="GitHub license" /> </a> <a href="https://bhaiflix.vercel.app/"> <img src="https://img.shields.io/badge/vercel-deployed-success?style=for-the-badge&logo=vercel&color=black" alt="Vercel Deploy" /> </a> <a href="https://github.com/preetam-90/Navision/commits/main"> <img src="https://img.shields.io/github/last-commit/preetam-90/Navision?style=for-the-badge&logo=git&color=informational" alt="Last Commit" /> </a> <a href="https://prettier.io/"> <img src="https://img.shields.io/badge/code_style-prettier-ff69b4?style=for-the-badge&logo=prettier&color=ff69b4" alt="Code Style" /> </a> </div> <div class="profile-badges"> <a href="https://github.com/preetam-90"> <img src="https://komarev.com/ghpvc/?username=preetam-90&label=Profile%20Views&color=0e75b6&style=for-the-badge" alt="Profile Views" /> </a> <a href="https://github.com/preetam-90?tab=followers"> <img src="https://img.shields.io/github/followers/preetam-90?style=for-the-badge&logo=github&label=Follow" alt="GitHub followers" /> </a> </div> <div class="description"> <h3> Your ultimate movie and TV show tracking companion with a sleek, modern interface </h3> <a href="https://readme-typing-svg.demolab.com/?font=Fira+Code&size=24&duration=4000&pause=1000&color=FFC107&center=true&vCenter=true&width=1000&lines=Lights...+Camera...+%F0%9F%8E%A5+Action!;Experience+cinema+like+never+before;Track+everything+you+watch+effortlessly"> <img src="https://readme-typing-svg.demolab.com/?font=Fira+Code&size=24&duration=4000&pause=1000&color=FFC107&center=true&vCenter=true&width=1000&lines=Lights...+Camera...+%F0%9F%8E%A5+Action!;Experience+cinema+like+never+before;Track+everything+you+watch+effortlessly" alt="Typing SVG" /> </a> </div> <div class="quick-links"> <a href="https://bhaiflix.vercel.app/"> 🌐 View Demo </a> <a href="#features"> ✨ Features </a> <a href="#tech-stack"> 🛠️ Tech Stack </a> <a href="#installation"> 🚀 Installation </a> <a href="#contributing"> 🤝 Contribute </a> </div> </div> <hr>

📋 Table of Contents

<div class="toc">

• 🔍 Quick Start
• ✨ Features
• 🎬 Demo
• 📸 Screenshots
• 🛠️ Tech Stack
• ⚙️ Installation
• 📱 Usage
• 🔮 Roadmap
• 🤝 Contributing
• 📄 License
• 👋 Connect with Me

</div> <hr>

🔍 Quick Start

<div class="quick-links-section"> <a href="https://bhaiflix.vercel.app/"> 🌐 View Live Demo </a> <a href="https://github.com/preetam-90/Navision"> ⭐ Star on GitHub </a> </div> <hr>

✨ Features

<div class="features-container" style="background: linear-gradient(120deg, rgba(255,95,109,0.05), rgba(255,195,113,0.05)); padding: 20px; border-radius: 15px; margin-bottom: 2rem;">

Core Features

<div class="feature-columns" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 1.5rem 0;"> <div class="feature-card" style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.05)'"> <h3 style="color: #FF5F6D; margin-top: 0;">🎬 Comprehensive Tracking</h3> <p>Track all your favorite movies and TV shows in one place with detailed information.</p> </div> <div class="feature-card" style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.05)'"> <h3 style="color: #FF5F6D; margin-top: 0;">🌙 Dark & Light Modes</h3> <p>Enjoy browsing with a theme that matches your preference and reduces eye strain.</p> </div> <div class="feature-card" style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.05)'"> <h3 style="color: #FF5F6D; margin-top: 0;">📱 Fully Responsive</h3> <p>Perfectly optimized for all devices - desktop, tablet, and mobile.</p> </div> </div>

Additional Features

<div class="feature-columns" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 1.5rem 0;"> <div class="feature-card" style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.05)'"> <h3 style="color: #FFC371; margin-top: 0;">⚡ Lightning Fast</h3> <p>Optimized performance with Next.js for quick loading and smooth navigation.</p> </div> <div class="feature-card" style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.05)'"> <h3 style="color: #FFC371; margin-top: 0;">🔍 Advanced Search</h3> <p>Find exactly what you're looking for with powerful filtering options.</p> </div> <div class="feature-card" style="background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.05)'"> <h3 style="color: #FFC371; margin-top: 0;">🚀 Vercel Hosted</h3> <p>Reliable and super-fast hosting ensures the best user experience.</p> </div> </div> </div> <hr>

🛠️ Tech Stack

<div class="tech-stack" style="background: linear-gradient(120deg, rgba(63,94,251,0.05), rgba(252,70,107,0.05)); padding: 20px; border-radius: 15px; margin-bottom: 2rem;"> <div class="tech-badges" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 1.5rem 0;"> <img src="https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black" alt="React" style="transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"/> <img src="https://img.shields.io/badge/-Next.js-000000?style=for-the-badge&logo=next.js" alt="Next.js" style="transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"/> <img src="https://img.shields.io/badge/-Tailwind-38B2AC?style=for-the-badge&logo=tailwind-css" alt="Tailwind CSS" style="transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"/> <img src="https://img.shields.io/badge/-TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" style="transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"/> <img src="https://img.shields.io/badge/-Vercel-000000?style=for-the-badge&logo=vercel" alt="Vercel" style="transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"/> </div> <div class="tech-description" style="text-align: center; max-width: 800px; margin: 0 auto;"> <p>Built with modern technologies to ensure the best performance, developer experience, and user satisfaction.</p> </div> </div> <hr>

🎬 Demo

<div class="demo-container" style="position: relative; background: l