From a5c0574b7c8c0ca978b50582ed32b9f06805afad Mon Sep 17 00:00:00 2001 From: codetorso Date: Fri, 19 Jul 2024 07:56:26 +0530 Subject: [PATCH] onboarding page --- apps/web/app/(auth)/signin/page.tsx | 2 +- apps/web/app/(dash)/home/filterSpaces.tsx | 2 +- apps/web/app/(onboarding)/layout.tsx | 12 + apps/web/app/(onboarding)/onboarding/page.tsx | 388 ++++++++++++++++++ apps/web/public/image.png | Bin 0 -> 164761 bytes apps/web/public/image2.png | Bin 0 -> 8360 bytes apps/web/public/image3.png | Bin 0 -> 10298 bytes apps/web/public/img.png | Bin 0 -> 68722 bytes 8 files changed, 402 insertions(+), 2 deletions(-) create mode 100644 apps/web/app/(onboarding)/layout.tsx create mode 100644 apps/web/app/(onboarding)/onboarding/page.tsx create mode 100644 apps/web/public/image.png create mode 100644 apps/web/public/image2.png create mode 100644 apps/web/public/image3.png create mode 100644 apps/web/public/img.png diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx index 3db512ae..ab965325 100644 --- a/apps/web/app/(auth)/signin/page.tsx +++ b/apps/web/app/(auth)/signin/page.tsx @@ -64,7 +64,7 @@ async function Signin({ action={async () => { "use server"; await signIn("google", { - redirectTo: "/home?firstTime=true", + redirectTo: "/onboarding", }); }} > diff --git a/apps/web/app/(dash)/home/filterSpaces.tsx b/apps/web/app/(dash)/home/filterSpaces.tsx index 061923d8..8818791a 100644 --- a/apps/web/app/(dash)/home/filterSpaces.tsx +++ b/apps/web/app/(dash)/home/filterSpaces.tsx @@ -99,7 +99,7 @@ export function FilterSpaces({ diff --git a/apps/web/app/(onboarding)/layout.tsx b/apps/web/app/(onboarding)/layout.tsx new file mode 100644 index 00000000..10a9a3ec --- /dev/null +++ b/apps/web/app/(onboarding)/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/(onboarding)/onboarding/page.tsx b/apps/web/app/(onboarding)/onboarding/page.tsx new file mode 100644 index 00000000..294efb33 --- /dev/null +++ b/apps/web/app/(onboarding)/onboarding/page.tsx @@ -0,0 +1,388 @@ +"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 "@/app/actions/doers"; +import { useRouter } from "next/navigation"; + +export default function Home() { + const [currStep, setCurrStep] = useState(0); + + return ( +
+ {/* Navbar */} + + + {/* main-content */} +
+ {currStep === 0 && ( +
+

+ We are so excited to have you.. but but first let's set up + everything +

+
+ )} + {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. + First Download our Extension from{" "} + + here + +
    2. +
  2. + Once downloaded, it will try to authenticate you by visiting + supermemory website, coordinate it with it. +
    3. +
  3. + After successful authentication, visit x.com and click on the + bookmark icon and done, all your bookmarks are in supermemory. +
    4. +
  4. + + hover over the bottom left area of the browser window to see + the extension + +
    5. +
+ +
+ )} + + + ); +} + +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 press enter +
    2. +
  2. + + Once saved, you'll be redirected to home from there you can + search supermemory.ai or whatever you saved, and woilla, the + result is there! + +
    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`); + }} + > +