From a91246692954fa624494c372688d60a1f4792ee7 Mon Sep 17 00:00:00 2001
From: Eugene Mutembei <103780583+CodeWithEugene@users.noreply.github.com>
Date: Sun, 27 Sep 2026 10:09:03 +0300
Subject: [PATCH] fix(ui): mobile layout for trust section and footer

- Center the trust-impact content (eyebrow, heading, copy, CTA) below 1024px
- Footer: Contact Us now sits beside Get Started on mobile instead of
  spanning the full width (left/right pair in the 2-column grid)
- Guard the half-width contact column: email wraps anywhere it must, and
  the Salamander logo can never overflow the column
- Bottom bar: Terms/Privacy links drop to their own centered row below
  'Apache-2.0 licensed' on mobile; xl layout flows inline as before
---
 app/globals.css                     |  6 +++++
 components/patterns/site-footer.tsx | 41 +++++++++++++++++------------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 88dcf67..3c2eab5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -851,6 +851,12 @@
       grid-column: 1;
       grid-row: auto;
     }
+    /* Mobile reads as a stacked, centered story: eyebrow, heading, copy and
+       CTA all align to the middle instead of hugging the left edge. */
+    .trust-impact-content {
+      align-items: center;
+      text-align: center;
+    }
     .trust-impact-visual {
       width: min(100%, 460px);
       margin-inline: auto;
diff --git a/components/patterns/site-footer.tsx b/components/patterns/site-footer.tsx
index 56eb370..e7d6180 100644
--- a/components/patterns/site-footer.tsx
+++ b/components/patterns/site-footer.tsx
@@ -117,13 +117,15 @@ export function SiteFooter() {
           </nav>
         ))}
 
-        <div className="col-span-2 lg:col-span-1">
+        {/* Mobile: sits beside "Get Started" (left/right in the 2-col grid);
+            lg: the fifth column of the footer row. */}
+        <div className="min-w-0 lg:col-span-1">
           <h2 className="font-display text-base font-semibold text-ink">Contact Us</h2>
           <ul className="mt-5 space-y-3">
             <li>
               <a
                 href={`mailto:${CONTACT_EMAIL}`}
-                className={`flex items-center gap-2.5 ${LINK_CLASS}`}
+                className={`flex items-center gap-2.5 [overflow-wrap:anywhere] ${LINK_CLASS}`}
               >
                 <Mail aria-hidden className="size-4 shrink-0 text-brand" />
                 {CONTACT_EMAIL}
@@ -151,7 +153,7 @@ export function SiteFooter() {
             <img
               src="/images/salamander-logo-yellow.svg"
               alt="Salamander Tech Hub"
-              className="h-9 w-auto"
+              className="h-9 w-auto max-w-full"
             />
           </a>
         </div>
@@ -173,20 +175,25 @@ export function SiteFooter() {
             Creation.
           </p>
           <p className="xl:justify-self-end">
-            Apache-2.0 licensed |{" "}
-            <Link
-              href="/terms"
-              className="text-ink-soft underline underline-offset-2 hover:text-ink"
-            >
-              Terms of Service
-            </Link>{" "}
-            |{" "}
-            <Link
-              href="/privacy"
-              className="text-ink-soft underline underline-offset-2 hover:text-ink"
-            >
-              Privacy Policy
-            </Link>
+            Apache-2.0 licensed
+            {/* Mobile: legal links drop to their own centered row below the
+                license line; xl: they flow inline exactly as before. */}
+            <span className="mt-1.5 block xl:mt-0 xl:inline">
+              {" | "}
+              <Link
+                href="/terms"
+                className="text-ink-soft underline underline-offset-2 hover:text-ink"
+              >
+                Terms of Service
+              </Link>
+              {" | "}
+              <Link
+                href="/privacy"
+                className="text-ink-soft underline underline-offset-2 hover:text-ink"
+              >
+                Privacy Policy
+              </Link>
+            </span>
           </p>
         </div>
       </div>