Background Gradient

"use client";
import React from "react";
import { BackgroundGradient } from "@/lab/aceternity/ui/background-gradient";
import { Fit } from "./_fit";

export default function BackgroundGradientDemo() {
  return (
    <Fit width={460} height={740} max={1.2}>
      <div className="flex h-full w-full items-center justify-center">
        <BackgroundGradient className="rounded-[22px] max-w-sm p-10 bg-white dark:bg-zinc-900">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="https://ui.aceternity.com/jordans.webp"
            alt="jordans"
            height="400"
            width="400"
            className="object-contain"
          />
          <p className="text-xl text-black mt-4 mb-2 dark:text-neutral-200">
            Air Jordan 4 Retro Reimagined
          </p>

          <p className="text-sm text-neutral-600 dark:text-neutral-400">
            The Air Jordan 4 Retro Reimagined Bred will release on Saturday, February 17, 2024. Your
            best opportunity to get these right now is by entering raffles and waiting for the
            official releases.
          </p>
          <button className="rounded-full pl-4 pr-1 py-1 text-white flex items-center space-x-1 bg-black mt-4 text-xs font-bold dark:bg-zinc-800">
            <span>Buy now </span>
            <span className="bg-zinc-700 rounded-full text-[0.6rem] px-2 py-0 text-white">$100</span>
          </button>
        </BackgroundGradient>
      </div>
    </Fit>
  );
}