add talo info card and footer

src/Router.tsx

@@ -8,6 +8,7 @@ import canViewPage from './utils/canViewPage'
 import IntendedRouteHandler from './components/IntendedRouteHandler'
 import userState from './state/userState'
 import activeGameState from './state/activeGameState'
+import Footer from './components/Footer'
 
 const Login = lazy(() => import(/* webpackChunkName: 'login' */ './pages/Login'))
 const Dashboard = lazy(() => import(/* webpackChunkName: 'dashboard' */ './pages/Dashboard'))
@@ -57,26 +58,29 @@ function Router({
   return (
     <>
       {!AuthService.getToken() &&
-        <main className='bg-gray-800 w-full'>
-          <Routes>
-            <Route path={routes.login} element={<Login />} />
-            <Route path={routes.register} element={<Register />} />
-            <Route path={routes.demo} element={<Demo />} />
-            <Route path={routes.verify2FA} element={<Verify2FA />} />
-            <Route path={routes.recover} element={<RecoverAccount />} />
-            <Route path={routes.acceptInvite} element={<AcceptInvite />} />
-            <Route path={routes.forgotPassword} element={<ForgotPassword />} />
-            <Route path={routes.resetPassword} element={<ResetPassword />} />
+        <div className='w-full flex flex-col'>
+          <main className='bg-gray-800 w-full md:py-16 lg:py-32'>
+            <Routes>
+              <Route path={routes.login} element={<Login />} />
+              <Route path={routes.register} element={<Register />} />
+              <Route path={routes.demo} element={<Demo />} />
+              <Route path={routes.verify2FA} element={<Verify2FA />} />
+              <Route path={routes.recover} element={<RecoverAccount />} />
+              <Route path={routes.acceptInvite} element={<AcceptInvite />} />
+              <Route path={routes.forgotPassword} element={<ForgotPassword />} />
+              <Route path={routes.resetPassword} element={<ResetPassword />} />
 
-            <Route path='*' element={<IntendedRouteHandler intendedRoute={intendedRoute} />} />
-          </Routes>
-        </main>
+              <Route path='*' element={<IntendedRouteHandler intendedRoute={intendedRoute} />} />
+            </Routes>
+          </main>
+          <Footer />
+        </div>
       }
 
       {AuthService.getToken() &&
         <div className='w-full flex flex-col'>
           <NavBar />
-          <main className='bg-gray-800 p-4 md:p-8 text-white'>
+          <main className='bg-gray-800 p-4 md:p-8 md:pb-16 lg:pb-32 text-white'>
             <Routes>
               <Route path={routes.dashboard} element={<Dashboard />} />
               <Route path={routes.account} element={<Account />} />
@@ -112,6 +116,7 @@ function Router({
               <Route path='*' element={<NotFound />} />
             </Routes>
           </main>
+          <Footer />
         </div>
       }
     </>

src/components/Footer.tsx

@@ -0,0 +1,61 @@
+import Link from './Link'
+
+export default function Footer() {
+  return (
+    <footer className='relative mt-auto bg-gray-900 px-4 py-8 md:py-12 w-full text-white md:flex justify-center md:space-x-12 lg:space-x-16 xl:space-x-[100px] space-y-4 md:space-y-0 border-t border-gray-700'>
+      <div className='space-y-4'>
+        <div>
+          <strong>&copy; Talo Platform Ltd {new Date().getFullYear()}</strong>
+          <p className='mt-2'>Self-funded and independent</p>
+          <Link to='https://trytalo.com/about'>About us</Link>
+        </div>
+
+        <div>
+          <h3 className='font-semibold'>Contact us</h3>
+          <ul className='mt-2 space-y-1'>
+            <li><Link to='https://discord.gg/2RWwxXVY3v'>Discord</Link></li>
+            <li><Link to='mailto:hello@trytalo.com'>Email</Link></li>
+            <li><Link to='https://x.com/trytalo'>Twitter</Link></li>
+          </ul>
+        </div>
+      </div>
+
+      <div>
+        <h3 className='font-semibold'>Features</h3>
+        <ul className='mt-2 space-y-1'>
+          <li><Link to='https://trytalo.com/players'>Player management</Link></li>
+          <li><Link to='https://trytalo.com/events'>Event tracking</Link></li>
+          <li><Link to='https://trytalo.com/leaderboards'>Leaderboards</Link></li>
+          <li><Link to='/https://trytalo.comsaves'>Game saves</Link></li>
+          <li><Link to='https://trytalo.com/stats'>Game stats</Link></li>
+          <li><Link to='https://trytalo.com/feedback'>Game feedback</Link></li>
+          <li><Link to='https://trytalo.com/live-config'>Live config</Link></li>
+          <li><Link to='https://trytalo.com/open-source'>Open source</Link></li>
+        </ul>
+      </div>
+
+      <div className='space-y-4 xl:space-y-0 xl:flex xl:space-x-[100px]'>
+        <div>
+          <h3 className='font-semibold'>Integrations</h3>
+          <ul className='mt-2 space-y-1'>
+            <li><Link to='https://trytalo.com/steamworks-integration'>Steamworks integration</Link></li>
+            <li><Link to='https://trytalo.com/unity'>Unity package</Link></li>
+            <li><Link to='https://trytalo.com/godot'>Godot plugin</Link></li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className='font-semibold'>Links</h3>
+          <ul className='mt-2 space-y-1'>
+            <li><Link to='https://github.com/TaloDev'>GitHub</Link></li>
+            <li><Link to='https://docs.trytalo.com'>Docs</Link></li>
+            <li><Link to='https://trytalo.com/blog'>Blog</Link></li>
+            <li><Link to='https://trytalo.com/pricing'>Pricing</Link></li>
+            <li><Link to='https://trytalo.com/privacy'>Privacy</Link></li>
+            <li><Link to='https://trytalo.com/terms'>Terms</Link></li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/Link.tsx

@@ -10,7 +10,7 @@ type LinkProps = {
   children: ReactNode
 }
 
-function Link({
+export default function Link({
   to,
   state,
   className,
@@ -34,5 +34,3 @@ function Link({
     </RouterLink>
   )
 }
-
-export default Link

src/components/LinkButton.tsx

@@ -1,16 +1,18 @@
 import { MouseEvent, ReactNode } from 'react'
 import { linkStyle, focusStyle } from '../styles/theme'
+import clsx from 'clsx'
 
 type LinkButtonProps = {
   onClick: (e: MouseEvent<HTMLElement>) => void
+  className?: string
   children: ReactNode
 }
 
-export default function LinkButton({ onClick, children }: LinkButtonProps) {
+export default function LinkButton({ onClick, className, children }: LinkButtonProps) {
   return (
     <button
       type='button'
-      className={`${linkStyle} ${focusStyle}`}
+      className={clsx(linkStyle, focusStyle, className)}
       onClick={onClick}
     >
       {children}

src/components/TaloInfoCard.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import LinkButton from './LinkButton'
+import clsx from 'clsx'
+import { IconChevronDown } from '@tabler/icons-react'
+import Link from './Link'
+
+export default function TaloInfoCard() {
+  const [showInfo, setShowInfo] = useState(false)
+
+  return (
+    <>
+      <LinkButton className='flex space-x-2 items-center' onClick={() => setShowInfo(!showInfo)}>
+        <span>What is Talo?</span>
+        <IconChevronDown className={clsx('transition-transform', { 'rotate-180': showInfo })} />
+      </LinkButton>
+
+      {showInfo &&
+        <div className='flex space-x-4'>
+          <div className='w-1 bg-gray-700' />
+          <p className='text-sm md:text-base'>
+            Talo is an open-source game backend: it&apos;s the easiest way to integrate leaderboards, stats, player management and more.
+            {' '}<Link to='https://trytalo.com'>Learn more here</Link>.
+          </p>
+        </div>
+      }
+    </>
+  )
+}

src/pages/Login.tsx

@@ -14,6 +14,8 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import * as Sentry from '@sentry/react'
 import type { MouseEvent } from 'react'
 import userState from '../state/userState'
+import taloIcon from '../assets/talo-icon.svg'
+import TaloInfoCard from '../components/TaloInfoCard'
 
 export default function Login() {
   const [email, setEmail] = useState('')
@@ -62,7 +64,12 @@ export default function Login() {
     <div className='h-full p-8 flex flex-col md:items-center md:justify-center'>
       <form className={`text-white space-y-8 ${unauthedContainerStyle}`}>
         <div className='space-y-4'>
-          <h1 className='text-4xl font-bold'>Welcome back</h1>
+          <h1 className='text-4xl font-mono font-bold flex items-center space-x-4'>
+            <img src={taloIcon} alt='Talo' className='w-[32px] h-[32px]' />
+            <span>Talo Game Services</span>
+          </h1>
+
+          <TaloInfoCard />
 
           {wasLoggedOut &&
             <AlertBanner text='You were logged out' />

src/pages/Register.tsx

@@ -136,7 +136,7 @@ export default function Register() {
               inputRef={ref}
               checked={value}
               onChange={onChange}
-              labelContent={<>I agree to the <Link to='https://trytalo.com/terms'>Terms of Use</Link> and <Link to='https://trytalo.com/privacy'>Privacy Policy</Link></>}
+              labelContent={<>I agree to the <Link to='https://trytalo.com/terms'>terms of use</Link> and <Link to='https://trytalo.com/privacy'>privacy policy</Link></>}
             />
           )}
         />