feat: landing page redesign

astro.config.ts

@@ -60,6 +60,7 @@ async function autogenStyles() {
 	)
 		.filter((x) => x.isFile())
 		.map((x) => x.parentPath + x.name)
+		.filter((x) => x !== "./src/styles/landing.css")
 		.sort((a) => (a === "./src/styles/tailwind.css" ? -1 : 1));
 
 	return styles;

src/components/landing/AccelerateSection.astro

@@ -0,0 +1,53 @@
+---
+import ProductCard from "./ProductCard.astro";
+import ProductCardGrid from "./ProductCardGrid.astro";
+import SectionHeading from "./SectionHeading.astro";
+import ViewAllLink from "./ViewAllLink.astro";
+import { phases, phaseColor } from "./accelerate-data";
+---
+
+<section
+	class="wf-section group/wf pt-10 pb-10"
+	aria-labelledby="accelerate-heading"
+	id="accelerate"
+	data-mode="after"
+>
+	<div class="mb-6 flex items-center justify-between sm:mb-8">
+		<div>
+			<SectionHeading id="accelerate-heading" class="mb-2">
+				Faster web performance
+			</SectionHeading>
+			<p
+				class="text-foreground-muted max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
+			>
+				Cloudflare routes traffic through the most reliable paths and delivers
+				assets as close to end users as possible.
+			</p>
+		</div>
+		<ViewAllLink href="/directory/?product-group=Application+performance">
+			Explore Directory
+		</ViewAllLink>
+	</div>
+
+	<ProductCardGrid>
+		{
+			phases.map((p) => (
+				<div
+					class="wf-product-card flex"
+					data-phase={p.id}
+					style={`--phase-color: ${phaseColor(p)};`}
+				>
+					<ProductCard
+						icon={p.icon}
+						product={p.product}
+						scenario={p.outcome}
+						detail={p.detail}
+						href={p.href}
+						cta={p.cta}
+						category={p.category}
+					/>
+				</div>
+			))
+		}
+	</ProductCardGrid>
+</section>

src/components/landing/AgentSetup.astro

@@ -0,0 +1,61 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import CornerMarks from "./CornerMarks.astro";
+import HalftoneBackground from "./HalftoneBackground.astro";
+import SectionHeading from "./SectionHeading.astro";
+import CopyPromptButton from "./CopyPromptButton.astro";
+import Button from "./Button.astro";
+
+const ALL_GUIDES_HREF = "/agent-setup/";
+---
+
+<section
+	id="agent-setup"
+	class="pt-10 pb-6 lg:pt-14"
+	aria-labelledby="agents-heading"
+>
+	<div
+		class="border-accent-100/20 bg-accent-100/20 relative overflow-visible border"
+	>
+		<CornerMarks />
+
+		<div class="bg-accent-100/20 grid grid-cols-12 gap-px">
+			<div
+				class="bg-background/90 col-span-12 flex min-w-0 flex-col gap-3 p-5 sm:p-8 lg:col-span-8"
+			>
+				<SectionHeading id="agents-heading">
+					Build with your favorite AI agent
+				</SectionHeading>
+
+				<p
+					class="text-foreground-muted mt-0 mb-2 max-w-[50ch] text-sm leading-relaxed text-pretty md:text-base"
+				>
+					Paste into any AI coding agent to install Cloudflare agent tooling:
+				</p>
+				<CopyPromptButton class="mr-auto" />
+			</div>
+			<div
+				class="bg-background/90 focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden p-5 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 sm:p-8 lg:col-span-4 lg:flex-col lg:items-stretch dark:focus-visible:bg-[#2A2118]"
+			>
+				<HalftoneBackground />
+				<div class="relative z-[1] flex flex-col gap-2.5">
+					<span
+						class="text-foreground max-w-[14ch] text-lg leading-tight font-medium md:text-xl"
+					>
+						Browse all agent setup guides
+					</span>
+				</div>
+
+				<Button
+					href={ALL_GUIDES_HREF}
+					variant="primary"
+					class="ml-auto"
+					size="md"
+				>
+					All agents
+					<Icon name="right-arrow" size="1rem" />
+				</Button>
+			</div>
+		</div>
+	</div>
+</section>

src/components/landing/BuildFromScratch.astro

@@ -0,0 +1,187 @@
+---
+import { Icon } from "astro-icon/components";
+import CommandBlock from "./CommandBlock.astro";
+import CornerMarks from "./CornerMarks.astro";
+import Button from "./Button.astro";
+import RightArrow from "./RightArrow.astro";
+import SectionHeading from "./SectionHeading.astro";
+import TabBar from "./TabBar.astro";
+
+const primitives = [
+	{
+		id: "compute",
+		label: "Compute",
+		icon: "workers-vpc",
+		iconColor: "#0a95ff",
+		iconBg: "rgba(10, 149, 255, 0.1)",
+		iconBgDark: "rgba(10, 149, 255, 0.16)",
+		heading: "Deploy with one command",
+		description:
+			"Deploy serverless functions and full-stack apps on Cloudflare's global network. No servers to manage. No cold starts or region complexity.",
+		command: "npx wrangler init my-app",
+		cta: {
+			label: "Create your first Worker",
+			href: "/workers/get-started/guide/",
+		},
+		tags: [
+			{ label: "Workers", href: "/workers/" },
+			{ label: "Containers", href: "/containers/" },
+			{ label: "Durable Objects", href: "/durable-objects/" },
+			{ label: "Queues", href: "/queues/" },
+		],
+	},
+	{
+		id: "ai",
+		label: "AI",
+		icon: "workers-ai",
+		iconColor: "#19e306",
+		iconBg: "#f2f5e1",
+		iconBgDark: "rgba(25, 227, 6, 0.16)",
+		heading: "The AI inference platform",
+		description:
+			"Run AI inference globally with one API call, build agents, and search across your data — no GPUs to manage, no capacity planning.",
+		command: "npx wrangler ai models",
+		cta: { label: "Browse available models", href: "/workers-ai/models/" },
+		tags: [
+			{ label: "Workers AI", href: "/workers-ai/" },
+			{ label: "AI Gateway", href: "/ai-gateway/" },
+			{ label: "Agents", href: "/agents/" },
+			{ label: "Vectorize", href: "/vectorize/" },
+			{ label: "Browser Run", href: "/browser-run/" },
+		],
+	},
+	{
+		id: "storage",
+		label: "Storage & Databases",
+		icon: "d1",
+		iconColor: "#ee0ddb",
+		iconBg: "rgba(238, 13, 219, 0.1)",
+		iconBgDark: "rgba(238, 13, 219, 0.16)",
+		heading: "Make your database feel instant, everywhere",
+		description:
+			"Serverless SQL, globally distributed key-value, and global database acceleration — query directly from Workers with no connection management.",
+		command: "npx wrangler d1 create my-database",
+		cta: { label: "Get started with D1", href: "/d1/get-started/" },
+		tags: [
+			{ label: "R2", href: "/r2/" },
+			{ label: "D1", href: "/d1/" },
+			{ label: "KV", href: "/kv/" },
+			{ label: "Hyperdrive", href: "/hyperdrive/" },
+		],
+	},
+	{
+		id: "media",
+		label: "Media",
+		icon: "images",
+		iconColor: "#9616ff",
+		iconBg: "rgba(150, 22, 255, 0.1)",
+		iconBgDark: "rgba(150, 22, 255, 0.22)",
+		heading: "Build media pipelines without infrastructure headaches",
+		description:
+			"Cloudflare Images helps teams build scalable, reliable media pipelines to store, optimize, and deliver images.",
+		command:
+			"curl --request POST https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/images/v1",
+		cta: {
+			label: "Get started with Images",
+			href: "/images/get-started/introduction/",
+		},
+		tags: [
+			{ label: "Images", href: "/images/" },
+			{ label: "Stream", href: "/stream/" },
+			{ label: "Realtime", href: "/realtime/" },
+		],
+	},
+];
+---
+
+<section class="pt-10 pb-6 lg:pt-14" aria-labelledby="build-heading" id="build">
+	<SectionHeading id="build-heading" class="mb-8">
+		Powerful primitives, seamlessly integrated
+	</SectionHeading>
+
+	<div class="border-border-100 relative overflow-visible border">
+		<CornerMarks />
+
+		<TabBar
+			name="build"
+			variant="underline"
+			aria-label="Build primitives"
+			tabs={primitives.map((p) => ({ id: p.id, label: p.label }))}
+		/>
+
+		{
+			primitives.map((p, i) => (
+				<div
+					role="tabpanel"
+					id={`build-panel-${p.id}`}
+					aria-labelledby={`build-tab-${p.id}`}
+					data-tabbar="build"
+					data-tab-id={p.id}
+					hidden={i !== 0}
+					class="bg-background p-5 sm:p-8"
+				>
+					<div class="w-full">
+						<div class="mb-4 flex items-center gap-3">
+							<div
+								class="build-panel-icon flex size-8 shrink-0 items-center justify-center rounded border border-dashed"
+								style={`--build-icon-color:${p.iconColor};--build-icon-bg:${p.iconBg};--build-icon-bg-dark:${p.iconBgDark};`}
+							>
+								<Icon name={p.icon} size="16px" />
+							</div>
+							<h3 class="text-foreground text-base leading-snug font-medium md:text-lg">
+								{p.heading}
+							</h3>
+						</div>
+						<p class="text-foreground-muted mb-6 text-sm leading-relaxed md:text-base">
+							{p.description}
+						</p>
+
+						<CommandBlock
+							id={`build-cmd-${p.id}`}
+							command={p.command}
+							rounded
+							class="mb-6 max-w-[680px]"
+						/>
+
+						<div class="flex w-full flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-6">
+							<Button href={p.cta.href} variant="secondary" size="md">
+								<span class="inline-flex items-center gap-2">
+									{p.cta.label}
+									<RightArrow size={12} />
+								</span>
+							</Button>
+							<p class="text-foreground-muted relative top-px min-w-0 flex-1 text-sm">
+								{p.tags.map((tag, idx) => (
+									<span class="inline-flex items-center">
+										<a
+											href={tag.href}
+											class="text-foreground no-underline hover:underline hover:underline-offset-4"
+										>
+											{tag.label}
+										</a>
+										{idx < p.tags.length - 1 && (
+											<span class="text-border-100 mx-1.5" aria-hidden="true">
+												·
+											</span>
+										)}
+									</span>
+								))}
+							</p>
+						</div>
+					</div>
+				</div>
+			))
+		}
+	</div>
+</section>
+
+<style>
+	.build-panel-icon {
+		color: var(--build-icon-color);
+		border-color: var(--build-icon-color);
+		background: var(--build-icon-bg);
+	}
+	:global(:root[data-theme="dark"]) .build-panel-icon {
+		background: var(--build-icon-bg-dark);
+	}
+</style>