[portal][feat] add sign up link

apps/portal/src/components/global/AppShell.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from 'react';
 import { Fragment, useState } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
+import { Button } from '@tih/ui';
 
 import GlobalNavigation from '~/components/global/GlobalNavigation';
 import HomeNavigation from '~/components/global/HomeNavigation';
@@ -37,9 +38,25 @@ function ProfileJewel() {
   const loginHref = loginPageHref();
   if (session == null) {
     return router.pathname !== loginHref.pathname ? (
-      <Link className="text-base" href={loginHref}>
+      <div className="flex items-center space-x-4">
+        <Link
+          className="hover:text-primary-500 text-xs font-medium text-slate-700"
+          href={loginHref}>
           Sign In
         </Link>
+        <Button
+          href={{
+            ...loginHref,
+            query: {
+              ...loginHref.query,
+              mode: 'signup',
+            },
+          }}
+          label="Sign Up"
+          size="sm"
+          variant="tertiary"
+        />
+      </div>
     ) : null;
   }
 

apps/portal/src/pages/login.tsx

@@ -28,13 +28,13 @@ export default function LoginPage({
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <img
             alt="Tech Interview Handbook"
-            className="mx-auto h-24 w-auto"
+            className="mx-auto h-24 w-auto sm:h-36"
             src="/logo.svg"
           />
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
+          <h2 className="mt-6 text-center text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
             Sign in to Tech Interview Handbook Portal
           </h2>
-          <p className="mt-2 text-center text-slate-600">
+          <p className="mt-2 text-center text-sm text-slate-600 sm:text-base">
             Get your resumes peer-reviewed, discuss solutions to tech interview
             questions, explore offer data points.
           </p>
@@ -48,7 +48,11 @@ export default function LoginPage({
                     addonPosition="start"
                     display="block"
                     icon={GitHubIcon}
-                    label={`Sign in with ${provider.name}`}
+                    label={
+                      router.query.mode === 'signup'
+                        ? `Sign up with ${provider.name}`
+                        : `Sign in with ${provider.name}`
+                    }
                     type="button"
                     variant="primary"
                     onClick={() =>
@@ -65,6 +69,11 @@ export default function LoginPage({
                 </div>
               ))}
           </div>
+          {router.query.mode === 'signup' && (
+            <p className="mt-2 text-center text-xs text-slate-500 sm:text-sm">
+              Sign up for an account via GitHub, it's free!
+            </p>
+          )}
         </div>
       </div>
     </div>