[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/hero-slider.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" export default function HeroSlider() { const [currentSlide, setCurrentSlide] = useState(0) const slides = [ { id: 1, image: "/placeholder.svg?height=500&width=1200", alt: "Game promotion 1", }, { id: 2, image: "/placeholder.svg?height=500&width=1200", alt: "Game promotion 2", }, { id: 3, image: "/placeholder.svg?height=500&width=1200", alt: "Game promotion 3", }, ] useEffect(() => { const interval = setInterval(() => { setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1)) }, 5000) return () => clearInterval(interval) }, [slides.length]) return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "GameZone - Game Top-ups & Digital Goods", description: "Get the best deals on game top-ups, gift cards, and digital goods for your favorite games.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 262.1 83.3% 57.8%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 262.1 83.3% 57.8%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 262.1 83.3% 57.8%; --primary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 262.1 83.3% 57.8%; } body { @apply bg-background text-foreground; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, 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)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/game-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { Star } from "lucide-react" import { Badge } from "@/components/ui/badge" interface GameCardProps { image: string title: string price?: string originalPrice?: string discount?: number rating?: number reviews?: number isNew?: boolean } export default function GameCard({ image, title, price = "$9.99", originalPrice, discount, rating = 4.5, reviews = 128, isNew = false, }: GameCardProps) { return (

{discount && -{discount}%} {isNew && New}

{title}

{rating}

| {reviews} reviews

{price} {originalPrice && {originalPrice}}

) } [V0_FILE]typescriptreact:file="components/category-card.tsx" isMerged="true" import type { ReactNode } from "react" import Link from "next/link" interface CategoryCardProps { icon: ReactNode title: string count: number } export default function CategoryCard({ icon, title, count }: CategoryCardProps) { return (

{icon}

{title}

{count} items

) } [V0_FILE]typescriptreact:file="components/promo-card.tsx" isMerged="true" import { Button } from "@/components/ui/button" interface PromoCardProps { title: string description: string buttonText: string bgColor: string } export default function PromoCard({ title, description, buttonText, bgColor }: PromoCardProps) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Facebook, Twitter, Instagram, Youtube, Mail, Phone, MapPin, CreditCard, Shield, Truck } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/space-background.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface Star { x: number y: number size: number opacity: number speed: number } export default function SpaceBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas to full screen const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Create stars const stars: Star[] = [] const starCount = Math.floor((window.innerWidth * window.innerHeight) / 1000) for (let i = 0; i < starCount; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2, opacity: Math.random() * 0.8 + 0.2, speed: Math.random() * 0.05 + 0.01, }) } // Animation loop const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw stars stars.forEach((star) => { ctx.beginPath() ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2) ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})` ctx.fill() // Move stars star.y += star.speed // Reset stars that go off screen if (star.y > canvas.height) { star.y = 0 star.x = Math.random() * canvas.width } }) requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) } }, []) return (

{title}

{title}

{title}

Cosmic Collection

{item.name}

{slides[currentSlide].title}

TikTok Coins →

TikTok Coins Packages

Popular TikTok Gifts

Flash Deals

Categories →

Top Ups →

Gift Cards →

Best Sellers →