feat: Landing Page

Routing, Hooks

Author: tylertraviss

frontend/src/components/Common/Navbar.tsx

@@ -19,7 +19,7 @@ function Navbar() {
       top={0}
       p={4}
     >
-      <Link to="/">
+      <Link to="/dashboard">
         <Image src={Logo} alt="Logo" maxW="3xs" p={2} />
       </Link>
       <Flex gap={2} alignItems="center">

frontend/src/components/Common/NotFound.tsx

@@ -31,7 +31,7 @@ const NotFound = () => {
         The page you are looking for was not found.
       </Text>
       <Center zIndex={1}>
-        <Link to="/">
+        <Link to="/landing">
           <Button variant="solid" colorScheme="teal" mt={4} alignSelf="center">
             Go Back
           </Button>

frontend/src/components/Common/SidebarItems.tsx

@@ -7,7 +7,7 @@ import type { IconType } from "react-icons/lib"
 import type { UserPublic } from "@/client"
 
 const items = [
-  { icon: FiHome, title: "Dashboard", path: "/" },
+  { icon: FiHome, title: "Dashboard", path: "/dashboard" },
   { icon: FiBriefcase, title: "Items", path: "/items" },
   { icon: FiSettings, title: "User Settings", path: "/settings" },
 ]

frontend/src/hooks/useAuth.ts

@@ -51,7 +51,7 @@ const useAuth = () => {
   const loginMutation = useMutation({
     mutationFn: login,
     onSuccess: () => {
-      navigate({ to: "/" })
+      navigate({ to: "/dashboard" })
     },
     onError: (err: ApiError) => {
       handleError(err)

frontend/src/routeTree.gen.ts

@@ -13,10 +13,12 @@ import { Route as SignupRouteImport } from './routes/signup'
 import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as RecoverPasswordRouteImport } from './routes/recover-password'
 import { Route as LoginRouteImport } from './routes/login'
+import { Route as LandingRouteImport } from './routes/landing'
 import { Route as LayoutRouteImport } from './routes/_layout'
-import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
+import { Route as IndexRouteImport } from './routes/index'
 import { Route as LayoutSettingsRouteImport } from './routes/_layout/settings'
 import { Route as LayoutItemsRouteImport } from './routes/_layout/items'
+import { Route as LayoutDashboardRouteImport } from './routes/_layout/dashboard'
 import { Route as LayoutAdminRouteImport } from './routes/_layout/admin'
 
 const SignupRoute = SignupRouteImport.update({
@@ -39,14 +41,19 @@ const LoginRoute = LoginRouteImport.update({
   path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LandingRoute = LandingRouteImport.update({
+  id: '/landing',
+  path: '/landing',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LayoutRoute = LayoutRouteImport.update({
   id: '/_layout',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LayoutIndexRoute = LayoutIndexRouteImport.update({
+const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => LayoutRoute,
+  getParentRoute: () => rootRouteImport,
 } as any)
 const LayoutSettingsRoute = LayoutSettingsRouteImport.update({
   id: '/settings',
@@ -58,80 +65,99 @@ const LayoutItemsRoute = LayoutItemsRouteImport.update({
   path: '/items',
   getParentRoute: () => LayoutRoute,
 } as any)
+const LayoutDashboardRoute = LayoutDashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => LayoutRoute,
+} as any)
 const LayoutAdminRoute = LayoutAdminRouteImport.update({
   id: '/admin',
   path: '/admin',
   getParentRoute: () => LayoutRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/landing': typeof LandingRoute
   '/login': typeof LoginRoute
   '/recover-password': typeof RecoverPasswordRoute
   '/reset-password': typeof ResetPasswordRoute
   '/signup': typeof SignupRoute
   '/admin': typeof LayoutAdminRoute
+  '/dashboard': typeof LayoutDashboardRoute
   '/items': typeof LayoutItemsRoute
   '/settings': typeof LayoutSettingsRoute
-  '/': typeof LayoutIndexRoute
 }
 export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/landing': typeof LandingRoute
   '/login': typeof LoginRoute
   '/recover-password': typeof RecoverPasswordRoute
   '/reset-password': typeof ResetPasswordRoute
   '/signup': typeof SignupRoute
   '/admin': typeof LayoutAdminRoute
+  '/dashboard': typeof LayoutDashboardRoute
   '/items': typeof LayoutItemsRoute
   '/settings': typeof LayoutSettingsRoute
-  '/': typeof LayoutIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
   '/_layout': typeof LayoutRouteWithChildren
+  '/landing': typeof LandingRoute
   '/login': typeof LoginRoute
   '/recover-password': typeof RecoverPasswordRoute
   '/reset-password': typeof ResetPasswordRoute
   '/signup': typeof SignupRoute
   '/_layout/admin': typeof LayoutAdminRoute
+  '/_layout/dashboard': typeof LayoutDashboardRoute
   '/_layout/items': typeof LayoutItemsRoute
   '/_layout/settings': typeof LayoutSettingsRoute
-  '/_layout/': typeof LayoutIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
+    | '/'
+    | '/landing'
     | '/login'
     | '/recover-password'
     | '/reset-password'
     | '/signup'
     | '/admin'
+    | '/dashboard'
     | '/items'
     | '/settings'
-    | '/'
   fileRoutesByTo: FileRoutesByTo
   to:
+    | '/'
+    | '/landing'
     | '/login'
     | '/recover-password'
     | '/reset-password'
     | '/signup'
     | '/admin'
+    | '/dashboard'
     | '/items'
     | '/settings'
-    | '/'
   id:
     | '__root__'
+    | '/'
     | '/_layout'
+    | '/landing'
     | '/login'
     | '/recover-password'
     | '/reset-password'
     | '/signup'
     | '/_layout/admin'
+    | '/_layout/dashboard'
     | '/_layout/items'
     | '/_layout/settings'
-    | '/_layout/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
   LayoutRoute: typeof LayoutRouteWithChildren
+  LandingRoute: typeof LandingRoute
   LoginRoute: typeof LoginRoute
   RecoverPasswordRoute: typeof RecoverPasswordRoute
   ResetPasswordRoute: typeof ResetPasswordRoute
@@ -168,19 +194,26 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/landing': {
+      id: '/landing'
+      path: '/landing'
+      fullPath: '/landing'
+      preLoaderRoute: typeof LandingRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_layout': {
       id: '/_layout'
       path: ''
       fullPath: ''
       preLoaderRoute: typeof LayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_layout/': {
-      id: '/_layout/'
+    '/': {
+      id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof LayoutIndexRouteImport
-      parentRoute: typeof LayoutRoute
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
     }
     '/_layout/settings': {
       id: '/_layout/settings'
@@ -196,6 +229,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutItemsRouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/_layout/dashboard': {
+      id: '/_layout/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof LayoutDashboardRouteImport
+      parentRoute: typeof LayoutRoute
+    }
     '/_layout/admin': {
       id: '/_layout/admin'
       path: '/admin'
@@ -208,23 +248,25 @@ declare module '@tanstack/react-router' {
 
 interface LayoutRouteChildren {
   LayoutAdminRoute: typeof LayoutAdminRoute
+  LayoutDashboardRoute: typeof LayoutDashboardRoute
   LayoutItemsRoute: typeof LayoutItemsRoute
   LayoutSettingsRoute: typeof LayoutSettingsRoute
-  LayoutIndexRoute: typeof LayoutIndexRoute
 }
 
 const LayoutRouteChildren: LayoutRouteChildren = {
   LayoutAdminRoute: LayoutAdminRoute,
+  LayoutDashboardRoute: LayoutDashboardRoute,
   LayoutItemsRoute: LayoutItemsRoute,
   LayoutSettingsRoute: LayoutSettingsRoute,
-  LayoutIndexRoute: LayoutIndexRoute,
 }
 
 const LayoutRouteWithChildren =
   LayoutRoute._addFileChildren(LayoutRouteChildren)
 
 const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
   LayoutRoute: LayoutRouteWithChildren,
+  LandingRoute: LandingRoute,
   LoginRoute: LoginRoute,
   RecoverPasswordRoute: RecoverPasswordRoute,
   ResetPasswordRoute: ResetPasswordRoute,

frontend/src/routes/_layout/index.tsx frontend/src/routes/_layout/dashboard.tsxfrontend/src/routes/_layout/index.tsx renamed to frontend/src/routes/_layout/dashboard.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router"
 
 import useAuth from "@/hooks/useAuth"
 
-export const Route = createFileRoute("/_layout/")({
+export const Route = createFileRoute("/_layout/dashboard")({
   component: Dashboard,
 })
 

frontend/src/routes/index.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react"
+
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
+
+import { isLoggedIn } from "@/hooks/useAuth"
+
+export const Route = createFileRoute("/")({
+  component: RootRedirect,
+})
+
+function RootRedirect() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    navigate({
+      to: isLoggedIn() ? "/dashboard" : "/landing",
+      replace: true,
+    })
+  }, [navigate])
+
+  return null
+}
+
+export default RootRedirect

frontend/src/routes/landing.tsx

@@ -0,0 +1,91 @@
+import { Box, Button, Container, Flex, Heading, Text } from "@chakra-ui/react"
+import { Link as RouterLink, createFileRoute } from "@tanstack/react-router"
+
+import { isLoggedIn } from "@/hooks/useAuth"
+
+export const Route = createFileRoute("/landing")({
+  component: LandingPage,
+})
+
+function LandingPage() {
+  const loggedIn = isLoggedIn()
+
+  return (
+    <Container
+      maxW="6xl"
+      minH="100vh"
+      display="flex"
+      flexDir="column"
+      justifyContent="center"
+      gap={16}
+      py={12}
+    >
+      <Flex direction="column" gap={6}>
+        <Heading as="h1" size="3xl">
+          Seamless Arbitrage Insights
+        </Heading>
+        <Text fontSize="xl" color="fg.muted" maxW="2xl">
+          Track market opportunities, monitor performance, and make decisions
+          with confidence. All from a single, intuitive dashboard.
+        </Text>
+        <Flex gap={4} wrap="wrap">
+          <RouterLink to={loggedIn ? "/dashboard" : "/signup"}>
+            <Button size="lg" colorScheme="teal">
+              {loggedIn ? "Go to Dashboard" : "Get Started"}
+            </Button>
+          </RouterLink>
+          {!loggedIn && (
+            <RouterLink to="/login">
+              <Button size="lg" variant="outline">
+                Log In
+              </Button>
+            </RouterLink>
+          )}
+        </Flex>
+      </Flex>
+
+      <Flex
+        direction={{ base: "column", md: "row" }}
+        gap={8}
+        align="stretch"
+      >
+        <Feature
+          title="Real-time Monitoring"
+          description="Stay updated with live price tracking across your connected exchanges."
+        />
+        <Feature
+          title="Actionable Alerts"
+          description="Receive instant notifications when profitable spreads appear."
+        />
+        <Feature
+          title="Collaboration Ready"
+          description="Invite your team and share insights to coordinate faster trades."
+        />
+      </Flex>
+    </Container>
+  )
+}
+
+interface FeatureProps {
+  title: string
+  description: string
+}
+
+function Feature({ title, description }: FeatureProps) {
+  return (
+    <Box
+      borderWidth="1px"
+      borderRadius="lg"
+      p={6}
+      bg="bg.surface"
+      shadow="sm"
+    >
+      <Heading as="h2" size="md" mb={3}>
+        {title}
+      </Heading>
+      <Text color="fg.muted">{description}</Text>
+    </Box>
+  )
+}
+
+export default LandingPage

frontend/src/routes/login.tsx

@@ -21,7 +21,7 @@ export const Route = createFileRoute("/login")({
   beforeLoad: async () => {
     if (isLoggedIn()) {
       throw redirect({
-        to: "/",
+        to: "/dashboard",
       })
     }
   },

frontend/src/routes/recover-password.tsx

@@ -21,7 +21,7 @@ export const Route = createFileRoute("/recover-password")({
   beforeLoad: async () => {
     if (isLoggedIn()) {
       throw redirect({
-        to: "/",
+        to: "/dashboard",
       })
     }
   },