fix(web): add mobile-responsive padding for hero section

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>

Author: brandonkachen

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')}>

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>
   )
 }

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