Direction Aware Hover

"use client";
import { DirectionAwareHover } from "@/lab/aceternity/ui/direction-aware-hover";
import { Fit } from "./_fit";

export default function DirectionAwareHoverDemo() {
  const imageUrl =
    "https://images.unsplash.com/photo-1663765970236-f2acfde22237?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3";
  return (
    <Fit width={460} height={460} max={1.4}>
      <div className="h-full relative flex items-center justify-center">
        <DirectionAwareHover imageUrl={imageUrl} className="h-96 w-96 md:h-96 md:w-96">
          <p className="font-bold text-xl">In the mountains</p>
          <p className="font-normal text-sm">$1299 / night</p>
        </DirectionAwareHover>
      </div>
    </Fit>
  );
}