From e845ed5a85fadec74d33405123d71fa381da50b4 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 10 Apr 2026 19:59:58 -0700
Subject: [PATCH] fix(website): remove fair comparison section and fix mobile
 alignment

- Remove FairComparisonSection from homepage
- WhitePaperSection: stack 2-col grid to single column on mobile,
  reduce padding from 48px/56px to 32px/24px
- ProblemSection: reduce section and gap card padding on mobile
- LibrariesSection: use min() in minmax to prevent card overflow
  on narrow viewports (375px)
- ChatFeaturesSection: reduce chat window height on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/website/src/app/page.tsx                 |  3 ---
 .../landing/ChatFeaturesSection.tsx           |  3 +++
 .../components/landing/LibrariesSection.tsx   |  2 +-
 .../src/components/landing/ProblemSection.tsx |  7 +++++-
 .../components/landing/WhitePaperSection.tsx  | 22 ++++++++++++++-----
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index f7eaac84a..4fdd64df7 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -8,7 +8,6 @@ import { StatsStrip } from '../components/landing/StatsStrip';
 import { ProblemSection } from '../components/landing/ProblemSection';
 import { LibrariesSection } from '../components/landing/LibrariesSection';
 import { ChatFeaturesSection } from '../components/landing/ChatFeaturesSection';
-import { FairComparisonSection } from '../components/landing/FairComparisonSection';
 import { WhitePaperSection } from '../components/landing/WhitePaperSection';
 import { HomePilotCTA } from '../components/landing/HomePilotCTA';
 import { tokens } from '../../lib/design-tokens';
@@ -41,8 +40,6 @@ export default async function HomePage() {
       {/* 7. Depth — capability showcases */}
       <LangGraphShowcase />
       <DeepAgentsShowcase />
-      {/* 8. Fair comparison — honest LangChain + Angular Agent Framework table */}
-      <FairComparisonSection />
       {/* 9. White paper free download */}
       <WhitePaperSection />
       {/* 10. Pilot program CTA */}
diff --git a/apps/website/src/components/landing/ChatFeaturesSection.tsx b/apps/website/src/components/landing/ChatFeaturesSection.tsx
index f02485e38..88e831ad6 100644
--- a/apps/website/src/components/landing/ChatFeaturesSection.tsx
+++ b/apps/website/src/components/landing/ChatFeaturesSection.tsx
@@ -448,6 +448,9 @@ export function ChatFeaturesSection() {
             gap: 16px !important;
             padding: 0 !important;
           }
+          .chat-features-grid > div:nth-child(2) {
+            height: 380px !important;
+          }
           #feat-left, #feat-right {
             flex-direction: row !important;
             flex-wrap: wrap !important;
diff --git a/apps/website/src/components/landing/LibrariesSection.tsx b/apps/website/src/components/landing/LibrariesSection.tsx
index 9cc213d4b..9da062bc2 100644
--- a/apps/website/src/components/landing/LibrariesSection.tsx
+++ b/apps/website/src/components/landing/LibrariesSection.tsx
@@ -75,7 +75,7 @@ export function LibrariesSection() {
       <div style={{
         maxWidth: 1000, margin: '0 auto',
         display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
         gap: 24,
       }}>
         {LIBRARIES.map((lib, i) => (
diff --git a/apps/website/src/components/landing/ProblemSection.tsx b/apps/website/src/components/landing/ProblemSection.tsx
index 78e80e046..a2c412f94 100644
--- a/apps/website/src/components/landing/ProblemSection.tsx
+++ b/apps/website/src/components/landing/ProblemSection.tsx
@@ -113,7 +113,7 @@ export function ProblemSection() {
   const showEnd = phase === 'done';
 
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="problem-section" style={{ padding: '80px 32px' }}>
       {/* Eyebrow + headline */}
       <motion.div
         initial={{ opacity: 0, y: 16 }}
@@ -205,6 +205,7 @@ export function ProblemSection() {
       {/* Gap animation */}
       <motion.div
         ref={triggerRef}
+        className="problem-gap-card"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -358,6 +359,10 @@ export function ProblemSection() {
       <style>{`
         @keyframes sr-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }
         @keyframes sr-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
+        @media (max-width: 767px) {
+          .problem-section { padding: 60px 20px !important; }
+          .problem-gap-card { padding: 24px 20px !important; }
+        }
       `}</style>
     </section>
   );
diff --git a/apps/website/src/components/landing/WhitePaperSection.tsx b/apps/website/src/components/landing/WhitePaperSection.tsx
index 86c7aef1b..d8aabd732 100644
--- a/apps/website/src/components/landing/WhitePaperSection.tsx
+++ b/apps/website/src/components/landing/WhitePaperSection.tsx
@@ -43,7 +43,24 @@ export function WhitePaperSection() {
 
   return (
     <section style={{ padding: '80px 32px' }}>
+      <style>{`
+        .wp-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 56px;
+          align-items: center;
+          padding: 48px 56px;
+        }
+        @media (max-width: 767px) {
+          .wp-grid {
+            grid-template-columns: 1fr;
+            gap: 32px;
+            padding: 32px 24px;
+          }
+        }
+      `}</style>
       <motion.div
+        className="wp-grid"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -57,11 +74,6 @@ export function WhitePaperSection() {
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
           border: `1px solid ${tokens.glass.border}`,
           boxShadow: tokens.glass.shadow,
-          padding: '48px 56px',
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
-          gap: 56,
-          alignItems: 'center',
         }}
       >
         {/* Left — form / soft gate */}