Skip to content

Commit 5a8ca5f

Browse files
alexf37MaheshtheDev
alexf37
authored and
MaheshtheDev
committed
feat: new onboarding flow
1 parent 53bc296 commit 5a8ca5f

27 files changed

+2582
-13
lines changed

‎apps/web/app/layout.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Metadata } from "next";
2-
import { Inter, JetBrains_Mono } from "next/font/google";
2+
import { Inter, JetBrains_Mono, Instrument_Serif } from "next/font/google";
33
import "../globals.css";
44
import "@ui/globals.css";
55
import { AuthProvider } from "@lib/auth-context";
@@ -11,6 +11,8 @@ import { Suspense } from "react";
1111
import { Toaster } from "sonner";
1212
import { TourProvider } from "@/components/tour";
1313
import { MobilePanelProvider } from "@/lib/mobile-panel-context";
14+
import { NuqsAdapter } from 'nuqs/adapters/next/app'
15+
1416

1517
import { ViewModeProvider } from "@/lib/view-mode-context";
1618

@@ -24,6 +26,12 @@ const mono = JetBrains_Mono({
2426
variable: "--font-mono",
2527
});
2628

29+
const serif = Instrument_Serif({
30+
subsets: ["latin"],
31+
variable: "--font-serif",
32+
weight: ["400"],
33+
});
34+
2735
export const metadata: Metadata = {
2836
metadataBase: new URL("https://app.supermemory.ai"),
2937
description: "Your memories, wherever you are",
@@ -38,7 +46,7 @@ export default function RootLayout({
3846
return (
3947
<html className="dark bg-sm-black" lang="en">
4048
<body
41-
className={`${sans.variable} ${mono.variable} antialiased bg-[#0f1419]`}
49+
className={`${sans.variable} ${mono.variable} ${serif.variable} antialiased bg-[#0f1419] overflow-x-hidden`}
4250
>
4351
<AutumnProvider
4452
backendUrl={
@@ -52,10 +60,12 @@ export default function RootLayout({
5260
<MobilePanelProvider>
5361
<PostHogProvider>
5462
<ErrorTrackingProvider>
55-
<TourProvider>
56-
<Suspense>{children}</Suspense>
57-
<Toaster richColors theme="dark" />
58-
</TourProvider>
63+
<NuqsAdapter>
64+
<TourProvider>
65+
<Suspense>{children}</Suspense>
66+
<Toaster richColors theme="dark" />
67+
</TourProvider>
68+
</NuqsAdapter>
5969
</ErrorTrackingProvider>
6070
</PostHogProvider>
6171
</MobilePanelProvider>

‎apps/web/app/onboarding/animated-text.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
'use client';
2+
import { useEffect } from 'react';
3+
import { TextEffect } from '@/components/text-effect';
4+
5+
export function AnimatedText({ children, trigger, delay }: { children: string, trigger: boolean, delay: number }) {
6+
const blurSlideVariants = {
7+
container: {
8+
hidden: { opacity: 0 },
9+
visible: {
10+
opacity: 1,
11+
transition: { staggerChildren: 0.01 },
12+
},
13+
exit: {
14+
transition: { staggerChildren: 0.01, staggerDirection: 1 },
15+
},
16+
},
17+
item: {
18+
hidden: {
19+
opacity: 0,
20+
filter: 'blur(10px) brightness(0%)',
21+
y: 0,
22+
},
23+
visible: {
24+
opacity: 1,
25+
y: 0,
26+
filter: 'blur(0px) brightness(100%)',
27+
transition: {
28+
duration: 0.4,
29+
},
30+
},
31+
exit: {
32+
opacity: 0,
33+
y: -30,
34+
filter: 'blur(10px) brightness(0%)',
35+
transition: {
36+
duration: 0.3,
37+
},
38+
},
39+
},
40+
};
41+
42+
return (
43+
<TextEffect
44+
className='inline-flex'
45+
per='char'
46+
variants={blurSlideVariants}
47+
trigger={trigger}
48+
delay={delay}
49+
>
50+
{children}
51+
</TextEffect>
52+
);
53+
}

‎apps/web/app/onboarding/bio-form.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
"use client";
2+
3+
import { Textarea } from "@ui/components/textarea";
4+
import { useOnboarding } from "./onboarding-context";
5+
import { useState } from "react";
6+
import { Button } from "@ui/components/button";
7+
import { AnimatePresence, motion } from "motion/react";
8+
import { NavMenu } from "./nav-menu";
9+
import { $fetch } from "@lib/api";
10+
11+
export function BioForm() {
12+
const [bio, setBio] = useState("");
13+
const { totalSteps, nextStep, getStepNumberFor } = useOnboarding();
14+
15+
function handleNext() {
16+
const trimmed = bio.trim();
17+
if (!trimmed) {
18+
nextStep();
19+
return;
20+
}
21+
22+
nextStep();
23+
void $fetch("@post/memories", {
24+
body: {
25+
content: trimmed,
26+
containerTags: ["sm_project_default"],
27+
metadata: { sm_source: "consumer" },
28+
},
29+
}).catch((error) => {
30+
console.error("Failed to save onboarding bio memory:", error);
31+
});
32+
}
33+
return (
34+
<div className="relative">
35+
<div className="space-y-4">
36+
<NavMenu>
37+
<p className="text-base text-zinc-600">
38+
Step {getStepNumberFor("bio")} of {totalSteps}
39+
</p>
40+
</NavMenu>
41+
<h1 className="max-sm:text-4xl">Tell us about yourself</h1>
42+
<p className="text-zinc-600 text-2xl max-sm:text-lg">
43+
What should Supermemory know about you?
44+
</p>
45+
</div>
46+
<Textarea
47+
autoFocus
48+
className="font-sans mt-6 text-base! tracking-normal font-medium border bg-white! border-zinc-200 rounded-lg !field-sizing-normal !min-h-[calc(3*1.5rem+1rem)]"
49+
placeholder="I'm a software engineer from San Francisco..."
50+
rows={3}
51+
value={bio}
52+
onChange={(e) => setBio(e.target.value)}
53+
/>
54+
<AnimatePresence
55+
mode="sync">
56+
{
57+
bio ? (
58+
<motion.div
59+
key="save"
60+
initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
61+
animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
62+
exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
63+
transition={{ duration: 0.2, ease: "easeOut" }}
64+
className="flex justify-end mt-2 absolute -bottom-12 right-0">
65+
66+
<Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={handleNext}>
67+
Save & Continue
68+
</Button>
69+
</motion.div>
70+
) : <motion.div
71+
key="skip"
72+
initial={{ opacity: 0, filter: "blur(5px)", }}
73+
animate={{ opacity: 1, filter: "blur(0px)", }}
74+
exit={{ opacity: 0, filter: "blur(5px)", }}
75+
transition={{ duration: 0.2, ease: "easeOut" }}
76+
className="flex justify-end mt-2 absolute -bottom-12 right-0">
77+
78+
<Button variant="link" size="lg" className="text-zinc-900 font-medium! text-lg underline w-fit px-0! cursor-pointer" onClick={handleNext}>
79+
Skip For Now
80+
</Button>
81+
</motion.div>
82+
}
83+
</AnimatePresence>
84+
</div>
85+
);
86+
}

0 commit comments

Comments
 (0)