mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-05 08:06:19 +00:00
updates on the new changes
This commit is contained in:
Mahesh Sanikommmu
parent
0bc77796fc
commit
c4baa26d41
14 changed files with 109 additions and 83 deletions
|
|
@ -1,12 +1,5 @@
|
|||
import { LoginPage } from "@repo/ui/pages/login";
|
||||
import { LoginPage } from "@repo/ui/pages/login"
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<LoginPage
|
||||
texts={[
|
||||
"Your memory, everywhere, with you.",
|
||||
"Private, secure, and reliable.",
|
||||
]}
|
||||
/>
|
||||
);
|
||||
return <LoginPage />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import { AnimatedGradientBackground } from "./setup/page"
|
|||
function UserSupermemory({ name }: { name: string }) {
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
className="absolute inset-0 flex items-center justify-center z-10"
|
||||
initial={{ opacity: 0, y: 0 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 0 }}
|
||||
|
|
@ -33,7 +33,7 @@ function UserSupermemory({ name }: { name: string }) {
|
|||
>
|
||||
<Logo className="h-14 text-white" />
|
||||
<div className="flex flex-col items-start justify-center ml-4">
|
||||
<p className="text-white text-xl font-medium leading-none">{name}'s</p>
|
||||
<p className="text-white text-xs font-medium leading-none">{name}'s</p>
|
||||
<p className="text-white font-bold text-4xl leading-none -mt-2">
|
||||
supermemory
|
||||
</p>
|
||||
|
|
@ -166,7 +166,7 @@ export default function OnboardingPage() {
|
|||
const showUserSupermemory = isWelcomeFlow && currentStep === "username"
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black">
|
||||
<div className="h-screen overflow-hidden bg-black">
|
||||
{isWelcomeFlow && (
|
||||
<InitialHeader
|
||||
showUserSupermemory={
|
||||
|
|
@ -180,7 +180,7 @@ export default function OnboardingPage() {
|
|||
{isSetupFlow && <AnimatedGradientBackground />}
|
||||
|
||||
{isWelcomeFlow && (
|
||||
<div className="flex flex-col items-center justify-start min-h-[calc(100vh-86px)] relative">
|
||||
<div className="flex flex-col items-center justify-start h-[calc(100vh-86px)] overflow-y-auto relative">
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-[url('/bg-rectangle.png')] bg-cover bg-center bg-no-repeat pointer-events-none"
|
||||
transition={{ duration: 0.75, ease: "easeOut", bounce: 0 }}
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export function IntegrationsStep() {
|
|||
key={card.title}
|
||||
type="button"
|
||||
className={cn(
|
||||
"bg-[#080B0F] relative rounded-lg p-4 hover:border-[#3374FF] hover:border-[0.1px] transition-colors duration-300 border-[0.1px] border-[#0D121A] cursor-pointer text-left w-full hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:175%_auto] hover:bg-[center_top_2rem] hover:bg-no-repeat",
|
||||
"bg-[#080B0F] relative rounded-lg p-3 hover:border-[#3374FF] hover:border-[0.1px] transition-colors duration-300 border-[0.1px] border-[#0D121A] cursor-pointer text-left w-full hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:175%_auto] hover:bg-[center_top_2rem] hover:bg-no-repeat",
|
||||
"hover:border-b-0 border-b-0",
|
||||
)}
|
||||
onClick={() => setSelectedCard(card.title)}
|
||||
|
|
@ -110,7 +110,12 @@ export function IntegrationsStep() {
|
|||
<h3 className="text-white text-sm font-medium">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-xs leading-relaxed">
|
||||
<p
|
||||
className={cn(
|
||||
"text-[#8B8B8B] text-xs leading-relaxed",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -126,7 +131,12 @@ export function IntegrationsStep() {
|
|||
>
|
||||
<div className="flex-1 mt-10">
|
||||
<h3 className="text-white text-sm font-medium">{card.title}</h3>
|
||||
<p className="text-gray-400 text-xs leading-relaxed">
|
||||
<p
|
||||
className={cn(
|
||||
"text-[#8B8B8B] text-xs leading-relaxed",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@ export function RelatableQuestion() {
|
|||
<button
|
||||
key={option.text}
|
||||
className={`
|
||||
relative rounded-lg p-2 cursor-pointer transition-all duration-300 opacity-50 hover:opacity-100 hover:border-[#4C608B66] border-[1px] border-[#0D121A] max-w-[140px] min-h-[159px]
|
||||
group relative rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-[#4C608B66] border border-[#0D121A] max-w-[140px] min-h-[159px]
|
||||
${
|
||||
selectedOptions.includes(index)
|
||||
? "border-[#3374FF] border-[1px] opacity-100 bg-[url('/onboarding/bg-gradient-1.png')] bg-[length:250%_auto] bg-[center_top_3rem] bg-no-repeat"
|
||||
? "border-[#3374FF] border bg-[url('/onboarding/bg-gradient-1.png')] bg-size-[350%_auto] bg-top bg-no-repeat"
|
||||
: "bg-[#080B0F] hover:bg-no-repeat"
|
||||
}
|
||||
`}
|
||||
|
|
@ -93,7 +93,13 @@ export function RelatableQuestion() {
|
|||
>
|
||||
<div className="flex flex-col items-start justify-between h-full">
|
||||
<span className="text-2xl">{option.emoji}</span>
|
||||
<p className="text-white text-sm leading-[135%] align-bottom text-left">
|
||||
<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>
|
||||
|
|
@ -104,12 +110,20 @@ export function RelatableQuestion() {
|
|||
<div key={selectedOptions.length === 0 ? "skip" : "continue"}>
|
||||
<Button
|
||||
className={cn(
|
||||
"font-medium text-white",
|
||||
"font-medium text-white hover:no-underline",
|
||||
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 →"
|
||||
|
|
|
|||
|
|
@ -33,6 +33,10 @@ export function ContinueStep() {
|
|||
<Button
|
||||
variant="onboarding"
|
||||
onClick={handleContinue}
|
||||
style={{
|
||||
background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
|
||||
width: "147px",
|
||||
}}
|
||||
>
|
||||
Continue →
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@ export function FeaturesStep() {
|
|||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut", delay: 0.3 }}
|
||||
className="text-center max-w-[22rem] space-y-6"
|
||||
className="text-center max-w-88 space-y-6"
|
||||
layout
|
||||
>
|
||||
<h2 className="text-white text-[32px] font-medium">
|
||||
<h2 className="text-white text-[32px] font-medium leading-[110%]">
|
||||
What I can do for you
|
||||
</h2>
|
||||
|
||||
<div className={cn("space-y-4 mb-8 mx-4", dmSansClassName())}>
|
||||
<div className={cn("space-y-4 mb-[24px] mx-4", dmSansClassName())}>
|
||||
<div className="flex items-start space-x-2">
|
||||
<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0">
|
||||
<img
|
||||
src="/onboarding/human-brain.png"
|
||||
alt="Brain icon"
|
||||
|
|
@ -32,17 +32,16 @@ export function FeaturesStep() {
|
|||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-white font-light">
|
||||
Remember every context
|
||||
</p>
|
||||
<p className="text-white font-light">Remember every context</p>
|
||||
<p className="text-[#8A8A8A]">
|
||||
I keep track of what you've saved and shared with your supermemory.
|
||||
I keep track of what you've saved and shared with your
|
||||
supermemory.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-2">
|
||||
<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0">
|
||||
<img
|
||||
src="/onboarding/search.png"
|
||||
alt="Search icon"
|
||||
|
|
@ -50,17 +49,16 @@ export function FeaturesStep() {
|
|||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-white font-light">
|
||||
Find when you need it
|
||||
</p>
|
||||
<p className="text-white font-light">Find when you need it</p>
|
||||
<p className="text-[#8A8A8A]">
|
||||
I surface the right memories inside <br /> your supermemory, superfast.
|
||||
I surface the right memories inside <br /> your supermemory,
|
||||
superfast.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-2">
|
||||
<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0">
|
||||
<img
|
||||
src="/onboarding/plant.png"
|
||||
alt="Growth icon"
|
||||
|
|
@ -68,9 +66,7 @@ export function FeaturesStep() {
|
|||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-white font-light">
|
||||
Grow with your supermemory
|
||||
</p>
|
||||
<p className="text-white font-light">Grow with your supermemory</p>
|
||||
<p className="text-[#8A8A8A]">
|
||||
I learn and personalize over time, so every interaction feels
|
||||
natural.
|
||||
|
|
@ -89,6 +85,9 @@ export function FeaturesStep() {
|
|||
>
|
||||
<Button
|
||||
variant="onboarding"
|
||||
style={{
|
||||
background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
|
||||
}}
|
||||
onClick={handleContinue}
|
||||
>
|
||||
Add memories →
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export function InputStep({
|
|||
}}
|
||||
layout
|
||||
>
|
||||
<h2 className="text-white text-[32px] font-medium">
|
||||
<h2 className="text-white text-[32px] font-medium leading-[110%]">
|
||||
What should I call you?
|
||||
</h2>
|
||||
<div className="flex items-center w-full relative">
|
||||
|
|
@ -67,16 +67,19 @@ export function InputStep({
|
|||
}}
|
||||
/>
|
||||
<Button
|
||||
className={`rounded-[10px] size-8 p-2 !bg-black absolute right-1 border-[0.5px] border-gray-800 hover:cursor-pointer hover:scale-[0.95] active:scale-[0.95] transition-transform ${
|
||||
className={`rounded-[8px] w-8 h-8 p-2 absolute right-1 border-[0.5px] border-[#161F2C] hover:cursor-pointer hover:scale-[0.95] active:scale-[0.95] transition-transform ${
|
||||
isSubmitting ? "scale-[0.90]" : ""
|
||||
}`}
|
||||
size="icon"
|
||||
onClick={handleSubmit}
|
||||
style={{
|
||||
background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="10"
|
||||
viewBox="0 0 12 10"
|
||||
height="9"
|
||||
viewBox="0 0 12 9"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -108,8 +108,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut", delay: 0.3 }}
|
||||
className="text-center w-full"
|
||||
layout
|
||||
className="text-center w-full "
|
||||
>
|
||||
<h2 className="text-white text-[32px] font-medium mb-4 mt-[-36px]">
|
||||
Let's add your memories
|
||||
|
|
@ -139,13 +138,13 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${
|
||||
errors.twitter
|
||||
? "border-[#52596633] bg-[#290F0A]"
|
||||
: "border-[#525966]/20"
|
||||
: "border-onboarding/20"
|
||||
}`}
|
||||
/>
|
||||
{errors.twitter && (
|
||||
<div className="absolute left-full ml-3">
|
||||
<div className="relative flex-shrink-0 px-3 py-2 bg-red-500/20 rounded-xl">
|
||||
<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-[8px] border-t-transparent border-b-transparent border-r-red-500/20" />
|
||||
<div className="relative shrink-0 px-3 py-2 bg-red-500/20 rounded-xl">
|
||||
<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-8 border-t-transparent border-b-transparent border-r-red-500/20" />
|
||||
<p className="text-red-500 text-xs whitespace-nowrap">
|
||||
{errors.twitter}
|
||||
</p>
|
||||
|
|
@ -178,18 +177,18 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${
|
||||
errors.linkedin
|
||||
? "border-[#52596633] bg-[#290F0A]"
|
||||
: "border-[#525966]/20"
|
||||
: "border-onboarding/20"
|
||||
}`}
|
||||
/>
|
||||
{errors.linkedin && (
|
||||
<div className="absolute left-full ml-3">
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex-shrink-0 px-3 py-2 bg-red-500/20 rounded-xl",
|
||||
"relative shrink-0 px-3 py-2 bg-red-500/20 rounded-xl",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-[8px] border-t-transparent border-b-transparent border-r-red-500/20" />
|
||||
<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-8 border-t-transparent border-b-transparent border-r-red-500/20" />
|
||||
<p className="text-red-500 text-xs whitespace-nowrap">
|
||||
{errors.linkedin}
|
||||
</p>
|
||||
|
|
@ -210,11 +209,11 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
>
|
||||
Other links
|
||||
</label>
|
||||
<span className="text-[#525966] text-[10px]">Upto 3</span>
|
||||
<span className="text-onboarding text-[10px]">Upto 3</span>
|
||||
</div>
|
||||
{otherLinks.map((link, index) => (
|
||||
<div
|
||||
key={`other-link-${index}-${link.length}`}
|
||||
key={`other-link-${index}`}
|
||||
className="flex items-center mb-2 relative"
|
||||
>
|
||||
<input
|
||||
|
|
@ -223,12 +222,16 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
placeholder="Add your website, GitHub, Notion..."
|
||||
value={link}
|
||||
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-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors h-[40px]"
|
||||
className="flex-1 px-4 py-2 bg-[#070E1B] border border-onboarding/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors h-[40px]"
|
||||
/>
|
||||
{index === otherLinks.length - 1 && otherLinks.length < 3 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={addOtherLink}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
addOtherLink()
|
||||
}}
|
||||
className="size-8 m-1 absolute right-0 top-0 bg-black border border-[#161F2C] rounded-lg flex items-center justify-center text-white hover:bg-[#161F2C] transition-colors text-xl"
|
||||
>
|
||||
+
|
||||
|
|
@ -254,7 +257,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
className="w-full px-4 py-2 bg-[#070E1B] border border-[#525966]/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors min-h-[4rem]"
|
||||
className="w-full px-4 py-2 bg-[#070E1B] border border-onboarding/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors min-h-16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -266,10 +269,10 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
}}
|
||||
transition={{ duration: 1, ease: "easeOut", delay: 1 }}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
className="mt-[24px]"
|
||||
className="mt-[24px] pb-8"
|
||||
>
|
||||
<Button
|
||||
className="rounded-xl px-6 py-3 border border-[#525966]/20 max-w-[12rem] text-white disabled:opacity-50 disabled:cursor-not-allowed h-[40px] cursor-pointer"
|
||||
className="rounded-xl px-6 py-3 border border-onboarding/20 max-w-48 text-white disabled:opacity-50 disabled:cursor-not-allowed h-[40px] cursor-pointer"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export function WelcomeStep() {
|
|||
transition={{ duration: 1, ease: "easeOut" }}
|
||||
layout
|
||||
>
|
||||
<h2 className="text-white text-[32px] font-medium mb-2">Welcome to</h2>
|
||||
<h2 className="text-white text-[32px] font-medium mb-2">Welcome to...</h2>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@ export function ChromeExtensionDetailView({
|
|||
|
||||
<div className="flex flex-col items-start justify-start flex-1">
|
||||
<div>
|
||||
<h1 className="text-white text-[20px] font-medium mb-4 text-start">
|
||||
<h1 className="text-white text-[20px] font-medium mb-3 text-start">
|
||||
Import your X bookmarks via the Chrome Extension
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className={cn(
|
||||
"text-[#8B8B8B] text-sm mb-12 text-start max-w-2xl",
|
||||
"text-[#8B8B8B] text-sm mb-6 text-start max-w-2xl",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
|
|
@ -66,7 +66,7 @@ export function ChromeExtensionDetailView({
|
|||
need, right when you need it.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6 mb-12 max-w-5xl w-full">
|
||||
<div className="grid grid-cols-3 gap-6 mb-6 max-w-5xl w-full">
|
||||
{steps.map((step) => (
|
||||
<div
|
||||
key={step.number}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function InitialHeader({
|
|||
</div>
|
||||
<Button
|
||||
variant="newDefault"
|
||||
className="rounded-2xl text-base gap-1 !h-11"
|
||||
className="rounded-2xl text-base gap-1 h-11! z-10"
|
||||
size={"lg"}
|
||||
>
|
||||
Memory API <span className="text-xs mt-[4px]">↗</span>
|
||||
|
|
|
|||
|
|
@ -80,11 +80,11 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col items-start justify-start">
|
||||
<h1 className="text-white text-3xl font-medium mb-6 text-start">
|
||||
<h1 className="text-white text-xl font-medium mb-4 text-start">
|
||||
Connect your AI to supermemory MCP
|
||||
</h1>
|
||||
|
||||
<div className="mb-8 space-x-4 flex max-w-2xl">
|
||||
<div className="mb-12 space-x-4 flex max-w-2xl">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-start space-x-3 w-[200px]",
|
||||
|
|
@ -102,7 +102,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
<CircleCheckIcon className="size-4 text-green-500 flex-shrink-0 mt-0.5" />
|
||||
<CircleCheckIcon className="size-4 text-green-500 shrink-0 mt-0.5" />
|
||||
<p className="text-[#8B8B8B] text-sm">
|
||||
Auto-fetch the right context from anything you've saved
|
||||
</p>
|
||||
|
|
@ -113,22 +113,22 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
<CircleCheckIcon className="size-4 text-green-500 flex-shrink-0 mt-0.5" />
|
||||
<CircleCheckIcon className="size-4 text-green-500 shrink-0 mt-0.5" />
|
||||
<p className="text-[#8B8B8B] text-sm">
|
||||
One-time setup, seamless integration across your workflow
|
||||
One-time setup, <br /> seamless integration across your workflow
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-2xl relative">
|
||||
<div
|
||||
className="absolute left-4 top-0 w-[1px] bg-[#1E293B] z-10"
|
||||
className="absolute left-4 top-0 w-px bg-[#1E293B] z-10"
|
||||
style={{ height: activeStep === 3 ? "calc(100% - 4rem)" : "100%" }}
|
||||
/>
|
||||
<div className="flex items-start space-x-4 z-20">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20 bg-[#161F2B] text-white",
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 bg-[#161F2B] text-white",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
|
|
@ -174,7 +174,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
value={selectedClient || undefined}
|
||||
>
|
||||
<SelectTrigger
|
||||
className="max-w-md rounded-full border-[#242A33] text-white hover:border-gray-600 !bg-transparent"
|
||||
className="max-w-md rounded-full border-[#242A33] text-white hover:border-gray-600 bg-transparent!"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(0deg, #0A0E14 0%, #080B0F 100%)",
|
||||
|
|
@ -244,7 +244,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
setSelectedClient(key as keyof typeof clients)
|
||||
setActiveStep(2)
|
||||
}}
|
||||
className={`mcp-client-button-group px-3 py-1 rounded-full border-1 transition-colors cursor-pointer duration-200 ${
|
||||
className={`mcp-client-button-group px-3 py-1 rounded-full border transition-colors cursor-pointer duration-200 ${
|
||||
selectedClient === key
|
||||
? "border-blue-500 bg-blue-500/10"
|
||||
: "border-[#242A33] bg-[#080B0F] hover:border-[#3273FC4D] hover:bg-[#08142D]"
|
||||
|
|
@ -306,7 +306,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
<div className="flex items-start space-x-4">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20 text-white bg-[#161F2B]",
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 text-white bg-[#161F2B]",
|
||||
"",
|
||||
)}
|
||||
>
|
||||
|
|
@ -506,7 +506,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
<div className="flex items-start space-x-4">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20",
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20",
|
||||
"bg-[#161F2B] text-white",
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function TextSeparator({
|
|||
className={cn("flex gap-4 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="text-foreground font-sans text-[0.75rem] uppercase tracking-[-0.2px] leading-[0.875rem]">
|
||||
<span className="text-foreground text-[0.75rem] uppercase tracking-[-0.2px] leading-3.5">
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { InitialHeader } from "../../../apps/web/components/initial-header";
|
|||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { dmSansClassName } from "../../../apps/web/utils/fonts"
|
||||
import { dmSansClassName } from "../../../apps/web/utils/fonts";
|
||||
import { cn } from "@lib/utils";
|
||||
import { Logo } from "@ui/assets/Logo";
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ function AnimatedGradientBackground() {
|
|||
return (
|
||||
<div className="fixed inset-0 z-0 overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-0.png')] bg-[length:150%_auto] bg-top bg-no-repeat"
|
||||
className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-0.png')] bg-size-[150%_auto] bg-top bg-no-repeat"
|
||||
initial={{ y: "100%" }}
|
||||
animate={{
|
||||
y: 0,
|
||||
|
|
@ -34,7 +34,7 @@ function AnimatedGradientBackground() {
|
|||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-1.png')] bg-[length:150%_auto] bg-top bg-no-repeat"
|
||||
className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-1.png')] bg-size-[150%_auto] bg-top bg-no-repeat"
|
||||
initial={{ y: "100%" }}
|
||||
animate={{
|
||||
y: 0,
|
||||
|
|
@ -62,7 +62,7 @@ function AnimatedGradientBackground() {
|
|||
function LoginCard({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
className="flex w-[448px] p-8 flex-col items-start gap-2 rounded-[22px] bg-gradient-to-b from-[#06101F] to-[#030912] shadow-[1.5px_1.5px_20px_0_rgba(0,0,0,0.65),1px_1.5px_2px_0_rgba(128,189,255,0.07)_inset,-0.5px_-1.5px_4px_0_rgba(0,35,73,0.40)_inset]"
|
||||
className="flex max-w-[360px] p-8 flex-col items-start gap-2 rounded-[22px] bg-linear-to-b from-[#06101F] to-[#030912] shadow-[1.5px_1.5px_20px_0_rgba(0,0,0,0.65),1px_1.5px_2px_0_rgba(128,189,255,0.07)_inset,-0.5px_-1.5px_4px_0_rgba(0,35,73,0.40)_inset]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.75, ease: "easeOut" }}
|
||||
|
|
@ -212,11 +212,11 @@ export function LoginPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen">
|
||||
<main className="relative h-screen overflow-hidden">
|
||||
<AnimatedGradientBackground />
|
||||
<div className="relative z-10">
|
||||
<InitialHeader />
|
||||
<section className="flex flex-col items-center justify-center p-4 space-y-12 sm:p-6 md:p-8 lg:px-[5rem] lg:py-[3.125rem] min-h-[calc(100vh-80px)]">
|
||||
<section className="flex flex-col items-center justify-center p-4 space-y-12 sm:p-6 md:p-8 lg:px-20 lg:py-12.5 min-h-[calc(100vh-80px)]">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl font-medium">
|
||||
Never forget anything, anywhere
|
||||
|
|
@ -236,7 +236,7 @@ export function LoginPage() {
|
|||
</HeadingH3Medium>
|
||||
</div>
|
||||
|
||||
<TextSeparator text="OR" />
|
||||
<TextSeparator text="OR" className={cn(dmSansClassName())} />
|
||||
|
||||
<form
|
||||
className="flex flex-col gap-4 lg:gap-6"
|
||||
|
|
@ -272,7 +272,7 @@ export function LoginPage() {
|
|||
<div className="flex flex-col gap-3">
|
||||
{process.env.NEXT_PUBLIC_HOST_ID === "supermemory" ||
|
||||
!process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED ? (
|
||||
<div className="relative flex-grow">
|
||||
<div className="relative grow">
|
||||
<ExternalAuthButton
|
||||
authIcon={
|
||||
<svg
|
||||
|
|
@ -334,7 +334,7 @@ export function LoginPage() {
|
|||
) : null}
|
||||
{process.env.NEXT_PUBLIC_HOST_ID === "supermemory" ||
|
||||
!process.env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED ? (
|
||||
<div className="relative flex-grow">
|
||||
<div className="relative grow">
|
||||
<ExternalAuthButton
|
||||
authIcon={
|
||||
<svg
|
||||
|
|
@ -448,7 +448,7 @@ export function LoginPage() {
|
|||
|
||||
<Label1Regular
|
||||
className={cn(
|
||||
"text-center !text-xs text-[#737373B2]",
|
||||
"text-center text-xs! text-[#737373B2]",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue