page.tsx

import Image from "next/image";
import { SparklesCore } from "@/components/ui/sparkles";
import Description from "@/components/Description";
import NFTForm from "@/components/Form";

export default function Home() {
  return (
    <>
    <div className="h-1/3 w-full  mt-5 lg:mt-10 bg-[primary] flex flex-col items-center justify-center overflow-hidden rounded-md">
      <h1 className="md:text-5xl text-3xl lg:text-8xl font-bold font-sans text-center relative z-20">
        Meta NFT
      </h1>
      <div className="w-[40rem] h-40 relative">
       
        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-red-500 to-transparent h-[2px] w-3/4 blur-sm" />
        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-red-500 to-transparent h-px w-3/4" />
        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-orange-500 to-transparent h-[5px] w-1/4 blur-sm" />
        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-orange-500 to-transparent h-px w-1/4" />
 
     
        <SparklesCore
          background="transparent"
          minSize={0.4}
          maxSize={2}
          particleDensity={1200}
          className="w-full h-full"
          particleColor="#ff2f00"
        />
 
      
        <div className="absolute inset-0 w-full h-full bg-background [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
      </div>
    </div>
  <Description />
  <NFTForm />
    </>
  );
}