[render preview] fix(web): change hero section to fit better on smaller screens

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'
           )}
         >
           <div className={cn('w-full mb-8 md:mb-12 flex-shrink-0')}>

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) => (

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,92 @@ 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"
+          variants={{
+            animate: {
+              transition: {
+                staggerChildren: 0.2,
+              },
+            },
+          }}
+          initial="initial"
+          animate="animate"
         >
-          <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
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                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 }}
-            >
-              <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>
+            Supercharge
+          </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],
+                },
+              },
+            }}
+          >
+            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>
 
-        <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>
   )
 }

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={{
-        height: fullViewport && !isMobile ? '95svh' : 'auto',
+        minHeight: fullViewport ? '95dvh' : 'auto',
       }}
       transition={{
         duration: 1,
@@ -67,7 +67,7 @@ export function Section({
       style={{
         ...style,
         paddingTop: hero ? '1rem' : '10rem',
-        paddingBottom: hero ? '0' : '10rem',
+        paddingBottom: isMobile && hero ? '5rem' : '10rem',
       }}
       {...props}
     >

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;
+  }
 }

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'],
     },