Evervault Card

"use client";
import React from "react";
import { EvervaultCard, Icon } from "@/lab/aceternity/ui/evervault-card";
import { Fit } from "./_fit";

export default function EvervaultCardDemo() {
  return (
    <Fit width={440} height={540} max={1.3}>
      <div className="flex h-full w-full items-center justify-center">
        <div className="border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start w-96 mx-auto p-4 relative h-[30rem]">
          <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
          <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
          <Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
          <Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />

          <EvervaultCard text="hover" />

          <h2 className="dark:text-white text-black mt-4 text-sm font-light">
            Hover over this card to reveal an awesome effect. Running out of copy here.
          </h2>
          <p className="text-sm border font-light dark:border-white/[0.2] border-black/[0.2] rounded-full mt-4 text-black dark:text-white px-2 py-0.5">
            Watch me hover
          </p>
        </div>
      </div>
    </Fit>
  );
}