Skip to content

Commit 2ef60be

Browse files
bartlomiejubartlomieju
committed
feat: add secondary feature cards, update showcase copy
Add 6 compact cards (File-based routing, Middleware, Zero-config TS, Deploy anywhere, Layouts, Built-in plugins) below the code snippet cards. Update copy for all four star sections. Reduce RecipeDemo min-height.
1 parent 60e2728 commit 2ef60be

1 file changed

Lines changed: 183 additions & 0 deletions

File tree

‎www/components/homepage/MoreFeatures.tsx‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,175 @@ const features = [
197197
},
198198
];
199199

200+
const extras = [
201+
{
202+
title: "File-based routing",
203+
description:
204+
"Drop a file in routes/, get a URL. Dynamic params via [id].tsx.",
205+
href: "/docs/concepts/file-routing",
206+
icon: (
207+
<svg
208+
aria-hidden="true"
209+
xmlns="http://www.w3.org/2000/svg"
210+
class="text-fresh"
211+
width="1.25rem"
212+
height="1.25rem"
213+
viewBox="0 0 24 24"
214+
stroke-width="1.5"
215+
stroke="currentColor"
216+
fill="none"
217+
stroke-linecap="round"
218+
stroke-linejoin="round"
219+
>
220+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
221+
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
222+
<path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
223+
<path d="M5 18h2" />
224+
<path d="M10 18h2" />
225+
<path d="M15 18h2" />
226+
<path d="M20 18h2" />
227+
</svg>
228+
),
229+
},
230+
{
231+
title: "Middleware",
232+
description: "Chain auth, logging, or any logic before your routes run.",
233+
href: "/docs/concepts/middleware",
234+
icon: (
235+
<svg
236+
aria-hidden="true"
237+
xmlns="http://www.w3.org/2000/svg"
238+
class="text-fresh"
239+
width="1.25rem"
240+
height="1.25rem"
241+
viewBox="0 0 24 24"
242+
stroke-width="1.5"
243+
stroke="currentColor"
244+
fill="none"
245+
stroke-linecap="round"
246+
stroke-linejoin="round"
247+
>
248+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
249+
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5" />
250+
<path d="M12 12l8 -4.5" />
251+
<path d="M12 12v9" />
252+
<path d="M12 12l-8 -4.5" />
253+
</svg>
254+
),
255+
},
256+
{
257+
title: "Zero-config TypeScript",
258+
description: "Just write .tsx. No tsconfig, no build step, it just works.",
259+
href: "/docs/concepts/routing",
260+
icon: (
261+
<svg
262+
aria-hidden="true"
263+
xmlns="http://www.w3.org/2000/svg"
264+
class="text-fresh"
265+
width="1.25rem"
266+
height="1.25rem"
267+
viewBox="0 0 24 24"
268+
stroke-width="1.5"
269+
stroke="currentColor"
270+
fill="none"
271+
stroke-linecap="round"
272+
stroke-linejoin="round"
273+
>
274+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
275+
<path d="M15 17.5c.32 .32 .754 .5 1.207 .5h.543a1.75 1.75 0 0 0 0 -3.5h-1a1.75 1.75 0 0 1 0 -3.5h.543c.453 0 .887 .18 1.207 .5" />
276+
<path d="M9 12h4" />
277+
<path d="M11 12v6" />
278+
<path d="M21 19v-14a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2z" />
279+
</svg>
280+
),
281+
},
282+
{
283+
title: "Deploy anywhere",
284+
description:
285+
"Deno Deploy, Docker, Cloudflare Workers, or a single binary with deno compile.",
286+
href: "/docs/deployment/deno-deploy",
287+
icon: (
288+
<svg
289+
aria-hidden="true"
290+
xmlns="http://www.w3.org/2000/svg"
291+
class="text-fresh"
292+
width="1.25rem"
293+
height="1.25rem"
294+
viewBox="0 0 24 24"
295+
stroke-width="1.5"
296+
stroke="currentColor"
297+
fill="none"
298+
stroke-linecap="round"
299+
stroke-linejoin="round"
300+
>
301+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
302+
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
303+
<path d="M3.6 9h16.8" />
304+
<path d="M3.6 15h16.8" />
305+
<path d="M11.5 3a17 17 0 0 0 0 18" />
306+
<path d="M12.5 3a17 17 0 0 1 0 18" />
307+
</svg>
308+
),
309+
},
310+
{
311+
title: "Layouts",
312+
description:
313+
"Nested layouts that compose automatically from the file system.",
314+
href: "/docs/concepts/layouts",
315+
icon: (
316+
<svg
317+
aria-hidden="true"
318+
xmlns="http://www.w3.org/2000/svg"
319+
class="text-fresh"
320+
width="1.25rem"
321+
height="1.25rem"
322+
viewBox="0 0 24 24"
323+
stroke-width="1.5"
324+
stroke="currentColor"
325+
fill="none"
326+
stroke-linecap="round"
327+
stroke-linejoin="round"
328+
>
329+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
330+
<path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
331+
<path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
332+
<path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
333+
</svg>
334+
),
335+
},
336+
{
337+
title: "Built-in plugins",
338+
description:
339+
"CORS, CSRF, IP filtering, and trailing slashes out of the box.",
340+
href: "/docs/plugins/cors",
341+
icon: (
342+
<svg
343+
aria-hidden="true"
344+
xmlns="http://www.w3.org/2000/svg"
345+
class="text-fresh"
346+
width="1.25rem"
347+
height="1.25rem"
348+
viewBox="0 0 24 24"
349+
stroke-width="1.5"
350+
stroke="currentColor"
351+
fill="none"
352+
stroke-linecap="round"
353+
stroke-linejoin="round"
354+
>
355+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
356+
<path d="M4 7l3 0" />
357+
<path d="M4 11l3 0" />
358+
<path d="M4 15l3 0" />
359+
<path d="M4 19l3 0" />
360+
<path d="M11 7l10 0" />
361+
<path d="M11 11l10 0" />
362+
<path d="M11 15l10 0" />
363+
<path d="M11 19l10 0" />
364+
</svg>
365+
),
366+
},
367+
];
368+
200369
export function MoreFeatures() {
201370
return (
202371
<PageSection>
@@ -222,6 +391,20 @@ export function MoreFeatures() {
222391
</a>
223392
))}
224393
</div>
394+
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
395+
{extras.map((e) => (
396+
<a
397+
href={e.href}
398+
class="flex flex-col gap-2 p-4 rounded-lg border border-gray-200 hover:border-fresh transition-colors"
399+
>
400+
<div class="flex items-center gap-2">
401+
{e.icon}
402+
<h3 class="font-bold text-sm">{e.title}</h3>
403+
</div>
404+
<p class="text-gray-500 text-xs">{e.description}</p>
405+
</a>
406+
))}
407+
</div>
225408
</PageSection>
226409
);
227410
}

0 commit comments

Comments
 (0)