Anti-Gravity Bento

import { AntiGravityBento } from "@/components/community/demos/AntiGravityBento";

export default function Demo() {
  // Add your own custom text, images, or components inside this array to populate the bento
  const myCustomCards = [
    <div key="1" className="h-full w-full bg-[#111] rounded-xl p-4 flex flex-col justify-between">
      <span className="text-[#7fff5e] font-mono text-xs">CUSTOM CARD</span>
      <span className="text-white font-bold text-lg">My Content</span>
    </div>,
    <div key="2" className="h-full w-full bg-zinc-900 rounded-xl p-4 flex items-center justify-center">
      <span className="text-white/60 text-xs">Hover to see zero gravity!</span>
    </div>
  ];

  return (
    <div className="flex items-center justify-center p-12">
      <AntiGravityBento 
        width={400} 
        height={400} 
        items={myCustomCards}
      />
    </div>
  );
}