src/app/page.tsx

import Footer from "@/components/footer";
import Header from "@/components/header";
import { SparklesCore } from "@/components/ui/sparkles";

export default function Home() {
  return (
    <div className="flex min-h-screen w-full flex-col">
      <Header />
      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 md:gap-8 md:p-10">
        <div className="h-[40rem] w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
          <h1 className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20">
            Aceternity
          </h1>
          <div className="w-[40rem] h-40 relative">
            {/* Gradients */}
            <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-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-indigo-500 to-transparent h-px w-3/4" />
            <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-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-sky-500 to-transparent h-px w-1/4" />

            {/* Core component */}
            <SparklesCore
              background="transparent"
              minSize={0.4}
              maxSize={1}
              particleDensity={1200}
              className="w-full h-full"
              particleColor="#FFFFFF"
            />

            {/* Radial Gradient to prevent sharp edges */}
            <div className="absolute inset-0 w-full h-full bg-black [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
          </div>
        </div>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
          obcaecati minus explicabo, corporis delectus. Debitis ipsam
          praesentium nam! Vero!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
          libero expedita maxime unde obcaecati doloremque eveniet, rerum
          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
          magni!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
          blanditiis atque sint totam consequatur! Consectetur illo quas rem
          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
          mollitia repellendus similique nulla dicta maiores, amet, quia quod
          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
          facilis vel voluptatem quis maiores minima ut, harum corrupti
          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
          cumque animi repellat enim voluptatibus quasi quas facilis atque.
          Sapiente molestiae praesentium fuga illum, numquam id, vero
          consequuntur, aut molestias magni veritatis dolores aperiam
          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
          accusantium cumque recusandae quisquam numquam expedita iste, veniam
          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
          obcaecati minus explicabo, corporis delectus. Debitis ipsam
          praesentium nam! Vero!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
          libero expedita maxime unde obcaecati doloremque eveniet, rerum
          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
          magni!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
          blanditiis atque sint totam consequatur! Consectetur illo quas rem
          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
          mollitia repellendus similique nulla dicta maiores, amet, quia quod
          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
          facilis vel voluptatem quis maiores minima ut, harum corrupti
          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
          cumque animi repellat enim voluptatibus quasi quas facilis atque.
          Sapiente molestiae praesentium fuga illum, numquam id, vero
          consequuntur, aut molestias magni veritatis dolores aperiam
          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
          accusantium cumque recusandae quisquam numquam expedita iste, veniam
          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
          obcaecati minus explicabo, corporis delectus. Debitis ipsam
          praesentium nam! Vero!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
          libero expedita maxime unde obcaecati doloremque eveniet, rerum
          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
          magni!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
          blanditiis atque sint totam consequatur! Consectetur illo quas rem
          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
          mollitia repellendus similique nulla dicta maiores, amet, quia quod
          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
          facilis vel voluptatem quis maiores minima ut, harum corrupti
          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
          cumque animi repellat enim voluptatibus quasi quas facilis atque.
          Sapiente molestiae praesentium fuga illum, numquam id, vero
          consequuntur, aut molestias magni veritatis dolores aperiam
          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
          accusantium cumque recusandae quisquam numquam expedita iste, veniam
          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
          obcaecati minus explicabo, corporis delectus. Debitis ipsam
          praesentium nam! Vero!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
          libero expedita maxime unde obcaecati doloremque eveniet, rerum
          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
          magni!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
          blanditiis atque sint totam consequatur! Consectetur illo quas rem
          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
          mollitia repellendus similique nulla dicta maiores, amet, quia quod
          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
          facilis vel voluptatem quis maiores minima ut, harum corrupti
          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
          cumque animi repellat enim voluptatibus quasi quas facilis atque.
          Sapiente molestiae praesentium fuga illum, numquam id, vero
          consequuntur, aut molestias magni veritatis dolores aperiam
          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
          accusantium cumque recusandae quisquam numquam expedita iste, veniam
          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
          obcaecati minus explicabo, corporis delectus. Debitis ipsam
          praesentium nam! Vero!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
          libero expedita maxime unde obcaecati doloremque eveniet, rerum
          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
          magni!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
          blanditiis atque sint totam consequatur! Consectetur illo quas rem
          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
          mollitia repellendus similique nulla dicta maiores, amet, quia quod
          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
          facilis vel voluptatem quis maiores minima ut, harum corrupti
          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
          cumque animi repellat enim voluptatibus quasi quas facilis atque.
          Sapiente molestiae praesentium fuga illum, numquam id, vero
          consequuntur, aut molestias magni veritatis dolores aperiam
          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
          accusantium cumque recusandae quisquam numquam expedita iste, veniam
          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
          obcaecati minus explicabo, corporis delectus. Debitis ipsam
          praesentium nam! Vero!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
          libero expedita maxime unde obcaecati doloremque eveniet, rerum
          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
          magni!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
          blanditiis atque sint totam consequatur! Consectetur illo quas rem
          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
          mollitia repellendus similique nulla dicta maiores, amet, quia quod
          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
          facilis vel voluptatem quis maiores minima ut, harum corrupti
          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
          cumque animi repellat enim voluptatibus quasi quas facilis atque.
          Sapiente molestiae praesentium fuga illum, numquam id, vero
          consequuntur, aut molestias magni veritatis dolores aperiam
          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
          accusantium cumque recusandae quisquam numquam expedita iste, veniam
          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
        </p>
      </main>
      <Footer />
    </div>
  );
}