[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color scheme for cinematic streaming app theme */ --background: oklch(0.11 0 0); /* #1c1c1c - Dark cinematic background */ --foreground: oklch(1 0 0); /* #ffffff - White text */ --card: oklch(0.16 0 0); /* #2a2a2a - Card backgrounds */ --card-foreground: oklch(1 0 0); /* #ffffff - Text on cards */ --popover: oklch(0.29 0 0); /* #4b5563 - Popover backgrounds */ --popover-foreground: oklch(1 0 0); /* #ffffff - Text on popovers */ --primary: oklch(0.65 0.15 35); /* #ea580c - Orange accent for CTAs */ --primary-foreground: oklch(1 0 0); /* #ffffff - Text on primary buttons */ --secondary: oklch(0.29 0 0); /* #4b5563 - Secondary elements */ --secondary-foreground: oklch(1 0 0); /* #ffffff - Text on secondary elements */ --muted: oklch(0.16 0 0); /* #2a2a2a - Muted backgrounds */ --muted-foreground: oklch(0.7 0 0); /* Muted text */ --accent: oklch(0.65 0.15 35); /* #ea580c - Orange accent */ --accent-foreground: oklch(1 0 0); /* #ffffff - Text on accent elements */ --destructive: oklch(0.6 0.2 25); /* Red for errors */ --destructive-foreground: oklch(1 0 0); /* White text on destructive */ --border: oklch(0.29 0 0); /* #4b5563 - Borders */ --input: oklch(0.16 0 0); /* #2a2a2a - Input backgrounds */ --ring: oklch(0.65 0.15 35); /* #ea580c - Focus rings */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; /* Slightly reduced radius for modern look */ --sidebar: oklch(0.11 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.65 0.15 35); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.16 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.29 0 0); --sidebar-ring: oklch(0.65 0.15 35); } .dark { /* Dark mode uses same colors since we're already dark-themed */ --background: oklch(0.11 0 0); --foreground: oklch(1 0 0); --card: oklch(0.16 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.29 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(0.65 0.15 35); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.29 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.16 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.65 0.15 35); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.29 0 0); --input: oklch(0.16 0 0); --ring: oklch(0.65 0.15 35); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.11 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.65 0.15 35); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.16 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.29 0 0); --sidebar-ring: oklch(0.65 0.15 35); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", weight: ["400", "700"], }) export const metadata: Metadata = { title: "Cine Go - Premium Streaming Experience", description: "Discover and stream your favorite movies and shows", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}>{children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Header } from "@/components/header" import { HeroSection } from "@/components/hero-section" import { MovieCarousel } from "@/components/movie-carousel" import { SearchSection } from "@/components/search-section" export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/header.tsx" import { Search, User, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function Header() { return (

{/* Logo */}

Cine Go

{/* Navigation */}

{/* Right side actions */}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Play, Info } from "lucide-react" import { Button } from "@/components/ui/button" export function HeroSection() { return (

{/* Background Image */}

{/* Content */}

The Dark Knight

When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.

PG-13 2008 2h 32m Action, Crime, Drama

) } [V0_FILE]typescriptreact:file="components/search-section.tsx" import { Search, Filter } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function SearchSection() { return (

{/* Search Bar */}

{/* Filter Options */}

Action Comedy Drama Horror Sci-Fi 2024 2023 2022 2021 2020 9+ IMDb 8+ IMDb 7+ IMDb 6+ IMDb

) } [V0_FILE]typescriptreact:file="components/movie-carousel.tsx" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight, Play, Plus, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" interface MovieCarouselProps { title: string category: string } // Mock movie data const movieData = { trending: [ { id: 1, title: "Inception", year: "2010", rating: "8.8", image: "sci-fi movie poster with layered reality" }, { id: 2, title: "Interstellar", year: "2014", rating: "8.6", image: "space exploration movie poster" }, { id: 3, title: "The Matrix", year: "1999", rating: "8.7", image: "cyberpunk action movie poster" }, { id: 4, title: "Blade Runner 2049", year: "2017", rating: "8.0", image: "futuristic noir movie poster" }, { id: 5, title: "Dune", year: "2021", rating: "8.0", image: "epic sci-fi desert movie poster" }, ], action: [ { id: 6, title: "Mad Max: Fury Road", year: "2015", rating: "8.1", image: "post-apocalyptic action movie poster" }, { id: 7, title: "John Wick", year: "2014", rating: "7.4", image: "stylish action thriller movie poster" }, { id: 8, title: "Mission Impossible", year: "2018", rating: "7.7", image: "spy action movie poster" }, { id: 9, title: "The Raid", year: "2011", rating: "7.6", image: "martial arts action movie poster" }, { id: 10, title: "Heat", year: "1995", rating: "8.3", image: "crime action movie poster" }, ], drama: [ { id: 11, title: "The Shawshank Redemption", year: "1994", rating: "9.3", image: "prison drama movie poster" }, { id: 12, title: "Forrest Gump", year: "1994", rating: "8.8", image: "life story drama movie poster" }, { id: 13, title: "The Godfather", year: "1972", rating: "9.2", image: "classic mafia drama movie poster" }, { id: 14, title: "Schindler's List", year: "1993", rating: "9.0", image: "historical drama movie poster" }, { id: 15, title: "12 Years a Slave", year: "2013", rating: "8.1", image: "historical drama movie poster" }, ], comedy: [ { id: 16, title: "The Grand Budapest Hotel", year: "2014", rating: "8.1", image: "whimsical comedy movie poster" }, { id: 17, title: "Superbad", year: "2007", rating: "7.6", image: "teen comedy movie poster" }, { id: 18, title: "Anchorman", year: "2004", rating: "7.2", image: "comedy movie poster" }, { id: 19, title: "The Big Lebowski", year: "1998", rating: "8.1", image: "cult comedy movie poster" }, { id: 20, title: "Groundhog Day", year: "1993", rating: "8.0", image: "time loop comedy movie poster" }, ], } export function MovieCarousel({ title, category }: MovieCarouselProps) { const [scrollPosition, setScrollPosition] = useState(0) const movies = movieData[category as keyof typeof movieData] || [] const scroll = (direction: "left" | "right") => { const container = document.getElementById(`carousel-${category}`) if (container) { const scrollAmount = 320 const newPosition = direction === "left" ? Math.max(0, scrollPosition - scrollAmount) : Math.min(container.scrollWidth - container.clientWidth, scrollPosition + scrollAmount) container.scrollTo({ left: newPosition, behavior: "smooth" }) setScrollPosition(newPosition) } } return (

{title}

{movies.map((movie) => (

{/* Hover overlay */}

{movie.title}

{movie.year}

{movie.rating}

))}

) } [V0_FILE]png:file="public/dramatic-movie-scene.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dramatic-movie-scene-QFOslKoEk2i0LyqBVwhSDjH027drTC.png" [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }