@@ -21,8 +21,8 @@ export function BentoGrid() {
2121 Everything you need
2222 </ h2 >
2323 < p className = "text-zinc-400 text-lg leading-relaxed" >
24- Stop wasting time configuring local tunnels. Capture and
25- inspect production traffic in a secure sandbox instantly.
24+ Stop wasting time configuring local tunnels. Capture and inspect production traffic in a
25+ secure sandbox instantly.
2626 </ p >
2727 </ div >
2828 </ div >
@@ -34,17 +34,14 @@ export function BentoGrid() {
3434 { /* Text content */ }
3535 < div className = "relative z-10 mb-8" >
3636 < div className = "w-11 h-11 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center mb-5" >
37- < span className = "material-symbols-outlined text-primary text-2xl" >
38- terminal
39- </ span >
37+ < span className = "material-symbols-outlined text-primary text-2xl" > terminal</ span >
4038 </ div >
4139 < h3 className = "text-3xl font-black text-white mb-3 tracking-tighter font-headline" >
4240 Browser-Based Bridge
4341 </ h3 >
4442 < p className = "text-zinc-400 text-[15px] max-w-sm leading-relaxed font-body" >
45- Your browser connects to the relay via SSE and
46- forwards webhooks to localhost. No install, no
47- config, no CLI.
43+ Your browser connects to the relay via SSE and forwards webhooks to localhost. No
44+ install, no config, no CLI.
4845 </ p >
4946 </ div >
5047
@@ -55,35 +52,26 @@ export function BentoGrid() {
5552 < div className = "w-2 h-2 rounded-full bg-[#ff5f57]/60" />
5653 < div className = "w-2 h-2 rounded-full bg-[#febc2e]/60" />
5754 < div className = "w-2 h-2 rounded-full bg-[#28c840]/60" />
58- < span className = "ml-2 font-mono text-[10px] text-white/20" >
59- relay.log
60- </ span >
55+ < span className = "ml-2 font-mono text-[10px] text-white/20" > relay.log</ span >
6156 </ div >
6257 { /* Code lines */ }
6358 < div className = "p-4 font-mono text-[11px] leading-[1.9] text-white/30 group-hover:text-white/50 transition-colors duration-300" >
6459 < div >
6560 < span className = "text-[#28c840]/70" > ●</ span > { " " }
6661 < span className = "text-white/50" > POST</ span > { " " }
67- < span className = "text-primary/60" >
68- /hook/ch_abc123
69- </ span >
62+ < span className = "text-primary/60" > /hook/ch_abc123</ span >
7063 </ div >
7164 < div >
72- < span className = "text-white/20" > →</ span > { " " }
73- SSE push to browser
65+ < span className = "text-white/20" > →</ span > SSE push to browser
7466 </ div >
7567 < div >
7668 < span className = "text-white/20" > →</ span > { " " }
77- < span className = "text-primary/50" >
78- fetch
79- </ span >
69+ < span className = "text-primary/50" > fetch</ span >
8070 ("localhost:3000")
8171 </ div >
8272 < div >
8373 < span className = "text-[#28c840]/70" > ←</ span > { " " }
84- < span className = "text-[#28c840]/50" >
85- 200 OK
86- </ span > { " " }
74+ < span className = "text-[#28c840]/50" > 200 OK</ span > { " " }
8775 < span className = "text-white/20" > 12ms</ span >
8876 </ div >
8977 </ div >
@@ -95,17 +83,14 @@ export function BentoGrid() {
9583 < MovingBorderCard className = "md:col-span-5" >
9684 < div className = "p-10 relative overflow-hidden h-full flex flex-col" >
9785 < div className = "w-11 h-11 rounded-xl bg-secondary/10 border border-secondary/20 flex items-center justify-center mb-5" >
98- < span className = "material-symbols-outlined text-secondary text-2xl" >
99- history
100- </ span >
86+ < span className = "material-symbols-outlined text-secondary text-2xl" > history</ span >
10187 </ div >
10288 < h3 className = "text-3xl font-black text-white mb-3 tracking-tighter font-headline" >
10389 Instant Replay
10490 </ h3 >
10591 < p className = "text-zinc-400 text-[15px] leading-relaxed font-body" >
106- Re-fire any webhook to your local server with one
107- click. Debug edge cases without waiting for the
108- provider to send again.
92+ Re-fire any webhook to your local server with one click. Debug edge cases without
93+ waiting for the provider to send again.
10994 </ p >
11095 < div className = "absolute bottom-[-15%] right-[-8%] text-[120px] font-black text-white/[0.03] select-none italic group-hover:text-white/[0.06] transition-colors duration-500 font-headline leading-none" >
11196 REPLAY
@@ -117,17 +102,14 @@ export function BentoGrid() {
117102 < MovingBorderCard className = "md:col-span-5" >
118103 < div className = "p-10 relative overflow-hidden h-full flex flex-col" >
119104 < div className = "w-11 h-11 rounded-xl bg-tertiary/10 border border-tertiary/20 flex items-center justify-center mb-5" >
120- < span className = "material-symbols-outlined text-tertiary text-2xl" >
121- bolt
122- </ span >
105+ < span className = "material-symbols-outlined text-tertiary text-2xl" > bolt</ span >
123106 </ div >
124107 < h3 className = "text-3xl font-black text-white mb-3 tracking-tighter font-headline" >
125108 Zero Install
126109 </ h3 >
127110 < p className = "text-zinc-400 text-[15px] leading-relaxed font-body" >
128- No CLI binary, no npm package, no account signup.
129- Works on locked-down corporate machines — if it
130- has a browser, it works.
111+ No CLI binary, no npm package, no account signup. Works on locked-down corporate
112+ machines — if it has a browser, it works.
131113 </ p >
132114 < div className = "absolute -bottom-12 -left-12 w-44 h-44 bg-tertiary/[0.06] rounded-full blur-3xl group-hover:bg-tertiary/10 transition-all duration-500" />
133115 </ div >
@@ -147,16 +129,15 @@ export function BentoGrid() {
147129 Deep Inspection
148130 </ h3 >
149131 < p className = "text-zinc-400 text-[15px] leading-relaxed font-body" >
150- View full HTTP headers, body content, query
151- parameters, and raw source. Native JSON, XML,
152- and form-data support.
132+ View full HTTP headers, body content, query parameters, and raw source. Native JSON,
133+ XML, and form-data support.
153134 </ p >
154135 </ div >
155136
156137 { /* Code side — clearly separated */ }
157138 < div className = "flex-1 flex items-center md:pl-6" >
158139 < pre className = "w-full bg-[#0c0c0f] rounded-xl border border-white/[0.08] p-5 font-mono text-[12px] leading-[1.8] text-white/40 group-hover:text-white/60 transition-colors duration-300 shadow-[0_8px_30px_rgba(0,0,0,0.4)] overflow-x-auto" >
159- { `{
140+ { `{
160141 "headers": {
161142 "stripe-signature": "t=1234...",
162143 "content-type": "application/json"
0 commit comments