feat: add nudge bottom banner for non logged in users (#3259)

Co-authored-by: Nick Taylor <nick@nickyt.co>
Co-authored-by: Brian Douglas <bdougie@users.noreply.github.com>

components/Workspaces/WorkspaceLayout.tsx

@@ -1,11 +1,14 @@
 import { useLocalStorage } from "react-use";
 import { LuArrowRightToLine } from "react-icons/lu";
 import { useOutsideClick } from "rooks";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import clsx from "clsx";
+import Link from "next/link";
+import { IoClose } from "react-icons/io5";
 import TopNav from "components/organisms/TopNav/top-nav";
 import { AppSideBar } from "components/shared/AppSidebar/AppSidebar";
 import { useMediaQuery } from "lib/hooks/useMediaQuery";
+import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import ClientOnly from "components/atoms/ClientOnly/client-only";
 
 interface WorkspaceLayoutProps {
@@ -20,6 +23,9 @@ export const WorkspaceLayout = ({ workspaceId, banner, children, footer }: Works
   const [showingSidebar, setShowingSidebar] = useLocalStorage("showingSidebar", isLargeScreen);
   const hideSidebar = () => setShowingSidebar(false);
   const sidebarRef = useRef<HTMLSpanElement | null>(null);
+  const { user } = useSupabaseAuth();
+  const [showingSignupNudge, setShowingSignupNudge] = useState(true);
+
   useOutsideClick(
     sidebarRef,
     (event) => {
@@ -77,6 +83,19 @@ export const WorkspaceLayout = ({ workspaceId, banner, children, footer }: Works
           <div className="border-t flex">{footer}</div>
         </div>
       ) : null}
+      {!user && showingSignupNudge ? (
+        <div className="sticky w-full min-w-screen bottom-0 bg-light-slate-2 border-t h-16 pr-3 grid place-content-center grid-flow-col gap-4 px-4 md:hidden">
+          <span>
+            <Link href="/start" className="text-sauced-orange hover:underline">
+              Sign up
+            </Link>{" "}
+            to start tracking your projects!
+          </span>
+          <button onClick={() => setShowingSignupNudge(false)}>
+            <IoClose className="w-4 h-4" />
+          </button>
+        </div>
+      ) : null}
     </>
   );
 };