feat: add HeroSection and PixelBlast components

Author: monkeyWie

app/[lang]/(home)/page.tsx

@@ -5,6 +5,7 @@ import {
   Features,
   Footer,
   Hero,
+  HeroSection,
   Navbar,
 } from "@/components/home";
 import { getAppData } from "@/lib/data";
@@ -44,8 +45,12 @@ export default async function HomePage() {
         <div className="absolute bottom-0 left-0 w-[600px] h-[400px] bg-primary-900/20 rounded-full blur-3xl opacity-20 animate-pulse-slow" />
       </div>
 
-      <Navbar version={appData.version} stars={appData.stars} />
-      <Hero version={appData.version} releaseAssets={appData.releaseAssets} />
+      {/* PixelBlast covers Navbar + Hero together */}
+      <HeroSection>
+        <Navbar version={appData.version} stars={appData.stars} />
+        <Hero version={appData.version} releaseAssets={appData.releaseAssets} />
+      </HeroSection>
+
       <Features />
       <Extensions />
       <Downloads

components/home/Features.tsx

@@ -48,7 +48,7 @@ export function Features() {
   ];
 
   return (
-    <section id="features" className="relative py-20 overflow-hidden">
+    <section id="features" className="relative pt-0 pb-20 overflow-hidden">
       {/* Background Decoration */}
       <div className="absolute inset-0 bg-gradient-grid bg-[length:50px_50px] opacity-5 dark:opacity-10" />
 

components/home/HeroSection.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { PixelBlast } from "./PixelBlast";
+
+export function HeroSection({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener("resize", check, { passive: true });
+    return () => window.removeEventListener("resize", check);
+  }, []);
+
+  const pixelColor = resolvedTheme === "dark" ? "#79C476" : "#5fa05c";
+  const pixelSize = isMobile ? 5 : 3;
+  const patternDensity = isMobile ? 0.72 : 0.88;
+  const edgeFade = isMobile ? 0.42 : 0.28;
+
+  return (
+    // pb-24 absorbs the visual gap between Hero and Features so the
+    // PixelBlast canvas covers it — no bleed needed, no z-index fights.
+    <div className="relative pb-44">
+      {/* PixelBlast: strictly inside this container. Only rendered after
+          hydration to prevent the SSR white-flash. */}
+      {mounted && (
+        <PixelBlast
+          color={pixelColor}
+          variant="circle"
+          pixelSize={pixelSize}
+          patternScale={2.5}
+          patternDensity={patternDensity}
+          speed={0.4}
+          edgeFade={edgeFade}
+          enableRipples={true}
+          rippleIntensityScale={1.1}
+          rippleSpeed={0.3}
+          rippleThickness={0.12}
+          transparent={true}
+        />
+      )}
+
+      {/* Hero content */}
+      <div className="relative z-10">{children}</div>
+
+      {/* Bottom fade — purely inside the section, never touches Features.
+          Tailwind dark: avoids any JS-driven hydration colour flash. */}
+      <div className="absolute bottom-0 left-0 right-0 h-44 pointer-events-none z-20 bg-gradient-to-b from-transparent to-white dark:to-gray-950" />
+    </div>
+  );
+}