Glow Hover Card

"use client";

import Component from "@/components/ui/glow-hover-card";

const CARD = (title: string, body: string) => (
  <div className="flex h-full flex-col justify-between p-6">
    <p className="font-semibold text-foreground text-sm">{title}</p>
    <p className="mt-3 text-muted-foreground text-xs leading-relaxed">{body}</p>
  </div>
);

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-2xl">
        <Component
          items={[
            {
              element: CARD(
                "Spring physics",
                "Interruptible motion that keeps its momentum when the target changes."
              ),
              id: "1",
            },
            {
              element: CARD(
                "Reduced motion",
                "Every component checks the preference before it animates anything."
              ),
              id: "2",
            },
            {
              element: CARD(
                "Compositor only",
                "Transform and opacity, so the main thread stays free."
              ),
              id: "3",
            },
          ]}
        />
      </div>
    </div>
  );
}