From 034f9fcc614c62a79aea808ed1c1ea847a2a8f12 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Wed, 26 Nov 2025 05:29:43 -0800
Subject: [PATCH] feat: update LandingPage content to focus on firmware
 building features and add benefits grid for enhanced user engagement

---
 src/pages/LandingPage.tsx | 56 +++++++++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 6c7d37a..70e9af8 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -36,14 +36,15 @@ export default function LandingPage() {
         <div className="text-center py-20 px-8">
           <h1 className="text-6xl md:text-7xl font-bold mb-6 leading-[1.1]">
             <span className="bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent inline-block pb-2">
-              Manage your Meshtastic fleet
+              Build firmware right from your bench
             </span>
           </h1>
-          <p className="text-xl md:text-2xl text-slate-400 max-w-2xl mx-auto mb-8">
-            Create custom profiles, build firmware in the cloud, and flash
-            directly from your browser.
+          <p className="text-xl md:text-2xl text-slate-400 max-w-2xl mx-auto mb-10">
+            Craft custom Meshtastic firmware in the cloud, flash from your
+            browser, and share your builds with the community.
           </p>
-          <div className="flex flex-wrap items-center justify-center gap-3">
+
+          <div className="flex flex-wrap items-center justify-center gap-3 mb-10">
             <Button
               onClick={() => navigate('/builds/new')}
               size="lg"
@@ -88,6 +89,51 @@ export default function LandingPage() {
               </Button>
             </Unauthenticated>
           </div>
+
+          {/* Benefits Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto mb-10">
+            <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-6 text-left">
+              <h3 className="text-lg font-semibold text-cyan-400 mb-2">
+                Zero Install
+              </h3>
+              <p className="text-slate-300 text-sm">
+                No downloads, no toolchains. Everything runs in your browser.
+              </p>
+            </div>
+            <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-6 text-left">
+              <h3 className="text-lg font-semibold text-cyan-400 mb-2">
+                Custom Firmware
+              </h3>
+              <p className="text-slate-300 text-sm">
+                Build bespoke Meshtastic firmware tailored to your exact needs.
+              </p>
+            </div>
+            <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-6 text-left">
+              <h3 className="text-lg font-semibold text-cyan-400 mb-2">
+                Community Extensions
+              </h3>
+              <p className="text-slate-300 text-sm">
+                Include community modules and extensions beyond core Meshtastic.
+              </p>
+            </div>
+            <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-6 text-left md:col-span-2 lg:col-span-1">
+              <h3 className="text-lg font-semibold text-cyan-400 mb-2">
+                Share & Remix
+              </h3>
+              <p className="text-slate-300 text-sm">
+                Publish your build profiles and let others remix your configs.
+              </p>
+            </div>
+            <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-6 text-left md:col-span-2 lg:col-span-2">
+              <h3 className="text-lg font-semibold text-cyan-400 mb-2">
+                Cloud Builds
+              </h3>
+              <p className="text-slate-300 text-sm">
+                Compile in the cloud, flash directly to your device—no local
+                setup required.
+              </p>
+            </div>
+          </div>
         </div>
 
         <main className="px-8 pb-8">