From f43a0e2dfa24973774f73aea6fa01c1ea98de42f Mon Sep 17 00:00:00 2001
From: Shekhar <shekhar.vaidya2@hotmail.com>
Date: Fri, 10 Apr 2026 23:18:22 +0530
Subject: [PATCH] perf: replace heavy blur-3xl filter with css radial gradient
 to maximize mobile lighthouse score

---
 frontend/src/pages/HomePage.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 3c38a2b..d41e4f0 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -70,8 +70,11 @@ export default function HomePage() {
   return (
     <div className="max-w-4xl mx-auto px-5 pt-20 pb-16 relative" style={{ overflowX: 'hidden' }}>
 
-      {/* Ambient glow — fixed so it never affects document layout/scroll */}
-      <div className="fixed top-0 left-1/2 -translate-x-1/2 w-[700px] h-[300px] bg-blue-500/6 rounded-full blur-3xl pointer-events-none -z-10" />
+      {/* Ambient glow — radial-gradient used over blur-3xl to optimize Mobile Lighthouse (Speed Index bypass) */}
+      <div 
+        className="fixed top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] pointer-events-none -z-10" 
+        style={{ background: 'radial-gradient(ellipse at center, rgba(59,130,246,0.10) 0%, transparent 60%)' }}
+      />
 
       {/* Hero */}
       <motion.div