useCases

src/components/Layout/UseCases.tsx

@@ -0,0 +1,86 @@
+import { Box } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { Routes } from '~src/router/routes'
+import cityCouncilImg from '/assets/city_council.png'
+import coopsImg from '/assets/coop.png'
+import organizationsImg from '/assets/org.png'
+import politicalPartyImg from '/assets/political_party.png'
+import sportClubsImg from '/assets/sport_club.png'
+import web3Img from '/assets/web3.png'
+
+type UseCasesItem = {
+  category: string
+  label: string
+  description: string
+  url: string
+  route: string
+}
+
+const UseCases = () => {
+  return <Box>Use Cases</Box>
+}
+
+export const useCases = (): UseCasesItem[] => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      category: t('use_cases.insitutions_tab', { defaultValue: 'Institutions and Public Sector' }),
+      label: t('use_cases.insitutions_label', { defaultValue: 'City Councils' }),
+      description: t('use_cases.insitutions_description', {
+        defaultValue: 'How do you create compelling presentations that wow your colleagues and impress your managers?',
+      }),
+      url: cityCouncilImg,
+      route: Routes.useCases.cityCouncils,
+    },
+    {
+      category: t('use_cases.cooperatives_tab', { defaultValue: 'Professional Colleges' }),
+      label: t('use_cases.cooperatives_label', { defaultValue: 'Organizations' }),
+      description: t('use_cases.cooperatives_description', {
+        defaultValue:
+          "Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started.",
+      }),
+      url: organizationsImg,
+      route: Routes.useCases.organizations,
+    },
+    {
+      category: t('use_cases.organizations_tab', { defaultValue: 'Software Engineering' }),
+      label: t('use_cases.organizations_label', { defaultValue: 'Political Parties' }),
+      description: t('use_cases.organizations_description', {
+        defaultValue:
+          'The rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them.',
+      }),
+      url: politicalPartyImg,
+      route: Routes.useCases.politicalParties,
+    },
+    {
+      category: t('use_cases.sports_and_recreations_tab', { defaultValue: 'Product' }),
+      label: t('use_cases.sports_and_recreations_label', { defaultValue: 'Co-ops' }),
+      description: t('use_cases.sports_and_recreations_description', {
+        defaultValue: 'Mental models are simple expressions of complex processes or relationships.',
+      }),
+      url: coopsImg,
+      route: Routes.useCases.coOps,
+    },
+    {
+      category: t('use_cases.community_groups_tab', { defaultValue: 'Design' }),
+      label: t('use_cases.community_groups_label', { defaultValue: 'Web3' }),
+      description: t('use_cases.community_groups_description', {
+        defaultValue: 'Introduction to Wireframing and its Principles. Learn from the best in the industry.',
+      }),
+      url: web3Img,
+      route: Routes.useCases.web3,
+    },
+    {
+      category: t('use_cases.community_groups_tab', { defaultValue: 'Software Engineering' }),
+      label: t('use_cases.community_groups_label', { defaultValue: 'Sport Clubs' }),
+      description: t('use_cases.community_groups_description', {
+        defaultValue: 'Javascript frameworks make development easy with extensive features and functionalities.',
+      }),
+      url: sportClubsImg,
+      route: Routes.useCases.sportClubs,
+    },
+  ]
+}
+
+export default UseCases

src/components/Navbar/index.tsx

@@ -21,6 +21,7 @@ import { useAuth } from '~components/Auth/useAuth'
 import { DashboardMenuItem } from '~components/Dashboard/Menu/Item'
 import { ColorModeSwitcher } from '~components/Layout/ColorModeSwitcher'
 import Logo from '~components/Layout/Logo'
+import { useCases } from '~components/Layout/UseCases'
 import { Routes } from '~src/router/routes'
 
 type MenuItem = {
@@ -66,6 +67,7 @@ const NavbarMenu = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void
 
 const NavbarMenuContent = () => {
   const { t } = useTranslation()
+  const useCasesItems = useCases()
   const [openSection, setOpenSection] = useState<string | null>(null)
   const isLargerThanXL = useBreakpointValue({ base: false, xl: true })
 
@@ -75,14 +77,7 @@ const NavbarMenuContent = () => {
   const menuItems: MenuItem[] = [
     {
       label: t('navbar.use_cases', { defaultValue: 'Use Cases' }),
-      children: [
-        { label: 'Use case 1', route: '' },
-        { label: 'Use case 2', route: '' },
-        { label: 'Use case 3', route: '' },
-        { label: 'Use case 1', route: '' },
-        { label: 'Use case 2', route: '' },
-        { label: 'Use case 3', route: '' },
-      ],
+      children: useCasesItems,
     },
     {
       label: t('navbar.features', { defaultValue: 'Features' }),

src/router/Router.tsx

@@ -3,14 +3,16 @@ import { useAuthRoutes } from './routes/auth'
 import { useDashboardRoutes } from './routes/dashboard'
 import { useProcessCreateRoutes } from './routes/process-create'
 import { useRootRoutes } from './routes/root'
+import { useUseCasesRoutes } from './routes/use-cases'
 
 export const RoutesProvider = () => {
   const root = useRootRoutes()
   const auth = useAuthRoutes()
   const processCreate = useProcessCreateRoutes()
   const dashboard = useDashboardRoutes()
+  const useCases = useUseCasesRoutes()
 
-  const router = createBrowserRouter([root, auth, processCreate, dashboard])
+  const router = createBrowserRouter([root, auth, processCreate, dashboard, useCases])
 
   return <RouterProvider router={router} />
 }

src/router/routes/index.ts

@@ -31,7 +31,15 @@ export const Routes = {
     checkout: '/stripe/checkout/:amount?',
     return: '/stripe/return/:sessionId',
   },
-  useCases: '/use-cases',
+  useCases: {
+    root: '/use-cases',
+    cityCouncils: '/city-councils',
+    organizations: '/organizations',
+    politicalParties: '/political-parties',
+    coOps: '/coops',
+    web3: '/web3',
+    sportClubs: '/sport-clubs',
+  },
   terms: '/terms',
 }
 

src/router/routes/use-cases.tsx

@@ -0,0 +1,29 @@
+import { lazy } from 'react'
+// These aren't lazy loaded since they are main layouts and related components
+import Layout from '~elements/Layout'
+import { Routes } from '.'
+import { SuspenseLoader } from '../SuspenseLoader'
+
+const UseCases = lazy(() => import('~components/Layout/UseCases'))
+
+const UseCasesElements = [
+  {
+    children: [
+      {
+        path: Routes.useCases.root,
+        element: (
+          <SuspenseLoader>
+            <UseCases />
+          </SuspenseLoader>
+        ),
+      },
+    ],
+  },
+]
+
+export const useUseCasesRoutes = () => {
+  return {
+    element: <Layout />,
+    children: UseCasesElements,
+  }
+}