💖 Cinematic Flix Clone: Where Style Meets Streaming 🎬 Welcome to the Cinematic Flix Clone! This isn't just a basic clone; it's a stylish, high-contrast streaming homepage designed to grab attention. We’ve built it with a sharp, cinematic black background accented by vibrant neon pink/fuchsia—giving it a truly premium, modern feel.

It’s built from the ground up using React, Tailwind CSS, and the magic of Framer Motion for silky-smooth interactions.

✨ Why This App Stands Out (The Features) Premium Vibe: The high-contrast black and pink palette delivers an elegant, stand-out aesthetic that feels far more engaging than a typical dark mode.

Interactive 3D Movie Cards: Forget boring flat images! We use Framer Motion to add a subtle, satisfying 3D tilt and shadow effect when you hover over any movie poster. They literally pop off the screen.

Dynamic Hero Section: The auto-playing featured slider uses smooth Framer Motion transitions and a gorgeous glassmorphism panel. Plus, the "Watch Now" button has a fun, subtle pulse animation to draw the user's eye.

Real Data: The movie rows aren't just placeholders! They're populated using actual film data fetched from the OMDb API.

Simplicity and Portability: To make deployment and sharing as easy as possible, the entire application—all components, styles, and logic—is neatly bundled into a single src/App.jsx file.

🚀 Ready to Dive In? (Getting Started) Getting thisact, Taiand Framer Motio machine is quick and easy.

What You'll Need (Prerequisites)n just

Run the Application: Start the development server.

npm run dev

The application will open in your browser, typically at http://localhost:5173.

🛠️ Project Structure For simplicity and robustness in diverse environments, this project uses a consolidated, single-file architecture. The core files are:

src/App.jsx: Main Application File. Contains all React state, data fetching logic, and the definitions for the Navbar, HeroSlider, MovieRow, and MovieCard components.

tailwind.config.js: Tailwind CSS configuration file, ensuring the framework scans the src directory.

src/index.css: Imports Tailwind directives and sets the global "Inter" font.

⚙️ Configuration & API The application uses the OMDb API for movie data.

API Key: The OMDb API Key (1f5dc5b9) is currently hardcoded within the src/App.jsx file.

const OMDB_API_KEY = "1f5dc5b9";

Note: For production deployment, you should move this key to an environment variable (.env).

🎨 Technologies Used This project is built using modern, powerful tools:

React: Frontend JavaScript library

Tailwind CSS: Utility-first CSS framework for styling

Framer Motion: Production-ready motion library for React

Vite: Fast build tool for project scaffolding

OMDb API: External data source for movie information

🤝 Contributing Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project

Create your Feature Branch (git checkout -b feature/AmazingFeature)

Commit your Changes (git commit -m 'Add some AmazingFeature')

Push to the Branch (git push origin feature/AmazingFeature)

Open a Pull Request

📄 License Distributed under the MIT License. See LICENSE for more information.

Created by saikirti4