From 2ea849d6226bb1f808f1c7ae6393e54de797dbcc Mon Sep 17 00:00:00 2001
From: Graham McIntie <graham@mcintire.me>
Date: Sat, 14 Feb 2026 13:06:54 -0600
Subject: [PATCH] feat: add developer and product links to marketing footer

---
 .../components/marketing_layouts.ex           | 98 +++++++++++++++----
 1 file changed, 78 insertions(+), 20 deletions(-)

diff --git a/lib/towerops_web/components/marketing_layouts.ex b/lib/towerops_web/components/marketing_layouts.ex
index f00cbabf..4c58e3de 100644
--- a/lib/towerops_web/components/marketing_layouts.ex
+++ b/lib/towerops_web/components/marketing_layouts.ex
@@ -70,26 +70,84 @@ defmodule ToweropsWeb.MarketingLayouts do
           <div class="py-16">
             <img src="/images/towerops_logo.png" alt="Towerops" class="mx-auto w-48 h-auto sm:w-64" />
           </div>
-          <div class="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
-            <div class="flex gap-x-6"></div>
-            <div class="flex flex-col items-center gap-2 sm:items-start">
-              <p class="text-sm text-slate-500">
-                Copyright © {Date.utc_today().year} Towerops
-              </p>
-              <div class="flex gap-x-4 text-xs text-slate-500">
-                <.link
-                  navigate={~p"/privacy"}
-                  class="hover:text-slate-700 underline decoration-dotted underline-offset-2"
-                >
-                  Privacy Policy
-                </.link>
-                <span>·</span>
-                <.link
-                  navigate={~p"/terms"}
-                  class="hover:text-slate-700 underline decoration-dotted underline-offset-2"
-                >
-                  Terms of Service
-                </.link>
+          <div class="grid grid-cols-1 gap-8 border-t border-slate-400/10 py-10 lg:grid-cols-4">
+            <!-- Product Column -->
+            <div>
+              <h3 class="text-sm font-semibold text-slate-900 mb-4">Product</h3>
+              <ul class="space-y-3">
+                <li>
+                  <.link
+                    href="/#features"
+                    class="text-sm text-slate-600 hover:text-slate-900 transition-colors"
+                  >
+                    Features
+                  </.link>
+                </li>
+                <li>
+                  <.link
+                    href="/#pricing"
+                    class="text-sm text-slate-600 hover:text-slate-900 transition-colors"
+                  >
+                    Pricing
+                  </.link>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Developers Column -->
+            <div>
+              <h3 class="text-sm font-semibold text-slate-900 mb-4">Developers</h3>
+              <ul class="space-y-3">
+                <li>
+                  <.link
+                    navigate={~p"/docs/api"}
+                    class="text-sm text-slate-600 hover:text-slate-900 transition-colors"
+                  >
+                    API Documentation
+                  </.link>
+                </li>
+                <li>
+                  <.link
+                    navigate={~p"/docs/graphql"}
+                    class="text-sm text-slate-600 hover:text-slate-900 transition-colors"
+                  >
+                    GraphQL API
+                  </.link>
+                </li>
+                <li>
+                  <.link
+                    navigate={~p"/help"}
+                    class="text-sm text-slate-600 hover:text-slate-900 transition-colors"
+                  >
+                    Help & Docs
+                  </.link>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Copyright and Legal -->
+            <div class="lg:col-span-2">
+              <div class="flex flex-col items-start gap-4 sm:flex-row sm:justify-between sm:items-end">
+                <div class="flex flex-col gap-2">
+                  <p class="text-sm text-slate-500">
+                    Copyright © {Date.utc_today().year} Towerops
+                  </p>
+                  <div class="flex gap-x-4 text-xs text-slate-500">
+                    <.link
+                      navigate={~p"/privacy"}
+                      class="hover:text-slate-700 underline decoration-dotted underline-offset-2"
+                    >
+                      Privacy Policy
+                    </.link>
+                    <span>·</span>
+                    <.link
+                      navigate={~p"/terms"}
+                      class="hover:text-slate-700 underline decoration-dotted underline-offset-2"
+                    >
+                      Terms of Service
+                    </.link>
+                  </div>
+                </div>
               </div>
             </div>
           </div>