Wobble Card

"use client";
import { WobbleCard } from "@/lab/aceternity/ui/wobble-card";

const H2 = "text-left text-balance text-[clamp(0.8rem,2.6cqw,1.875rem)] font-semibold tracking-[-0.015em] text-white";
const P = "mt-[1.5cqh] text-left text-[clamp(0.6rem,1.5cqw,1rem)] leading-snug text-neutral-200";
const PAD = "px-[3cqw] py-[4cqh]";

export default function WobbleCardDemo() {
  return (
    <div className="relative h-full w-full p-[3cqw] [container-type:size]">
      <div className="mx-auto grid h-full w-full max-w-7xl grid-cols-3 grid-rows-2 gap-[2cqw]">
        <WobbleCard containerClassName="col-span-2 h-full bg-pink-800" className={PAD}>
          <div className="max-w-[55%]">
            <h2 className={H2}>Gippity AI powers the entire universe</h2>
            <p className={P}>
              With over 100,000 mothly active bot users, Gippity AI is the most popular AI platform
              for developers.
            </p>
          </div>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="https://ui.aceternity.com/linear.webp"
            width={500}
            height={500}
            alt="linear demo image"
            className="absolute -right-[25%] -bottom-[20%] w-[70%] rounded-2xl object-contain grayscale filter"
          />
        </WobbleCard>
        <WobbleCard containerClassName="col-span-1 h-full" className={PAD}>
          <h2 className={H2}>No shirt, no shoes, no weapons.</h2>
          <p className={P}>
            If someone yells “stop!”, goes limp, or taps out, the fight is over.
          </p>
        </WobbleCard>
        <WobbleCard containerClassName="col-span-3 h-full bg-blue-900" className={PAD}>
          <div className="max-w-[55%]">
            <h2 className={H2}>
              Signup for blazing-fast cutting-edge state of the art Gippity AI wrapper today!
            </h2>
            <p className={P}>
              With over 100,000 mothly active bot users, Gippity AI is the most popular AI platform
              for developers.
            </p>
          </div>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="https://ui.aceternity.com/linear.webp"
            width={500}
            height={500}
            alt="linear demo image"
            className="absolute -right-[5%] -bottom-[30%] w-[45%] rounded-2xl object-contain"
          />
        </WobbleCard>
      </div>
    </div>
  );
}