From ecfac46a2511e3b3dfac155d9114730e4c1a778d Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 13 Apr 2026 16:45:05 -0700
Subject: [PATCH] fix(website): add mobile responsive padding and sizing to
 home page sections

- PilotSolution: reduce padding to 60px 20px on mobile
- TheStack: reduce section and card padding on mobile
- PilotFooterCTA: responsive heading size with clamp(), reduced vertical padding
- WhitePaperSection: reduce outer section padding on mobile

All breakpoints use existing 767px convention.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/website/src/components/landing/PilotFooterCTA.tsx | 10 +++++++++-
 apps/website/src/components/landing/PilotSolution.tsx  |  7 ++++++-
 apps/website/src/components/landing/TheStack.tsx       |  9 ++++++++-
 .../src/components/landing/WhitePaperSection.tsx       |  3 ++-
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/components/landing/PilotFooterCTA.tsx b/apps/website/src/components/landing/PilotFooterCTA.tsx
index 03a27be32..99eb0e9b0 100644
--- a/apps/website/src/components/landing/PilotFooterCTA.tsx
+++ b/apps/website/src/components/landing/PilotFooterCTA.tsx
@@ -21,8 +21,15 @@ export function PilotFooterCTA() {
         padding: '0 2rem',
       }}
     >
-      <style>{`.pilot-footer-secondary-btn:hover { border-color: rgba(255,255,255,0.6) !important; }`}</style>
+      <style>{`
+        .pilot-footer-secondary-btn:hover { border-color: rgba(255,255,255,0.6) !important; }
+        @media (max-width: 767px) {
+          .pilot-footer-inner { padding-top: 4rem !important; padding-bottom: 4rem !important; }
+          .pilot-footer-heading { font-size: clamp(28px, 6vw, 42px) !important; }
+        }
+      `}</style>
       <motion.div
+        className="pilot-footer-inner"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -53,6 +60,7 @@ export function PilotFooterCTA() {
         {/* Heading */}
         <h2
           id="pilot-footer-cta-heading"
+          className="pilot-footer-heading"
           style={{
             fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
             fontSize: '42px',
diff --git a/apps/website/src/components/landing/PilotSolution.tsx b/apps/website/src/components/landing/PilotSolution.tsx
index a17a700ba..43b0bae12 100644
--- a/apps/website/src/components/landing/PilotSolution.tsx
+++ b/apps/website/src/components/landing/PilotSolution.tsx
@@ -23,7 +23,12 @@ const STEPS = [
 
 export function PilotSolution() {
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="pilot-solution" style={{ padding: '80px 32px' }}>
+      <style>{`
+        @media (max-width: 767px) {
+          .pilot-solution { padding: 60px 20px !important; }
+        }
+      `}</style>
       <motion.div
         initial={{ opacity: 0, y: 16 }}
         whileInView={{ opacity: 1, y: 0 }}
diff --git a/apps/website/src/components/landing/TheStack.tsx b/apps/website/src/components/landing/TheStack.tsx
index 276d636f6..38f06ef1c 100644
--- a/apps/website/src/components/landing/TheStack.tsx
+++ b/apps/website/src/components/landing/TheStack.tsx
@@ -57,7 +57,13 @@ function Connector({ fromRgb, toRgb }: { fromRgb: string; toRgb: string }) {
 
 export function TheStack() {
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="the-stack" style={{ padding: '80px 32px' }}>
+      <style>{`
+        @media (max-width: 767px) {
+          .the-stack { padding: 60px 20px !important; }
+          .the-stack-card { padding: 24px 20px 20px !important; }
+        }
+      `}</style>
       <motion.div
         initial={{ opacity: 0, y: 16 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -109,6 +115,7 @@ export function TheStack() {
               />
             )}
             <motion.div
+              className="the-stack-card"
               initial={{ opacity: 0, y: 24 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
diff --git a/apps/website/src/components/landing/WhitePaperSection.tsx b/apps/website/src/components/landing/WhitePaperSection.tsx
index d8aabd732..d778aadc0 100644
--- a/apps/website/src/components/landing/WhitePaperSection.tsx
+++ b/apps/website/src/components/landing/WhitePaperSection.tsx
@@ -42,7 +42,7 @@ export function WhitePaperSection() {
   };
 
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="wp-section" style={{ padding: '80px 32px' }}>
       <style>{`
         .wp-grid {
           display: grid;
@@ -52,6 +52,7 @@ export function WhitePaperSection() {
           padding: 48px 56px;
         }
         @media (max-width: 767px) {
+          .wp-section { padding: 60px 20px !important; }
           .wp-grid {
             grid-template-columns: 1fr;
             gap: 32px;