From 790cd2b364a49e84c14d605e0886268657951961 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 20 Aug 2026 10:20:52 +0100
Subject: [PATCH] web: spruce up homepage

not really the point of focus for now, but would be nice for beta
testers to see something nice here.

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/home/MarketingHome.svelte  | 120 +++++-------------
 web/src/lib/components/shell/Footer.svelte    |   4 +-
 web/src/lib/components/shell/Topbar.svelte    |   4 -
 web/src/routes/+layout.svelte                 |   2 +-
 web/src/routes/+page.svelte                   |   2 +-
 5 files changed, 34 insertions(+), 98 deletions(-)

diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte
index 4ed6ffe1..b6babc42 100644
--- a/web/src/lib/components/home/MarketingHome.svelte
+++ b/web/src/lib/components/home/MarketingHome.svelte
@@ -1,119 +1,59 @@
 <script lang="ts">
 	import ArrowRight from "$icon/arrow-right";
-
-	const activityCards = [
-		{ left: "created", right: "new-knot", x: "left-[8%]", y: "top-[28%]", width: "w-48" },
-		{ left: "starred", right: "tiny-compiler", x: "left-[22%]", y: "top-[62%]", width: "w-72" },
-		{ left: "opened", right: "stacked-prs", x: "left-[48%]", y: "top-[45%]", width: "w-80" },
-		{ left: "merged", right: "microvm-ci", x: "left-[66%]", y: "top-[20%]", width: "w-72" },
-		{ left: "followed", right: "self-hosted", x: "left-[75%]", y: "top-[58%]", width: "w-64" }
-	];
-
-	const ticks = Array.from({ length: 160 }, (_, index) => index);
+	import Button from "../ui/Button.svelte";
+	import Input from "../ui/Input.svelte";
 </script>
 
-{#snippet marketingButton(label: string, showArrow: boolean, className: string)}
-	<button
-		class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-sm border border-border-success bg-background-success-emphasis px-4 py-2 typography-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
-		type="submit"
-	>
-		{label}
-		{#if showArrow}
-			<ArrowRight class="size-4" aria-hidden="true" />
-		{/if}
-	</button>
-{/snippet}
-
-{#snippet signupForm(
-	id: string,
-	label: string,
-	showArrow: boolean,
-	formClass: string,
-	buttonClass: string
-)}
+{#snippet signupForm(label: string, showArrow: boolean, formClass: string)}
 	<form class={formClass} method="get" action="/signup">
-		<label class="sr-only" for={id}>Email</label>
-		<input
-			{id}
+		<Input
 			type="email"
 			name="id"
+			size="large"
 			required
+			label="Email"
 			placeholder="Enter your email"
-			class="min-w-0 flex-1 rounded-sm border border-border-strong bg-background-default px-3 py-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
+			class="min-w-0 flex-1"
 		/>
-		{@render marketingButton(label, showArrow, buttonClass)}
+		<Button
+			type="submit"
+			variant="primary"
+			size="large"
+			insetShadow={true}
+			icon={showArrow ? ArrowRight : undefined}
+			iconSide="right"
+		>
+			{label}
+		</Button>
 	</form>
 {/snippet}
 
-<section class="overflow-hidden px-6 pt-28 pb-24 md:pt-36 md:pb-32">
-	<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-14 md:grid-cols-2">
-		<h1
-			class="text-6xl leading-[0.98] font-bold tracking-tighter text-foreground-default md:text-7xl lg:text-8xl"
-		>
+<section class="overflow-hidden px-4 pt-28 pb-24 md:px-6 md:pt-36 md:pb-32">
+	<div
+		class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-12 md:grid-cols-[3fr_2fr]"
+	>
+		<h1 class="text-5xl font-bold text-foreground-default md:text-6xl lg:text-8xl">
 			tightly-knit<br />social coding.
 		</h1>
 
-		<div
-			class="max-w-2xl space-y-6 typography-heading-4 leading-8 font-normal text-foreground-default"
-		>
+		<div class="max-w-2xl space-y-6 text-xl text-foreground-default">
 			<p>The next-generation social coding platform.</p>
 			<p>
-				We envision a place where developers have ownership of their code, communities can freely
-				self-govern and most importantly, coding can be social and fun again.
+				We envision a place where developers have ownership of their code, communities can
+				freely self-govern and most importantly, coding can be social and fun again.
 			</p>
-			{@render signupForm("hero-email", "Join now", true, "flex max-w-lg gap-2", "")}
+			{@render signupForm("Join now", true, "flex max-w-lg gap-2")}
 		</div>
 	</div>
-
-	<div class="relative mx-auto mt-28 hidden h-72 max-w-screen-xl md:block" aria-hidden="true">
-		<div class="absolute inset-x-0 bottom-10 flex items-end gap-1.25 opacity-35">
-			{#each ticks as tick (tick)}
-				<span class="h-4 w-px bg-border-strong" class:h-7={tick % 24 === 0}></span>
-			{/each}
-		</div>
-		<div class="absolute inset-x-0 bottom-14 h-px bg-border-default"></div>
-		{#each activityCards as card, index (card.right)}
-			<div
-				class={`activity-card absolute ${card.x} ${card.y} ${card.width} overflow-hidden rounded-sm border border-border-strong bg-background-default/95 typography-paragraph-small text-foreground-muted shadow-2xl`}
-			>
-				<div class="flex items-center gap-2 border-l border-border-strong px-4 py-3">
-					<span class="size-5 rounded-full bg-orange-300/90"></span>
-					<span class="text-foreground-subtle">{card.left}</span>
-					<span class="font-medium text-foreground-default">{card.right}</span>
-				</div>
-				<div class="mx-auto h-20 w-px bg-border-default" class:hidden={index === 0}></div>
-			</div>
-		{/each}
-	</div>
 </section>
 
 <section class="px-6 py-28 md:py-40">
 	<div class="mx-auto flex max-w-3xl flex-col items-center text-center">
-		<h2 class="text-5xl font-bold tracking-[-0.04em] text-foreground-default md:text-6xl">
-			Stay in the loop
-		</h2>
+		<h2 class="text-5xl font-bold text-foreground-default md:text-6xl">Stay in the loop</h2>
 		<p class="mt-6 max-w-2xl typography-heading-4 leading-8 font-normal text-foreground-muted">
-			We've got a newsletter. Punch in your email to stay updated on what we're shipping at Tangled.
+			We've got a newsletter. Punch in your email to stay updated on what we're shipping at
+			Tangled.
 		</p>
-		{@render signupForm(
-			"newsletter-email",
-			"Subscribe",
-			false,
-			"mt-8 flex w-full max-w-lg rounded border border-border-strong bg-background-default p-2",
-			"ml-2"
-		)}
+		{@render signupForm("Subscribe", false, "mt-8 flex w-full max-w-lg gap-2")}
 	</div>
 </section>
-
-<style>
-	.activity-card {
-		--marketing-card-shadow: rgb(229 231 235 / 0.6);
-		--tw-shadow-color: var(--marketing-card-shadow);
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.activity-card {
-			--marketing-card-shadow: rgb(3 7 18 / 0.3);
-		}
-	}
-</style>
diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte
index 325e8fb2..691740a9 100644
--- a/web/src/lib/components/shell/Footer.svelte
+++ b/web/src/lib/components/shell/Footer.svelte
@@ -366,8 +366,8 @@
 	</footer>
 {:else}
 	<footer class="z-10 pb-[env(safe-area-inset-bottom)] select-none">
-		<div class="w-full bg-background-default p-8">
-			<div class="mx-auto px-4">
+		<div class="w-full p-6">
+			<div class="mx-auto">
 				<div class="flex flex-col gap-8 text-foreground-subtle">
 					<div
 						class="hidden lg:grid lg:grid-cols-[1fr_minmax(0,1024px)_1fr] lg:items-start lg:gap-8"
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index a0959dd6..15ece356 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -98,10 +98,6 @@
 
 		<div class={style.actions()}>
 			{#if variant === "marketing"}
-				<TopbarSearch />
-
-				<div class={style.divider()}></div>
-
 				<Button variant="ghost" href={resolve("/login")}>Login</Button>
 
 				<span class="typography-paragraph-small text-foreground-muted">or</span>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ff0650af..697b76bd 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -81,7 +81,7 @@
 	class={isAuthShell
 		? "flex min-h-screen flex-col bg-background-default text-foreground-default dark:bg-background-canvas"
 		: isMarketingShell
-			? "flex min-h-screen flex-col bg-linear-to-b from-background-default to-background-canvas text-foreground-default"
+			? "flex min-h-screen flex-col bg-linear-to-b from-background-canvas to-background-default text-foreground-default"
 			: "flex min-h-screen flex-col bg-background-canvas text-foreground-default"}
 >
 	{#if !isAuthShell && !isWelcomeShell}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 06d468c0..8d1b68dc 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -13,7 +13,7 @@
 	<title>Tangled &middot; The next-generation social coding platform</title>
 	<meta
 		name="description"
-		content="The next-generation social coding platform. Host repositories on your infrastructure with knots, use stacked pull requests, and run CI with spindles."
+		content="The next-generation social coding platform."
 	/>
 </svelte:head>
 
-- 
2.51.2