Center Morph Modal

"use client";

import {
  CenterMorphModal,
  CenterMorphModalTrigger,
  CenterMorphModalContent,
} from "@/components/motion/center-morph-modal";

export default function Demo() {
  return (
    <CenterMorphModal>
      <CenterMorphModalTrigger>
        <button className="rounded-full bg-foreground px-5 py-2 text-sm text-background">
          Open modal
        </button>
      </CenterMorphModalTrigger>

      <CenterMorphModalContent ariaLabel="Viora UI Pro">
        <div className="p-8">
          <p className="text-sm font-medium text-muted-foreground">Viora UI Pro</p>
          <h2 className="mt-4 text-2xl font-medium text-foreground">Ship the whole experience.</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            Go beyond individual components with premium animated sections and complete Next.js templates.
          </p>
        </div>
      </CenterMorphModalContent>
    </CenterMorphModal>
  );
}