Text Reveal Card

"use client";
import {
  TextRevealCard,
  TextRevealCardDescription,
  TextRevealCardTitle,
} from "@/lab/aceternity/ui/text-reveal-card";

export default function TextRevealCardPreview() {
  return (
    <div className="relative flex h-full w-full items-center justify-center bg-[#0E0E10] p-[4%]">
      <TextRevealCard
        text="You know the business"
        revealText="I know the chemistry "
        className="w-full max-w-[40rem] p-[clamp(1rem,4%,2rem)]"
      >
        <TextRevealCardTitle className="text-[clamp(0.8rem,3cqw,1.125rem)]">
          Sometimes, you just need to see it.
        </TextRevealCardTitle>
        <TextRevealCardDescription className="text-[clamp(0.65rem,2.2cqw,0.875rem)]">
          This is a text reveal card. Hover over the card to reveal the hidden text.
        </TextRevealCardDescription>
      </TextRevealCard>
    </div>
  );
}