From 40b6fd3cfc48fd63af118ee504916f1431ed1d9f Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Sun, 20 Sep 2026 22:00:52 +0700
Subject: [PATCH] =?UTF-8?q?feat(home):=20Aceternity=20hero=20=E2=80=94=20S?=
 =?UTF-8?q?potlight,=20SparklesCore,=20Cover,=20MagneticButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace create-next-app boilerplate home with a signature Aceternity hero:
- Spotlight glow top-left, SparklesCore particle field background
- Cover underlines 'animated UI out of the box'
- MagneticButton on the gallery CTA (href=/ui)
- Staggered fade-up entry via motion/react
Full gate: lint/typecheck/build/test/format green.
---
 app/page.tsx             | 75 ++--------------------------------------
 components/home-hero.tsx | 68 ++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 73 deletions(-)
 create mode 100644 components/home-hero.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 704ce16..10d71d3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,76 +1,5 @@
-import Image from "next/image";
-import Link from "next/link";
+import { HomeHero } from "@/components/home-hero";
 
 export default function Home() {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex w-full max-w-3xl flex-1 flex-col items-center justify-between bg-white px-16 py-32 sm:items-start dark:bg-black">
-        <Image
-          className="h-5 w-[100px] dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl leading-10 font-semibold tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-          <Link
-            href="/demo"
-            className="rounded-full border border-black/[.08] bg-foreground px-5 py-2 text-sm font-medium text-background transition-colors hover:bg-[#383838] dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
-          >
-            View the demo wiring →
-          </Link>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] md:w-[158px] dark:hover:bg-[#ccc]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="h-[14px] w-4 dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] md:w-[158px] dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+  return <HomeHero />;
 }
diff --git a/components/home-hero.tsx b/components/home-hero.tsx
new file mode 100644
index 0000000..02afbec
--- /dev/null
+++ b/components/home-hero.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "motion/react";
+import { Cover } from "@/components/ui/cover";
+import { MagneticButton } from "@/components/ui/magnetic-button";
+import { SparklesCore } from "@/components/ui/sparkles";
+import { Spotlight } from "@/components/ui/spotlight";
+
+export function HomeHero() {
+  return (
+    <div className="relative flex w-full flex-1 flex-col items-center justify-center overflow-hidden bg-zinc-50 antialiased dark:bg-black">
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" fill="white" />
+      </div>
+
+      {/* Sparkles fill the hero background */}
+      <div className="absolute inset-0 z-0 h-full w-full">
+        <SparklesCore
+          id="home-sparkles"
+          background="transparent"
+          minSize={0.6}
+          maxSize={1.4}
+          particleDensity={60}
+          particleColor="#71717a"
+          className="h-full w-full"
+        />
+      </div>
+
+      <motion.main
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.7, ease: "easeOut" }}
+        className="relative z-10 flex w-full max-w-4xl flex-col items-center gap-8 px-6 py-24 text-center"
+      >
+        <span className="rounded-full border border-zinc-200 bg-white/70 px-3 py-1 text-xs font-medium tracking-wide text-zinc-500 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-400">
+          Next.js 16 · Tailwind v4 · motion · 50+ Aceternity components
+        </span>
+
+        <h1 className="max-w-3xl text-4xl leading-tight font-semibold tracking-tight text-zinc-900 sm:text-6xl dark:text-white">
+          A template that ships with <Cover>animated UI out of the box.</Cover>
+        </h1>
+
+        <p className="max-w-xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
+          Aceternity components vendored as source, Tailwind v4 native, zero-warning lint. Every
+          effect below is live — build a landing page without starting from scratch.
+        </p>
+
+        <div className="flex flex-wrap items-center justify-center gap-4">
+          <Link href="/ui" passHref>
+            <MagneticButton strength={0.5} maxDistance={60}>
+              <span className="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200">
+                Browse the gallery
+                <span aria-hidden>→</span>
+              </span>
+            </MagneticButton>
+          </Link>
+          <Link
+            href="/demo"
+            className="inline-flex items-center gap-2 rounded-full border border-zinc-300 px-6 py-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-900"
+          >
+            View the demo wiring
+          </Link>
+        </div>
+      </motion.main>
+    </div>
+  );
+}