[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Navbar from "@/components/navbar" import Footer from "@/components/footer" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Nebula Brush - Text to Nebula Image Generator", description: "Generate beautiful nebula images from text descriptions", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], 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 }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, glow: { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.6 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", float: "float 6s ease-in-out infinite", glow: "glow 3s ease-in-out infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="lib/utils.ts"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

--primary: 25 95% 53%;
    --primary-foreground: 0 0% 98%;

--secondary: 0 0% 20%;
    --secondary-foreground: 0 0% 98%;

--muted: 0 0% 15%;
    --muted-foreground: 0 0% 64.9%;

--accent: 25 95% 53%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 15.9%;
    --input: 0 0% 15.9%;
    --ring: 25 95% 53%;

--radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    scroll-behavior: smooth;
  }
}

.space-bg {
  background-color: #000000;
  background-image: radial-gradient(#ffd700, rgba(255, 215, 0, 0.2) 2px, transparent 40px),
    radial-gradient(#ffd700, rgba(255, 215, 0, 0.15) 1px, transparent 30px),
    radial-gradient(#ffd700, rgba(255, 215, 0, 0.1) 2px, transparent 40px),
    radial-gradient(rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

.glow-text {
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3);
}

.nebula-card {
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

/* Parallax styles */
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
}

[V0_FILE]typescriptreact:file="components/parallax.tsx" isQuickEdit="true"
"use client"

import { useEffect, useRef, type ReactNode, useCallback } from "react"
import { cn } from "@/lib/utils"

interface ParallaxProps {
  children: ReactNode
  speed?: number
  className?: string
  direction?: "up" | "down"
  offset?: number
}

export function ParallaxLayer({ children, speed = 0.5, className, direction = "up", offset = 0 }: ParallaxProps) {
  const ref = useRef<HTMLDivElement>(null)
  const scrollPosition = useRef(0)
  const requestRef = useRef<number>()

const animate = useCallback(() => {
    if (!ref.current) return

const currentScroll = window.scrollY
    if (currentScroll !== scrollPosition.current) {
      scrollPosition.current = currentScroll
      const yPos = direction === "up" ? currentScroll * speed + offset : currentScroll * -speed + offset

ref.current.style.transform = `translate3d(0, ${yPos}px, 0)`
    }
    requestRef.current = requestAnimationFrame(animate)
  }, [direction, offset, speed])

useEffect(() => {
    requestRef.current = requestAnimationFrame(animate)
    return () => {
      if (requestRef.current) {
        cancelAnimationFrame(requestRef.current)
      }
    }
  }, [animate])

return (
    <div ref={ref} className={cn("will-change-transform", className)}>
      {children}
    </div>
  )
}

export function ParallaxContainer({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return <div className={cn("relative overflow-hidden", className)}>{children}</div>
}

[V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        nebula:
          "bg-gradient-to-r from-yellow-400 to-yellow-600 text-white shadow-lg shadow-yellow-500/20 hover:shadow-yellow-500/40 transition-all duration-300 hover:-translate-y-1",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
  },
)
Button.displayName = "Button"

export { Button, buttonVariants }

[V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true"
import Link from "next/link"
import { SpaceIcon as Galaxy } from "lucide-react"

export default function Navbar() {
  return (
    <header className="sticky top-0 z-50 w-full border-b border-orange-900/20 backdrop-blur-lg">
      <div className="container flex h-16 items-center justify-between">
        <Link href="/" className="flex items-center space-x-2">
          <Galaxy className="h-6 w-6 text-yellow-400" />
          <span className="text-xl font-bold text-white">Nebula Brush</span>
        </Link>
        <nav className="flex items-center space-x-6">
          <Link href="/" className="text-sm font-medium text-white/70 transition-colors hover:text-yellow-400">
            Home
          </Link>
          <Link href="/about" className="text-sm font-medium text-white/70 transition-colors hover:text-yellow-400">
            About
          </Link>
          <Link
            href="/generate"
            className="rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-yellow-500/20 transition-all hover:shadow-yellow-500/40 hover:-translate-y-1"
          >
            Generate
          </Link>
        </nav>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true"
import Link from "next/link"
import { SpaceIcon as Galaxy, Github, Twitter } from "lucide-react"

export default function Footer() {
  return (
    <footer className="border-t border-orange-900/20 bg-black/50 py-6">
      <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
        <div className="flex items-center gap-2">
          <Galaxy className="h-5 w-5 text-yellow-400" />
          <span className="text-sm font-medium text-white">Nebula Brush</span>
        </div>
        <p className="text-center text-sm text-white/60 md:text-left">
          © {new Date().getFullYear()} Nebula Brush. All rights reserved.
        </p>
        <div className="flex items-center gap-4">
          <Link href="https://github.com" className="text-white/60 hover:text-yellow-400">
            <Github className="h-5 w-5" />
            <span className="sr-only">GitHub</span>
          </Link>
          <Link href="https://twitter.com" className="text-white/60 hover:text-yellow-400">
            <Twitter className="h-5 w-5" />
            <span className="sr-only">Twitter</span>
          </Link>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowRight, Sparkles, Zap, ImageIcon } from "lucide-react"
import { ParallaxContainer, ParallaxLayer } from "@/components/parallax"
import { NebulaScene } from "@/components/nebula-scene"

export default function Home() {
  return (
    <div className="bg-black">
    <div className="absolute inset-0">
          <NebulaScene />
    </div>
      {/* Hero Section with Parallax */}
      <ParallaxContainer className="relative h-[100vh] overflow-hidden">
        <ParallaxLayer speed={0.2} className="z-0">
          <div className="absolute inset-0 space-bg opacity-50"></div>
        </ParallaxLayer>

<div className="container relative z-20 flex h-full flex-col items-center justify-center">
          <div className="animate-float space-y-4">
            <h1 className="glow-text text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
              <span className="bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text text-transparent">
                Nebula Brush
              </span>
            </h1>
            <p className="mx-auto max-w-[700px] text-xl text-white/70">
              Transform your words into stunning nebula images with our AI-powered text-to-image generator
            </p>
          </div>
          <div className="mt-8 flex flex-col gap-4 sm:flex-row">
            <Button asChild variant="nebula" size="lg">
              <Link href="/generate" className="rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-yellow-500/20 transition-all hover:shadow-yellow-500/40 hover:-translate-y-1">
                Start Creating
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/about">Learn More</Link>
            </Button>
          </div>
        </div>
      </ParallaxContainer>

{/* Features Section with Parallax */}
      <ParallaxContainer className="relative py-24">
        <ParallaxLayer speed={0.3} className="z-0">
          <div className="absolute inset-0 space-bg opacity-30"></div>
        </ParallaxLayer>

<div className="container relative z-10">
          <h2 className="mb-12 text-center text-3xl font-bold text-white">
            <span className="bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text text-transparent">
              Features
            </span>
          </h2>
          <div className="grid gap-8 md:grid-cols-3">
            <div className="nebula-card rounded-lg p-6 transition-transform duration-300 hover:-translate-y-2">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-500/20">
                <Sparkles className="h-6 w-6 text-yellow-400" />
              </div>
              <h3 className="mb-2 text-xl font-bold text-white">AI-Powered</h3>
              <p className="text-white/70">
                Cutting-edge AI technology transforms your text descriptions into stunning nebula images
              </p>
            </div>
            <div className="nebula-card rounded-lg p-6 transition-transform duration-300 hover:-translate-y-2">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-500/20">
                <Zap className="h-6 w-6 text-yellow-400" />
              </div>
              <h3 className="mb-2 text-xl font-bold text-white">Fast Generation</h3>
              <p className="text-white/70">
                Get your nebula images in seconds, no waiting around for complex rendering
              </p>
            </div>
            <div className="nebula-card rounded-lg p-6 transition-transform duration-300 hover:-translate-y-2">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-500/20">
                <ImageIcon className="h-6 w-6 text-yellow-400" />
              </div>
              <h3 className="mb-2 text-xl font-bold text-white">High Quality</h3>
              <p className="text-white/70">Beautiful, high-resolution nebula images perfect for creative projects</p>
            </div>
          </div>
        </div>
      </ParallaxContainer>

{/* Image Showcase with Parallax */}
      <ParallaxContainer className="relative overflow-hidden py-24">
        <ParallaxLayer speed={0.4} className="z-0">
          <div className="absolute inset-0 bg-gradient-to-b from-black via-gray-900 to-black"></div>
        </ParallaxLayer>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[1, 2, 3, 4, 5, 6].map((item) => (
              <div key={item} className="group overflow-hidden rounded-lg">
                <div className="relative h-64 overflow-hidden">
                  <Image
                    src={`/placeholder.svg?height=300&width=400`}
                    alt={`Nebula example ${item}`}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
                  <div className="absolute bottom-0 left-0 right-0 p-4 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                    <h3 className="text-lg font-bold">Cosmic Wonder #{item}</h3>
                    <p className="text-sm text-white/70">Created with Nebula Brush</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </ParallaxContainer>

{/* CTA Section with Parallax */}
      <ParallaxContainer className="relative py-24">
        <ParallaxLayer speed={0.2} className="z-0">
          <div className="absolute inset-0 space-bg opacity-40"></div>
        </ParallaxLayer>

<div className="container relative z-10">
          <div className="nebula-card mx-auto max-w-4xl rounded-lg p-12 text-center">
            <h2 className="mb-4 text-3xl font-bold text-white">Ready to create your own nebula?</h2>
            <p className="mb-8 text-lg text-white/70">
              Start generating beautiful cosmic art with just a text description
            </p>
            <Button asChild variant="nebula" size="lg">
              <Link href="/generate" className="rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-yellow-500/20 transition-all hover:shadow-yellow-500/40 hover:-translate-y-1">
                Create Now
              </Link>
            </Button>
          </div>
        </div>
      </ParallaxContainer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Github, Twitter, Mail, ArrowRight } from "lucide-react"
import { ParallaxContainer, ParallaxLayer } from "@/components/parallax"

export default function AboutPage() {
  return (
    <div className="bg-black">
      <ParallaxContainer className="relative min-h-screen">
        <ParallaxLayer speed={0.2} className="z-0">
          <div className="absolute inset-0 space-bg opacity-30"></div>
        </ParallaxLayer>
        <ParallaxLayer speed={0.4} direction="down" className="z-0">
          <div className="absolute top-1/4 right-1/4 h-48 w-48 rounded-full bg-orange-500/10 blur-3xl"></div>
          <div className="absolute bottom-1/3 left-1/3 h-64 w-64 rounded-full bg-gray-500/10 blur-3xl"></div>
        </ParallaxLayer>

<div className="container relative z-10 py-16 md:py-24">
          <div className="mx-auto max-w-4xl">
            <h1 className="mb-6 text-center text-4xl font-bold text-white md:text-5xl">
              <span className="bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text text-transparent">
                About Nebula Brush
              </span>
            </h1>

<div className="nebula-card mb-16 rounded-lg p-8">
              <p className="mb-6 text-lg text-white/80">
                Nebula Brush is an innovative text-to-image generator specifically designed to create stunning nebula
                and space-themed images. Our tool uses advanced AI to transform your text descriptions into beautiful
                cosmic art.
              </p>
              <p className="mb-6 text-lg text-white/80">
                Whether you're a digital artist, space enthusiast, or just looking for unique visuals, Nebula Brush
                provides an easy way to generate custom nebula images for your projects.
              </p>
              <p className="text-lg text-white/80">
                Our mission is to make the beauty of the cosmos accessible to everyone through the power of AI and
                creative technology.
              </p>
            </div>

<h2 className="mb-8 text-center text-3xl font-bold text-white">
              <span className="bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text text-transparent">
                Meet the Developer
              </span>
            </h2>

<div className="flex-1 text-center md:text-left">
                <h3 className="mb-2 text-2xl font-bold text-white">Shivam Patel</h3>
                <p className="mb-4 text-yellow-400">Founder & Developer</p>

<p className="mb-6 text-white/80">
                  Shivam is a passionate developer with expertise in AI and image generation technologies. With a
                  background in computer science and a love for astronomy, he created Nebula Brush to combine
                  cutting-edge AI with the beauty of cosmic imagery.
                </p>

<div className="flex flex-wrap justify-center gap-4 md:justify-start">
                  <Link
                    href="https://github.com"
                    className="flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/20"
                  >
                    <Github className="h-4 w-4" />
                    GitHub
                  </Link>
                  <Link
                    href="https://twitter.com"
                    className="flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/20"
                  >
                    <Twitter className="h-4 w-4" />
                    Twitter
                  </Link>
                  <Link
                    href="mailto:contact@example.com"
                    className="flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/20"
                  >
                    <Mail className="h-4 w-4" />
                    Contact
                  </Link>
                </div>
              </div>
            </div>

<div className="text-center">
              <Button asChild variant="nebula" size="lg">
                <Link href="/generate" className="rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-yellow-500/20 transition-all hover:shadow-yellow-500/40 hover:-translate-y-1">
                  Try Nebula Brush
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </ParallaxContainer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/generate/page.tsx" isQuickEdit="true"
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Sparkles } from "lucide-react"
import { ParallaxContainer, ParallaxLayer } from "@/components/parallax"

export default function GeneratePage() {
  const [isLoaded, setIsLoaded] = useState(false)

return (
    <div style={{ backgroundColor: "rgb(12, 15, 24)" }}>
      <ParallaxContainer className="relative min-h-screen">
        <ParallaxLayer speed={0.2} className="z-0">
          <div className="absolute inset-0 space-bg opacity-30"></div>
        </ParallaxLayer>

<div className="container relative z-10 py-16 md:py-24">
          <div className="mx-auto max-w-4xl">
            <h1 className="mb-6 text-center text-4xl font-bold text-white md:text-5xl">
              <span className="bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent">
                Generate Nebula Images
              </span>
            </h1>

<p className="mb-12 text-center text-lg text-white/70">
              Describe the nebula you want to create, and our AI will generate it for you.
            </p>

{/* Hugging Face Space iframe with top & bottom 50px hidden */}
            <div className="relative w-full h-[500px] rounded-lg overflow-hidden border border-orange-500/20 shadow-lg shadow-orange-500/10">
              {!isLoaded && (
                <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50">
                  <Sparkles className="h-12 w-12 animate-spin text-orange-400" />
                  <p className="mt-4 text-white">Loading AI Generator...</p>
                </div>
              )}

<div className="relative w-full h-full overflow-hidden" style={{ clipPath: "inset(50px 0px 50px 0px)" }}>
                <iframe
                  src="https://agents-course-text-to-image.hf.space"
                  width="100%"
                  height="700px"
                  className="relative w-full h-full overflow-hidden"
                  style={{ border: "none" }}
                  scrolling="no"
                  allowFullScreen
                  onLoad={() => setIsLoaded(true)}
                />
              </div>
            </div>

<div className="mt-6 flex justify-center">
              <Button variant="nebula" onClick={() => window.location.reload()}>
                Reload Generator
              </Button>
            </div>
          </div>
        </div>
      </ParallaxContainer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/nebula-scene.tsx"
"use client"

import { Canvas } from "@react-three/fiber"
import { OrbitControls, Stars } from "@react-three/drei"
import { EffectComposer, Bloom } from "@react-three/postprocessing"

export function NebulaScene() {
  return (
    <div className="h-screen w-full">
      <Canvas camera={{ position: [0, 0, 3] }}>
        <color attach="background" args={["#000000"]} />
        <ambientLight intensity={0.5} />
        <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />