Magic Card

"use client";

import { MagicCard } from "@/lab/magicui/ui/magic-card";

export default function MagicCardDemo() {
  return (
    <div className="@container relative flex h-full w-full flex-col gap-3 p-[5%] sm:flex-row">
      <MagicCard className="flex flex-1 cursor-pointer items-center justify-center rounded-xl" gradientColor="#D9D9D955">
        <div className="flex h-full items-center justify-center p-6 text-[clamp(1.5rem,5cqw,2.5rem)] font-semibold whitespace-nowrap text-neutral-950">
          Magic
        </div>
      </MagicCard>
      <MagicCard
        mode="orb"
        className="flex flex-1 cursor-pointer items-center justify-center rounded-xl"
      >
        <div className="flex h-full items-center justify-center p-6 text-[clamp(1.5rem,5cqw,2.5rem)] font-semibold whitespace-nowrap text-neutral-950">
          Card
        </div>
      </MagicCard>
    </div>
  );
}