From 89d65816f1725035dd9970d881c2ff588b8db71e Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
Date: Wed, 29 Oct 2025 13:22:39 -0700
Subject: [PATCH] add few more changes

---
 apps/web/app/onboarding/page.tsx              |  2 +-
 .../onboarding/setup/integrations-step.tsx    |  2 +-
 .../onboarding/setup/relatable-question.tsx   | 17 +++++++++----
 .../app/onboarding/welcome/continue-step.tsx  | 16 +++++++++---
 .../app/onboarding/welcome/features-step.tsx  | 22 ++++++++--------
 .../app/onboarding/welcome/memories-step.tsx  | 25 ++++++-------------
 biome.json                                    |  7 ++++++
 packages/ui/globals.css                       |  1 +
 8 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/apps/web/app/onboarding/page.tsx b/apps/web/app/onboarding/page.tsx
index 1f59078d..d1a91123 100644
--- a/apps/web/app/onboarding/page.tsx
+++ b/apps/web/app/onboarding/page.tsx
@@ -175,7 +175,7 @@ export default function OnboardingPage() {
 			)}
 			{isSetupFlow && <SetupHeader />}
 
-			<AnimatedGradientBackground />
+			{isSetupFlow && <AnimatedGradientBackground />}
 
 			{isWelcomeFlow && (
 				<div className="flex flex-col items-center justify-start h-[calc(100vh-86px)] relative">
diff --git a/apps/web/app/onboarding/setup/integrations-step.tsx b/apps/web/app/onboarding/setup/integrations-step.tsx
index a1e96f4e..a33d44bc 100644
--- a/apps/web/app/onboarding/setup/integrations-step.tsx
+++ b/apps/web/app/onboarding/setup/integrations-step.tsx
@@ -100,7 +100,7 @@ export function IntegrationsStep() {
 					return (
 						<div
 							key={card.title}
-							className="bg-[#080B0F] relative rounded-lg p-4 hover:border-gray-600 transition-colors duration-300 border-2 border-[#0D121A] hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:250%_auto] hover:bg-[center_top_3rem] hover:bg-no-repeat"
+							className="bg-[#080B0F] relative rounded-lg p-4 hover:border-gray-600 transition-colors duration-300 border-2 border-[#0D121A] hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:150%_auto] hover:bg-[center_top_2rem] hover:bg-no-repeat"
 						>
 							<div className="flex-1 mt-10">
 								<h3 className="text-white text-sm font-medium">{card.title}</h3>
diff --git a/apps/web/app/onboarding/setup/relatable-question.tsx b/apps/web/app/onboarding/setup/relatable-question.tsx
index 909c5574..fe284072 100644
--- a/apps/web/app/onboarding/setup/relatable-question.tsx
+++ b/apps/web/app/onboarding/setup/relatable-question.tsx
@@ -55,12 +55,17 @@ export function RelatableQuestion() {
 				Which of these sound most relatable?
 			</motion.h1>
 
-			<div className={cn("flex flex-wrap justify-center gap-4 max-w-7xl", dmSansFont.className)}>
+			<div
+				className={cn(
+					"flex flex-wrap justify-center gap-4 max-w-3xl",
+					dmSansFont.className,
+				)}
+			>
 				{relatableOptions.map((option, index) => (
 					<button
 						key={option.text}
 						className={`
-						relative rounded-lg p-2 cursor-pointer transition-all duration-300 opacity-50 hover:opacity-100 border-[#0D121A] 
+						relative rounded-lg p-2 cursor-pointer transition-all duration-300 opacity-50 hover:opacity-100 border-[#0D121A] max-w-[140px] min-h-[159px]
 						${
 							selectedOptions.includes(index)
 								? "border-[#3374FF] border-[0.1px] opacity-100 bg-[url('/onboarding/bg-gradient-1.png')] bg-[length:250%_auto] bg-[center_top_3rem] bg-no-repeat"
@@ -86,9 +91,9 @@ export function RelatableQuestion() {
 						}}
 						type="button"
 					>
-						<div className="flex flex-col items-start justify-between space-y-8">
+						<div className="flex flex-col items-start justify-between h-full">
 							<span className="text-2xl">{option.emoji}</span>
-							<p className="text-white text-xs leading-relaxed max-w-[130px] align-bottom text-left">
+							<p className="text-white text-sm leading-[135%] align-bottom text-left">
 								{option.text}
 							</p>
 						</div>
@@ -103,7 +108,9 @@ export function RelatableQuestion() {
 						size="lg"
 						onClick={handleContinueOrSkip}
 					>
-						{selectedOptions.length === 0 ? "Skip for now →" : "Continue →"}
+						{selectedOptions.length === 0
+							? "Skip for now →"
+							: "Remember this →"}
 					</Button>
 				</div>
 			</div>
diff --git a/apps/web/app/onboarding/welcome/continue-step.tsx b/apps/web/app/onboarding/welcome/continue-step.tsx
index 0578912f..0cf5b000 100644
--- a/apps/web/app/onboarding/welcome/continue-step.tsx
+++ b/apps/web/app/onboarding/welcome/continue-step.tsx
@@ -1,3 +1,5 @@
+import { dmSansFont } from "@/utils/fonts"
+import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
 import { motion } from "motion/react"
 import { useRouter } from "next/navigation"
@@ -18,12 +20,18 @@ export function ContinueStep() {
 			transition={{ duration: 1, ease: "easeOut" }}
 			layout
 		>
-			<p className="text-white text-sm opacity-80 mb-6 max-w-xs">
-				I'm built with Supermemory's super fast memory API, so you never have to
-				worry about forgetting what matters across your AI apps.
+			<p
+				className={cn(
+					"text-[#8A8A8A] text-sm opacity-80 mb-6 max-w-sm",
+					dmSansFont.className,
+				)}
+			>
+				I'm built with Supermemory's super fast memory API,
+				<br /> so you never have to worry about forgetting <br /> what matters
+				across your AI apps.
 			</p>
 			<Button
-				className="rounded-xl px-6 py-3 bg-black border border-gray-800 hover:bg-gray-900"
+				className="rounded-xl px-6 py-3 bg-black border border-gray-800 hover:bg-gray-900 h-[40px] cursor-pointer"
 				onClick={handleContinue}
 			>
 				Continue →
diff --git a/apps/web/app/onboarding/welcome/features-step.tsx b/apps/web/app/onboarding/welcome/features-step.tsx
index ee21a261..3b89287c 100644
--- a/apps/web/app/onboarding/welcome/features-step.tsx
+++ b/apps/web/app/onboarding/welcome/features-step.tsx
@@ -1,6 +1,8 @@
 import { motion } from "motion/react"
 import { Button } from "@ui/components/button"
 import { useRouter } from "next/navigation"
+import { cn } from "@lib/utils"
+import { dmSansFont } from "@/utils/fonts"
 
 export function FeaturesStep() {
 	const router = useRouter()
@@ -20,7 +22,7 @@ export function FeaturesStep() {
 				What I can do for you
 			</h2>
 
-			<div className="space-y-6 mb-8">
+			<div className={cn("space-y-4 mb-8 letter-spacing-[-0.01em] ", dmSansFont.className)}>
 				<div className="flex items-start space-x-2">
 					<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
 						<img
@@ -30,10 +32,10 @@ export function FeaturesStep() {
 						/>
 					</div>
 					<div className="text-left">
-						<h3 className="text-white font-light text-lg mb-1">
+						<p className="text-white font-light text-[14px]">
 							Remember every context
-						</h3>
-						<p className="text-[#8A8A8A] text-xs">
+						</p>
+						<p className="text-[#8A8A8A] text-[14px]">
 							I keep track of what you've saved and shared with your
 							supermemory.
 						</p>
@@ -49,9 +51,9 @@ export function FeaturesStep() {
 						/>
 					</div>
 					<div className="text-left">
-						<h3 className="text-white font-light text-lg mb-1">
+						<p className="text-white font-light text-lg">
 							Find when you need it
-						</h3>
+						</p>
 						<p className="text-[#8A8A8A] text-xs">
 							I surface the right memories inside your supermemory, superfast.
 						</p>
@@ -67,9 +69,9 @@ export function FeaturesStep() {
 						/>
 					</div>
 					<div className="text-left">
-						<h3 className="text-white font-light text-lg mb-1">
+						<p className="text-white font-light text-lg">
 							Grow with your supermemory
-						</h3>
+						</p>
 						<p className="text-[#8A8A8A] text-xs">
 							I learn and personalize over time, so every interaction feels
 							natural.
@@ -87,11 +89,11 @@ export function FeaturesStep() {
 				initial={{ opacity: 0, y: 10 }}
 			>
 				<Button
-					className="rounded-xl px-6 py-3 bg-black border border-gray-800 hover:bg-gray-900 max-w-[10rem]"
+					className="rounded-xl px-6 py-3 bg-black border border-gray-800 hover:bg-gray-900 max-w-[10rem] h-[40px] cursor-pointer"
 					onClick={handleContinue}
 				>
 					<motion.button whileTap={{ scale: 0.95 }} className="w-full">
-						Continue setup →
+						Add memories →
 					</motion.button>
 				</Button>
 			</motion.div>
diff --git a/apps/web/app/onboarding/welcome/memories-step.tsx b/apps/web/app/onboarding/welcome/memories-step.tsx
index dce97474..044ddd2b 100644
--- a/apps/web/app/onboarding/welcome/memories-step.tsx
+++ b/apps/web/app/onboarding/welcome/memories-step.tsx
@@ -47,7 +47,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 			className="text-center max-w-[28rem] w-full"
 			layout
 		>
-			<h2 className="text-white text-3xl font-medium mb-4">
+			<h2 className="text-white text-3xl font-medium mb-4 mt-[-36px]">
 				Let's add your memories
 			</h2>
 
@@ -55,7 +55,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 				<div className="text-left" id="x-twitter-field">
 					<label
 						htmlFor="twitter-handle"
-						className="text-white text-sm font-medium mb-2 block"
+						className="text-white text-sm font-medium mb-2 block pl-2"
 					>
 						X/Twitter
 					</label>
@@ -72,7 +72,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 				<div className="text-left" id="linkedin-field">
 					<label
 						htmlFor="linkedin-profile"
-						className="text-white text-sm font-medium mb-2 block"
+						className="text-white text-sm font-medium mb-2 block pl-2"
 					>
 						LinkedIn
 					</label>
@@ -90,7 +90,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 					<div className="flex items-center justify-between mb-2">
 						<label
 							htmlFor="other-links"
-							className="text-white text-sm font-medium"
+							className="text-white text-sm font-medium pl-2"
 						>
 							Other links
 						</label>
@@ -109,15 +109,6 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 								onChange={(e) => updateOtherLink(index, e.target.value)}
 								className="flex-1 px-4 py-2 bg-[#070E1B] border border-[#525966]/20 rounded-xl text-white placeholder-[#8A8A8A] focus:outline-none focus:border-[#4A4A4A] transition-colors"
 							/>
-							{otherLinks.length > 1 && (
-								<button
-									type="button"
-									onClick={() => removeOtherLink(index)}
-									className="w-10 h-10 bg-[#070E1B] border border-[#525966]/20 rounded-xl flex items-center justify-center text-white hover:bg-[#2A2A2A] transition-colors"
-								>
-									×
-								</button>
-							)}
 							{index === otherLinks.length - 1 && otherLinks.length < 3 && (
 								<button
 									type="button"
@@ -134,7 +125,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 				<div className="text-left" id="description-field">
 					<label
 						htmlFor="description"
-						className="text-white text-sm font-medium mb-2 block"
+						className="text-white text-sm font-medium mb-2 block pl-2"
 					>
 						What do you do? What do you like?
 					</label>
@@ -144,7 +135,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 						value={description}
 						onChange={(e) => setDescription(e.target.value)}
 						rows={4}
-						className="w-full px-4 py-2 bg-[#070E1B] border border-[#525966]/20 rounded-xl text-white placeholder-[#8A8A8A] focus:outline-none focus:border-[#4A4A4A] transition-colors resize-none"
+						className="w-full px-4 py-2 bg-[#070E1B] border border-[#525966]/20 rounded-xl text-white placeholder-[#8A8A8A] focus:outline-none focus:border-[#4A4A4A] transition-colors"
 					/>
 				</div>
 			</div>
@@ -156,10 +147,10 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 				}}
 				transition={{ duration: 1, ease: "easeOut", delay: 1 }}
 				initial={{ opacity: 0, y: 10 }}
-				className="mt-8"
+				className="mt-6"
 			>
 				<Button
-					className="rounded-xl px-6 py-3 bg-[#070E1B] border border-[#525966]/20 hover:bg-[#2A2A2A] max-w-[12rem] text-white disabled:opacity-50 disabled:cursor-not-allowed"
+					className="rounded-xl px-6 py-3 bg-[#070E1B] border border-[#525966]/20 hover:bg-[#2A2A2A] max-w-[12rem] text-white disabled:opacity-50 disabled:cursor-not-allowed h-[40px] cursor-pointer"
 					disabled={isSubmitting}
 					onClick={() => {
 						const formData = {
diff --git a/biome.json b/biome.json
index ea4876ba..0c9043b5 100644
--- a/biome.json
+++ b/biome.json
@@ -81,6 +81,13 @@
 				"useNumberNamespace": "error",
 				"useSelfClosingElements": "error",
 				"useSingleVarDeclarator": "error"
+			},
+			"suspicious": {
+				"noUnknownAtRules": {
+					"options": {
+						"ignore": ["source", "theme", "apply"]
+					}
+				}
 			}
 		}
 	},
diff --git a/packages/ui/globals.css b/packages/ui/globals.css
index 357e34b7..fb17c06e 100644
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -255,6 +255,7 @@
 	}
 	body {
 		@apply bg-background text-foreground;
+		font-size: 14px;
 		letter-spacing: var(--tracking-normal);
 	}
 }