From b62289d77ccf01ac967e8a6ee9101061a3f0855f Mon Sep 17 00:00:00 2001
From: tudor <7089284+tudddorrr@users.noreply.github.com>
Date: Tue, 22 Oct 2024 22:19:20 +0100
Subject: [PATCH] add talo info card and footer

---
 src/Router.tsx                  | 33 ++++++++++--------
 src/assets/talo-icon.svg        |  5 +++
 src/components/Footer.tsx       | 61 +++++++++++++++++++++++++++++++++
 src/components/Link.tsx         |  4 +--
 src/components/LinkButton.tsx   |  6 ++--
 src/components/TaloInfoCard.tsx | 28 +++++++++++++++
 src/pages/Login.tsx             |  9 ++++-
 src/pages/Register.tsx          |  2 +-
 8 files changed, 127 insertions(+), 21 deletions(-)
 create mode 100644 src/assets/talo-icon.svg
 create mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/TaloInfoCard.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 611af27f..1f6d6160 100644
--- a/src/Router.tsx
+++ b/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>
       }
     </>
diff --git a/src/assets/talo-icon.svg b/src/assets/talo-icon.svg
new file mode 100644
index 00000000..4c8efb94
--- /dev/null
+++ b/src/assets/talo-icon.svg
@@ -0,0 +1,5 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33 63C49.5685 63 63 49.5685 63 33C63 16.4315 49.5685 3 33 3C16.4315 3 3 16.4315 3 33C3 49.5685 16.4315 63 33 63Z" stroke="#FF3C7D" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M38.5015 45.1516C38.5015 47.4318 37.9935 49.1231 36.9774 50.2256C35.9611 51.3282 34.6477 51.8796 33.0372 51.8798C31.4016 51.8798 30.0696 51.3222 29.0412 50.2071C28.0126 49.0919 27.4984 47.4068 27.4985 45.1516V30.089L38.5015 45.1516Z" fill="#FF3C7D" stroke="#FF3C7D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.9491 18.4358H19.051C17.0064 18.4358 15.3489 20.0933 15.3489 22.1379V22.1379C15.3489 24.1825 17.0064 25.84 19.051 25.84H46.9491C48.9937 25.84 50.6512 24.1825 50.6512 22.1379C50.6512 20.0933 48.9937 18.4358 46.9491 18.4358Z" fill="#FF3C7D" stroke="#FF3C7D" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 00000000..53bd825f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 830f833a..bc40268c 100644
--- a/src/components/Link.tsx
+++ b/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
diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx
index f45bd4cf..d02e0977 100644
--- a/src/components/LinkButton.tsx
+++ b/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}
diff --git a/src/components/TaloInfoCard.tsx b/src/components/TaloInfoCard.tsx
new file mode 100644
index 00000000..06b46e77
--- /dev/null
+++ b/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>
+      }
+    </>
+  )
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 2baa1014..567f981d 100644
--- a/src/pages/Login.tsx
+++ b/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' />
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 15764272..8b909e81 100644
--- a/src/pages/Register.tsx
+++ b/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></>}
             />
           )}
         />