Untitled

'use client'

import '@/app/globals.css'
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { ArrowRight } from 'lucide-react'


export default function BlackDotGridBackground() {
  return (
    <div className="relative min-h-screen w-full bg-black overflow-hidden">
      {/* Dot grid background with radial gradient */}
      <div 
        className="absolute inset-0"
        style={{
          backgroundImage: `
            radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.25) 1.3px, transparent 0)
          `,
          backgroundSize: '32px 32px',
          maskImage: 'radial-gradient(circle at 50% 50%, black 30%, transparent 70%)',
          WebkitMaskImage: 'radial-gradient(circle at 50% 50%, black 30%, transparent 70%)',
        }}
      />

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center">
        <div className="container mx-auto p-8 mt-32 text-white text-center">
          <h1 className="text-3xl font-bold mb-8">
            Describe My Letterboxd Taste
          </h1>

          <div className="relative w-full max-w-sm mx-auto">
            <Input
              type="text"
              placeholder="Insert Your Letterboxd Profile"
              className="h-10 pl-4 pr-12 text-white placeholder:text-white/60 rounded-full bg-gradient-to-r from-[#0fb137] to-[#00c030] border-0 focus-visible:ring-2 focus-visible:ring-white/20"
            />
            <Button
              size="icon"
              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-transparent hover:bg-white/10"
            >
              <ArrowRight className="h-4 w-4 text-white" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}