aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/web/app/onboarding/bio-form.tsx80
-rw-r--r--apps/web/app/onboarding/extension-form.tsx29
-rw-r--r--apps/web/app/onboarding/mcp-form.tsx80
3 files changed, 93 insertions, 96 deletions
diff --git a/apps/web/app/onboarding/bio-form.tsx b/apps/web/app/onboarding/bio-form.tsx
index 63f359ec..21b0e34b 100644
--- a/apps/web/app/onboarding/bio-form.tsx
+++ b/apps/web/app/onboarding/bio-form.tsx
@@ -32,7 +32,46 @@ export function BioForm() {
}
return (
<div className="relative w-full">
- <div className="space-y-4">
+ <div className="space-y-4 relative">
+ <div className="absolute top-0 right-0">
+ <AnimatePresence mode="sync">
+ {bio ? (
+ <motion.div
+ key="save"
+ initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+ animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+ exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+ transition={{ duration: 0.2, ease: "easeOut" }}
+ >
+ <Button
+ variant="link"
+ size="lg"
+ className="text-white/60 font-medium! text-base md:text-lg w-fit px-0! cursor-pointer"
+ onClick={handleNext}
+ >
+ Save & Continue
+ </Button>
+ </motion.div>
+ ) : (
+ <motion.div
+ key="skip"
+ initial={{ opacity: 0, filter: "blur(5px)" }}
+ animate={{ opacity: 1, filter: "blur(0px)" }}
+ exit={{ opacity: 0, filter: "blur(5px)" }}
+ transition={{ duration: 0.2, ease: "easeOut" }}
+ >
+ <Button
+ variant="link"
+ size="lg"
+ className="text-white/60 font-medium! text-base md:text-lg w-fit px-0! cursor-pointer"
+ onClick={handleNext}
+ >
+ Skip For Now
+ </Button>
+ </motion.div>
+ )}
+ </AnimatePresence>
+ </div>
<NavMenu>
<p className="text-base text-white/60">
Step {getStepNumberFor("bio")} of {totalSteps}
@@ -53,45 +92,6 @@ export function BioForm() {
value={bio}
onChange={(e) => setBio(e.target.value)}
/>
- <AnimatePresence mode="sync">
- {bio ? (
- <motion.div
- key="save"
- initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
- animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
- exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
- transition={{ duration: 0.2, ease: "easeOut" }}
- className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
- >
- <Button
- variant="link"
- size="lg"
- className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
- onClick={handleNext}
- >
- Save & Continue
- </Button>
- </motion.div>
- ) : (
- <motion.div
- key="skip"
- initial={{ opacity: 0, filter: "blur(5px)" }}
- animate={{ opacity: 1, filter: "blur(0px)" }}
- exit={{ opacity: 0, filter: "blur(5px)" }}
- transition={{ duration: 0.2, ease: "easeOut" }}
- className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
- >
- <Button
- variant="link"
- size="lg"
- className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
- onClick={handleNext}
- >
- Skip For Now
- </Button>
- </motion.div>
- )}
- </AnimatePresence>
</div>
)
}
diff --git a/apps/web/app/onboarding/extension-form.tsx b/apps/web/app/onboarding/extension-form.tsx
index 721acb4f..75f84557 100644
--- a/apps/web/app/onboarding/extension-form.tsx
+++ b/apps/web/app/onboarding/extension-form.tsx
@@ -816,7 +816,7 @@ export function ExtensionForm() {
const { totalSteps, nextStep, getStepNumberFor } = useOnboarding()
return (
<div className="relative flex items-start flex-col gap-6 w-full">
- <div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full gap-6">
+ <div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full gap-6 relative">
<div className="flex flex-col items-start text-left gap-4 flex-1">
<NavMenu>
<p className="text-base text-white/60">
@@ -827,21 +827,29 @@ export function ExtensionForm() {
Install the Chrome extension
</h1>
<p className="text-white/80 text-lg md:text-2xl">
- {/* Install the Supermemory extension to start saving and organizing everything that matters. */}
Bring Supermemory everywhere
</p>
</div>
- <div className="flex flex-col items-center text-center gap-4 w-full md:w-auto">
+ <div className="flex flex-col items-end text-center gap-3 w-full md:w-auto">
+ <Button
+ variant="link"
+ size="lg"
+ className="text-white/80 hover:text-white font-medium! text-lg w-fit px-0! cursor-pointer"
+ onClick={nextStep}
+ >
+ Continue
+ <ChevronRightIcon className="size-4" />
+ </Button>
<a
href="https://chromewebstore.google.com/detail/afpgkkipfdpeaflnpoaffkcankadgjfc?utm_source=item-share-cb"
rel="noopener noreferrer"
target="_blank"
- className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full pl-4.5 pr-6 py-4 text-lg md:text-2xl font-sans tracking-tight font-medium flex items-center gap-4 w-full md:w-auto justify-center"
+ className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full pl-3.5 pr-4 py-2.5 text-base font-sans tracking-tight font-medium flex items-center gap-3 w-full md:w-auto justify-center"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/2048px-Google_Chrome_icon_%28February_2022%29.svg.png"
alt="Chrome"
- className="size-6 md:size-8"
+ className="size-5"
/>
Add to Chrome
</a>
@@ -891,17 +899,6 @@ export function ExtensionForm() {
</div>
</div>
</div>
- <div className="flex w-full justify-end">
- <Button
- variant="link"
- size="lg"
- className="text-black/40 hover:text-black font-medium! text-lg underline w-fit px-0! cursor-pointer"
- onClick={nextStep}
- >
- Continue
- <ChevronRightIcon className="size-4" />
- </Button>
- </div>
</div>
)
}
diff --git a/apps/web/app/onboarding/mcp-form.tsx b/apps/web/app/onboarding/mcp-form.tsx
index d3152e42..161642c4 100644
--- a/apps/web/app/onboarding/mcp-form.tsx
+++ b/apps/web/app/onboarding/mcp-form.tsx
@@ -58,7 +58,46 @@ export function MCPForm() {
return (
<div className="relative flex flex-col gap-6">
- <div className="space-y-4">
+ <div className="space-y-4 relative">
+ <div className="absolute top-0 right-0">
+ <AnimatePresence mode="sync">
+ {!isInstalling ? (
+ <motion.div
+ key="save"
+ initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+ animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+ exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+ transition={{ duration: 0.2, ease: "easeOut" }}
+ >
+ <Button
+ variant="link"
+ size="lg"
+ className="text-white/80 not-odd:font-medium! text-lg w-fit px-0! cursor-pointer"
+ onClick={nextStep}
+ >
+ Continue
+ </Button>
+ </motion.div>
+ ) : (
+ <motion.div
+ key="skip"
+ initial={{ opacity: 0, filter: "blur(5px)" }}
+ animate={{ opacity: 1, filter: "blur(0px)" }}
+ exit={{ opacity: 0, filter: "blur(5px)" }}
+ transition={{ duration: 0.2, ease: "easeOut" }}
+ >
+ <Button
+ variant="link"
+ size="lg"
+ className="text-white/80 font-medium! text-lg w-fit px-0! cursor-pointer"
+ onClick={nextStep}
+ >
+ Skip For Now
+ </Button>
+ </motion.div>
+ )}
+ </AnimatePresence>
+ </div>
<NavMenu>
<p className="text-base text-white/60">
Step {getStepNumberFor("mcp")} of {totalSteps}
@@ -207,45 +246,6 @@ export function MCPForm() {
</div>
</div>
</div>
- <AnimatePresence mode="sync">
- {!isInstalling ? (
- <motion.div
- key="save"
- initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
- animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
- exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
- transition={{ duration: 0.2, ease: "easeOut" }}
- className="flex justify-end"
- >
- <Button
- variant="link"
- size="lg"
- className="text-white not-odd:font-medium! text-lg underline w-fit px-0! cursor-pointer"
- onClick={nextStep}
- >
- Continue
- </Button>
- </motion.div>
- ) : (
- <motion.div
- key="skip"
- initial={{ opacity: 0, filter: "blur(5px)" }}
- animate={{ opacity: 1, filter: "blur(0px)" }}
- exit={{ opacity: 0, filter: "blur(5px)" }}
- transition={{ duration: 0.2, ease: "easeOut" }}
- className="flex justify-end"
- >
- <Button
- variant="link"
- size="lg"
- className="text-white font-medium! text-lg underline w-fit px-0! cursor-pointer"
- onClick={nextStep}
- >
- Skip For Now
- </Button>
- </motion.div>
- )}
- </AnimatePresence>
</div>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 07:53:42 +0000