From 59e9468d234ccdbaa24ae76fae6d9c846ef53b3e Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Mon, 6 Jul 2026 18:29:07 +0200
Subject: [PATCH] Fade the YouTube section's black background in/out instead of
 a hard cut

Replaces the flat bg-neutral-950 with a gradient that's transparent at
the top/bottom edges and solid black through the middle, so the
section blends into the surrounding page background instead of
starting/ending abruptly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 hifi-src/src/pages/public/Home.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/hifi-src/src/pages/public/Home.jsx b/hifi-src/src/pages/public/Home.jsx
index c8a00ef..4adfd87 100644
--- a/hifi-src/src/pages/public/Home.jsx
+++ b/hifi-src/src/pages/public/Home.jsx
@@ -218,7 +218,10 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="relative overflow-hidden bg-neutral-950 py-20 sm:py-28">
+      <section
+        className="relative overflow-hidden py-20 sm:py-28"
+        style={{ backgroundImage: 'linear-gradient(to bottom, transparent, #0a0a0a 12%, #0a0a0a 88%, transparent)' }}
+      >
         <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-brand-500/25 blur-3xl" />
         <div className="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-brand-500/15 blur-3xl" />