1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
"use client"
import { useState } from "react"
import { motion, AnimatePresence } from "motion/react"
import { Button } from "@ui/components/button"
import { useRouter } from "next/navigation"
import { cn } from "@lib/utils"
import { dmSansClassName } from "@/lib/fonts"
import { analytics } from "@/lib/analytics"
const relatableOptions = [
{
emoji: "😔",
text: "I always forget what I save in my twitter bookmarks",
},
{
emoji: "😭",
text: "Going through e-books manually is so tedious",
},
{
emoji: "🥲",
text: "I always have to feed every AI app with my data",
},
{
emoji: "😵💫",
text: "Referring meeting notes makes my AI chat hallucinate",
},
{
emoji: "🫤",
text: "I save nothing on my browser, it's just useless",
},
]
export function RelatableQuestion() {
const router = useRouter()
const [selectedOptions, setSelectedOptions] = useState<number[]>([])
const handleContinueOrSkip = () => {
const selectedTexts = selectedOptions.map(
(idx) => relatableOptions[idx]?.text || "",
)
analytics.onboardingRelatableSelected({ options: selectedTexts })
router.push("/new/onboarding/setup?step=integrations")
}
return (
<motion.div
className="flex flex-col items-center justify-center h-full"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.6 }}
>
<motion.h1
className="text-white text-[32px] font-medium mb-6 text-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
Which of these sound most relatable?
</motion.h1>
<div
className={cn(
"flex flex-wrap justify-center gap-4 max-w-3xl",
dmSansClassName(),
)}
>
{relatableOptions.map((option, index) => (
<div
key={option.text}
className={cn(
"rounded-lg max-w-[140px] min-h-[159px] transition-all duration-300",
selectedOptions.includes(index)
? "p-px bg-linear-to-b from-[#3374FF] to-[#1A63FF00]"
: "p-0 border border-[#0D121A] hover:border-[#4C608B66]",
)}
>
<button
className={`
group relative w-full h-full rounded-lg p-2 cursor-pointer transition-all duration-300 overflow-hidden
bg-[#080B0F] hover:bg-no-repeat
`}
onClick={() => {
setSelectedOptions((prev) =>
prev.includes(index)
? prev.filter((i) => i !== index)
: [...prev, index],
)
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault()
setSelectedOptions((prev) =>
prev.includes(index)
? prev.filter((i) => i !== index)
: [...prev, index],
)
}
}}
type="button"
>
<AnimatePresence>
{selectedOptions.includes(index) && (
<motion.div
className="absolute inset-0 bg-[url('/onboarding/bg-gradient-1.png')] bg-size-[550%_auto] bg-top bg-no-repeat"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
<div className="relative flex flex-col items-start justify-between h-full">
<span
className={`text-2xl ${
selectedOptions.includes(index)
? "opacity-100"
: "opacity-70 group-hover:opacity-100"
}`}
>
{option.emoji}
</span>
<p
className={`text-white text-sm leading-[135%] align-bottom text-left transition-opacity duration-300 ${
selectedOptions.includes(index)
? "opacity-100"
: "opacity-50 group-hover:opacity-100"
}`}
>
{option.text}
</p>
</div>
</button>
</div>
))}
</div>
<div className="flex gap-4 my-8">
<div key={selectedOptions.length === 0 ? "skip" : "continue"}>
<Button
className={cn(
"font-medium text-white hover:no-underline cursor-pointer",
selectedOptions.length !== 0 ? "rounded-xl" : "",
)}
variant={selectedOptions.length !== 0 ? "onboarding" : "link"}
size="lg"
onClick={handleContinueOrSkip}
style={
selectedOptions.length !== 0
? {
background:
"linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
}
: undefined
}
>
{selectedOptions.length === 0
? "Skip for now →"
: "Remember this →"}
</Button>
</div>
</div>
</motion.div>
)
}
|