feat: rework hero, densify showcase sections, polish UI

bartlomieju · bartlomieju · commit 45a707805bc9 · 2026-04-22T20:23:21.000+02:00
Move hero copy to "The framework so simple, you already know it" with
descriptive subtitle. Remove Simple section. Add "Take a tour" heading.
Downsize all showcase components: smaller section headings, code blocks,
icons, demo boxes, and arrows. Tighten PageSection and SideBySide gaps.
Update handlers/forms code examples to use createDefine import.
diff --git a/www/components/CodeBlock.tsx b/www/components/CodeBlock.tsx
@@ -5,7 +5,7 @@ export function CodeBlock(
 ) {
   return (
     <pre
-      class="rounded-lg text-base leading-relaxed bg-slate-800 text-white p-4 sm:p-6 md:p-4 lg:p-6 2xl:p-8 overflow-x-auto"
+      class="rounded-lg text-sm leading-relaxed bg-slate-800 text-white p-3 sm:p-4 overflow-x-auto"
       data-language={lang}
       // deno-lint-ignore react-no-danger
     ><code dangerouslySetInnerHTML={{ __html: Prism.highlight(code, Prism.languages[lang], lang)}} /></pre>
diff --git a/www/components/CodeWindow.tsx b/www/components/CodeWindow.tsx
@@ -14,7 +14,7 @@ export function CodeWindow(props: CodeWindowProps) {
       style={props.style}
     >
       <div class="flex items-stretch justify-start">
-        <div class="p-4 flex items-center">
+        <div class="p-3 flex items-center">
           <svg
             aria-hidden="true"
             width="41"
@@ -28,7 +28,7 @@ export function CodeWindow(props: CodeWindowProps) {
             <ellipse cx="35.9134" cy="5" rx="4.99155" ry="5" fill="#26C940" />
           </svg>
         </div>
-        <div class="p-4 w-full leading-none text-slate-400 text-base font-mono">
+        <div class="p-3 w-full leading-none text-slate-400 text-sm font-mono">
           {props.name ?? ""}
         </div>
       </div>
diff --git a/www/components/PageSection.tsx b/www/components/PageSection.tsx
@@ -4,7 +4,7 @@ export function PageSection(props: JSX.HTMLAttributes<HTMLDivElement>) {
   return (
     <section
       id={props.id ?? ""}
-      class={`w-full max-w-screen-xl mx-auto my-16 md:my-24 lg:my-32 px-4 sm:px-8 lg:px-16 2xl:px-0 flex flex-col gap-8 md:gap-16 ${
+      class={`w-full max-w-screen-xl mx-auto my-8 md:my-12 lg:my-16 px-4 sm:px-8 lg:px-16 2xl:px-0 flex flex-col gap-6 md:gap-8 ${
         props.class ?? ""
       }`}
     >
diff --git a/www/components/SideBySide.tsx b/www/components/SideBySide.tsx
@@ -26,7 +26,7 @@ export function SideBySide(props: SideBySideProps) {
 
   return (
     <div
-      class={`grid grid-cols-1 items-center gap-12 md:gap-16 xl:gap-32 ${
+      class={`grid grid-cols-1 items-center gap-8 md:gap-10 xl:gap-16 ${
         props.reverseOnDesktop ? "[&>*]:md:first:order-1" : ""
       } ${mdSplitClass} ${lgSplitClass} ${props.class ?? ""}`}
     >
diff --git a/www/components/homepage/APIRoutesSection.tsx b/www/components/homepage/APIRoutesSection.tsx
@@ -27,14 +27,19 @@ export const handlers = define.handlers({
 export function APIRoutesSection() {
   return (
     <PageSection>
-      <SideBySide mdColSplit="3/2" lgColSplit="3/2" reverseOnDesktop class="!items-start">
+      <SideBySide
+        mdColSplit="3/2"
+        lgColSplit="3/2"
+        reverseOnDesktop
+        class="!items-start"
+      >
         <div class="flex flex-col gap-4 md:sticky md:top-4">
           <svg
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-api text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/components/homepage/DemoBox.tsx b/www/components/homepage/DemoBox.tsx
@@ -9,7 +9,7 @@ export function DemoBox(props: DemoBoxProps) {
   const innerFlip = props.flip ? "skew-y-2 skew-x-3" : "-skew-y-2 -skew-x-3";
   return (
     <div
-      class={`bg-gradient-to-br font-medium from-blue-200 via-green-300 to-yellow-200 p-8 py-12 text-center items-center flex justify-center ${outerFlip}`}
+      class={`bg-gradient-to-br font-medium from-blue-200 via-green-300 to-yellow-200 p-5 py-8 text-center items-center flex justify-center text-sm ${outerFlip}`}
     >
       <div class={`w-full ${innerFlip}`}>
         {props.children}
diff --git a/www/components/homepage/ExampleArrow.tsx b/www/components/homepage/ExampleArrow.tsx
@@ -13,7 +13,7 @@ export function ExampleArrow(
       xmlns="http://www.w3.org/2000/svg"
       xml:space="preserve"
       style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"
-      class={`w-12 -my-8 relative z-10 mx-auto ${props?.class ?? ""}`}
+      class={`w-8 -my-6 relative z-10 mx-auto ${props?.class ?? ""}`}
     >
       <path
         d="M50.704,18c46.89,80.967 38.288,189.344 5.941,254.255"
diff --git a/www/components/homepage/FormsSection.tsx b/www/components/homepage/FormsSection.tsx
@@ -35,8 +35,8 @@ export function FormsSection() {
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               class="icon icon-tabler icon-tabler-route-square-2 text-fresh"
-              width="4rem"
-              height="4rem"
+              width="2.5rem"
+              height="2.5rem"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
diff --git a/www/components/homepage/HeadSection.tsx b/www/components/homepage/HeadSection.tsx
@@ -34,8 +34,8 @@ export function HeadSection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-file-code text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
@@ -52,20 +52,27 @@ export function HeadSection() {
           </svg>
           <SectionHeading>
             Full control of{" "}
-            <span dangerouslySetInnerHTML={{ __html: "&lt;head&gt;" }} />
+            <span
+              // deno-lint-ignore react-no-danger
+              dangerouslySetInnerHTML={{ __html: "&lt;head&gt;" }}
+            />
           </SectionHeading>
           <p>
             Use the{" "}
             <code
               class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono"
+              // deno-lint-ignore react-no-danger
               dangerouslySetInnerHTML={{ __html: "&lt;Head&gt;" }}
             />{" "}
             component from any page or island to set titles, meta tags,
             stylesheets, and scripts — no hoisting hacks or side channels
             needed.
           </p>
           <FancyLink href="/docs/advanced/head" class="mt-2">
-            <span dangerouslySetInnerHTML={{ __html: "Learn about &lt;Head&gt;" }} />
+            <span
+              // deno-lint-ignore react-no-danger
+              dangerouslySetInnerHTML={{ __html: "Learn about &lt;Head&gt;" }}
+            />
           </FancyLink>
         </div>
         <div class="flex flex-col gap-4">
diff --git a/www/components/homepage/Hero.tsx b/www/components/homepage/Hero.tsx
@@ -9,15 +9,20 @@ export function Hero() {
       <div class="bg-green-300 mt-0 pt-32 md:pt-48 !mb-0 bg-gradient-to-br from-blue-100 via-green-200 to-yellow-100">
         <div class="md:grid grid-cols-5 gap-8 md:gap-16 items-center w-full max-w-screen-xl mx-auto px-4 md:px-8 lg:px-16 2xl:px-0">
           <div class="flex-1 text-center md:text-left md:col-span-3 pb-8 md:pb-32">
+            <p class="italic text-gray-500 text-lg mb-4">Introducing Fresh:</p>
             <h2 class="text-[calc(1rem+4vw)] leading-tight sm:text-5xl lg:text-6xl sm:tracking-tight sm:leading-none font-extrabold">
-              The simple, approachable, productive web framework
+              The framework so simple, you already know it.
             </h2>
+            <p class="mt-6 text-lg sm:text-xl text-gray-700 text-balance max-w-prose">
+              No config files, no build step, no node_modules. Just one file and
+              you have a server with routing, JSX, and islands.
+            </p>
             <div class="mt-12 flex flex-wrap justify-center items-stretch md:justify-start gap-4">
               <FancyLink href="/docs/getting-started">Get started</FancyLink>
               <CopyArea code={`deno run -Ar jsr:@fresh/init`} />
             </div>
           </div>
-          <div class="md:col-span-2 flex justify-center items-end">
+          <div class="md:col-span-2 flex justify-center items-end pb-8 md:pb-32">
             <LemonTop />
           </div>
         </div>
diff --git a/www/components/homepage/IslandsSection.tsx b/www/components/homepage/IslandsSection.tsx
@@ -40,8 +40,8 @@ export function IslandsSection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-beach text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/components/homepage/PartialsSection.tsx b/www/components/homepage/PartialsSection.tsx
@@ -45,8 +45,8 @@ export function PartialsSection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-arrows-transfer-down text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/components/homepage/RecipeDemo.tsx b/www/components/homepage/RecipeDemo.tsx
@@ -6,13 +6,25 @@ export const RecipeDemo = () => (
     class="w-full grid grid-cols-1 md:grid-cols-[auto_1fr] text-left gap-6 items-stretch min-h-64"
   >
     <aside class="flex flex-col gap-2 underline p-6 pl-0 border-b md:border-r md:border-b-0 border-current text-left items-start justify-center">
-      <button type="button" f-partial="/recipes/lemonade" class="cursor-pointer">
+      <button
+        type="button"
+        f-partial="/recipes/lemonade"
+        class="cursor-pointer"
+      >
         Lemonade
       </button>
-      <button type="button" f-partial="/recipes/lemon-honey-tea" class="cursor-pointer">
+      <button
+        type="button"
+        f-partial="/recipes/lemon-honey-tea"
+        class="cursor-pointer"
+      >
         Lemon-honey tea
       </button>
-      <button type="button" f-partial="/recipes/lemondrop" class="cursor-pointer">
+      <button
+        type="button"
+        f-partial="/recipes/lemondrop"
+        class="cursor-pointer"
+      >
         Lemondrop Martini
       </button>
     </aside>
diff --git a/www/components/homepage/RenderingSection.tsx b/www/components/homepage/RenderingSection.tsx
@@ -23,8 +23,8 @@ export function RenderingSection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-atom text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/components/homepage/SectionHeading.tsx b/www/components/homepage/SectionHeading.tsx
@@ -4,7 +4,7 @@ export function SectionHeading(
   { children }: { children: ComponentChildren },
 ) {
   return (
-    <h2 class="text-3xl lg:text-4xl xl:text-5xl text-gray-600 font-[750] text-balance">
+    <h2 class="text-2xl lg:text-3xl xl:text-4xl text-gray-600 font-[750] text-balance">
       {children}
     </h2>
   );
diff --git a/www/components/homepage/SecuritySection.tsx b/www/components/homepage/SecuritySection.tsx
@@ -26,8 +26,8 @@ export function SecuritySection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-telescope text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/components/homepage/Simple.tsx b/www/components/homepage/Simple.tsx
@@ -1,38 +1,40 @@
 import { PageSection } from "../../components/PageSection.tsx";
 import { CodeBlock } from "../../components/CodeBlock.tsx";
+import { CodeWindow } from "../../components/CodeWindow.tsx";
 
-const ONE_FILE_EXAMPLE = `import { App } from "fresh";
+const TRADITIONAL = `// package.json
+// tsconfig.json
+// next.config.js
+// postcss.config.js
+// tailwind.config.js
+// .eslintrc.json
+// app/layout.tsx
+// app/page.tsx
 
-const app = new App()
-  .get("/", () =>
-    new Response("Hello!")
-  );
+// app/api/hello/route.ts
+import { NextResponse } from "next/server";
 
-app.listen();`;
+export async function GET() {
+  return NextResponse.json({
+    message: "Hello!",
+  });
+}`;
 
-const ADD_JSX_EXAMPLE = `import { App } from "fresh";
+const FRESH_EXAMPLE = `// main.ts — that's it.
+import { App } from "fresh";
 
 const app = new App()
   .get("/", (ctx) =>
     ctx.render(<h1>Hello!</h1>)
+  )
+  .get("/api/hello", () =>
+    Response.json({
+      message: "Hello!",
+    })
   );
 
 app.listen();`;
 
-const ADD_ISLAND_EXAMPLE = `import { useSignal } from
-  "@preact/signals";
-
-export function Counter() {
-  const count = useSignal(0);
-  return (
-    <button
-      onClick={() => count.value++}
-    >
-      Count: {count}
-    </button>
-  );
-}`;
-
 export function Simple() {
   return (
     <PageSection class="!mb-12 !mt-20">
@@ -42,50 +44,29 @@ export function Simple() {
           The framework so simple, you already know it.
         </h2>
         <p class="text-xl text-balance max-w-prose mx-auto">
-          Fresh is designed to be easy to use by building on the best well-known
-          tools, conventions, and web standards.
+          No config files, no build step, no node_modules. Just one file and you
+          have a server with routing, JSX, and islands.
         </p>
       </div>
 
-      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
-        <StepCard
-          step="1"
-          title="One file. That's it."
-          description="No config files, no build step, no node_modules. Just one file and you have a server."
-          code={ONE_FILE_EXAMPLE}
-        />
-        <StepCard
-          step="2"
-          title="Add JSX"
-          description="Render HTML with JSX. Server-side by default, fast by design."
-          code={ADD_JSX_EXAMPLE}
-        />
-        <StepCard
-          step="3"
-          title="Sprinkle interactivity"
-          description="Add islands for client-side JS only where you need it. Zero JS shipped by default."
-          code={ADD_ISLAND_EXAMPLE}
-        />
+      <div class="grid md:grid-cols-2 gap-6 mt-8 items-start">
+        <div class="flex flex-col gap-3">
+          <h3 class="font-bold text-lg text-gray-400 text-center">
+            The traditional way
+          </h3>
+          <CodeWindow name="8 config files + app code">
+            <CodeBlock code={TRADITIONAL} lang="js" />
+          </CodeWindow>
+        </div>
+        <div class="flex flex-col gap-3">
+          <h3 class="font-bold text-lg text-green-700 text-center">
+            The Fresh way
+          </h3>
+          <CodeWindow name="main.ts">
+            <CodeBlock code={FRESH_EXAMPLE} lang="jsx" />
+          </CodeWindow>
+        </div>
       </div>
     </PageSection>
   );
 }
-
-function StepCard(
-  props: { step: string; title: string; description: string; code: string },
-) {
-  return (
-    <div class="flex flex-col gap-3">
-      <div class="flex items-center gap-2">
-        <span class="bg-green-200 text-green-800 text-sm font-bold rounded-full w-7 h-7 flex items-center justify-center">
-          {props.step}
-        </span>
-        <h3 class="font-bold text-lg">{props.title}</h3>
-      </div>
-      <p class="text-gray-600 text-sm">{props.description}</p>
-      <div class="text-sm flex-1 [&>pre]:!m-0 [&>pre]:h-full">
-        <CodeBlock code={props.code} lang="jsx" />
-      </div>
-    </div>
-  );
-}
diff --git a/www/components/homepage/TransitionsSection.tsx b/www/components/homepage/TransitionsSection.tsx
@@ -32,8 +32,8 @@ export function TransitionsSection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-transition-right text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/components/homepage/WebSocketSection.tsx b/www/components/homepage/WebSocketSection.tsx
@@ -33,8 +33,8 @@ export function WebSocketSection() {
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-arrows-exchange text-fresh"
-            width="4rem"
-            height="4rem"
+            width="2.5rem"
+            height="2.5rem"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/www/islands/FormSubmitDemo.tsx b/www/islands/FormSubmitDemo.tsx
diff --git a/www/routes/index.tsx b/www/routes/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ export function PageSection(props: JSX.HTMLAttributes<HTMLDivElement>) {`
`4`	`4`	`return (`
`5`	`5`	`<section`
`6`	`6`	`id={props.id ?? ""}`
`7`		- class={`w-full max-w-screen-xl mx-auto my-16 md:my-24 lg:my-32 px-4 sm:px-8 lg:px-16 2xl:px-0 flex flex-col gap-8 md:gap-16 ${
	`7`	+ class={`w-full max-w-screen-xl mx-auto my-8 md:my-12 lg:my-16 px-4 sm:px-8 lg:px-16 2xl:px-0 flex flex-col gap-6 md:gap-8 ${
`8`	`8`	`props.class ?? ""`
`9`	`9`	}`}
`10`	`10`	`>`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export function SideBySide(props: SideBySideProps) {`
`26`	`26`
`27`	`27`	`return (`
`28`	`28`	`<div`
`29`		- class={`grid grid-cols-1 items-center gap-12 md:gap-16 xl:gap-32 ${
	`29`	+ class={`grid grid-cols-1 items-center gap-8 md:gap-10 xl:gap-16 ${
`30`	`30`	`props.reverseOnDesktop ? "[&>*]:md:first:order-1" : ""`
`31`	`31`	} ${mdSplitClass} ${lgSplitClass} ${props.class ?? ""}`}
`32`	`32`	`>`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export function DemoBox(props: DemoBoxProps) {`
`9`	`9`	`const innerFlip = props.flip ? "skew-y-2 skew-x-3" : "-skew-y-2 -skew-x-3";`
`10`	`10`	`return (`
`11`	`11`	`<div`
`12`		- class={`bg-gradient-to-br font-medium from-blue-200 via-green-300 to-yellow-200 p-8 py-12 text-center items-center flex justify-center ${outerFlip}`}
	`12`	+ class={`bg-gradient-to-br font-medium from-blue-200 via-green-300 to-yellow-200 p-5 py-8 text-center items-center flex justify-center text-sm ${outerFlip}`}
`13`	`13`	`>`
`14`	`14`	<div class={`w-full ${innerFlip}`}>
`15`	`15`	`{props.children}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ export function ExampleArrow(`
`13`	`13`	`xmlns="http://www.w3.org/2000/svg"`
`14`	`14`	`xml:space="preserve"`
`15`	`15`	`style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"`
`16`		- class={`w-12 -my-8 relative z-10 mx-auto ${props?.class ?? ""}`}
	`16`	+ class={`w-8 -my-6 relative z-10 mx-auto ${props?.class ?? ""}`}
`17`	`17`	`>`
`18`	`18`	`<path`
`19`	`19`	`d="M50.704,18c46.89,80.967 38.288,189.344 5.941,254.255"`