GlassCard

import { GlassmorphismCard } from "@/components/ui/glass-card";
import {TrendingUp, Bookmark, Star, ShoppingCart} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export default function DemoOne() {
  return (
    <div className="w-screen min-h-screen flex justify-center items-center bg-gradient-to-br from-blue-950 via-blue-800 to-cyan-400">
    <GlassmorphismCard variant="default" interactive>
        <div className="space-y-4">
          <div className="flex items-start justify-between">
            <Badge variant="secondary" className="bg-white/20 backdrop-blur-sm">
              New
            </Badge>
            <button className="rounded-lg p-2 hover:bg-white/10">
              <Bookmark className="size-4 text-white/80" />
            </button>
          </div>
          
          <div className="aspect-square rounded-lg bg-white/5 p-4">
            <img
              src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=300&fit=crop"
              alt="Product"
              className="h-full w-full object-contain"
            />
          </div>
          
          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-white/95">
              Premium Headphones
            </h3>
            <p className="text-sm text-white/60">Wireless • Noise Canceling</p>
            <div className="flex items-center gap-1">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="size-4 fill-yellow-400 text-yellow-400" />
              ))}
              <span className="ml-1 text-sm text-white/60">(128)</span>
            </div>
          </div>
          
          <div className="flex items-center justify-between">
            <span className="text-2xl font-bold text-white/95">$299</span>
            <Button
              size="sm"
              className="bg-white/10 backdrop-blur-sm hover:bg-white/20"
            >
              <ShoppingCart className="size-4" />
            </Button>
          </div>
        </div>
      </GlassmorphismCard>
      </div>
    )
}