From 4904109cee1963a4875351a213e667afa0ee72f3 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 22 Aug 2025 13:38:15 +1000
Subject: [PATCH] fix: mobile style improvements

---
 apps/www/components/SurveyResults/SurveyChapter.tsx        | 6 +++---
 apps/www/components/SurveyResults/SurveyChapterSection.tsx | 4 ++--
 apps/www/components/SurveyResults/SurveyChart.tsx          | 2 +-
 apps/www/pages/state-of-startups.tsx                       | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/www/components/SurveyResults/SurveyChapter.tsx b/apps/www/components/SurveyResults/SurveyChapter.tsx
index 5830c8211e2..dfee4367502 100644
--- a/apps/www/components/SurveyResults/SurveyChapter.tsx
+++ b/apps/www/components/SurveyResults/SurveyChapter.tsx
@@ -40,16 +40,16 @@ export function SurveyChapter({
             align={number % 2 === 0 ? 'start' : 'end'}
           />
           {/* Text content */}
-          <div className="max-w-[60rem] mx-auto grid gap-y-8 grid-cols-1 md:grid-cols-3 text-balance pb-12">
+          <div className="max-w-[60rem] mx-auto grid gap-y-4 sm:gap-y-8 grid-cols-1 md:grid-cols-3 text-balance pb-12">
             <div className="md:col-span-2 flex flex-col gap-4 px-8">
               <p className="text-sm text-brand-link uppercase font-mono text-balance tracking-wider">
                 {shortTitle}
               </p>
-              <h2 className="text-3xl md:text-4xl xl:text-6xl text-balance leading-tight tracking-tight">
+              <h2 className="text-4xl md:text-5xl xl:text-6xl text-balance leading-tight tracking-tight">
                 {title}
               </h2>
             </div>
-            <p className="md:col-span-2 md:col-start-2 text-lg xl:text-xl text-foreground text-balance px-8">
+            <p className="md:col-span-2 md:col-start-2 text-lg md:text-xl leading-relaxed text-foreground-light md:text-foreground text-balance px-8">
               {description}
             </p>
           </div>
diff --git a/apps/www/components/SurveyResults/SurveyChapterSection.tsx b/apps/www/components/SurveyResults/SurveyChapterSection.tsx
index ae9e3ba0b28..f834a8323d6 100644
--- a/apps/www/components/SurveyResults/SurveyChapterSection.tsx
+++ b/apps/www/components/SurveyResults/SurveyChapterSection.tsx
@@ -67,10 +67,10 @@ export function SurveyChapterSection({
     <div id={title.toLowerCase().replace(/\s+/g, '-')} className="">
       <div className="max-w-[60rem] mx-auto flex flex-col md:border-x border-muted">
         <header className="grid grid-cols-1 md:grid-cols-3 text-balance">
-          <h3 className="py-8 px-8 md:border-r border-muted text-brand-link dark:text-brand font-mono uppercase tracking-wider text-sm">
+          <h3 className="pt-8 pb-4 px-8 md:border-r border-muted text-brand-link dark:text-brand font-mono uppercase tracking-wider text-sm">
             {title}
           </h3>
-          <p className="py-8 px-8 md:col-span-2 text-foreground-light text-xl leading-relaxed">
+          <p className="pb-8 md:pt-8 px-8 md:col-span-2 text-foreground-light text-lg md:text-xl leading-relaxed">
             {description}
           </p>
         </header>
diff --git a/apps/www/components/SurveyResults/SurveyChart.tsx b/apps/www/components/SurveyResults/SurveyChart.tsx
index ac97a90b1ba..8322f5467f0 100644
--- a/apps/www/components/SurveyResults/SurveyChart.tsx
+++ b/apps/www/components/SurveyResults/SurveyChart.tsx
@@ -317,7 +317,7 @@ export function SurveyChart({
     >
       <header className="px-8 py-8">
         <p className="text-foreground/30 text-sm font-mono uppercase tracking-widest">Q&A</p>
-        <h3 className="text-foreground text-xl tracking-tight">{title}</h3>
+        <h3 className="text-foreground text-xl tracking-tight text-balance">{title}</h3>
       </header>
 
       <div>
diff --git a/apps/www/pages/state-of-startups.tsx b/apps/www/pages/state-of-startups.tsx
index e0b1ee40e92..6e617a23ecf 100644
--- a/apps/www/pages/state-of-startups.tsx
+++ b/apps/www/pages/state-of-startups.tsx
@@ -82,7 +82,7 @@ function StateOfStartupsPage() {
 
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
-  }, [pageData.pageChapters])
+  }, [])
 
   // Close ToC when clicking outside
   useEffect(() => {
@@ -242,7 +242,7 @@ function StateOfStartupsPage() {
 
             <SurveySectionBreak className="hidden md:block" />
 
-            <div className="grid grid-cols-1 md:grid-cols-3 max-w-[60rem] mx-auto border-x border-muted">
+            <div className="grid grid-cols-1 md:grid-cols-3 max-w-[60rem] mx-auto md:border-x border-muted">
               {/* Intro text */}
               <div className="md:col-span-2 flex flex-col gap-4 px-8 py-10 border-b md:border-b-0 md:border-r border-muted text-foreground text-xl md:text-2xl">
                 <p>{pageData.heroSection.subheader}</p>
@@ -348,7 +348,7 @@ const CTABanner = forwardRef<HTMLElement>((props, ref) => {
       className="flex flex-col items-center gap-4 px-4 py-32 text-center border-b border-muted"
       style={{
         background:
-          'radial-gradient(circle at center 280%, hsl(var(--brand-400)), transparent 70%)',
+          'radial-gradient(circle at center 220%, hsl(var(--brand-400)), transparent 70%)',
       }}
       ref={ref}
     >