From 3a8eae77a1eca6b192423e7a2c62a35d05444fec Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Sun, 24 May 2026 00:44:09 +0530
Subject: [PATCH] modify welcome page for extension

---
 .../entrypoints/background.ts                 |  2 +-
 .../entrypoints/welcome/Welcome.tsx           | 77 ++++++++++++-------
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/apps/browser-extension/entrypoints/background.ts b/apps/browser-extension/entrypoints/background.ts
index 777a137a..4a9fe48b 100644
--- a/apps/browser-extension/entrypoints/background.ts
+++ b/apps/browser-extension/entrypoints/background.ts
@@ -69,7 +69,7 @@ export default defineBackground(() => {
 	let twitterImporter: TwitterImporter | null = null
 
 	browser.runtime.onInstalled.addListener(async (details) => {
-		if (details.reason === "install") {
+		if (details.reason === "install" || details.reason === "update") {
 			await trackEvent("extension_installed", {
 				reason: details.reason,
 				version: browser.runtime.getManifest().version,
diff --git a/apps/browser-extension/entrypoints/welcome/Welcome.tsx b/apps/browser-extension/entrypoints/welcome/Welcome.tsx
index 4ef72b81..aa982a0e 100644
--- a/apps/browser-extension/entrypoints/welcome/Welcome.tsx
+++ b/apps/browser-extension/entrypoints/welcome/Welcome.tsx
@@ -1,5 +1,28 @@
 import { getSupermemoryLoginUrl } from "../../utils/constants"
 
+const featureCards = [
+	{
+		number: "01",
+		title: "Save any page",
+		description: "Articles, docs, and references from the browser.",
+	},
+	{
+		number: "02",
+		title: "Import X bookmarks",
+		description: "Bring saved posts into your memory library.",
+	},
+	{
+		number: "03",
+		title: "Capture AI chats",
+		description: "Save useful conversations from ChatGPT, Claude, and Gemini.",
+	},
+	{
+		number: "04",
+		title: "Use context anywhere",
+		description: "Search and reuse memories when you need them.",
+	},
+]
+
 function Welcome() {
 	return (
 		<div className="relative min-h-screen overflow-hidden bg-[#05080D] text-white font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif]">
@@ -14,46 +37,25 @@ function Welcome() {
 			<div className="pointer-events-none absolute inset-x-0 bottom-0 h-[55%] bg-[radial-gradient(ellipse_at_bottom,rgba(20,65,255,0.42),transparent_68%)]" />
 
 			<main className="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 py-6 sm:px-10">
-				<header className="flex items-center justify-between border-b border-white/10 pb-5">
+				<header className="flex items-center border-b border-white/10 pb-5">
 					<div className="flex items-center gap-2">
 						<img alt="" className="size-8 rounded-[4px]" src="./new_logo.png" />
 						<span className="text-lg font-semibold leading-none text-white">
 							supermemory
 						</span>
 					</div>
-					<span className="rounded-full border border-[#369BFD]/25 bg-[#369BFD]/10 px-3 py-1 text-xs font-medium text-[#9FCBFF]">
-						Chrome extension
-					</span>
 				</header>
 
-				<section className="flex flex-1 items-center py-10">
-					<div className="max-w-3xl">
-						<div className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.035] px-3 py-1 text-sm font-medium text-[#A7B7CB]">
-							<span className="h-1.5 w-1.5 rounded-full bg-[#36FDFD]" />
-							Browser memory connected
-						</div>
-
-						<h1 className="max-w-3xl text-4xl font-semibold leading-[1.05] tracking-normal text-white sm:text-6xl">
+				<section className="flex flex-1 flex-col items-center justify-center py-10 text-center">
+					<div className="mx-auto max-w-3xl">
+						<h1 className="text-4xl font-semibold leading-[1.05] tracking-normal text-white sm:text-6xl">
 							Your browser now has{" "}
-							<span
-								className="text-transparent bg-clip-text"
-								style={{
-									backgroundImage:
-										"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
-								}}
-							>
-								supermemory.
-							</span>
+							<span className="text-[#369BFD]">supermemory.</span>
 						</h1>
 
-						<p className="mt-5 max-w-xl text-base leading-7 text-[#A1A1AA] sm:text-lg">
-							Sign in once, then use the extension to save pages, import
-							bookmarks, and bring your memory into supported chat apps.
-						</p>
-
-						<div className="mt-8 flex flex-col gap-3 sm:flex-row">
+						<div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
 							<button
-								className="h-12 rounded-xl px-6 text-sm font-semibold text-white transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-[#36fdfd]/70"
+								className="h-12 rounded-xl px-7 text-sm font-semibold text-white transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-[#36fdfd]/70"
 								style={{
 									background:
 										"linear-gradient(182.37deg, #0ff0d2 -91.53%, #5bd3fb -67.8%, #1e0ff0 95.17%)",
@@ -82,6 +84,25 @@ function Welcome() {
 							</button>
 						</div>
 					</div>
+
+					<div className="mt-14 grid w-full max-w-5xl gap-3 text-left sm:grid-cols-2 lg:grid-cols-4">
+						{featureCards.map((feature) => (
+							<div
+								className="rounded-lg border border-white/10 bg-white/[0.035] p-4"
+								key={feature.number}
+							>
+								<p className="text-[11px] font-medium text-[#737373]">
+									{feature.number}
+								</p>
+								<h2 className="mt-4 text-sm font-semibold text-white">
+									{feature.title}
+								</h2>
+								<p className="mt-2 text-sm leading-6 text-[#A1A1AA]">
+									{feature.description}
+								</p>
+							</div>
+						))}
+					</div>
 				</section>
 
 				<footer className="border-t border-white/10 py-5 text-xs text-[#737373]">