Grid Cards

import { motion } from "motion/react";
import { User } from "@phosphor-icons/react";

function GenerateButton() {
  return (
    <motion.button
      className="
        relative flex shrink-0 items-center gap-2 overflow-hidden
        rounded-full px-6 py-4
        bg-gradient-to-b from-sky-300/90 to-sky-500/90
        text-[14px] font-semibold text-white
        shadow-[0_0_18px_2px_rgba(56,189,248,0.35)]
      "
      animate={{
        boxShadow: [
          "0 0 18px 2px rgba(56,189,248,0.35)",
          "0 0 28px 6px rgba(56,189,248,0.5)",
          "0 0 18px 2px rgba(56,189,248,0.35)",
        ],
      }}
      transition={{ duration: 2.4, repeat: Infinity, ease: "easeInOut" }}
    >
      Generate
      <span className="flex items-center gap-0.5 rounded-full bg-white/20 px-1.5 py-0.5 text-[11px] font-medium">
        Enter
        <svg
          width="10"
          height="10"
          viewBox="0 0 10 10"
          fill="none"
          className="opacity-80"
        >
          <path
            d="M8 2v3.5H2.5M2.5 5.5 1 7l1.5 1.5"
            stroke="currentColor"
            strokeWidth="1.3"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </span>
    </motion.button>
  );
}

const MESSAGE_PARTS = [
  { text: "Hey, Can you help ", highlight: false },
  { text: "me improve", highlight: true },
  { text: " the ", highlight: false },
  { text: "membership signup flow", highlight: true },
  { text: " with an ", highlight: false },
  { text: "extra step?", highlight: true },
];

function MessageBubble() {
  return (
    <div className="rounded-2xl bg-white/[0.06] px-5 py-4 ring-1 ring-white/[0.09]">
      <p className="text-left text-[15px] leading-7 text-white/40">
        {MESSAGE_PARTS.map((part, i) =>
          part.highlight ? (
            <span key={i} className="font-semibold text-white">
              {part.text}
            </span>
          ) : (
            <span key={i}>{part.text}</span>
          ),
        )}
      </p>
    </div>
  );
}

function InputRow() {
  return (
    <div className="mt-3 flex items-center justify-between rounded-full bg-white/[0.04] pr-2 py-2 pl-5 ring-1 ring-white/[0.08]">
      <span className="text-[14px] text-white/20 line-clamp-1">
        Ask anything
      </span>
      <GenerateButton />
    </div>
  );
}

function AiCard() {
  return (
    <div className="absolute inset-x-6 top-8 z-10">
      <div className="mb-3 flex justify-end">
        <div className="flex size-12 items-center justify-center rounded-full bg-white/[0.07] ring-1 ring-white/10">
          <User weight="duotone" size={20} className="text-white/50" />
        </div>
      </div>

      <MessageBubble />
      <InputRow />
    </div>
  );
}

export default AiCard;