welcome page tailwind css integration

5 files changed, 45 insertions, 260 deletions

diff --git a/apps/browser-extension/entrypoints/welcome/Welcome.tsx b/apps/browser-extension/entrypoints/welcome/Welcome.tsx
index 31e0c424..205fbad2 100644
--- a/apps/browser-extension/entrypoints/welcome/Welcome.tsx
+++ b/apps/browser-extension/entrypoints/welcome/Welcome.tsx
@@ -1,55 +1,55 @@
 function Welcome() {
 	return (
-		<div className="welcome-container">
-			<div className="welcome-content">
+		<div className="min-h-screen flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-white">
+			<div className="max-w-4xl w-full text-center">
 				{/* Header */}
-				<div className="welcome-header">
+				<div className="mb-12">
 					<img
 						alt="supermemory"
-						className="welcome-logo"
+						className="h-16 mb-6 mx-auto"
 						src="https://assets.supermemory.ai/brand/wordmark/dark-transparent.svg"
 					/>
-					<p className="welcome-subtitle">
+					<p className="text-gray-600 text-lg font-normal max-w-2xl mx-auto">
 						Your AI-powered second brain for saving and organizing everything
 						that matters
 					</p>
 				</div>
 
 				{/* Features Section */}
-				<div className="welcome-features">
-					<h2 className="features-title">What can you do with supermemory?</h2>
+				<div className="mb-12">
+					<h2 className="text-2xl font-semibold text-black mb-8">What can you do with supermemory?</h2>
 
-					<div className="features-grid">
-						<div className="feature-card">
-							<div className="feature-icon">💾</div>
-							<h3>Save Any Page</h3>
-							<p>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
+							<div className="text-3xl mb-4 block">💾</div>
+							<h3 className="text-lg font-semibold text-black mb-3">Save Any Page</h3>
+							<p className="text-sm text-gray-600 leading-snug">
 								Instantly save web pages, articles, and content to your personal
 								knowledge base
 							</p>
 						</div>
 
-						<div className="feature-card">
-							<div className="feature-icon">🐦</div>
-							<h3>Import Twitter/X Bookmarks</h3>
-							<p>
+						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
+							<div className="text-3xl mb-4 block">🐦</div>
+							<h3 className="text-lg font-semibold text-black mb-3">Import Twitter/X Bookmarks</h3>
+							<p className="text-sm text-gray-600 leading-snug">
 								Bring all your saved tweets and bookmarks into one organized
 								place
 							</p>
 						</div>
 
-						<div className="feature-card">
-							<div className="feature-icon">🤖</div>
-							<h3>Import ChatGPT Memories</h3>
-							<p>
+						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
+							<div className="text-3xl mb-4 block">🤖</div>
+							<h3 className="text-lg font-semibold text-black mb-3">Import ChatGPT Memories</h3>
+							<p className="text-sm text-gray-600 leading-snug">
 								Keep your important AI conversations and insights accessible
 							</p>
 						</div>
 
-						<div className="feature-card">
-							<div className="feature-icon">🔍</div>
-							<h3>AI-Powered Search</h3>
-							<p>
+						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
+							<div className="text-3xl mb-4 block">🔍</div>
+							<h3 className="text-lg font-semibold text-black mb-3">AI-Powered Search</h3>
+							<p className="text-sm text-gray-600 leading-snug">
 								Find anything you've saved using intelligent semantic search
 							</p>
 						</div>
@@ -57,9 +57,9 @@ function Welcome() {
 				</div>
 
 				{/* Actions */}
-				<div className="welcome-actions">
+				<div className="mb-8">
 					<button
-						className="login-primary-btn"
+						className="min-w-[200px] px-8 py-4 bg-gray-700 text-white border-none rounded-3xl text-base font-semibold cursor-pointer transition-colors duration-200 mb-4 outline-none hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
 						onClick={() => {
 							chrome.tabs.create({
 								url: import.meta.env.PROD
@@ -74,11 +74,11 @@ function Welcome() {
 				</div>
 
 				{/* Footer */}
-				<div className="welcome-footer">
-					<p>
+				<div className="border-t border-gray-200 pt-6 mt-8">
+					<p className="text-sm text-gray-600">
 						Learn more at{" "}
 						<a
-							className="footer-link"
+							className="text-blue-500 no-underline hover:underline hover:text-blue-700"
 							href="https://supermemory.ai"
 							rel="noopener noreferrer"
 							target="_blank"
diff --git a/apps/browser-extension/entrypoints/welcome/welcome.css b/apps/browser-extension/entrypoints/welcome/welcome.css
index d2c8d43d..b11f14b0 100644
--- a/apps/browser-extension/entrypoints/welcome/welcome.css
+++ b/apps/browser-extension/entrypoints/welcome/welcome.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* Custom Font Definitions */
 @font-face {
 	font-family: "Space Grotesk";
@@ -39,237 +41,9 @@
 	src: url("/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
 }
 
-/* Welcome Page Styles */
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-
+/* Global Styles */
 body {
 	font-family:
 		"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 		sans-serif;
-	background: #ffffff;
-	color: #000000;
-	line-height: 1.5;
-}
-
-.welcome-container {
-	min-height: 100vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 32px;
-	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-}
-
-.welcome-content {
-	max-width: 800px;
-	width: 100%;
-	text-align: center;
-}
-
-/* Header Styles */
-.welcome-header {
-	margin-bottom: 48px;
-}
-
-.welcome-logo {
-	height: 64px;
-	margin-bottom: 24px;
-}
-
-.welcome-title {
-	font-size: 32px;
-	font-weight: 700;
-	color: #000000;
-	margin-bottom: 16px;
-}
-
-.welcome-subtitle {
-	font-size: 18px;
-	color: #6c757d;
-	font-weight: 400;
-	max-width: 600px;
-	margin: 0 auto;
-}
-
-/* Features Section */
-.welcome-features {
-	margin-bottom: 48px;
-}
-
-.features-title {
-	font-size: 24px;
-	font-weight: 600;
-	color: #000000;
-	margin-bottom: 32px;
-}
-
-.features-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-	gap: 24px;
-	margin-bottom: 32px;
-}
-
-.feature-card {
-	background: #ffffff;
-	border: 1px solid #e9ecef;
-	border-radius: 12px;
-	padding: 24px;
-	text-align: center;
-	transition: all 0.2s ease;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.feature-card:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-	border-color: #ced4da;
-}
-
-.feature-icon {
-	font-size: 32px;
-	margin-bottom: 16px;
-	display: block;
-}
-
-.feature-card h3 {
-	font-size: 18px;
-	font-weight: 600;
-	color: #000000;
-	margin-bottom: 12px;
-}
-
-.feature-card p {
-	font-size: 14px;
-	color: #6c757d;
-	line-height: 1.4;
-}
-
-.steps {
-	display: flex;
-	justify-content: center;
-	gap: 32px;
-	flex-wrap: wrap;
-}
-
-.step {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	max-width: 300px;
-	text-align: left;
-}
-
-.step-number {
-	width: 48px;
-	height: 48px;
-	background: #374151;
-	color: white;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 18px;
-	font-weight: 600;
-	flex-shrink: 0;
-}
-
-.step-content h3 {
-	font-size: 16px;
-	font-weight: 600;
-	color: #000000;
-	margin-bottom: 4px;
-}
-
-.step-content p {
-	font-size: 14px;
-	color: #6c757d;
-	line-height: 1.3;
-}
-
-/* Actions Section */
-.welcome-actions {
-	margin-bottom: 32px;
-}
-
-.login-primary-btn {
-	width: auto;
-	min-width: 200px;
-	padding: 16px 32px;
-	background-color: #374151;
-	color: white;
-	border: none;
-	border-radius: 24px;
-	font-size: 16px;
-	font-weight: 600;
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-	margin-bottom: 16px;
-	outline: none;
-}
-
-.login-primary-btn:hover:not(:disabled) {
-	background-color: #1f2937;
-}
-
-.login-primary-btn:disabled {
-	background-color: #9e9e9e;
-	cursor: not-allowed;
-}
-
-/* Footer */
-.welcome-footer {
-	border-top: 1px solid #e9ecef;
-	padding-top: 24px;
-	margin-top: 32px;
-}
-
-.welcome-footer p {
-	font-size: 14px;
-	color: #6c757d;
-}
-
-.footer-link {
-	color: #4285f4;
-	text-decoration: none;
-}
-
-.footer-link:hover {
-	text-decoration: underline;
-	color: #1a73e8;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-	.welcome-container {
-		padding: 16px;
-	}
-
-	.welcome-title {
-		font-size: 28px;
-	}
-
-	.welcome-subtitle {
-		font-size: 16px;
-	}
-
-	.features-grid {
-		grid-template-columns: 1fr;
-		gap: 16px;
-	}
-
-	.steps {
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.step {
-		max-width: 100%;
-		text-align: center;
-		flex-direction: column;
-	}
 }
diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json
index fae767d0..68f6c50a 100644
--- a/apps/browser-extension/package.json
+++ b/apps/browser-extension/package.json
@@ -15,9 +15,11 @@
 		"postinstall": "wxt prepare"
 	},
 	"dependencies": {
+		"@tailwindcss/vite": "^4.1.12",
 		"@tanstack/react-query": "^5.85.5",
 		"react": "^19.1.0",
-		"react-dom": "^19.1.0"
+		"react-dom": "^19.1.0",
+		"tailwindcss": "^4.1.12"
 	},
 	"devDependencies": {
 		"@types/chrome": "^0.1.4",
diff --git a/apps/browser-extension/wxt.config.ts b/apps/browser-extension/wxt.config.ts
index 579f2485..028a271f 100644
--- a/apps/browser-extension/wxt.config.ts
+++ b/apps/browser-extension/wxt.config.ts
@@ -1,8 +1,13 @@
-import { defineConfig } from "wxt"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig, type WxtViteConfig } from "wxt"
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
 	modules: ["@wxt-dev/module-react"],
+	vite: () =>
+		({
+			plugins: [tailwindcss()],
+		}) as WxtViteConfig,
 	manifest: {
 		name: "supermemory",
 		homepage_url: "https://supermemory.ai",
diff --git a/bun.lock b/bun.lock
index e7234c29..32120d66 100644
--- a/bun.lock
+++ b/bun.lock
@@ -52,9 +52,11 @@
       "name": "supermemory-browser-extension",
       "version": "0.0.1",
       "dependencies": {
+        "@tailwindcss/vite": "^4.1.12",
         "@tanstack/react-query": "^5.85.5",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "tailwindcss": "^4.1.12",
       },
       "devDependencies": {
         "@types/chrome": "^0.1.4",
@@ -1356,6 +1358,8 @@
 
     "@tailwindcss/typography": ["@tailwindcss/[email protected]", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
 
+    "@tailwindcss/vite": ["@tailwindcss/[email protected]", "", { "dependencies": { "@tailwindcss/node": "4.1.12", "@tailwindcss/oxide": "4.1.12", "tailwindcss": "4.1.12" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-4pt0AMFDx7gzIrAOIYgYP0KCBuKWqyW8ayrdiLEjoJTT4pKTjrzG/e4uzWtTLDziC+66R9wbUqZBccJalSE5vQ=="],
+
     "@tanstack/form-core": ["@tanstack/[email protected]", "", { "dependencies": { "@tanstack/store": "^0.7.2" } }, "sha512-g2VkZCHEQUxnPOtF+vNHQDGvmrXfMpvN1T27M+G2R/eeH2vImxEdzVzAVIR71DZ5X3QtC9rm+nR64MJrjI+yXQ=="],
 
     "@tanstack/query-core": ["@tanstack/[email protected]", "", {}, "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w=="],