docs(landing): polish preview section, features layout, and titles

- Move HyperFlow Preview above Modules for clearer flow.
- Add Devtools cards with icon-and-label headers, doc links, and richer mini visuals (network log with badges and timing bars, queue chips, sparkline gradient).
- Tier 2 features: cardless layout with uppercase labels and tag pills; Tier 1 BigFeatureCard optional tags.
- Fix Title word spacing on Big/Medium/Small blocks (gap-x on inline-flex word spans).
- CLI demo closing line: Ship it → Just use it.

Made-with: Cursor

Author: prc5

documentation/src/components/landing/blocks/big-block/big-block.tsx

@@ -52,8 +52,8 @@ export const BigBlock = ({ title, description, img }: { title: string; descripti
                 <div>
                   <Title
                     size="none"
-                    wrapperClass="inline-flex flex-wrap font-bold pb-1"
-                    className="!text-4xl !leading-tight"
+                    wrapperClass="inline-flex flex-wrap gap-x-3 font-bold pb-1"
+                    className="!text-4xl !leading-tight font-extrabold"
                   >
                     {title}
                   </Title>

documentation/src/components/landing/blocks/medium-block/medium-block.tsx

@@ -31,7 +31,7 @@ export const MediumBlock = ({
             <div className="grid grid-cols-1 md:grid-cols-[3fr_1fr] h-full">
               <div className="flex flex-col justify-between md:max-w-[480px] shrink-0 order-1 md:order-none px-6 py-4 md:px-8 md:py-4 h-full">
                 <div className="mt-4 flex-1">
-                  <Title size="none" wrapperClass="inline-flex flex-wrap font-bold pb-1" className="text-2xl">
+                  <Title size="none" wrapperClass="inline-flex flex-wrap gap-x-2 font-bold pb-1" className="text-2xl">
                     {title}
                   </Title>
                   <Description size="none" className="text-zinc-400">

documentation/src/components/landing/blocks/small-block/small-block.tsx

@@ -46,7 +46,7 @@ export const SmallBlock = ({
             <div className="flex flex-col md:max-w-[480px] shrink-0 order-1 md:order-none px-6 py-4 md:px-8 md:py-6 h-full">
               <div className="flex flex-col h-full">
                 <div className="size-12 bg-yellow-500/10 rounded-lg flex items-center justify-center mb-4">{icon}</div>
-                <Title size="none" wrapperClass="inline-flex flex-wrap font-bold pb-1" className="text-2xl">
+                <Title size="none" wrapperClass="inline-flex flex-wrap gap-x-2 font-bold pb-1" className="text-2xl">
                   {title}
                 </Title>
                 <Description size="none" className="text-zinc-400 text-lg !mt-1 !mb-2 flex-1">

documentation/src/components/landing/features/cli-sdk-demo.tsx

@@ -34,7 +34,7 @@ export function CliSdkDemo({ bare = false }: { bare?: boolean } = {}) {
         {"."}
       </AnimatedSpan>
 
-      <AnimatedSpan className="!text-blue-400">🚀 Ship it.</AnimatedSpan>
+      <AnimatedSpan className="!text-blue-400">🚀 Just use it.</AnimatedSpan>
     </Terminal>
   );
 

documentation/src/components/landing/features/features.tsx

@@ -34,6 +34,7 @@ const tier2ItemVariants = {
 
 interface InlineFeature {
   icon: React.ElementType;
+  label: string;
   title: string;
   description: string;
   tags: string[];
@@ -42,36 +43,42 @@ interface InlineFeature {
 const inlineFeatures: InlineFeature[] = [
   {
     icon: Shield,
+    label: "Type safety",
     title: "End-to-end TypeScript",
     description: "Params inferred from URL strings. Typed responses, payloads, query params, errors. Zero any.",
     tags: ["URL params", "Responses", "Payloads", "Query", "Errors"],
   },
   {
     icon: Code2,
+    label: "React",
     title: "React hooks built in",
     description: "useFetch for queries. useSubmit for mutations. Loading, error, and data states all managed for you.",
     tags: ["useFetch", "useSubmit", "loading", "error", "data"],
   },
   {
     icon: Activity,
+    label: "Devtools",
     title: "HyperFlow DevTools",
     description: "Inspect every request, cache entry, queue, and event. Debug your data layer visually.",
     tags: ["Network", "Cache", "Queues", "Events"],
   },
   {
     icon: Globe,
+    label: "Runtimes",
     title: "Runs everywhere",
     description: "Browser, Node, edge, mobile, SSR. Same client, same behavior, every runtime.",
     tags: ["Browser", "Node", "Edge", "Mobile", "SSR"],
   },
   {
     icon: Zap,
+    label: "Mutations",
     title: "Optimistic updates",
     description: "Mutate the UI first, reconcile with the server. Smooth, race-condition-free.",
     tags: ["Mutate first", "Reconcile", "Race-safe", "Rollback"],
   },
   {
     icon: Layers3,
+    label: "Performance",
     title: "Smart deduplication",
     description: "Five components ask for the same data. One network call fires. Automatic.",
     tags: ["Shared promise", "One request", "Auto"],
@@ -199,10 +206,11 @@ export function Features(): React.JSX.Element {
               variants={tier2ItemVariants}
               className="group relative flex h-full flex-col"
             >
-              <div className="flex size-10 items-center justify-center rounded-lg bg-yellow-500/[0.08]">
-                <feature.icon className="size-5 text-yellow-500" />
-              </div>
-              <h4 className="mt-4 text-lg font-semibold tracking-tight text-zinc-100">{feature.title}</h4>
+              <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-widest text-zinc-500">
+                <feature.icon className="size-3.5" />
+                {feature.label}
+              </span>
+              <h4 className="mt-2 text-xl font-extrabold tracking-tight text-zinc-100">{feature.title}</h4>
               <p className="mt-2 text-[15px] leading-relaxed text-zinc-400">{feature.description}</p>
               <div className="mt-auto flex flex-wrap gap-1.5 pt-5">
                 {feature.tags.map((tag) => (

documentation/src/components/landing/landing.tsx

@@ -1,22 +1,22 @@
-import { useState } from "react";
 import { useDidMount } from "@better-hooks/lifecycle";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
 import { useWindowEvent } from "@site/src/hooks/use-window-event";
+import Layout from "@theme/Layout";
+import { useState } from "react";
 
-import { Hero } from "./hero";
-import { Clients } from "./clients";
+import { Cookies } from "../cookies/cookies";
+import { About } from "./about/about";
 import { Blocks } from "./blocks";
 import { CallToAction } from "./call-to-action";
-import { Modules } from "./modules/modules";
+import { Clients } from "./clients";
+import { CodePreview } from "./code/code";
 // import { Integrations } from "./integrations/integrations";
 import { Features } from "./features/features";
+import { Hero } from "./hero";
+import { Modules } from "./modules/modules";
 // import { Example } from "./example/example";
 import { Preview } from "./preview/preview";
 import { Sponsors } from "./sponsors/sponsors";
-import { About } from "./about/about";
-import { Cookies } from "../cookies/cookies";
-import { CodePreview } from "./code/code";
 
 export const Landing = () => {
   const { siteConfig } = useDocusaurusContext();
@@ -47,10 +47,10 @@ export const Landing = () => {
         <Clients />
         <About />
         <Features />
+        <Preview />
         <Modules />
         <Blocks />
         {/* <Integrations /> */}
-        <Preview />
         {/* <Example /> */}
         <Sponsors />
         <CallToAction />

documentation/src/components/landing/preview/devtools-visuals.tsx

@@ -1,25 +1,25 @@
 import React, { Fragment } from "react";
 
-/* ─── Network Inspector — mini request log ───────────────────────── */
+/* ─── Network Inspector — request log with timing bars ───────────── */
 
 interface LogRow {
   method: "GET" | "POST" | "PUT" | "DELETE";
   path: string;
   status: number;
-  time: string;
+  time: number;
 }
 
 const networkLog: LogRow[] = [
-  { method: "GET", path: "/users", status: 200, time: "142ms" },
-  { method: "POST", path: "/users/42", status: 201, time: "89ms" },
-  { method: "GET", path: "/posts/12", status: 304, time: "12ms" },
+  { method: "GET", path: "/users", status: 200, time: 142 },
+  { method: "POST", path: "/users/42", status: 201, time: 89 },
+  { method: "GET", path: "/posts/12", status: 304, time: 12 },
 ];
 
-const methodTones: Record<LogRow["method"], string> = {
-  GET: "text-emerald-300",
-  POST: "text-violet-300",
-  PUT: "text-amber-300",
-  DELETE: "text-rose-300",
+const methodBadgeTones: Record<LogRow["method"], string> = {
+  GET: "border-emerald-400/30 bg-emerald-400/[0.08] text-emerald-300",
+  POST: "border-violet-400/30 bg-violet-400/[0.08] text-violet-300",
+  PUT: "border-amber-400/30 bg-amber-400/[0.08] text-amber-300",
+  DELETE: "border-rose-400/30 bg-rose-400/[0.08] text-rose-300",
 };
 
 function statusTone(status: number) {
@@ -29,17 +29,37 @@ function statusTone(status: number) {
   return "text-emerald-300";
 }
 
+function timingBarTone(time: number) {
+  if (time > 150) return "bg-amber-400/70";
+  if (time > 60) return "bg-emerald-400/70";
+  return "bg-sky-400/70";
+}
+
+const TIMING_CAP = 180;
+
 export function NetworkLogVisual() {
   return (
-    <div className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-x-3 gap-y-1 font-mono text-[11px] leading-none">
-      {networkLog.map((row) => (
-        <Fragment key={`${row.method}-${row.path}`}>
-          <span className={`whitespace-nowrap font-semibold ${methodTones[row.method]}`}>{row.method}</span>
-          <span className="min-w-0 truncate text-zinc-300">{row.path}</span>
-          <span className={`whitespace-nowrap tabular-nums ${statusTone(row.status)}`}>{row.status}</span>
-          <span className="whitespace-nowrap tabular-nums text-zinc-500">{row.time}</span>
-        </Fragment>
-      ))}
+    <div className="grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-x-2.5 gap-y-2 font-mono text-[11px] leading-none">
+      {networkLog.map((row) => {
+        const widthPct = Math.min(100, (row.time / TIMING_CAP) * 100);
+        return (
+          <Fragment key={`${row.method}-${row.path}`}>
+            <span
+              className={`whitespace-nowrap rounded border px-1.5 py-1 text-[10px] font-bold uppercase leading-none ${methodBadgeTones[row.method]}`}
+            >
+              {row.method}
+            </span>
+            <span className="min-w-0 truncate text-zinc-300">{row.path}</span>
+            <span className={`whitespace-nowrap tabular-nums font-semibold ${statusTone(row.status)}`}>
+              {row.status}
+            </span>
+            <div className="h-1 w-14 overflow-hidden rounded-full bg-white/[0.06]">
+              <div style={{ width: `${widthPct}%` }} className={`h-full rounded-full ${timingBarTone(row.time)}`} />
+            </div>
+            <span className="whitespace-nowrap tabular-nums text-zinc-500">{row.time}ms</span>
+          </Fragment>
+        );
+      })}
     </div>
   );
 }
@@ -71,37 +91,60 @@ export function CacheHitRateVisual() {
   );
 }
 
-/* ─── Queue Manager — flow rows ──────────────────────────────────── */
+/* ─── Queue Manager — chip rows ──────────────────────────────────── */
 
 interface QueueRow {
   label: string;
   count: number;
-  dots: number;
+  chips: number;
+  chipClass: string;
   dotClass: string;
   pulseAt?: number;
 }
 
 const queueRows: QueueRow[] = [
-  { label: "In-flight", count: 2, dots: 2, dotClass: "bg-amber-400", pulseAt: 1 },
-  { label: "Pending", count: 5, dots: 5, dotClass: "bg-white/20" },
-  { label: "Done", count: 128, dots: 8, dotClass: "bg-emerald-400/50" },
+  {
+    label: "In-flight",
+    count: 2,
+    chips: 2,
+    chipClass: "bg-gradient-to-b from-amber-400 to-amber-500 shadow-[0_0_6px_rgba(251,191,36,0.45)]",
+    dotClass: "bg-amber-400",
+    pulseAt: 1,
+  },
+  {
+    label: "Pending",
+    count: 5,
+    chips: 5,
+    chipClass: "bg-white/[0.04] border border-white/[0.12]",
+    dotClass: "bg-white/30",
+  },
+  {
+    label: "Done",
+    count: 128,
+    chips: 8,
+    chipClass: "bg-gradient-to-b from-emerald-500/50 to-emerald-600/40",
+    dotClass: "bg-emerald-400/70",
+  },
 ];
 
 export function QueueFlowVisual() {
   return (
-    <div className="grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-1.5 font-mono text-[11px] leading-none">
+    <div className="grid grid-cols-[auto_1fr_auto] items-center gap-x-6 gap-y-4 font-mono text-[11px] leading-none">
       {queueRows.map((row) => (
         <Fragment key={row.label}>
-          <span className="whitespace-nowrap text-zinc-500">{row.label}</span>
+          <span className="inline-flex items-center gap-2 whitespace-nowrap text-zinc-400">
+            <span className={`size-1.5 rounded-full ${row.dotClass}`} />
+            {row.label}
+          </span>
           <div className="flex gap-1">
-            {Array.from({ length: row.dots }).map((_, i) => (
+            {Array.from({ length: row.chips }).map((_, i) => (
               <span
                 key={`${row.label}-${i.toString()}`}
-                className={`size-1.5 rounded-full ${row.dotClass} ${row.pulseAt === i ? "animate-pulse" : ""}`}
+                className={`h-3 w-3.5 rounded-[3px] ${row.chipClass} ${row.pulseAt === i ? "animate-pulse" : ""}`}
               />
             ))}
           </div>
-          <span className="whitespace-nowrap tabular-nums text-zinc-500">{row.count}</span>
+          <span className="whitespace-nowrap tabular-nums text-zinc-400">{row.count}</span>
         </Fragment>
       ))}
     </div>

documentation/src/components/landing/preview/preview.tsx

@@ -12,6 +12,7 @@ import { CacheHitRateVisual, MetricsSparklineVisual, NetworkLogVisual, QueueFlow
 
 interface DevtoolsFeature {
   icon: React.ElementType;
+  label: string;
   title: string;
   description: string;
   link: string;
@@ -21,27 +22,31 @@ interface DevtoolsFeature {
 const devtoolsFeatures: DevtoolsFeature[] = [
   {
     icon: Network,
+    label: "Network",
     title: "Network Inspector",
     description: "Stream every request as it fires. Headers, payload, response, and per-phase timings.",
     link: "/docs/hyper-flow/features/network",
     visual: <NetworkLogVisual />,
   },
   {
     icon: Database,
+    label: "Cache",
     title: "Cache Inspector",
     description: "Browse cached entries with hit rates, size, and last update. Drill into any key to debug stale data.",
     link: "/docs/hyper-flow/features/cache",
     visual: <CacheHitRateVisual />,
   },
   {
     icon: Workflow,
+    label: "Queues",
     title: "Queue Manager",
     description: "Live view of every queue. Track pending, in-flight, and stuck requests across your app.",
     link: "/docs/hyper-flow/features/queues",
     visual: <QueueFlowVisual />,
   },
   {
     icon: Gauge,
+    label: "Metrics",
     title: "Performance Dashboard",
     description:
       "Network, cache, and queue metrics in one view. Success rates, hit ratios, throughput, slow endpoints.",
@@ -129,7 +134,7 @@ export function Preview(): React.JSX.Element {
       </section>
 
       {/* Feature cards — emerge from the dashboard fade */}
-      <div className="relative z-10 max-w-6xl mx-auto px-4 mt-20 md:mt-40 mb-20">
+      <div className="relative z-10 max-w-6xl mx-auto px-4 mt-40 mb-20">
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8">
           {devtoolsFeatures.map((feature, index) => (
             <motion.div
@@ -147,13 +152,12 @@ export function Preview(): React.JSX.Element {
             >
               <Noise visibility="medium" />
               <Link to={feature.link} className="!no-underline relative z-10 flex h-full flex-col">
-                <div className="flex items-center gap-3">
-                  <div className="flex size-10 items-center justify-center rounded-lg bg-yellow-500/10">
-                    <feature.icon className="size-5 text-yellow-500" />
-                  </div>
-                  <h4 className="text-lg font-semibold tracking-tight text-zinc-100">{feature.title}</h4>
-                </div>
-                <p className="mt-3 text-[15px] leading-relaxed text-zinc-400">{feature.description}</p>
+                <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-widest text-zinc-500">
+                  <feature.icon className="size-3.5" />
+                  {feature.label}
+                </span>
+                <h4 className="mt-2 text-2xl font-extrabold tracking-tight text-zinc-100">{feature.title}</h4>
+                <p className="mt-2 text-[15px] leading-relaxed text-zinc-400">{feature.description}</p>
                 <div className="mt-5">{feature.visual}</div>
                 <span className="mt-auto inline-flex items-center gap-1 pt-5 text-xs font-medium text-zinc-500 transition-colors group-hover/card:text-zinc-300">
                   Open in docs