Spotlight-hover magic card

"use client"

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { MagicCard } from "@/components/magicui/magic-card"

export function MagicCardDemo() {
  const { theme } = useTheme()
  return (
    <Card className="w-full max-w-sm border-none p-0 shadow-none">
      <MagicCard gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"} className="p-0">
        <CardHeader className="border-border border-b p-4">
          <CardTitle>Sign in</CardTitle>
          <CardDescription>Enter your details to continue</CardDescription>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="name@example.com" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" type="password" />
            </div>
          </div>
        </CardContent>
        <CardFooter className="border-border border-t p-4">
          <Button className="w-full">Sign in</Button>
        </CardFooter>
      </MagicCard>
    </Card>
  )
}