From a45f7851467fb16b4106f8b85e4f63e57f84ce1f Mon Sep 17 00:00:00 2001 From: Dhravya Shah Date: Sat, 20 Jul 2024 22:20:39 -0500 Subject: [PATCH] onboarding UI --- apps/web/app/(auth)/layout.tsx | 12 + apps/web/app/(auth)/onboarding/page.tsx | 414 ++++++++++++++++++ apps/web/app/(auth)/signin/page.tsx | 4 +- apps/web/app/(dash)/home/page.tsx | 186 ++++---- apps/web/app/(dash)/home/queryinput.tsx | 4 +- apps/web/public/images/add-from-web.png | Bin 0 -> 164761 bytes .../web/public/images/save-from-extension.png | Bin 0 -> 68722 bytes .../public/images/twitter-bookmark-import.png | Bin 0 -> 32467 bytes 8 files changed, 525 insertions(+), 95 deletions(-) create mode 100644 apps/web/app/(auth)/layout.tsx create mode 100644 apps/web/app/(auth)/onboarding/page.tsx create mode 100644 apps/web/public/images/add-from-web.png create mode 100644 apps/web/public/images/save-from-extension.png create mode 100644 apps/web/public/images/twitter-bookmark-import.png diff --git a/apps/web/app/(auth)/layout.tsx b/apps/web/app/(auth)/layout.tsx new file mode 100644 index 00000000..904d1987 --- /dev/null +++ b/apps/web/app/(auth)/layout.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Toaster } from '@repo/ui/shadcn/sonner'; + +function Layout({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + +export default Layout; diff --git a/apps/web/app/(auth)/onboarding/page.tsx b/apps/web/app/(auth)/onboarding/page.tsx new file mode 100644 index 00000000..1912a8e8 --- /dev/null +++ b/apps/web/app/(auth)/onboarding/page.tsx @@ -0,0 +1,414 @@ +"use client"; + +import Link from "next/link"; +import { + ChevronLeftIcon, + ChevronRightIcon, + QuestionMarkCircleIcon, + ArrowTurnDownLeftIcon, +} from "@heroicons/react/24/solid"; +import { CheckIcon, PlusCircleIcon } from "@heroicons/react/24/outline"; +import { motion } from "framer-motion"; +import { useState } from "react"; +import { toast } from "sonner"; +import { createMemory } from "@repo/web/app/actions/doers"; +import { useRouter } from "next/navigation"; +import Logo from "../../../public/logo.svg"; +import Image from "next/image"; +import { cn } from "@repo/ui/lib/utils"; +import gradientStyle from "../signin/_components/TextGradient/gradient.module.css"; + +export default function Home() { + const [currStep, setCurrStep] = useState(0); + + return ( +
+
+ back bg + + {/* Navbar */} + + + {/* main-content */} +
+ {currStep === 0 && ( +
+

+ Welcome to{" "} + + supermemory + +

+
+ +
+
+ )} + {currStep >= 1 && } + {currStep >= 2 && } + {currStep >= 3 && } +
+
+ setCurrStep(v)} + currStep={currStep} + /> +
+
+ ); +} + +function StepOne({ currStep }: { currStep: number }) { + return ( + + 1 ? (currStep > 2 ? -40 : -20) : 0, + }} + transition={{ duration: 0.2, type: "spring", bounce: 0.1 }} + > +
1 + ? "bg-[#26D987]/10 text-[#26D987]" + : "bg-[#1F2428] text-white" + } `} + > +
+
+ + + +
+
+

Import twitter bookmarks

+

+ Directly import all your bookmarks from twitter in single click +

+
+
+
{getStatusIcon({ completed: currStep > 1 })}
+
+ {currStep === 1 && ( +
+
    +
  1. + Download the chrome extension{" "} + + here + +
    2. +
  2. + Go to{" "} + + x.com + {" "} + and click on the bookmark icon on the bottom right on the screen +
    3. + +
+
+ )} + + + ); +} + +function StepIndicator({ + currStep, + setCurrStep, +}: { + currStep: number; + setCurrStep: (v: number) => void; +}) { + return ( +
+
+ = 2 ? "opacity-100" : "opacity-0"}`} + onClick={() => currStep >= 2 && setCurrStep(currStep - 1)} + /> +

Step: {currStep}/3

+ currStep <= 3 && setCurrStep(currStep + 1)} + /> +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
i + 1 ? "bg-[#26D987]" : "bg-white/10" + } rounded-full overflow-hidden`} + > + {i === currStep - 1 && ( + + )} +
+ ))} +
+
+ ); +} + +function StepThree({ currStep }: { currStep: number }) { + const { push } = useRouter(); + + return ( + +
3 + ? "bg-[#26D987]/10 text-[#26D987]" + : "bg-[#1F2428] text-white" + } `} + > + {/* info */} +
+ {/* icon */} +
+ {/* custom twitter icon */} + + + +
+
+

Ask a question

+

+ Let's use the true power of supermemory! +

+
+
+ + {/* status */} +
{getStatusIcon({ completed: currStep > 3 })}
+
+ + {currStep === 3 && ( +
+
    +
  1. + Let's start off by adding some content! We have added + supermemory's link for you (you can write your own thoughts or any + other website if you want!) +
    2. +
  2. + + Once saved, you can ask any questions you have about + supermemory. + +
    3. +
  3. +
    { + toast.info("Creating memory...", { + icon: ( + + ), + duration: 7500, + }); + + const cont = await createMemory({ + content: (formData.get("cont") as string) || "", + spaces: undefined, + }); + + if (cont.success) { + toast.success("Memory created", { + richColors: true, + }); + } else { + toast.error(`Memory creation failed: ${cont.error}`); + } + + push(`/home?q=what%20is%20supermemory`); + }} + > +