scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-10-07 02:58:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

modify welcome page for extension

Browse source
This commit is contained in:
Ishaan Gupta 2026-05-24 00:44:09 +05:30
parent aec167cd90
commit 3a8eae77a1
2 changed files with 50 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/browser-extension/entrypoints/background.ts
View file

@ -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,

77
apps/browser-extension/entrypoints/welcome/Welcome.tsx
View file

@ -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]">