From 8653fd8d5e03ddf9112873f5e329cd06cec901f9 Mon Sep 17 00:00:00 2001
From: Eugene Mutembei <103780583+CodeWithEugene@users.noreply.github.com>
Date: Sun, 27 Sep 2026 10:20:34 +0300
Subject: [PATCH] fix(ui): center the footer brand column on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The logo, tagline, social icons and newsletter signup now read as a
centered stack below lg; the capped-width form is flex-centered and the
input text stays left-aligned. Desktop layout is untouched — every new
class carries an lg: reset.
---
 components/patterns/site-footer.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/patterns/site-footer.tsx b/components/patterns/site-footer.tsx
index e7d6180..7ee9b2f 100644
--- a/components/patterns/site-footer.tsx
+++ b/components/patterns/site-footer.tsx
@@ -63,7 +63,9 @@ export function SiteFooter() {
   return (
     <footer className="border-t border-ink/10 bg-paper">
       <div className="site-container grid grid-cols-2 gap-x-6 gap-y-10 pt-16 pb-12 lg:grid-cols-[1.7fr_1fr_1fr_1fr_1.3fr] lg:gap-8">
-        <div className="col-span-2 lg:col-span-1">
+        {/* Mobile: the brand column reads as a centered stack (logo, tagline,
+            socials, newsletter); lg restores the left-aligned first column. */}
+        <div className="col-span-2 text-center lg:col-span-1 lg:text-left">
           <Link href="/" aria-label="HackVillage home" className="inline-block">
             {/* eslint-disable-next-line @next/next/no-img-element -- animated brand lockup, no static/SVG source */}
             <img
@@ -72,11 +74,11 @@ export function SiteFooter() {
               className="h-10 w-auto rounded-control"
             />
           </Link>
-          <p className="mt-5 max-w-xs text-sm leading-6 text-body-copy">
+          <p className="mx-auto mt-5 max-w-xs text-sm leading-6 text-body-copy lg:mx-0">
             Open-source infrastructure for high-impact hackathons, built for the African developer
             community.
           </p>
-          <ul className="mt-6 flex items-center gap-5">
+          <ul className="mt-6 flex items-center justify-center gap-5 lg:justify-start">
             {SOCIAL_LINKS.map(({ label, href, Icon }) => (
               <li key={href}>
                 <a
@@ -98,7 +100,12 @@ export function SiteFooter() {
             <p className="mt-1 mb-3 text-xs text-body-copy">
               New hackathons and guides, straight to your inbox.
             </p>
-            <NewsletterForm tone="light" />
+            {/* The form is a capped-width block (340px) — flex centers it on
+                 mobile; text-left keeps the input placeholder from inheriting
+                 the column's centering. lg restores the plain block flow. */}
+            <div className="flex justify-center text-left lg:block">
+              <NewsletterForm tone="light" />
+            </div>
           </div>
         </div>