From 7e5dec7d10b7271e5fa661fdd5a4614838c7124a Mon Sep 17 00:00:00 2001
From: brandonkachen <brandonchenjiacheng@gmail.com>
Date: Thu, 25 Sep 2025 15:58:27 -0700
Subject: [PATCH 1/4] fix(web): change hero section from fixed height to
 min-height to prevent IDE demo cutoff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change Section component to use minHeight instead of height when fullViewport is true.
This ensures the hero section maintains minimum viewport height but can expand
to accommodate IDE demo content, preventing cutoff on smaller screens.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
---
 web/src/components/ui/section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/ui/section.tsx b/web/src/components/ui/section.tsx
index fa23689cd9..59f8fc51c4 100644
--- a/web/src/components/ui/section.tsx
+++ b/web/src/components/ui/section.tsx
@@ -58,7 +58,7 @@ export function Section({
       className={cn('relative overflow-hidden', className)}
       initial={false}
       animate={{
-        height: fullViewport && !isMobile ? '95svh' : 'auto',
+        minHeight: fullViewport && !isMobile ? '95svh' : 'auto',
       }}
       transition={{
         duration: 1,

From 663faaeb0163c09427b57407e8c0dee59be90b71 Mon Sep 17 00:00:00 2001
From: brandonkachen <brandonchenjiacheng@gmail.com>
Date: Thu, 25 Sep 2025 16:26:01 -0700
Subject: [PATCH 2/4] fix(web): remove overflow-hidden and add bottom padding
 to prevent IDE demo cutoff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed overflow-hidden from Section component and added bottom padding
to hero container to ensure IDE demo content is fully visible.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
---
 web/src/app/page.tsx              | 2 +-
 web/src/components/ui/section.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index a8c4c18cd6..da9dd3530d 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -106,7 +106,7 @@ export default function Home() {
       <Section background={SECTION_THEMES.hero.background} hero fullViewport>
         <div
           className={cn(
-            'codebuff-container h-full flex flex-col transition-all duration-1000'
+            'codebuff-container min-h-full flex flex-col transition-all duration-1000 pb-8'
           )}
         >
           <div className={cn('w-full mb-8 md:mb-12 flex-shrink-0')}>
diff --git a/web/src/components/ui/section.tsx b/web/src/components/ui/section.tsx
index 59f8fc51c4..53f7dec8cd 100644
--- a/web/src/components/ui/section.tsx
+++ b/web/src/components/ui/section.tsx
@@ -55,10 +55,10 @@ export function Section({
 
   return (
     <motion.section
-      className={cn('relative overflow-hidden', className)}
+      className={cn('relative', className)}
       initial={false}
       animate={{
-        minHeight: fullViewport && !isMobile ? '95svh' : 'auto',
+        minHeight: fullViewport ? '95dvh' : 'auto',
       }}
       transition={{
         duration: 1,

From 4306b117b81795cbea076f7ee8a9dcb86706e07b Mon Sep 17 00:00:00 2001
From: brandonkachen <brandonchenjiacheng@gmail.com>
Date: Thu, 25 Sep 2025 16:37:10 -0700
Subject: [PATCH 3/4] fix(web): add mobile-responsive padding for hero section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduce hero section bottom padding from 10rem to 5rem on mobile
while keeping 10rem on desktop for better mobile experience.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
---
 web/src/app/page.tsx              |   2 +-
 web/src/components/ui/hero.tsx    | 107 +++++++++++++++---------------
 web/src/components/ui/section.tsx |   2 +-
 3 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index da9dd3530d..a38ed8f0ca 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -106,7 +106,7 @@ export default function Home() {
       <Section background={SECTION_THEMES.hero.background} hero fullViewport>
         <div
           className={cn(
-            'codebuff-container min-h-full flex flex-col transition-all duration-1000 pb-8'
+            'codebuff-container min-h-full flex flex-col transition-all duration-1000'
           )}
         >
           <div className={cn('w-full mb-8 md:mb-12 flex-shrink-0')}>
diff --git a/web/src/components/ui/hero.tsx b/web/src/components/ui/hero.tsx
index 59f557fa28..4f4aec51be 100644
--- a/web/src/components/ui/hero.tsx
+++ b/web/src/components/ui/hero.tsx
@@ -4,7 +4,6 @@ import { motion } from 'framer-motion'
 import { useState, useEffect } from 'react'
 
 import { HeroButtons } from './hero-buttons'
-import { Section } from './section'
 
 // Typing effect component for hero headline
 function TypingEffect({ words }: { words: string[] }) {
@@ -60,63 +59,61 @@ function TypingEffect({ words }: { words: string[] }) {
 
 export function Hero() {
   return (
-    <Section hero>
-      <div className="relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.7 }}
+    <div className="relative z-10">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.7 }}
+      >
+        <motion.h1
+          className="hero-heading text-center mb-8 text-white text-balance"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{
+            duration: 0.8,
+            ease: [0.165, 0.84, 0.44, 1],
+          }}
         >
-          <motion.h1
-            className="hero-heading text-center mb-8 text-white text-balance"
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{
-              duration: 0.8,
-              ease: [0.165, 0.84, 0.44, 1],
-            }}
+          <motion.span
+            className="relative inline-block"
+            initial={{ y: 20 }}
+            animate={{ y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
           >
-            <motion.span
-              className="relative inline-block"
-              initial={{ y: 20 }}
-              animate={{ y: 0 }}
-              transition={{ duration: 0.5, delay: 0.1 }}
-            >
-              <span className="relative z-10">Supercharge</span>
-            </motion.span>{' '}
-            Your{' '}
-            <motion.span
-              className="relative inline-block"
-              initial={{ y: 20 }}
-              animate={{ y: 0 }}
-              transition={{ duration: 0.5, delay: 0.2 }}
-            >
-              <span className="relative z-10">AI Coding</span>
-            </motion.span>
-          </motion.h1>
-        </motion.div>
+            <span className="relative z-10">Supercharge</span>
+          </motion.span>{' '}
+          Your{' '}
+          <motion.span
+            className="relative inline-block"
+            initial={{ y: 20 }}
+            animate={{ y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <span className="relative z-10">AI Coding</span>
+          </motion.span>
+        </motion.h1>
+      </motion.div>
 
-        <motion.h2
-          className="hero-subtext text-center mx-auto max-w-xl mb-6"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.3 }}
-        >
-          <span className="whitespace-nowrap">Simple. Fast. Powerful.</span>{' '}
-          <span className="whitespace-nowrap">
-            Codebuff works in your terminal.
-          </span>
-        </motion.h2>
+      <motion.h2
+        className="hero-subtext text-center mx-auto max-w-xl mb-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.3 }}
+      >
+        <span className="whitespace-nowrap">Simple. Fast. Powerful.</span>{' '}
+        <span className="whitespace-nowrap">
+          Codebuff works in your terminal.
+        </span>
+      </motion.h2>
 
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.5 }}
-          className="mb-12 md:mb-4" // Added more bottom margin on mobile
-        >
-          <HeroButtons />
-        </motion.div>
-      </div>
-    </Section>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.5 }}
+        className="mb-12 md:mb-4" // Added more bottom margin on mobile
+      >
+        <HeroButtons />
+      </motion.div>
+    </div>
   )
 }
diff --git a/web/src/components/ui/section.tsx b/web/src/components/ui/section.tsx
index 53f7dec8cd..f31c6b9cc2 100644
--- a/web/src/components/ui/section.tsx
+++ b/web/src/components/ui/section.tsx
@@ -67,7 +67,7 @@ export function Section({
       style={{
         ...style,
         paddingTop: hero ? '1rem' : '10rem',
-        paddingBottom: hero ? '0' : '10rem',
+        paddingBottom: isMobile && hero ? '5rem' : '10rem',
       }}
       {...props}
     >

From 7ea5cb7fc383c033a551108c8473fd72cb0ff576 Mon Sep 17 00:00:00 2001
From: brandonkachen <brandonchenjiacheng@gmail.com>
Date: Thu, 25 Sep 2025 17:06:06 -0700
Subject: [PATCH 4/4] Update IDEDemo.tsx

---
 web/src/components/IDEDemo.tsx | 13 ++++---
 web/src/components/ui/hero.tsx | 63 +++++++++++++++++++++++++---------
 web/src/styles/globals.css     | 37 +++++++++++++++-----
 web/tailwind.config.ts         |  1 +
 4 files changed, 83 insertions(+), 31 deletions(-)

diff --git a/web/src/components/IDEDemo.tsx b/web/src/components/IDEDemo.tsx
index 97efcede3c..c69cc044ad 100644
--- a/web/src/components/IDEDemo.tsx
+++ b/web/src/components/IDEDemo.tsx
@@ -380,9 +380,9 @@ export function IDEDemo({ className }: IDEDemoProps) {
               <div className="flex flex-col h-full">
                 <div className="bg-zinc-900 p-2 flex items-center justify-between border-b border-zinc-800">
                   <div className="flex items-center">
-                    <Files size={16} className="text-green-500 mr-2" />
-                    <span className="text-sm text-white font-medium">
-                      Your favorite IDE
+                    <Files size={16} className="text-green-500 mr-2" />{' '}
+                    <span className="text-xs text-zinc-500">
+                      YOUR FAVORITE IDE
                     </span>
                   </div>
                   <div className="flex items-center space-x-3">
@@ -407,7 +407,7 @@ export function IDEDemo({ className }: IDEDemoProps) {
 
                 <div
                   className={cn(
-                    'flex-1 p-3 font-mono text-xs relative bg-black/60 transition-all duration-500',
+                    'flex-1 p-3 text-xs font-dm-mono relative bg-black/60 transition-all duration-500',
                     expandTerminal && 'h-[30%]'
                   )}
                 >
@@ -449,9 +449,8 @@ export function IDEDemo({ className }: IDEDemoProps) {
                         <ChevronRight size={14} className="text-zinc-400" />
                       )}
                     </button>
-                  </div>
-
-                  <div className="p-3 text-xs">
+                  </div>{' '}
+                  <div className="p-3 text-xs font-dm-mono">
                     {terminalLines.length > 0 ? (
                       <>
                         {terminalLines.map((line, index) => (
diff --git a/web/src/components/ui/hero.tsx b/web/src/components/ui/hero.tsx
index 4f4aec51be..9b78174383 100644
--- a/web/src/components/ui/hero.tsx
+++ b/web/src/components/ui/hero.tsx
@@ -67,29 +67,60 @@ export function Hero() {
       >
         <motion.h1
           className="hero-heading text-center mb-8 text-white text-balance"
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{
-            duration: 0.8,
-            ease: [0.165, 0.84, 0.44, 1],
+          variants={{
+            animate: {
+              transition: {
+                staggerChildren: 0.2,
+              },
+            },
           }}
+          initial="initial"
+          animate="animate"
         >
           <motion.span
-            className="relative inline-block"
-            initial={{ y: 20 }}
-            animate={{ y: 0 }}
-            transition={{ duration: 0.5, delay: 0.1 }}
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.165, 0.84, 0.44, 1],
+                },
+              },
+            }}
           >
-            <span className="relative z-10">Supercharge</span>
+            Supercharge
           </motion.span>{' '}
-          Your{' '}
           <motion.span
-            className="relative inline-block"
-            initial={{ y: 20 }}
-            animate={{ y: 0 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.165, 0.84, 0.44, 1],
+                },
+              },
+            }}
           >
-            <span className="relative z-10">AI Coding</span>
+            Your AI
+          </motion.span>{' '}
+          <motion.span
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.165, 0.84, 0.44, 1],
+                },
+              },
+            }}
+          >
+            Coding
           </motion.span>
         </motion.h1>
       </motion.div>
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index b6f508ab37..3337517ac0 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -88,8 +88,14 @@
 }
 
 .hero-heading {
-  @apply text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight;
+  @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-medium;
   font-family: 'Domine', serif;
+  letter-spacing: 0.005em;
+  word-spacing: 0.005em;
+  /* Enable proper text shaping */
+  font-kerning: normal;
+  font-feature-settings: "kern" 1, "liga" 1;
+  text-rendering: optimizeLegibility;
 }
 
 .hero-subtext {
@@ -176,17 +182,32 @@
 /* Ensure proper text wrapping in headings on mobile */
 @media (max-width: 767px) {
   :where(h1, h2, h3, h4, h5, h6) {
-    /* Use flexbox for robust wrapping */
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    line-height: 1; /* Minimal line spacing */
-    gap: 0; /* Remove gap between items */
-    margin-top: 0rem; /* Reduce top margin */
+    /* Revert to normal text flow for proper kerning */
+    display: block;
+    line-height: 1.2;
+    margin-top: 0rem;
+    /* Enable proper text shaping and kerning */
+    font-kerning: normal;
+    font-feature-settings: "kern" 1, "liga" 1;
+    text-rendering: optimizeLegibility;
   }
 
   /* Keep code snippets from breaking on mobile */
   :where(h1, h2, h3, h4, h5, h6) code {
     white-space: nowrap;
   }
+
+  /* Specific spacing fixes for hero text */
+  .hero-heading {
+    line-height: 1.15;
+    margin-bottom: 2rem;
+    text-wrap: balance;
+  }
+
+  .hero-subtext {
+    line-height: 1.5;
+    margin-bottom: 2rem;
+    letter-spacing: 0.015em;
+    word-spacing: 0.01em;
+  }
 }
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index b20cd03b30..fabfd6f289 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -13,6 +13,7 @@ const config = {
     fontFamily: {
       sans: ['var(--font-sans)'],
       mono: ['"DM Mono"', 'var(--font-mono)'],
+      'dm-mono': ['"DM Mono"', 'monospace'],
       paragraph: ['Manrope', 'var(--font-sans)', 'sans-serif'],
       serif: ['Domine', 'serif'],
     },