"use client";
import { motion } from "framer-motion";

export function PageTransition() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 15, filter: "blur(4px)" }}
      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      className="w-full max-w-sm h-64 flex flex-col items-center justify-center bg-[#0a0a0a] border border-dashed border-border rounded-xl p-8"
    >
      <h3 className="font-medium text-foreground mb-2">Content Loaded</h3>
      <p className="text-sm text-muted-foreground text-center">
        This box smoothly faded in, slid up, and removed its blur filter to create a premium entrance transition.
      </p>
    </motion.div>
  );
}