Skip to content

Commit dfa47f6

Browse files
brandonkachencodebuff-team
brandonkachen
and
codebuff-team
authored
fix(web): change hero section to fit better on smaller screens (#315)
Co-authored-by: Codebuff <noreply@codebuff.com>
1 parent b2dc385 commit dfa47f6

File tree

6 files changed

+122
-73
lines changed

6 files changed

+122
-73
lines changed

‎web/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export default function Home() {
106106
<Section background={SECTION_THEMES.hero.background} hero fullViewport>
107107
<div
108108
className={cn(
109-
'codebuff-container h-full flex flex-col transition-all duration-1000'
109+
'codebuff-container min-h-full flex flex-col transition-all duration-1000'
110110
)}
111111
>
112112
<div className={cn('w-full mb-8 md:mb-12 flex-shrink-0')}>

‎web/src/components/IDEDemo.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -380,9 +380,9 @@ export function IDEDemo({ className }: IDEDemoProps) {
380380
<div className="flex flex-col h-full">
381381
<div className="bg-zinc-900 p-2 flex items-center justify-between border-b border-zinc-800">
382382
<div className="flex items-center">
383-
<Files size={16} className="text-green-500 mr-2" />
384-
<span className="text-sm text-white font-medium">
385-
Your favorite IDE
383+
<Files size={16} className="text-green-500 mr-2" />{' '}
384+
<span className="text-xs text-zinc-500">
385+
YOUR FAVORITE IDE
386386
</span>
387387
</div>
388388
<div className="flex items-center space-x-3">
@@ -407,7 +407,7 @@ export function IDEDemo({ className }: IDEDemoProps) {
407407

408408
<div
409409
className={cn(
410-
'flex-1 p-3 font-mono text-xs relative bg-black/60 transition-all duration-500',
410+
'flex-1 p-3 text-xs font-dm-mono relative bg-black/60 transition-all duration-500',
411411
expandTerminal && 'h-[30%]'
412412
)}
413413
>
@@ -449,9 +449,8 @@ export function IDEDemo({ className }: IDEDemoProps) {
449449
<ChevronRight size={14} className="text-zinc-400" />
450450
)}
451451
</button>
452-
</div>
453-
454-
<div className="p-3 text-xs">
452+
</div>{' '}
453+
<div className="p-3 text-xs font-dm-mono">
455454
{terminalLines.length > 0 ? (
456455
<>
457456
{terminalLines.map((line, index) => (

‎web/src/components/ui/hero.tsx‎

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { motion } from 'framer-motion'
44
import { useState, useEffect } from 'react'
55

66
import { HeroButtons } from './hero-buttons'
7-
import { Section } from './section'
87

98
// Typing effect component for hero headline
109
function TypingEffect({ words }: { words: string[] }) {
@@ -60,63 +59,92 @@ function TypingEffect({ words }: { words: string[] }) {
6059

6160
export function Hero() {
6261
return (
63-
<Section hero>
64-
<div className="relative z-10">
65-
<motion.div
66-
initial={{ opacity: 0, y: 30 }}
67-
animate={{ opacity: 1, y: 0 }}
68-
transition={{ duration: 0.7 }}
62+
<div className="relative z-10">
63+
<motion.div
64+
initial={{ opacity: 0, y: 30 }}
65+
animate={{ opacity: 1, y: 0 }}
66+
transition={{ duration: 0.7 }}
67+
>
68+
<motion.h1
69+
className="hero-heading text-center mb-8 text-white text-balance"
70+
variants={{
71+
animate: {
72+
transition: {
73+
staggerChildren: 0.2,
74+
},
75+
},
76+
}}
77+
initial="initial"
78+
animate="animate"
6979
>
70-
<motion.h1
71-
className="hero-heading text-center mb-8 text-white text-balance"
72-
initial={{ opacity: 0, scale: 0.95 }}
73-
animate={{ opacity: 1, scale: 1 }}
74-
transition={{
75-
duration: 0.8,
76-
ease: [0.165, 0.84, 0.44, 1],
80+
<motion.span
81+
variants={{
82+
initial: { opacity: 0, y: 20 },
83+
animate: {
84+
opacity: 1,
85+
y: 0,
86+
transition: {
87+
duration: 0.8,
88+
ease: [0.165, 0.84, 0.44, 1],
89+
},
90+
},
7791
}}
7892
>
79-
<motion.span
80-
className="relative inline-block"
81-
initial={{ y: 20 }}
82-
animate={{ y: 0 }}
83-
transition={{ duration: 0.5, delay: 0.1 }}
84-
>
85-
<span className="relative z-10">Supercharge</span>
86-
</motion.span>{' '}
87-
Your{' '}
88-
<motion.span
89-
className="relative inline-block"
90-
initial={{ y: 20 }}
91-
animate={{ y: 0 }}
92-
transition={{ duration: 0.5, delay: 0.2 }}
93-
>
94-
<span className="relative z-10">AI Coding</span>
95-
</motion.span>
96-
</motion.h1>
97-
</motion.div>
93+
Supercharge
94+
</motion.span>{' '}
95+
<motion.span
96+
variants={{
97+
initial: { opacity: 0, y: 20 },
98+
animate: {
99+
opacity: 1,
100+
y: 0,
101+
transition: {
102+
duration: 0.8,
103+
ease: [0.165, 0.84, 0.44, 1],
104+
},
105+
},
106+
}}
107+
>
108+
Your AI
109+
</motion.span>{' '}
110+
<motion.span
111+
variants={{
112+
initial: { opacity: 0, y: 20 },
113+
animate: {
114+
opacity: 1,
115+
y: 0,
116+
transition: {
117+
duration: 0.8,
118+
ease: [0.165, 0.84, 0.44, 1],
119+
},
120+
},
121+
}}
122+
>
123+
Coding
124+
</motion.span>
125+
</motion.h1>
126+
</motion.div>
98127

99-
<motion.h2
100-
className="hero-subtext text-center mx-auto max-w-xl mb-6"
101-
initial={{ opacity: 0, y: 20 }}
102-
animate={{ opacity: 1, y: 0 }}
103-
transition={{ duration: 0.5, delay: 0.3 }}
104-
>
105-
<span className="whitespace-nowrap">Simple. Fast. Powerful.</span>{' '}
106-
<span className="whitespace-nowrap">
107-
Codebuff works in your terminal.
108-
</span>
109-
</motion.h2>
128+
<motion.h2
129+
className="hero-subtext text-center mx-auto max-w-xl mb-6"
130+
initial={{ opacity: 0, y: 20 }}
131+
animate={{ opacity: 1, y: 0 }}
132+
transition={{ duration: 0.5, delay: 0.3 }}
133+
>
134+
<span className="whitespace-nowrap">Simple. Fast. Powerful.</span>{' '}
135+
<span className="whitespace-nowrap">
136+
Codebuff works in your terminal.
137+
</span>
138+
</motion.h2>
110139

111-
<motion.div
112-
initial={{ opacity: 0, y: 20 }}
113-
animate={{ opacity: 1, y: 0 }}
114-
transition={{ duration: 0.5, delay: 0.5 }}
115-
className="mb-12 md:mb-4" // Added more bottom margin on mobile
116-
>
117-
<HeroButtons />
118-
</motion.div>
119-
</div>
120-
</Section>
140+
<motion.div
141+
initial={{ opacity: 0, y: 20 }}
142+
animate={{ opacity: 1, y: 0 }}
143+
transition={{ duration: 0.5, delay: 0.5 }}
144+
className="mb-12 md:mb-4" // Added more bottom margin on mobile
145+
>
146+
<HeroButtons />
147+
</motion.div>
148+
</div>
121149
)
122150
}

‎web/src/components/ui/section.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,10 @@ export function Section({
5555

5656
return (
5757
<motion.section
58-
className={cn('relative overflow-hidden', className)}
58+
className={cn('relative', className)}
5959
initial={false}
6060
animate={{
61-
height: fullViewport && !isMobile ? '95svh' : 'auto',
61+
minHeight: fullViewport ? '95dvh' : 'auto',
6262
}}
6363
transition={{
6464
duration: 1,
@@ -67,7 +67,7 @@ export function Section({
6767
style={{
6868
...style,
6969
paddingTop: hero ? '1rem' : '10rem',
70-
paddingBottom: hero ? '0' : '10rem',
70+
paddingBottom: isMobile && hero ? '5rem' : '10rem',
7171
}}
7272
{...props}
7373
>

‎web/src/styles/globals.css‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,14 @@
8888
}
8989

9090
.hero-heading {
91-
@apply text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight;
91+
@apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-medium;
9292
font-family: 'Domine', serif;
93+
letter-spacing: 0.005em;
94+
word-spacing: 0.005em;
95+
/* Enable proper text shaping */
96+
font-kerning: normal;
97+
font-feature-settings: "kern" 1, "liga" 1;
98+
text-rendering: optimizeLegibility;
9399
}
94100

95101
.hero-subtext {
@@ -176,17 +182,32 @@
176182
/* Ensure proper text wrapping in headings on mobile */
177183
@media (max-width: 767px) {
178184
:where(h1, h2, h3, h4, h5, h6) {
179-
/* Use flexbox for robust wrapping */
180-
display: inline-flex;
181-
flex-wrap: wrap;
182-
align-items: baseline;
183-
line-height: 1; /* Minimal line spacing */
184-
gap: 0; /* Remove gap between items */
185-
margin-top: 0rem; /* Reduce top margin */
185+
/* Revert to normal text flow for proper kerning */
186+
display: block;
187+
line-height: 1.2;
188+
margin-top: 0rem;
189+
/* Enable proper text shaping and kerning */
190+
font-kerning: normal;
191+
font-feature-settings: "kern" 1, "liga" 1;
192+
text-rendering: optimizeLegibility;
186193
}
187194

188195
/* Keep code snippets from breaking on mobile */
189196
:where(h1, h2, h3, h4, h5, h6) code {
190197
white-space: nowrap;
191198
}
199+
200+
/* Specific spacing fixes for hero text */
201+
.hero-heading {
202+
line-height: 1.15;
203+
margin-bottom: 2rem;
204+
text-wrap: balance;
205+
}
206+
207+
.hero-subtext {
208+
line-height: 1.5;
209+
margin-bottom: 2rem;
210+
letter-spacing: 0.015em;
211+
word-spacing: 0.01em;
212+
}
192213
}

‎web/tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const config = {
1313
fontFamily: {
1414
sans: ['var(--font-sans)'],
1515
mono: ['"DM Mono"', 'var(--font-mono)'],
16+
'dm-mono': ['"DM Mono"', 'monospace'],
1617
paragraph: ['Manrope', 'var(--font-sans)', 'sans-serif'],
1718
serif: ['Domine', 'serif'],
1819
},

0 commit comments

Comments
 (0)