Add cinematic dark mode, movie cards, login & signup pages (#79)

Author: gaurivvv

src/App.css

@@ -0,0 +1,24 @@
+import "./App.css";
+
+/* Dark mode background */
+body.dark-mode {
+  background: linear-gradient(180deg, #0b0c10 0%, #1f2833 50%, #0b0c10 100%);
+  color: #e0e0e0;
+  transition: background 0.5s ease, color 0.5s ease;
+}
+
+/* Movie cards */
+.movie-card {
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  padding: 20px;
+  margin: 15px;
+}
+
+/* Hover effect for cinematic glow */
+.movie-card:hover {
+  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.7);
+  transform: scale(1.03);
+}

src/app/App.js

@@ -1,19 +1,44 @@
+import { useEffect, useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Login from "./login/page";
 import Signup from "./signup/page";
 import Home from "../app/movies/pages/Home";
-
+import "./App.css";
 
 function App() {
+  const [darkMode, setDarkMode] = useState(true); // default dark mode
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+    }
+  }, [darkMode]);
+
   return (
     <Router>
+      {/* Optional toggle button for testing */}
+      <button
+        onClick={() => setDarkMode(!darkMode)}
+        style={{
+          position: "fixed",
+          top: 10,
+          right: 10,
+          zIndex: 1000,
+          padding: "5px 10px",
+        }}
+      >
+        {darkMode ? "Light Mode" : "Dark Mode"}
+      </button>
+
       <Routes>
-        <Route path="/" element={<Home />} /> 
+        <Route path="/" element={<Home />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
       </Routes>
     </Router>
   );
 }
 
-export default App;
+export default App;

src/app/home.css

@@ -0,0 +1,36 @@
+import "./Home.css";
+.home-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.movies-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+/* Movie cards with cinematic glow */
+.movie-card {
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05),
+              0 4px 10px rgba(0, 0, 0, 0.5);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  width: 200px;
+  padding: 10px;
+}
+
+.movie-card img {
+  width: 100%;
+  border-radius: 8px;
+}
+
+.movie-card:hover {
+  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1),
+              0 8px 20px rgba(0, 0, 0, 0.7);
+  transform: scale(1.03);
+}
+
+/* Dark mode background is handled in App.css */

src/app/home.js

@@ -0,0 +1,40 @@
+import React from "react";
+import "./Home.css"; // We'll create this CSS for movie cards
+
+const movies = [
+  {
+    id: 1,
+    title: "Inception",
+    poster: "https://via.placeholder.com/200x300?text=Inception",
+    description: "Mind-bending thriller by Christopher Nolan",
+  },
+  {
+    id: 2,
+    title: "Interstellar",
+    poster: "https://via.placeholder.com/200x300?text=Interstellar",
+    description: "Epic space exploration movie",
+  },
+  {
+    id: 3,
+    title: "The Dark Knight",
+    poster: "https://via.placeholder.com/200x300?text=The+Dark+Knight",
+    description: "Batman fights crime in Gotham",
+  },
+];
+
+export default function Home() {
+  return (
+    <div className="home-container">
+      <h1>Now Showing 🍿</h1>
+      <div className="movies-grid">
+        {movies.map((movie) => (
+          <div key={movie.id} className="movie-card">
+            <img src={movie.poster} alt={movie.title} />
+            <h2>{movie.title}</h2>
+            <p>{movie.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/layout.js

@@ -0,0 +1,36 @@
+"use client";
+import { useState, useEffect } from "react";
+import "../App.css"; // global dark mode
+
+export default function RootLayout({ children }) {
+  const [darkMode, setDarkMode] = useState(true);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+    }
+  }, [darkMode]);
+
+  return (
+    <>
+      {/* Dark mode toggle button */}
+      <button
+        onClick={() => setDarkMode(!darkMode)}
+        style={{
+          position: "fixed",
+          top: 10,
+          right: 10,
+          zIndex: 1000,
+          padding: "5px 10px",
+          cursor: "pointer",
+        }}
+      >
+        {darkMode ? "Light Mode" : "Dark Mode"}
+      </button>
+
+      {children}
+    </>
+  );
+}

src/app/page.js

@@ -0,0 +1,25 @@
+import React from "react";
+import "./Home.css"; // adjust path if needed
+
+const movies = [
+  { id: 1, title: "Inception", poster: "https://via.placeholder.com/200x300?text=Inception", description: "Mind-bending thriller" },
+  { id: 2, title: "Interstellar", poster: "https://via.placeholder.com/200x300?text=Interstellar", description: "Epic space exploration" },
+  { id: 3, title: "The Dark Knight", poster: "https://via.placeholder.com/200x300?text=The+Dark+Knight", description: "Batman fights crime" }
+];
+
+export default function Home() {
+  return (
+    <div className="home-container">
+      <h1>Now Showing 🍿</h1>
+      <div className="movies-grid">
+        {movies.map((movie) => (
+          <div key={movie.id} className="movie-card">
+            <img src={movie.poster} alt={movie.title} />
+            <h2>{movie.title}</h2>
+            <p>{movie.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}