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)

This commit is contained in:
root
2026-06-19 00:55:42 +02:00
parent a98a358978
commit 7ddfbcc3ce
+30
View File
@@ -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>
);
}