[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="components/content-row.tsx" isQuickEdit="true" import { ChevronLeft, ChevronRight } from "lucide-react" import Image from "next/image" interface ContentRowProps { title: string } export default function ContentRow({ title }: ContentRowProps) { // Mock data for anime content const animeItems = [ { id: 1, title: "Solo Leveling", image: "/placeholder.svg?height=300&width=200&text=Solo+Leveling" }, { id: 2, title: "Demon Slayer", image: "/placeholder.svg?height=300&width=200&text=Demon+Slayer" }, { id: 3, title: "Jujutsu Kaisen", image: "/placeholder.svg?height=300&width=200&text=Jujutsu+Kaisen" }, { id: 4, title: "Attack on Titan", image: "/placeholder.svg?height=300&width=200&text=Attack+on+Titan" }, { id: 5, title: "One Piece", image: "/placeholder.svg?height=300&width=200&text=One+Piece" }, { id: 6, title: "My Hero Academia", image: "/placeholder.svg?height=300&width=200&text=My+Hero+Academia" }, { id: 7, title: "Chainsaw Man", image: "/placeholder.svg?height=300&width=200&text=Chainsaw+Man" }, { id: 8, title: "Spy x Family", image: "/placeholder.svg?height=300&width=200&text=Spy+x+Family" }, ] return (

{title}

{animeItems.map((item) => (

{item.title}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" export const metadata = { title: "SoraNusa - Anime Streaming Platform", description: "Watch the latest anime shows and movies", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 47 100% 50%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 47 100% 50%; } .dark { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 7%; --card-foreground: 0 0% 100%; --popover: 0 0% 7%; --popover-foreground: 0 0% 100%; --primary: 47 100% 50%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 13%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 20%; --muted-foreground: 0 0% 70%; --accent: 0 0% 13%; --accent-foreground: 0 0% 100%; --destructive: 0 100% 50%; --destructive-foreground: 0 0% 100%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 47 100% 50%; } body { @apply bg-background text-foreground; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #444; } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { Info, Play, Star, Calendar } from "lucide-react" import ContentRow from "@/components/content-row" import Header from "@/components/header" import { useState, useEffect } from "react" // Sample featured anime data const featuredAnime = [ { id: 1, title: "Solo Leveling", image: "/placeholder.svg?height=1080&width=1920&text=Solo+Leveling", year: "2024", rating: "8.6", votes: "947", description: "They say whatever doesn't kill you makes you stronger, but that's not the case for the world's weakest hunter Sung Jinwoo. After being brutally slaughtered by monsters in a high-ranking dungeon, Jinwoo came back with the System, a...", }, { id: 2, title: "Demon Slayer", image: "/placeholder.svg?height=1080&width=1920&text=Demon+Slayer", year: "2023", rating: "9.2", votes: "1243", description: "It is the Taisho Period in Japan. Tanjiro, a kindhearted boy who sells charcoal for a living, finds his family slaughtered by a demon. To make matters worse, his younger sister Nezuko, the sole survivor, has been transformed into a demon herself...", }, { id: 3, title: "Jujutsu Kaisen", image: "/placeholder.svg?height=1080&width=1920&text=Jujutsu+Kaisen", year: "2023", rating: "8.9", votes: "1089", description: "Yuji Itadori is a boy with tremendous physical strength, though he lives a completely ordinary high school life. One day, to save a classmate who has been attacked by curses, he eats the finger of Ryomen Sukuna, taking the curse into his own soul...", }, { id: 4, title: "Attack on Titan", image: "/placeholder.svg?height=1080&width=1920&text=Attack+on+Titan", year: "2022", rating: "9.5", votes: "2156", description: "Several hundred years ago, humans were nearly exterminated by Titans. Titans are typically several stories tall, seem to have no intelligence, devour human beings and, worst of all, seem to do it for pleasure rather than as a food source...", }, { id: 5, title: "One Piece", image: "/placeholder.svg?height=1080&width=1920&text=One+Piece", year: "2024", rating: "9.3", votes: "3254", description: "Gol D. Roger was known as the 'Pirate King,' the strongest and most infamous being to have sailed the Grand Line. The capture and execution of Roger by the World Government brought a change throughout the world...", }, ] export default function Home() { const [currentAnimeIndex, setCurrentAnimeIndex] = useState(0) const [isTransitioning, setIsTransitioning] = useState(false) // Auto-cycle through featured anime useEffect(() => { const interval = setInterval(() => { setIsTransitioning(true) setTimeout(() => { setCurrentAnimeIndex((prevIndex) => (prevIndex + 1) % featuredAnime.length) setIsTransitioning(false) }, 500) // Wait for fade out before changing content }, 8000) // Change every 8 seconds return () => clearInterval(interval) }, []) const currentAnime = featuredAnime[currentAnimeIndex] return (

{/* Disclaimer Banner */}

This site does not store any files on the server, we only linked to the media which is hosted on 3rd party services.

{/* Hero Section with Animation - smaller height */}

{/* Background Image with Overlay */}

{/* Content - positioned with padding-top to account for header */}

{currentAnime.rating} ({currentAnime.votes})

{currentAnime.year}

{currentAnime.title}

{currentAnime.description}

{/* Content Rows */}

) } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import Link from "next/link" import { Search, Moon, Sun, Shield, User } from "lucide-react" import { useState, useEffect } from "react" import { useTheme } from "next-themes" export default function Header() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) // After mounting, we can safely show the UI that depends on the theme useEffect(() => { setMounted(true) }, []) return (

{/* Logo */} SoraNusa {/* Search Bar */}

{/* Right side actions */}

{/* Theme Toggle */} {/* Legal Button (Shield) */} {/* Profile Button */}

) }