Skip to content

Commit 6a352d1

Browse files
brandonkachenbrandonkachen
committed
feat: landing page feedback
1 parent e471f83 commit 6a352d1

File tree

16 files changed

+375
-195
lines changed

16 files changed

+375
-195
lines changed

‎web/src/app/docs/[category]/page.tsx‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,41 @@ const DocNavigation = ({ category }: { category: string }) => {
2222
{prevSection && (
2323
<NextLink
2424
href={prevSection.href}
25-
className="flex items-center gap-2 text-muted-foreground hover:text-primary"
25+
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 text-gray-300 hover:bg-white/10 hover:text-white transition-colors"
2626
>
27-
← {prevSection.title}
27+
<svg
28+
xmlns="http://www.w3.org/2000/svg"
29+
className="h-5 w-5"
30+
viewBox="0 0 24 24"
31+
fill="none"
32+
stroke="currentColor"
33+
strokeWidth="2"
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
>
37+
<path d="M19 12H5M12 19l-7-7 7-7" />
38+
</svg>
39+
<span className="font-medium">{prevSection.title}</span>
2840
</NextLink>
2941
)}
3042
{nextSection && (
3143
<NextLink
3244
href={nextSection.href}
33-
className="flex items-center gap-2 text-muted-foreground hover:text-primary ml-auto"
45+
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 text-gray-300 hover:bg-white/10 hover:text-white transition-colors ml-auto"
3446
>
35-
{nextSection.title} →
47+
<span className="font-medium">{nextSection.title}</span>
48+
<svg
49+
xmlns="http://www.w3.org/2000/svg"
50+
className="h-5 w-5"
51+
viewBox="0 0 24 24"
52+
fill="none"
53+
stroke="currentColor"
54+
strokeWidth="2"
55+
strokeLinecap="round"
56+
strokeLinejoin="round"
57+
>
58+
<path d="M5 12h14M12 5l7 7-7 7" />
59+
</svg>
3660
</NextLink>
3761
)}
3862
</div>
@@ -76,7 +100,9 @@ export default function CategoryPage({ params }: CategoryPageProps) {
76100
import('@/components/docs/mdx/code-demo').then((mod) => mod.CodeDemo)
77101
),
78102
MarkdownTable: dynamic(() =>
79-
import('@/components/docs/mdx/markdown-table').then((mod) => mod.MarkdownTable)
103+
import('@/components/docs/mdx/markdown-table').then(
104+
(mod) => mod.MarkdownTable
105+
)
80106
),
81107
a: dynamic(() =>
82108
import('@/components/docs/mdx/custom-link').then((mod) => mod.CustomLink)
@@ -99,7 +125,7 @@ export default function CategoryPage({ params }: CategoryPageProps) {
99125
return (
100126
<div className="group">
101127
<h1
102-
className="inline-block hover:cursor-pointer hover:underline -mb-4 scroll-mt-24"
128+
className="inline-block hover:cursor-pointer hover:underline -mb-4 scroll-mt-24 font-serif"
103129
onClick={() => {
104130
if (id) {
105131
document

‎web/src/app/page.tsx‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ import { WorkflowIllustration } from '@/components/ui/landing/feature/workflow-i
2121
import { BrowserComparison } from '@/components/ui/landing/feature/browser-comparison'
2222
import { ChartIllustration } from '@/components/ui/landing/feature/chart-illustration'
2323
import posthog from 'posthog-js'
24+
import { cn } from '@/lib/utils'
2425

2526
export default function Home() {
2627
const [demoSwitched, setDemoSwitched] = useState(false)
27-
const [scrollEnabled, setScrollEnabled] = useState(false)
2828
const searchParams = useSearchParams()
2929
const isMobile = useIsMobile()
3030

@@ -35,8 +35,7 @@ export default function Home() {
3535
useEffect(() => {
3636
const timer = setTimeout(() => {
3737
setDemoSwitched(true)
38-
setScrollEnabled(true)
39-
}, 4000)
38+
}, 2000)
4039
return () => clearTimeout(timer)
4140
}, [])
4241

@@ -49,15 +48,21 @@ export default function Home() {
4948

5049
return (
5150
<div className="relative">
52-
{/* Hero section always visible */}
53-
<Section background={SECTION_THEMES.hero.background} hero>
54-
<div className="codebuff-container">
55-
<div className="w-full mb-8 md:mb-12">
51+
<Section background={SECTION_THEMES.hero.background} hero fullViewport>
52+
<div
53+
className={cn(
54+
'codebuff-container h-full flex flex-col transition-all duration-1000'
55+
)}
56+
>
57+
<div className={cn('w-full mb-8 md:mb-12 flex-shrink-0')}>
5658
<Hero />
5759
</div>
5860

5961
<div
60-
className={`w-full ${!demoSwitched ? 'flex items-center' : 'mt-8'} pt-4 md:pt-0`}
62+
className={cn(
63+
'w-full flex-grow flex',
64+
!demoSwitched ? 'items-center' : ''
65+
)}
6166
>
6267
<DecorativeBlocks
6368
colors={[BlockColor.CRTAmber, BlockColor.AcidMatrix]}
@@ -69,17 +74,8 @@ export default function Home() {
6974
</div>
7075
</Section>
7176

72-
<div
73-
className="transition-opacity duration-500"
74-
style={{
75-
opacity: scrollEnabled ? 1 : 0,
76-
visibility: scrollEnabled ? 'visible' : 'hidden',
77-
position: scrollEnabled ? 'relative' : 'absolute',
78-
top: scrollEnabled ? 'auto' : '-9999px',
79-
pointerEvents: scrollEnabled ? 'auto' : 'none',
80-
}}
81-
>
82-
{/* Feature Section 1 - Yellow */}
77+
<div className={cn('transition-all duration-1000')}>
78+
{/* Feature Section 1 */}
8379
<FeatureSection
8480
title={
8581
<>
@@ -122,7 +118,7 @@ export default function Home() {
122118
}
123119
/>
124120

125-
{/* Feature Section 2 - Black */}
121+
{/* Feature Section 2 */}
126122
<FeatureSection
127123
title={
128124
<>
@@ -151,7 +147,7 @@ export default function Home() {
151147
}
152148
/>
153149

154-
{/* Feature Section 3 - Yellow */}
150+
{/* Feature Section 3 */}
155151
<FeatureSection
156152
title={<>Better and Better Over Time</>}
157153
description="Don't repeat yourself. Codebuff can take notes on your conversations and stores them in human-readable markdown files. Each session teaches it about your specific needs and project setup."
@@ -181,13 +177,13 @@ export default function Home() {
181177
}
182178
/>
183179

184-
{/* Competition Section - Black */}
180+
{/* Competition Section */}
185181
<CompetitionSection />
186182

187-
{/* Testimonials Section - Yellow */}
183+
{/* Testimonials Section */}
188184
<TestimonialsSection />
189185

190-
{/* CTA Section - Black */}
186+
{/* CTA Section */}
191187
<CTASection />
192188
</div>
193189
</div>

‎web/src/components/BrowserPreview.tsx‎

Lines changed: 17 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -40,74 +40,25 @@ const BrowserPreview = ({
4040
{/* Content area */}
4141
<div className="flex-1 border rounded-b-lg border-gray-200 dark:border-gray-700 p-6">
4242
{variant === 'before' ? (
43-
<div className="bg-white dark:bg-gray-900 rounded-lg border-2 border-dashed border-gray-400 dark:border-gray-700 p-6">
44-
<h1 className="text-xl font-mono text-gray-700 dark:text-gray-300">
45-
Weather App
46-
</h1>
47-
<p className="mt-2 text-gray-600 dark:text-gray-400 font-mono text-sm">
48-
Basic frontend with mock data
49-
</p>
50-
<div className="mt-4 p-4 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700">
51-
<table
52-
className="w-full border border-gray-400 dark:border-gray-600"
53-
cellPadding="5"
54-
>
55-
<tbody>
56-
<tr className="border-b border-gray-400 dark:border-gray-600">
57-
<td className="font-mono text-gray-700 dark:text-gray-300 border-r border-gray-400 dark:border-gray-600">
58-
City:
59-
</td>
60-
<td className="font-mono text-gray-700 dark:text-gray-300">
61-
San Francisco
62-
</td>
63-
</tr>
64-
<tr className="border-b border-gray-400 dark:border-gray-600">
65-
<td className="font-mono text-gray-700 dark:text-gray-300 border-r border-gray-400 dark:border-gray-600">
66-
Temp:
67-
</td>
68-
<td className="font-mono text-gray-700 dark:text-gray-300">
69-
72°F (mock)
70-
</td>
71-
</tr>
72-
<tr className="border-b border-gray-400 dark:border-gray-600">
73-
<td className="font-mono text-gray-700 dark:text-gray-300 border-r border-gray-400 dark:border-gray-600">
74-
Status:
75-
</td>
76-
<td className="font-mono text-red-600 dark:text-red-400 font-bold">
77-
ERROR: API NOT FOUND
78-
</td>
79-
</tr>
80-
<tr>
81-
<td className="font-mono text-gray-700 dark:text-gray-300 border-r border-gray-400 dark:border-gray-600">
82-
Last Updated:
83-
</td>
84-
<td className="font-mono text-gray-700 dark:text-gray-300">
85-
N/A
86-
</td>
87-
</tr>
88-
</tbody>
89-
</table>
90-
</div>
91-
<div className="mt-4 flex flex-col gap-2">
92-
<button className="w-full py-1 bg-blue-500 text-white text-center font-mono">
93-
REFRESH
94-
</button>
95-
<button className="w-full py-1 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-center font-mono">
96-
CHANGE CITY
43+
<div className="bg-gray-800 h-full w-full" style={{ backgroundColor: '#222' }}>
44+
<div className="text-left p-6">
45+
<h1 className="text-xl text-white mb-4 font-mono">
46+
Weather App
47+
</h1>
48+
49+
<div className="p-4 mb-4 border border-gray-700" style={{ backgroundColor: '#f0f0f0' }}>
50+
<p className="text-red-600 mb-3 font-medium font-mono">
51+
Error: API Key Missing
52+
</p>
53+
<p className="text-gray-800 text-sm mb-4 font-mono">
54+
Please configure the OpenWeatherMap API key to display weather information.
55+
</p>
56+
</div>
57+
58+
<button className="px-4 py-1 bg-gray-700 border border-gray-600 text-gray-300 text-sm font-mono">
59+
Configure API
9760
</button>
9861
</div>
99-
<div className="mt-4 p-3 border border-red-500 bg-red-100 dark:bg-red-900/30 dark:border-red-700 text-sm text-red-700 dark:text-red-300 font-mono">
100-
<p>
101-
<strong>ERROR:</strong> Missing API key configuration. Cannot
102-
connect to OpenWeatherMap API.
103-
</p>
104-
</div>
105-
<div className="mt-3 p-2 bg-yellow-100 dark:bg-yellow-900/40 text-xs text-yellow-800 dark:text-yellow-300 font-mono">
106-
<p>
107-
<strong>TODO:</strong> Add API integration code in app.js line
108-
42
109-
</p>
110-
</div>
11162
</div>
11263
) : (
11364
<div className="bg-gradient-to-br from-sky-100 to-indigo-100 dark:from-sky-900 dark:to-indigo-900 rounded-lg border border-blue-200 dark:border-blue-800 p-6 shadow-2xl">

‎web/src/components/IDEDemo.tsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,11 @@ const PHRASES_TO_TYPE = [
169169
'update user profile schema',
170170
]
171171

172+
// Define timeouts in milliseconds
173+
const SHOW_IDE_DELAY = 1500
174+
const HIDE_TERMINAL_DELAY = 1000
175+
const EXPAND_TERMINAL_DELAY = 500
176+
172177
export function IDEDemo({ className }: IDEDemoProps) {
173178
const [isExpanded, setIsExpanded] = useState(false)
174179
const [showIDE, setShowIDE] = useState(false)
@@ -193,17 +198,33 @@ export function IDEDemo({ className }: IDEDemoProps) {
193198
}, [])
194199

195200
useEffect(() => {
196-
const timer = setTimeout(() => {
201+
const timeoutIds: NodeJS.Timeout[] = []
202+
203+
// Step 1: Show the IDE
204+
const timer1 = setTimeout(() => {
197205
setShowIDE(true)
198-
setTimeout(() => {
199-
setShowOriginalTerminal(false)
200-
setTimeout(() => {
201-
setExpandTerminal(true)
202-
}, 2000)
203-
}, 1000)
204-
}, 3000)
206+
}, SHOW_IDE_DELAY)
207+
timeoutIds.push(timer1)
208+
209+
// Step 2: Hide the original terminal
210+
const timer2 = setTimeout(() => {
211+
setShowOriginalTerminal(false)
212+
}, SHOW_IDE_DELAY + HIDE_TERMINAL_DELAY)
213+
timeoutIds.push(timer2)
214+
215+
// Step 3: Expand the terminal
216+
const timer3 = setTimeout(
217+
() => {
218+
setExpandTerminal(true)
219+
},
220+
SHOW_IDE_DELAY + HIDE_TERMINAL_DELAY + EXPAND_TERMINAL_DELAY
221+
)
222+
timeoutIds.push(timer3)
205223

206-
return () => clearTimeout(timer)
224+
// Cleanup all timeouts on component unmount
225+
return () => {
226+
timeoutIds.forEach((id) => clearTimeout(id))
227+
}
207228
}, [])
208229

209230
useEffect(() => {
@@ -667,7 +688,7 @@ export function IDEDemo({ className }: IDEDemoProps) {
667688
'border-t border-zinc-800 transition-all duration-1000 bg-black z-10',
668689
showIDE
669690
? expandTerminal
670-
? 'h-full text-lg'
691+
? 'h-[70%]'
671692
: 'h-[300px]'
672693
: 'h-full'
673694
)}
@@ -714,7 +735,7 @@ export function IDEDemo({ className }: IDEDemoProps) {
714735
<div
715736
className={cn(
716737
'absolute inset-0 transition-all duration-1000',
717-
showIDE ? 'opacity-0 scale-95' : 'opacity-100 scale-100'
738+
showIDE ? 'opacity-0' : 'opacity-100'
718739
)}
719740
>
720741
<Terminal
@@ -730,18 +751,6 @@ export function IDEDemo({ className }: IDEDemoProps) {
730751
</Terminal>
731752
</div>
732753
)}
733-
734-
{isMobile && (
735-
<div
736-
className={cn(
737-
'absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-green-500/80 text-black text-xs px-3 py-1 rounded-full',
738-
'flex items-center justify-center transition-opacity duration-500',
739-
showIDE ? 'opacity-0' : 'opacity-100'
740-
)}
741-
>
742-
Tap to expand IDE demo
743-
</div>
744-
)}
745754
</div>
746755
</div>
747756
)

‎web/src/components/ui/enhanced-copy-button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export function TerminalCopyButton({
122122
'font-mono text-white/90 select-all',
123123
size === 'default' ? 'text-sm' : 'text-base'
124124
)}
125+
style={{ fontFamily: '"DM Mono", var(--font-mono), monospace' }}
125126
>
126127
npm install -g codebuff
127128
</code>

0 commit comments

Comments
 (0)