feat: Add browser extension download card on home page — links to GitHub, shows v2.4.0 feature badges (Prayer Grid, Countdown, Day Progress, Souq, XP)

src/app/page.tsx

@@ -350,6 +350,36 @@ export default function HomePage() {
           </div>
         </div>
       )}
+
+      {/* Browser Extension Card */}
+      <div className="mx-4 mt-5 mb-6">
+        <a
+          href="https://github.com/maifors/falah-extension"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block bg-gradient-to-br from-sky-900/15 via-[#111118] to-indigo-900/20 border border-sky-700/25 rounded-2xl p-5 active:scale-[0.98] transition-all"
+        >
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <div className="w-9 h-9 rounded-xl bg-sky-900/30 flex items-center justify-center">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-sky-400"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-white">Falah Browser Extension</h3>
+                <p className="text-xs text-gray-500">v2.4.0 — Chrome Extension</p>
+              </div>
+            </div>
+            <ChevronRight size={16} className="text-sky-600" />
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <span className="text-[10px] px-2 py-1 rounded-full bg-amber-900/30 text-amber-300 border border-amber-700/30">🕌 Prayer Grid</span>
+            <span className="text-[10px] px-2 py-1 rounded-full bg-orange-900/30 text-orange-300 border border-orange-700/30">⏱ Live Countdown</span>
+            <span className="text-[10px] px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-300 border border-emerald-700/30">🌱 Day Progress</span>
+            <span className="text-[10px] px-2 py-1 rounded-full bg-[#D4AF37]/15 text-[#D4AF37] border border-[#D4AF37]/30">🛍️ Souq Mini-Feed</span>
+            <span className="text-[10px] px-2 py-1 rounded-full bg-purple-900/30 text-purple-300 border border-purple-700/30">⭐ XP & Level</span>
+          </div>
+        </a>
+      </div>
     </div>
   );
 }