From 6045c6133e707d0168e30197634953f90b4080de Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:38:52 +0200
Subject: [PATCH 1/7] fix Links and Nav Bar

---
 template/app/src/client/App.tsx               |  14 +-
 .../{AppNavBar.tsx => NavBar/NavBar.tsx}      | 112 ++++++++-------
 .../components/NavBar/contentSections.ts      |  10 ++
 .../app/src/client/hooks/useIsLandingPage.tsx |   9 ++
 template/app/src/landing-page/LandingPage.tsx |  12 +-
 .../src/landing-page/components/Header.tsx    | 127 ------------------
 .../app/src/landing-page/contentSections.ts   |   4 +-
 7 files changed, 95 insertions(+), 193 deletions(-)
 rename template/app/src/client/components/{AppNavBar.tsx => NavBar/NavBar.tsx} (55%)
 create mode 100644 template/app/src/client/components/NavBar/contentSections.ts
 create mode 100644 template/app/src/client/hooks/useIsLandingPage.tsx
 delete mode 100644 template/app/src/landing-page/components/Header.tsx

diff --git a/template/app/src/client/App.tsx b/template/app/src/client/App.tsx
index 933decd42..4202d25bd 100644
--- a/template/app/src/client/App.tsx
+++ b/template/app/src/client/App.tsx
@@ -1,10 +1,13 @@
 import { useAuth } from 'wasp/client/auth';
 import { updateCurrentUser } from 'wasp/client/operations';
 import './Main.css';
-import AppNavBar from './components/AppNavBar';
+import NavBar from './components/NavBar/NavBar';
+import { appNavigationItems } from './components/NavBar/contentSections';
+import { landingPageNavigationItems } from '../landing-page/contentSections';
 import CookieConsentBanner from './components/cookie-consent/Banner';
-import { useMemo, useEffect, ReactNode } from 'react';
+import { useMemo, useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
+import { useIsLandingPage } from './hooks/useIsLandingPage';
 
 /**
  * use this component to wrap all child components
@@ -13,9 +16,10 @@ import { Outlet, useLocation } from 'react-router-dom';
 export default function App() {
   const location = useLocation();
   const { data: user } = useAuth();
+  const isLandingPage = useIsLandingPage();
 
   const shouldDisplayAppNavBar = useMemo(() => {
-    return location.pathname !== '/' && location.pathname !== '/login' && location.pathname !== '/signup';
+    return location.pathname !== '/login' && location.pathname !== '/signup';
   }, [location]);
 
   const isAdminDashboard = useMemo(() => {
@@ -49,7 +53,9 @@ export default function App() {
           <Outlet />
         ) : (
           <>
-            {shouldDisplayAppNavBar && <AppNavBar />}
+            {shouldDisplayAppNavBar && (
+              <NavBar navigation={isLandingPage ? landingPageNavigationItems : appNavigationItems} />
+            )}
             <div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>
               <Outlet />
             </div>
diff --git a/template/app/src/client/components/AppNavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
similarity index 55%
rename from template/app/src/client/components/AppNavBar.tsx
rename to template/app/src/client/components/NavBar/NavBar.tsx
index cdf5d35d8..7b13630d1 100644
--- a/template/app/src/client/components/AppNavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -1,37 +1,46 @@
-import { Link, routes } from 'wasp/client/router';
+import { Link } from 'wasp/client/router';
 import { useAuth } from 'wasp/client/auth';
-import { useState } from 'react';
+import { useState, Dispatch, SetStateAction } from 'react';
 import { Dialog } from '@headlessui/react';
 import { BiLogIn } from 'react-icons/bi';
 import { AiFillCloseCircle } from 'react-icons/ai';
 import { HiBars3 } from 'react-icons/hi2';
-import logo from '../static/logo.png';
-import DropdownUser from '../../user/DropdownUser';
-import { UserMenuItems } from '../../user/UserMenuItems';
-import { DocsUrl, BlogUrl } from '../../shared/common';
-import DarkModeSwitcher from './DarkModeSwitcher';
+import logo from '../../static/logo.png';
+import DropdownUser from '../../../user/DropdownUser';
+import { UserMenuItems } from '../../../user/UserMenuItems';
+import DarkModeSwitcher from '../DarkModeSwitcher';
+import { useIsLandingPage } from '../../hooks/useIsLandingPage';
+import { cn } from '../../cn';
 
-const navigation = [
-  { name: 'AI Scheduler (Demo App)', href: routes.DemoAppRoute.build() },
-  { name: 'File Upload (AWS S3)', href: routes.FileUploadRoute.build() },
-  { name: 'Pricing', href: routes.PricingPageRoute.build() },
-  { name: 'Documentation', href: DocsUrl },
-  { name: 'Blog', href: BlogUrl },
-];
+interface NavigationItem {
+  name: string;
+  // to?: Routes['to']; // TODO: fix this
+  to?: any; // TODO: fix this
+  href?: string;
+}
 
 const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
 
-export default function AppNavBar() {
+export default function AppNavBar({ navigation }: { navigation: NavigationItem[] }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const isLandingPage = useIsLandingPage();
 
   const { data: user, isLoading: isUserLoading } = useAuth();
   return (
-    <header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10 dark:bg-boxdark-2'>
+    <header
+      className={cn('absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2', {
+        'shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10': !isLandingPage,
+      })}
+    >
       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
-        <div className='flex lg:flex-1'>
-          <a href='/' className='-m-1.5 p-1.5'>
-            <img className='h-8 w-8' src={logo} alt='My SaaS App' />
-          </a>
+        <div className='flex items-center lg:flex-1'>
+          <Link
+            to='/'
+            className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
+          >
+            <NavLogo />
+            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>}
+          </Link>
         </div>
         <div className='flex lg:hidden'>
           <button
@@ -43,30 +52,19 @@ export default function AppNavBar() {
             <HiBars3 className='h-6 w-6' aria-hidden='true' />
           </button>
         </div>
-        <div className='hidden lg:flex lg:gap-x-12'>
-          {navigation.map((item) => (
-            <a
-              key={item.name}
-              href={item.href}
-              className='text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
-            >
-              {item.name}
-            </a>
-          ))}
-        </div>
+        <div className='hidden lg:flex lg:gap-x-12'>{renderNavigationItems(navigation)}</div>
         <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
           <ul className='flex justify-center items-center gap-2 sm:gap-4'>
             <DarkModeSwitcher />
           </ul>
-
           {isUserLoading ? null : !user ? (
-            <a href={!user ? routes.LoginRoute.build() : routes.AccountRoute.build()} className='text-sm font-semibold leading-6 ml-4'>
+            <Link to='/login' className='text-sm font-semibold leading-6 ml-3'>
               <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
                 Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
               </div>
-            </a>
+            </Link>
           ) : (
-            <div className='ml-4'>
+            <div className='ml-3'>
               <DropdownUser user={user} />
             </div>
           )}
@@ -76,10 +74,10 @@ export default function AppNavBar() {
         <div className='fixed inset-0 z-50' />
         <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
           <div className='flex items-center justify-between'>
-            <a href='/' className='-m-1.5 p-1.5'>
+            <Link to='/' className='-m-1.5 p-1.5'>
               <span className='sr-only'>Your SaaS</span>
               <NavLogo />
-            </a>
+            </Link>
             <button
               type='button'
               className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
@@ -91,18 +89,7 @@ export default function AppNavBar() {
           </div>
           <div className='mt-6 flow-root'>
             <div className='-my-6 divide-y divide-gray-500/10'>
-              <div className='space-y-2 py-6'>
-                {navigation.map((item) => (
-                  <a
-                    key={item.name}
-                    href={item.href}
-                    onClick={() => setMobileMenuOpen(false)}
-                    className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white hover:dark:bg-boxdark-2'
-                  >
-                    {item.name}
-                  </a>
-                ))}
-              </div>
+              <div className='space-y-2 py-6'>{renderNavigationItems(navigation, setMobileMenuOpen)}</div>
               <div className='py-6'>
                 {isUserLoading ? null : !user ? (
                   <Link to='/login'>
@@ -124,3 +111,30 @@ export default function AppNavBar() {
     </header>
   );
 }
+
+function renderNavigationItems(
+  navigation: NavigationItem[],
+  setMobileMenuOpen?: Dispatch<SetStateAction<boolean>>
+) {
+  const mobileMenuStyles =
+    '-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2';
+  const desktopStyles =
+    'text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white';
+  const menuStyles = !!setMobileMenuOpen ? mobileMenuStyles : desktopStyles;
+
+  return navigation.map((item) => {
+    if (item.to) {
+      return (
+        <Link to={item.to} className={menuStyles} key={item.name} onClick={() => setMobileMenuOpen?.(false)}>
+          {item.name}
+        </Link>
+      );
+    } else if (item.href) {
+      return (
+        <a href={item.href} className={menuStyles} key={item.name} onClick={() => setMobileMenuOpen?.(false)}>
+          {item.name}
+        </a>
+      );
+    }
+  });
+}
diff --git a/template/app/src/client/components/NavBar/contentSections.ts b/template/app/src/client/components/NavBar/contentSections.ts
new file mode 100644
index 000000000..517fed73b
--- /dev/null
+++ b/template/app/src/client/components/NavBar/contentSections.ts
@@ -0,0 +1,10 @@
+import { routes } from 'wasp/client/router';
+import { BlogUrl, DocsUrl } from '../../../shared/common';
+
+export const appNavigationItems = [
+  { name: 'AI Scheduler (Demo App)', to: routes.DemoAppRoute.to },
+  { name: 'File Upload (AWS S3)', to: routes.FileUploadRoute.to },
+  { name: 'Pricing', to: routes.PricingPageRoute.to },
+  { name: 'Documentation', href: DocsUrl },
+  { name: 'Blog', href: BlogUrl },
+];
diff --git a/template/app/src/client/hooks/useIsLandingPage.tsx b/template/app/src/client/hooks/useIsLandingPage.tsx
new file mode 100644
index 000000000..66d7475f5
--- /dev/null
+++ b/template/app/src/client/hooks/useIsLandingPage.tsx
@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useIsLandingPage = () => {
+  const location = useLocation();
+  return useMemo(() => {
+    return location.pathname === '/';
+  }, [location]);
+};
diff --git a/template/app/src/landing-page/LandingPage.tsx b/template/app/src/landing-page/LandingPage.tsx
index a5d3d8325..ac865a8d2 100644
--- a/template/app/src/landing-page/LandingPage.tsx
+++ b/template/app/src/landing-page/LandingPage.tsx
@@ -1,11 +1,4 @@
-import {
-  features,
-  navigation,
-  faqs,
-  footerNavigation,
-  testimonials
-} from './contentSections';
-import Header from './components/Header';
+import { features, faqs, footerNavigation, testimonials } from './contentSections';
 import Hero from './components/Hero';
 import Clients from './components/Clients';
 import Features from './components/Features';
@@ -16,8 +9,6 @@ import Footer from './components/Footer';
 export default function LandingPage() {
   return (
     <div className='bg-white dark:text-white dark:bg-boxdark-2'>
-      <Header navigation={navigation} />
-
       <main className='isolate dark:bg-boxdark-2'>
         <Hero />
         <Clients />
@@ -25,7 +16,6 @@ export default function LandingPage() {
         <Testimonials testimonials={testimonials} />
         <FAQ faqs={faqs} />
       </main>
-
       <Footer footerNavigation={footerNavigation} />
     </div>
   );
diff --git a/template/app/src/landing-page/components/Header.tsx b/template/app/src/landing-page/components/Header.tsx
deleted file mode 100644
index b4d1e74c9..000000000
--- a/template/app/src/landing-page/components/Header.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useState } from 'react';
-import { HiBars3 } from 'react-icons/hi2';
-import { BiLogIn } from 'react-icons/bi';
-import { AiFillCloseCircle } from 'react-icons/ai';
-import { Dialog } from '@headlessui/react';
-import { Link } from 'wasp/client/router';
-import { useAuth } from 'wasp/client/auth';
-import logo from '../../client/static/logo.png';
-import DarkModeSwitcher from '../../client/components/DarkModeSwitcher';
-import DropdownUser from '../../user/DropdownUser';
-import { UserMenuItems } from '../../user/UserMenuItems';
-
-interface NavigationItem {
-  name: string;
-  href: string;
-};
-
-export default function Header({ navigation }: { navigation: NavigationItem[] }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  const { data: user, isLoading: isUserLoading } = useAuth();
-
-  const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
-
-  return (
-    <header className='absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2'>
-      <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
-        <div className='flex items-center lg:flex-1'>
-          <a
-            href='/'
-            className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
-          >
-            <NavLogo />
-            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
-          </a>
-        </div>
-        <div className='flex lg:hidden'>
-          <button
-            type='button'
-            className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white'
-            onClick={() => setMobileMenuOpen(true)}
-          >
-            <span className='sr-only'>Open main menu</span>
-            <HiBars3 className='h-6 w-6' aria-hidden='true' />
-          </button>
-        </div>
-        <div className='hidden lg:flex lg:gap-x-12'>
-          {navigation.map((item) => (
-            <a
-              key={item.name}
-              href={item.href}
-              className='text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
-            >
-              {item.name}
-            </a>
-          ))}
-        </div>
-        <div className='hidden lg:flex lg:flex-1 lg:justify-end lg:align-end'>
-          {/* <!-- Dark Mode Toggler --> */}
-          <div className='flex items-center gap-3 2xsm:gap-7'>
-            <ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
-              <DarkModeSwitcher />
-            </ul>
-            {isUserLoading ? null : !user ? (
-              <Link to='/login'>
-                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
-                  Log in <BiLogIn size='1.1rem' className='ml-1' />
-                </div>
-              </Link>
-            ) : (
-              <DropdownUser user={user} />
-            )}
-          </div>
-        </div>
-      </nav>
-      <Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}>
-        <div className='fixed inset-0 z-50' />
-        <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-boxdark dark:text-white'>
-          <div className='flex items-center justify-between'>
-            <a href='/' className='-m-1.5 p-1.5'>
-              <span className='sr-only'>Your SaaS</span>
-              <NavLogo />
-            </a>
-            <button
-              type='button'
-              className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              <span className='sr-only'>Close menu</span>
-              <AiFillCloseCircle className='h-6 w-6' aria-hidden='true' />
-            </button>
-          </div>
-          <div className='mt-6 flow-root'>
-            <div className='-my-6 divide-y divide-gray-500/10'>
-              <div className='space-y-2 py-6'>
-                {navigation.map((item) => (
-                  <a
-                    key={item.name}
-                    href={item.href}
-                    onClick={() => setMobileMenuOpen(false)}
-                    className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2'
-                  >
-                    {item.name}
-                  </a>
-                ))}
-              </div>
-              <div className='py-6'>
-                {isUserLoading ? null : !user ? (
-                  <Link to='/login'>
-                    <div className='flex justify-start items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
-                      Log in <BiLogIn size='1.1rem' className='ml-1' />
-                    </div>
-                  </Link>
-                ) : (
-                  <UserMenuItems user={user} />
-                )}
-              </div>
-              <div className='py-6'>
-                <DarkModeSwitcher />
-              </div>
-            </div>
-          </div>
-        </Dialog.Panel>
-      </Dialog>
-    </header>
-  )
-}
diff --git a/template/app/src/landing-page/contentSections.ts b/template/app/src/landing-page/contentSections.ts
index 992c189b0..508f31093 100644
--- a/template/app/src/landing-page/contentSections.ts
+++ b/template/app/src/landing-page/contentSections.ts
@@ -3,9 +3,9 @@ import daBoiAvatar from '../client/static/da-boi.png';
 import avatarPlaceholder from '../client/static/avatar-placeholder.png';
 import { routes } from 'wasp/client/router';
 
-export const navigation = [
+export const landingPageNavigationItems = [
   { name: 'Features', href: '#features' },
-  { name: 'Pricing', href: routes.PricingPageRoute.build() },
+  { name: 'Pricing', to: routes.PricingPageRoute.to },
   { name: 'Documentation', href: DocsUrl },
   { name: 'Blog', href: BlogUrl },
 ];

From 4def59124166fd6ef6ee9f6407d988f74bdbde41 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:55:59 +0200
Subject: [PATCH 2/7] update app_diff

---
 .../client/components/NavBar/NavBar.tsx.diff  | 70 +++++++++++++++
 .../landing-page/components/Header.tsx.diff   | 88 -------------------
 .../src/landing-page/contentSections.ts.diff  |  4 +-
 3 files changed, 72 insertions(+), 90 deletions(-)
 create mode 100644 opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
 delete mode 100644 opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff

diff --git a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
new file mode 100644
index 000000000..889a6012f
--- /dev/null
+++ b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
@@ -0,0 +1,70 @@
+--- template/app/src/client/components/NavBar/NavBar.tsx
++++ opensaas-sh/app/src/client/components/NavBar/NavBar.tsx
+@@ -32,6 +32,7 @@
+         'shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10': !isLandingPage,
+       })}
+     >
++      {isLandingPage && <Announcement />}
+       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
+         <div className='flex items-center lg:flex-1'>
+           <Link
+@@ -39,7 +40,7 @@
+             className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
+           >
+             <NavLogo />
+-            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>}
++            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>}
+           </Link>
+         </div>
+         <div className='flex lg:hidden'>
+@@ -59,9 +60,9 @@
+           </ul>
+           {isUserLoading ? null : !user ? (
+             <Link to='/login' className='text-sm font-semibold leading-6 ml-3'>
+-              <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+-                Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
+-              </div>
++                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white test-sm'>
++                  Try the demo App <BiLogIn size='1.1rem' className='ml-1' />
++                </div>
+             </Link>
+           ) : (
+             <div className='ml-3'>
+@@ -94,7 +95,7 @@
+                 {isUserLoading ? null : !user ? (
+                   <Link to='/login'>
+                     <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+-                      Log in <BiLogIn size='1.1rem' className='ml-1' />
++                      Try the Demo App{' '} <BiLogIn size='1.1rem' className='ml-1' />
+                     </div>
+                   </Link>
+                 ) : (
+@@ -138,3 +139,27 @@
+     }
+   });
+ }
++
++const ContestURL =
++  'https://docs.opensaas.sh/blog/';
++
++function Announcement() {
++  return (
++    <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
++      <p onClick={() => window.open(ContestURL, '_blank')} className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'>🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬</p>
++      <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
++      <div
++        onClick={() => window.open(ContestURL, '_blank')}
++        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
++      >
++        Enter here and win prizes! →
++      </div>
++      <div
++        onClick={() => window.open(ContestURL, '_blank')}
++        className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
++      >
++        🍪 The Most Annoying Cookie Banner Contest! 🤬 →
++      </div>
++    </div>
++  );
++}
+\ No newline at end of file
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff
deleted file mode 100644
index 4ee4dd9de..000000000
--- a/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff
+++ /dev/null
@@ -1,88 +0,0 @@
---- template/app/src/landing-page/components/Header.tsx
-+++ opensaas-sh/app/src/landing-page/components/Header.tsx
-@@ -1,4 +1,4 @@
--import { useState } from 'react';
-+import { useState, useEffect } from 'react';
- import { HiBars3 } from 'react-icons/hi2';
- import { BiLogIn } from 'react-icons/bi';
- import { AiFillCloseCircle } from 'react-icons/ai';
-@@ -20,18 +20,19 @@
- 
-   const { data: user, isLoading: isUserLoading } = useAuth();
- 
--  const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
-+  const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Open SaaS App' />;
- 
-   return (
-     <header className='absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2'>
-+      <Announcement />
-       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
-         <div className='flex items-center lg:flex-1'>
-           <a
-             href='/'
--            className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
-+            className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
-           >
-             <NavLogo />
--            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
-+            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>
-           </a>
-         </div>
-         <div className='flex lg:hidden'>
-@@ -57,14 +58,14 @@
-         </div>
-         <div className='hidden lg:flex lg:flex-1 lg:justify-end lg:align-end'>
-           {/* <!-- Dark Mode Toggler --> */}
--          <div className='flex items-center gap-3 2xsm:gap-7'>
-+          <div className='flex items-center gap-3 2xsm:gap-7 text-sm font-semibold leading-6'>
-             <ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
-               <DarkModeSwitcher />
-             </ul>
-             {isUserLoading ? null : !user ? (
-               <Link to='/login'>
--                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
--                  Log in <BiLogIn size='1.1rem' className='ml-1' />
-+                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white test-sm'>
-+                  Try the demo App <BiLogIn size='1.1rem' className='ml-1' />
-                 </div>
-               </Link>
-             ) : (
-@@ -107,8 +108,8 @@
-               <div className='py-6'>
-                 {isUserLoading ? null : !user ? (
-                   <Link to='/login'>
--                    <div className='flex justify-start items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
--                      Log in <BiLogIn size='1.1rem' className='ml-1' />
-+                    <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
-+                      Try the Demo App{' '} <BiLogIn size='1.1rem' className='ml-1' />
-                     </div>
-                   </Link>
-                 ) : (
-@@ -125,3 +126,27 @@
-     </header>
-   )
- }
-+
-+const ContestURL =
-+  'https://docs.opensaas.sh/blog/';
-+
-+function Announcement() {
-+  return (
-+    <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
-+      <p onClick={() => window.open(ContestURL, '_blank')} className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'>🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬</p>
-+      <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
-+      <div
-+        onClick={() => window.open(ContestURL, '_blank')}
-+        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
-+      >
-+        Enter here and win prizes! →
-+      </div>
-+      <div
-+        onClick={() => window.open(ContestURL, '_blank')}
-+        className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
-+      >
-+        🍪 The Most Annoying Cookie Banner Contest! 🤬 →
-+      </div>
-+    </div>
-+  );
-+}
diff --git a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
index 51351b68e..ea9d4d37f 100644
--- a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
+++ b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
@@ -7,9 +7,9 @@
 -import { routes } from 'wasp/client/router';
 +import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';
  
- export const navigation = [
+ export const landingPageNavigationItems = [
    { name: 'Features', href: '#features' },
--  { name: 'Pricing', href: routes.PricingPageRoute.build() },
+-  { name: 'Pricing', to: routes.PricingPageRoute.to },
    { name: 'Documentation', href: DocsUrl },
    { name: 'Blog', href: BlogUrl },
  ];

From 93fe59e63c9cab6d230a6f40b8f1f772678c044a Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:55:39 +0200
Subject: [PATCH 3/7] Update NavBar.tsx

---
 .../src/client/components/NavBar/NavBar.tsx    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index 7b13630d1..61c868c62 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -11,10 +11,10 @@ import { UserMenuItems } from '../../../user/UserMenuItems';
 import DarkModeSwitcher from '../DarkModeSwitcher';
 import { useIsLandingPage } from '../../hooks/useIsLandingPage';
 import { cn } from '../../cn';
+import { type Routes } from 'wasp/client/router';
 
 interface NavigationItem {
   name: string;
-  // to?: Routes['to']; // TODO: fix this
   to?: any; // TODO: fix this
   href?: string;
 }
@@ -29,7 +29,8 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
   return (
     <header
       className={cn('absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2', {
-        'shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10': !isLandingPage,
+        'shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10':
+          !isLandingPage,
       })}
     >
       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
@@ -39,7 +40,9 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
             className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
           >
             <NavLogo />
-            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>}
+            {isLandingPage && (
+              <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
+            )}
           </Link>
         </div>
         <div className='flex lg:hidden'>
@@ -116,11 +119,10 @@ function renderNavigationItems(
   navigation: NavigationItem[],
   setMobileMenuOpen?: Dispatch<SetStateAction<boolean>>
 ) {
-  const mobileMenuStyles =
-    '-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2';
-  const desktopStyles =
-    'text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white';
-  const menuStyles = !!setMobileMenuOpen ? mobileMenuStyles : desktopStyles;
+  const menuStyles = cn({
+    '-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2': !!setMobileMenuOpen,
+    'text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white': !setMobileMenuOpen
+  });
 
   return navigation.map((item) => {
     if (item.to) {

From cca7dd336972373cee92a58088db13e6b2aa988b Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:22:33 +0200
Subject: [PATCH 4/7] use react-router-dom instead of wasp router

---
 .../src/client/components/NavBar/NavBar.tsx   | 34 +++++++++----------
 .../components/NavBar/contentSections.ts      |  4 +--
 .../app/src/landing-page/contentSections.ts   |  6 ++--
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index 61c868c62..48a043f4f 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'wasp/client/router';
+import { Link } from 'react-router-dom';
 import { useAuth } from 'wasp/client/auth';
 import { useState, Dispatch, SetStateAction } from 'react';
 import { Dialog } from '@headlessui/react';
@@ -15,8 +15,7 @@ import { type Routes } from 'wasp/client/router';
 
 interface NavigationItem {
   name: string;
-  to?: any; // TODO: fix this
-  href?: string;
+  to: string; // TODO: fix this
 }
 
 const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
@@ -120,23 +119,22 @@ function renderNavigationItems(
   setMobileMenuOpen?: Dispatch<SetStateAction<boolean>>
 ) {
   const menuStyles = cn({
-    '-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2': !!setMobileMenuOpen,
-    'text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white': !setMobileMenuOpen
+    '-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-boxdark-2':
+      !!setMobileMenuOpen,
+    'text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white':
+      !setMobileMenuOpen,
   });
 
   return navigation.map((item) => {
-    if (item.to) {
-      return (
-        <Link to={item.to} className={menuStyles} key={item.name} onClick={() => setMobileMenuOpen?.(false)}>
-          {item.name}
-        </Link>
-      );
-    } else if (item.href) {
-      return (
-        <a href={item.href} className={menuStyles} key={item.name} onClick={() => setMobileMenuOpen?.(false)}>
-          {item.name}
-        </a>
-      );
-    }
+    return (
+      <Link
+        to={item.to}
+        className={menuStyles}
+        key={item.name}
+        onClick={() => setMobileMenuOpen?.(false)}
+      >
+        {item.name}
+      </Link>
+    );
   });
 }
diff --git a/template/app/src/client/components/NavBar/contentSections.ts b/template/app/src/client/components/NavBar/contentSections.ts
index 517fed73b..adb421ea5 100644
--- a/template/app/src/client/components/NavBar/contentSections.ts
+++ b/template/app/src/client/components/NavBar/contentSections.ts
@@ -5,6 +5,6 @@ export const appNavigationItems = [
   { name: 'AI Scheduler (Demo App)', to: routes.DemoAppRoute.to },
   { name: 'File Upload (AWS S3)', to: routes.FileUploadRoute.to },
   { name: 'Pricing', to: routes.PricingPageRoute.to },
-  { name: 'Documentation', href: DocsUrl },
-  { name: 'Blog', href: BlogUrl },
+  { name: 'Documentation', to: DocsUrl },
+  { name: 'Blog', to: BlogUrl },
 ];
diff --git a/template/app/src/landing-page/contentSections.ts b/template/app/src/landing-page/contentSections.ts
index 508f31093..0896131a1 100644
--- a/template/app/src/landing-page/contentSections.ts
+++ b/template/app/src/landing-page/contentSections.ts
@@ -4,10 +4,10 @@ import avatarPlaceholder from '../client/static/avatar-placeholder.png';
 import { routes } from 'wasp/client/router';
 
 export const landingPageNavigationItems = [
-  { name: 'Features', href: '#features' },
+  { name: 'Features', to: '#features' },
   { name: 'Pricing', to: routes.PricingPageRoute.to },
-  { name: 'Documentation', href: DocsUrl },
-  { name: 'Blog', href: BlogUrl },
+  { name: 'Documentation', to: DocsUrl },
+  { name: 'Blog', to: BlogUrl },
 ];
 export const features = [
   {

From f66a499156b72604fb28a98625359efb2b10bd89 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:55:51 +0100
Subject: [PATCH 5/7] fix app_diff

---
 .../migration.sql.diff                         | 11 +++++++++++
 .../client/components/NavBar/NavBar.tsx.diff   | 18 ++++++++++--------
 .../src/landing-page/contentSections.ts.diff   |  6 +++---
 .../src/client/components/NavBar/NavBar.tsx    |  7 +++----
 4 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 opensaas-sh/app_diff/migrations/20241030143842_checkout_session_id/migration.sql.diff

diff --git a/opensaas-sh/app_diff/migrations/20241030143842_checkout_session_id/migration.sql.diff b/opensaas-sh/app_diff/migrations/20241030143842_checkout_session_id/migration.sql.diff
new file mode 100644
index 000000000..28f909d42
--- /dev/null
+++ b/opensaas-sh/app_diff/migrations/20241030143842_checkout_session_id/migration.sql.diff
@@ -0,0 +1,11 @@
+--- template/app/migrations/20241030143842_checkout_session_id/migration.sql
++++ opensaas-sh/app/migrations/20241030143842_checkout_session_id/migration.sql
+@@ -0,0 +1,8 @@
++/*
++  Warnings:
++
++  - You are about to drop the column `checkoutSessionId` on the `User` table. All the data in the column will be lost.
++
++*/
++-- AlterTable
++ALTER TABLE "User" DROP COLUMN "checkoutSessionId";
diff --git a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
index 889a6012f..a5137ce93 100644
--- a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
+++ b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
@@ -1,23 +1,25 @@
 --- template/app/src/client/components/NavBar/NavBar.tsx
 +++ opensaas-sh/app/src/client/components/NavBar/NavBar.tsx
-@@ -32,6 +32,7 @@
-         'shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10': !isLandingPage,
+@@ -31,6 +31,7 @@
+           !isLandingPage,
        })}
      >
 +      {isLandingPage && <Announcement />}
        <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
          <div className='flex items-center lg:flex-1'>
            <Link
-@@ -39,7 +40,7 @@
+@@ -38,9 +39,7 @@
              className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
            >
              <NavLogo />
--            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>}
+-            {isLandingPage && (
+-              <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
+-            )}
 +            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>}
            </Link>
          </div>
          <div className='flex lg:hidden'>
-@@ -59,9 +60,9 @@
+@@ -60,9 +59,9 @@
            </ul>
            {isUserLoading ? null : !user ? (
              <Link to='/login' className='text-sm font-semibold leading-6 ml-3'>
@@ -30,7 +32,7 @@
              </Link>
            ) : (
              <div className='ml-3'>
-@@ -94,7 +95,7 @@
+@@ -95,7 +94,7 @@
                  {isUserLoading ? null : !user ? (
                    <Link to='/login'>
                      <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
@@ -39,8 +41,8 @@
                      </div>
                    </Link>
                  ) : (
-@@ -138,3 +139,27 @@
-     }
+@@ -137,3 +136,27 @@
+     );
    });
  }
 +
diff --git a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
index ea9d4d37f..5c5aa918e 100644
--- a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
+++ b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
@@ -8,10 +8,10 @@
 +import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';
  
  export const landingPageNavigationItems = [
-   { name: 'Features', href: '#features' },
+   { name: 'Features', to: '#features' },
 -  { name: 'Pricing', to: routes.PricingPageRoute.to },
-   { name: 'Documentation', href: DocsUrl },
-   { name: 'Blog', href: BlogUrl },
+   { name: 'Documentation', to: DocsUrl },
+   { name: 'Blog', to: BlogUrl },
  ];
  export const features = [
    {
diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index 48a043f4f..6cb22dac8 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -11,11 +11,10 @@ import { UserMenuItems } from '../../../user/UserMenuItems';
 import DarkModeSwitcher from '../DarkModeSwitcher';
 import { useIsLandingPage } from '../../hooks/useIsLandingPage';
 import { cn } from '../../cn';
-import { type Routes } from 'wasp/client/router';
 
 interface NavigationItem {
   name: string;
-  to: string; // TODO: fix this
+  to: string;
 }
 
 const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
@@ -129,9 +128,9 @@ function renderNavigationItems(
     return (
       <Link
         to={item.to}
-        className={menuStyles}
         key={item.name}
-        onClick={() => setMobileMenuOpen?.(false)}
+        className={menuStyles}
+        onClick={setMobileMenuOpen && (() => setMobileMenuOpen(false))}
       >
         {item.name}
       </Link>

From 970553cec9c8b9248551578daf8abbc5c6ba6a6c Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Fri, 15 Nov 2024 15:21:45 +0100
Subject: [PATCH 6/7] use Wasp Router Link where necessary

---
 .../app_diff/src/auth/LoginPage.tsx.diff      |  6 +--
 .../client/components/NavBar/NavBar.tsx.diff  | 35 +++++++++++-------
 .../src/landing-page/contentSections.ts.diff  |  7 ++--
 template/app/src/admin/layout/Breadcrumb.tsx  | 14 +++----
 template/app/src/auth/LoginPage.tsx           | 10 ++---
 template/app/src/auth/SignupPage.tsx          |  6 +--
 .../email-and-pass/EmailVerificationPage.tsx  |  4 +-
 .../auth/email-and-pass/PasswordResetPage.tsx |  4 +-
 template/app/src/client/App.tsx               | 14 +++----
 .../src/client/components/NavBar/NavBar.tsx   | 37 ++++++++++---------
 .../components/NavBar/contentSections.ts      |  3 +-
 .../src/client/components/NotFoundPage.tsx    | 13 ++++---
 .../app/src/landing-page/contentSections.ts   |  5 ++-
 template/app/src/messages/MessageButton.tsx   |  8 ++--
 template/app/src/user/AccountPage.tsx         |  6 +--
 template/app/src/user/UserMenuItems.tsx       | 36 +++++++++---------
 16 files changed, 111 insertions(+), 97 deletions(-)

diff --git a/opensaas-sh/app_diff/src/auth/LoginPage.tsx.diff b/opensaas-sh/app_diff/src/auth/LoginPage.tsx.diff
index 6e32de42c..a969e0070 100644
--- a/opensaas-sh/app_diff/src/auth/LoginPage.tsx.diff
+++ b/opensaas-sh/app_diff/src/auth/LoginPage.tsx.diff
@@ -1,9 +1,9 @@
 --- template/app/src/auth/LoginPage.tsx
 +++ opensaas-sh/app/src/auth/LoginPage.tsx
-@@ -1,8 +1,14 @@
--import { Link } from 'react-router-dom';
+@@ -1,8 +1,15 @@
++import { Navigate } from 'react-router-dom';
+ import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 -import { LoginForm } from 'wasp/client/auth';
-+import { Navigate, Link } from 'react-router-dom';
 +import { LoginForm, useAuth } from 'wasp/client/auth';
  import { AuthPageLayout } from './AuthPageLayout';
  
diff --git a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
index a5137ce93..673737930 100644
--- a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
+++ b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
@@ -1,14 +1,14 @@
 --- template/app/src/client/components/NavBar/NavBar.tsx
 +++ opensaas-sh/app/src/client/components/NavBar/NavBar.tsx
-@@ -31,6 +31,7 @@
+@@ -32,6 +32,7 @@
            !isLandingPage,
        })}
      >
 +      {isLandingPage && <Announcement />}
        <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
          <div className='flex items-center lg:flex-1'>
-           <Link
-@@ -38,9 +39,7 @@
+           <WaspRouterLink
+@@ -39,9 +40,7 @@
              className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
            >
              <NavLogo />
@@ -16,32 +16,39 @@
 -              <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
 -            )}
 +            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>}
-           </Link>
+           </WaspRouterLink>
          </div>
          <div className='flex lg:hidden'>
-@@ -60,9 +59,9 @@
+@@ -61,8 +60,8 @@
            </ul>
            {isUserLoading ? null : !user ? (
-             <Link to='/login' className='text-sm font-semibold leading-6 ml-3'>
+             <WaspRouterLink to={routes.LoginRoute.to} className='text-sm font-semibold leading-6 ml-3'>
 -              <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
 -                Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
--              </div>
 +                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white test-sm'>
 +                  Try the demo App <BiLogIn size='1.1rem' className='ml-1' />
-+                </div>
-             </Link>
+               </div>
+             </WaspRouterLink>
            ) : (
-             <div className='ml-3'>
-@@ -95,7 +94,7 @@
+@@ -77,7 +76,7 @@
+         <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
+           <div className='flex items-center justify-between'>
+             <WaspRouterLink to={routes.LandingPageRoute.to} className='-m-1.5 p-1.5'>
+-              <span className='sr-only'>Your SaaS</span>
++              <span className='sr-only'>Open SaaS</span>
+               <NavLogo />
+             </WaspRouterLink>
+             <button
+@@ -96,7 +95,7 @@
                  {isUserLoading ? null : !user ? (
-                   <Link to='/login'>
+                   <WaspRouterLink to={routes.LoginRoute.to}>
                      <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
 -                      Log in <BiLogIn size='1.1rem' className='ml-1' />
 +                      Try the Demo App{' '} <BiLogIn size='1.1rem' className='ml-1' />
                      </div>
-                   </Link>
+                   </WaspRouterLink>
                  ) : (
-@@ -137,3 +136,27 @@
+@@ -138,3 +137,27 @@
      );
    });
  }
diff --git a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
index 5c5aa918e..cc394e86f 100644
--- a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
+++ b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
@@ -1,13 +1,14 @@
 --- template/app/src/landing-page/contentSections.ts
 +++ opensaas-sh/app/src/landing-page/contentSections.ts
-@@ -1,74 +1,131 @@
+@@ -1,75 +1,132 @@
+ import type { NavigationItem } from '../client/components/NavBar/NavBar';
+-import { routes } from 'wasp/client/router';
 -import { DocsUrl, BlogUrl } from '../shared/common';
 -import daBoiAvatar from '../client/static/da-boi.png';
 -import avatarPlaceholder from '../client/static/avatar-placeholder.png';
--import { routes } from 'wasp/client/router';
 +import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';
  
- export const landingPageNavigationItems = [
+ export const landingPageNavigationItems: NavigationItem[] = [
    { name: 'Features', to: '#features' },
 -  { name: 'Pricing', to: routes.PricingPageRoute.to },
    { name: 'Documentation', to: DocsUrl },
diff --git a/template/app/src/admin/layout/Breadcrumb.tsx b/template/app/src/admin/layout/Breadcrumb.tsx
index 3e3a6131a..f602e17c9 100644
--- a/template/app/src/admin/layout/Breadcrumb.tsx
+++ b/template/app/src/admin/layout/Breadcrumb.tsx
@@ -1,20 +1,18 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 interface BreadcrumbProps {
   pageName: string;
 }
 const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
   return (
-    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <h2 className="text-title-md2 font-semibold text-black dark:text-white">
-        {pageName}
-      </h2>
+    <div className='mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+      <h2 className='text-title-md2 font-semibold text-black dark:text-white'>{pageName}</h2>
 
       <nav>
-        <ol className="flex items-center gap-2">
+        <ol className='flex items-center gap-2'>
           <li>
-            <Link to="/">Dashboard /</Link>
+            <WaspRouterLink to={routes.AdminRoute.to}>Dashboard /</WaspRouterLink>
           </li>
-          <li className="text-primary">{pageName}</li>
+          <li className='text-primary'>{pageName}</li>
         </ol>
       </nav>
     </div>
diff --git a/template/app/src/auth/LoginPage.tsx b/template/app/src/auth/LoginPage.tsx
index 288f4efa1..735b87bff 100644
--- a/template/app/src/auth/LoginPage.tsx
+++ b/template/app/src/auth/LoginPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { LoginForm } from 'wasp/client/auth';
 import { AuthPageLayout } from './AuthPageLayout';
 
@@ -9,17 +9,17 @@ export default function Login() {
       <br />
       <span className='text-sm font-medium text-gray-900 dark:text-gray-900'>
         Don't have an account yet?{' '}
-        <Link to='/signup' className='underline'>
+        <WaspRouterLink to={routes.SignupRoute.to} className='underline'>
           go to signup
-        </Link>
+        </WaspRouterLink>
         .
       </span>
       <br />
       <span className='text-sm font-medium text-gray-900'>
         Forgot your password?{' '}
-        <Link to='/request-password-reset' className='underline'>
+        <WaspRouterLink to={routes.RequestPasswordResetRoute.to} className='underline'>
           reset it
-        </Link>
+        </WaspRouterLink>
         .
       </span>
     </AuthPageLayout>
diff --git a/template/app/src/auth/SignupPage.tsx b/template/app/src/auth/SignupPage.tsx
index 7c6297a60..cf205f6e0 100644
--- a/template/app/src/auth/SignupPage.tsx
+++ b/template/app/src/auth/SignupPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { SignupForm } from 'wasp/client/auth';
 import { AuthPageLayout } from './AuthPageLayout';
 
@@ -9,9 +9,9 @@ export function Signup() {
       <br />
       <span className='text-sm font-medium text-gray-900'>
         I already have an account (
-        <Link to='/login' className='underline'>
+        <WaspRouterLink to={routes.LoginRoute.to} className='underline'>
           go to login
-        </Link>
+        </WaspRouterLink>
         ).
       </span>
       <br />
diff --git a/template/app/src/auth/email-and-pass/EmailVerificationPage.tsx b/template/app/src/auth/email-and-pass/EmailVerificationPage.tsx
index 6066bfd96..24d256594 100644
--- a/template/app/src/auth/email-and-pass/EmailVerificationPage.tsx
+++ b/template/app/src/auth/email-and-pass/EmailVerificationPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { VerifyEmailForm } from 'wasp/client/auth';
 import { AuthPageLayout } from '../AuthPageLayout';
 
@@ -8,7 +8,7 @@ export function EmailVerificationPage() {
       <VerifyEmailForm />
       <br />
       <span className='text-sm font-medium text-gray-900'>
-        If everything is okay, <Link to='/login' className='underline'>go to login</Link>
+        If everything is okay, <WaspRouterLink to={routes.LoginRoute.to} className='underline'>go to login</WaspRouterLink>
       </span>
     </AuthPageLayout>
   );
diff --git a/template/app/src/auth/email-and-pass/PasswordResetPage.tsx b/template/app/src/auth/email-and-pass/PasswordResetPage.tsx
index a4d4afbc7..ea5dc1003 100644
--- a/template/app/src/auth/email-and-pass/PasswordResetPage.tsx
+++ b/template/app/src/auth/email-and-pass/PasswordResetPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { ResetPasswordForm } from 'wasp/client/auth';
 import { AuthPageLayout } from '../AuthPageLayout';
 
@@ -8,7 +8,7 @@ export function PasswordResetPage() {
       <ResetPasswordForm />
       <br />
       <span className='text-sm font-medium text-gray-900'>
-        If everything is okay, <Link to='/login'>go to login</Link>
+        If everything is okay, <WaspRouterLink to={routes.LoginRoute.to}>go to login</WaspRouterLink>
       </span>
     </AuthPageLayout>
   );
diff --git a/template/app/src/client/App.tsx b/template/app/src/client/App.tsx
index 4202d25bd..ead2651d5 100644
--- a/template/app/src/client/App.tsx
+++ b/template/app/src/client/App.tsx
@@ -1,13 +1,14 @@
-import { useAuth } from 'wasp/client/auth';
-import { updateCurrentUser } from 'wasp/client/operations';
 import './Main.css';
 import NavBar from './components/NavBar/NavBar';
+import CookieConsentBanner from './components/cookie-consent/Banner';
 import { appNavigationItems } from './components/NavBar/contentSections';
 import { landingPageNavigationItems } from '../landing-page/contentSections';
-import CookieConsentBanner from './components/cookie-consent/Banner';
 import { useMemo, useEffect } from 'react';
+import { routes } from 'wasp/client/router';
 import { Outlet, useLocation } from 'react-router-dom';
+import { useAuth } from 'wasp/client/auth';
 import { useIsLandingPage } from './hooks/useIsLandingPage';
+import { updateCurrentUser } from 'wasp/client/operations';
 
 /**
  * use this component to wrap all child components
@@ -17,9 +18,10 @@ export default function App() {
   const location = useLocation();
   const { data: user } = useAuth();
   const isLandingPage = useIsLandingPage();
+  const navigationItems = isLandingPage ? landingPageNavigationItems : appNavigationItems;
 
   const shouldDisplayAppNavBar = useMemo(() => {
-    return location.pathname !== '/login' && location.pathname !== '/signup';
+    return location.pathname !== routes.LoginRoute.build() && location.pathname !== routes.SignupRoute.build();
   }, [location]);
 
   const isAdminDashboard = useMemo(() => {
@@ -53,9 +55,7 @@ export default function App() {
           <Outlet />
         ) : (
           <>
-            {shouldDisplayAppNavBar && (
-              <NavBar navigation={isLandingPage ? landingPageNavigationItems : appNavigationItems} />
-            )}
+            {shouldDisplayAppNavBar && <NavBar navigationItems={navigationItems} />}
             <div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>
               <Outlet />
             </div>
diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index 6cb22dac8..838139326 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom';
+import { Link as ReactRouterLink } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { useAuth } from 'wasp/client/auth';
 import { useState, Dispatch, SetStateAction } from 'react';
 import { Dialog } from '@headlessui/react';
@@ -12,14 +13,14 @@ import DarkModeSwitcher from '../DarkModeSwitcher';
 import { useIsLandingPage } from '../../hooks/useIsLandingPage';
 import { cn } from '../../cn';
 
-interface NavigationItem {
+export interface NavigationItem {
   name: string;
   to: string;
 }
 
 const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
 
-export default function AppNavBar({ navigation }: { navigation: NavigationItem[] }) {
+export default function AppNavBar({ navigationItems }: { navigationItems: NavigationItem[] }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const isLandingPage = useIsLandingPage();
 
@@ -33,15 +34,15 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
     >
       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
         <div className='flex items-center lg:flex-1'>
-          <Link
-            to='/'
+          <WaspRouterLink
+            to={routes.LandingPageRoute.to}
             className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
           >
             <NavLogo />
             {isLandingPage && (
               <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
             )}
-          </Link>
+          </WaspRouterLink>
         </div>
         <div className='flex lg:hidden'>
           <button
@@ -53,17 +54,17 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
             <HiBars3 className='h-6 w-6' aria-hidden='true' />
           </button>
         </div>
-        <div className='hidden lg:flex lg:gap-x-12'>{renderNavigationItems(navigation)}</div>
+        <div className='hidden lg:flex lg:gap-x-12'>{renderNavigationItems(navigationItems)}</div>
         <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
           <ul className='flex justify-center items-center gap-2 sm:gap-4'>
             <DarkModeSwitcher />
           </ul>
           {isUserLoading ? null : !user ? (
-            <Link to='/login' className='text-sm font-semibold leading-6 ml-3'>
+            <WaspRouterLink to={routes.LoginRoute.to} className='text-sm font-semibold leading-6 ml-3'>
               <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
                 Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
               </div>
-            </Link>
+            </WaspRouterLink>
           ) : (
             <div className='ml-3'>
               <DropdownUser user={user} />
@@ -75,10 +76,10 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
         <div className='fixed inset-0 z-50' />
         <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
           <div className='flex items-center justify-between'>
-            <Link to='/' className='-m-1.5 p-1.5'>
+            <WaspRouterLink to={routes.LandingPageRoute.to} className='-m-1.5 p-1.5'>
               <span className='sr-only'>Your SaaS</span>
               <NavLogo />
-            </Link>
+            </WaspRouterLink>
             <button
               type='button'
               className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
@@ -90,14 +91,14 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
           </div>
           <div className='mt-6 flow-root'>
             <div className='-my-6 divide-y divide-gray-500/10'>
-              <div className='space-y-2 py-6'>{renderNavigationItems(navigation, setMobileMenuOpen)}</div>
+              <div className='space-y-2 py-6'>{renderNavigationItems(navigationItems, setMobileMenuOpen)}</div>
               <div className='py-6'>
                 {isUserLoading ? null : !user ? (
-                  <Link to='/login'>
+                  <WaspRouterLink to={routes.LoginRoute.to}>
                     <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
                       Log in <BiLogIn size='1.1rem' className='ml-1' />
                     </div>
-                  </Link>
+                  </WaspRouterLink>
                 ) : (
                   <UserMenuItems user={user} setMobileMenuOpen={setMobileMenuOpen} />
                 )}
@@ -114,7 +115,7 @@ export default function AppNavBar({ navigation }: { navigation: NavigationItem[]
 }
 
 function renderNavigationItems(
-  navigation: NavigationItem[],
+  navigationItems: NavigationItem[],
   setMobileMenuOpen?: Dispatch<SetStateAction<boolean>>
 ) {
   const menuStyles = cn({
@@ -124,16 +125,16 @@ function renderNavigationItems(
       !setMobileMenuOpen,
   });
 
-  return navigation.map((item) => {
+  return navigationItems.map((item) => {
     return (
-      <Link
+      <ReactRouterLink
         to={item.to}
         key={item.name}
         className={menuStyles}
         onClick={setMobileMenuOpen && (() => setMobileMenuOpen(false))}
       >
         {item.name}
-      </Link>
+      </ReactRouterLink>
     );
   });
 }
diff --git a/template/app/src/client/components/NavBar/contentSections.ts b/template/app/src/client/components/NavBar/contentSections.ts
index adb421ea5..907ed1a33 100644
--- a/template/app/src/client/components/NavBar/contentSections.ts
+++ b/template/app/src/client/components/NavBar/contentSections.ts
@@ -1,7 +1,8 @@
+import type { NavigationItem } from '../NavBar/NavBar';
 import { routes } from 'wasp/client/router';
 import { BlogUrl, DocsUrl } from '../../../shared/common';
 
-export const appNavigationItems = [
+export const appNavigationItems: NavigationItem[] = [
   { name: 'AI Scheduler (Demo App)', to: routes.DemoAppRoute.to },
   { name: 'File Upload (AWS S3)', to: routes.FileUploadRoute.to },
   { name: 'Pricing', to: routes.PricingPageRoute.to },
diff --git a/template/app/src/client/components/NotFoundPage.tsx b/template/app/src/client/components/NotFoundPage.tsx
index 43aa55934..6b8bb46a7 100644
--- a/template/app/src/client/components/NotFoundPage.tsx
+++ b/template/app/src/client/components/NotFoundPage.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useAuth } from 'wasp/client/auth';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 
 export function NotFoundPage() {
+  const { data: user } = useAuth();
+
   return (
     <div className='flex items-center justify-center min-h-screen'>
       <div className='text-center'>
         <h1 className='text-6xl font-bold  mb-4'>404</h1>
         <p className='text-lg text-bodydark mb-8'>Oops! The page you're looking for doesn't exist.</p>
-        <Link
-          to='/'
-          className='inline-block px-8 py-3 text-white bg-primary rounded-lg hover:bg-secondary transition duration-300'
+        <WaspRouterLink
+          to={user ? routes.DemoAppRoute.to : routes.LandingPageRoute.to}
+          className='inline-block px-8 py-3 text-white font-semibold bg-yellow-500 rounded-lg hover:bg-yellow-400 transition duration-300'
         >
           Go Back Home
-        </Link>
+        </WaspRouterLink>
       </div>
     </div>
   );
diff --git a/template/app/src/landing-page/contentSections.ts b/template/app/src/landing-page/contentSections.ts
index 0896131a1..f7b96d05d 100644
--- a/template/app/src/landing-page/contentSections.ts
+++ b/template/app/src/landing-page/contentSections.ts
@@ -1,9 +1,10 @@
+import type { NavigationItem } from '../client/components/NavBar/NavBar';
+import { routes } from 'wasp/client/router';
 import { DocsUrl, BlogUrl } from '../shared/common';
 import daBoiAvatar from '../client/static/da-boi.png';
 import avatarPlaceholder from '../client/static/avatar-placeholder.png';
-import { routes } from 'wasp/client/router';
 
-export const landingPageNavigationItems = [
+export const landingPageNavigationItems: NavigationItem[] = [
   { name: 'Features', to: '#features' },
   { name: 'Pricing', to: routes.PricingPageRoute.to },
   { name: 'Documentation', to: DocsUrl },
diff --git a/template/app/src/messages/MessageButton.tsx b/template/app/src/messages/MessageButton.tsx
index 2878d8a46..d616cdc84 100644
--- a/template/app/src/messages/MessageButton.tsx
+++ b/template/app/src/messages/MessageButton.tsx
@@ -1,11 +1,11 @@
-import { Link } from 'wasp/client/router';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 
 const MessageButton = () => {
   return (
     <li className='relative' x-data='{ dropdownOpen: false, notifying: true }'>
-      <Link
+      <WaspRouterLink
         className='relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white'
-        to='/admin/messages'
+        to={routes.AdminMessagesRoute.to}
       >
         <span className='absolute -top-0.5 -right-0.5 z-1 h-2 w-2 rounded-full bg-meta-1'>
           {/* TODO: only animate if there are new messages */}
@@ -37,7 +37,7 @@ const MessageButton = () => {
             fill=''
           />
         </svg>
-      </Link>
+      </WaspRouterLink>
     </li>
   );
 };
diff --git a/template/app/src/user/AccountPage.tsx b/template/app/src/user/AccountPage.tsx
index 85e9d75c2..71b9a8e17 100644
--- a/template/app/src/user/AccountPage.tsx
+++ b/template/app/src/user/AccountPage.tsx
@@ -1,7 +1,7 @@
 import type { User } from 'wasp/entities';
 import { type SubscriptionStatus, prettyPaymentPlanName, parsePaymentPlanId } from '../payment/plans';
 import { getCustomerPortalUrl, useQuery } from 'wasp/client/operations';
-import { Link } from 'wasp/client/router';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { logout } from 'wasp/client/auth';
 
 export default function AccountPage({ user }: { user: User }) {
@@ -107,9 +107,9 @@ function prettyPrintEndOfBillingPeriod(date: Date) {
 function BuyMoreButton() {
   return (
     <div className='ml-4 flex-shrink-0 sm:col-span-1 sm:mt-0'>
-      <Link to='/pricing' className='font-medium text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-500'>
+      <WaspRouterLink to={routes.PricingPageRoute.to} className='font-medium text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-500'>
         Buy More/Upgrade
-      </Link>
+      </WaspRouterLink>
     </div>
   );
 }
diff --git a/template/app/src/user/UserMenuItems.tsx b/template/app/src/user/UserMenuItems.tsx
index c351a733b..f719e0c4c 100644
--- a/template/app/src/user/UserMenuItems.tsx
+++ b/template/app/src/user/UserMenuItems.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'wasp/client/router';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { type User } from 'wasp/entities';
 import { logout } from 'wasp/client/auth';
 import { MdOutlineSpaceDashboard } from 'react-icons/md';
@@ -7,6 +7,8 @@ import { cn } from '../client/cn';
 
 export const UserMenuItems = ({ user, setMobileMenuOpen }: { user?: Partial<User>; setMobileMenuOpen?: any }) => {
   const path = window.location.pathname;
+  const landingPagePath = routes.LandingPageRoute.to;
+  const adminDashboardPath = routes.AdminRoute.to;
 
   const handleMobileMenuClick = () => {
     if (setMobileMenuOpen) setMobileMenuOpen(false);
@@ -16,24 +18,24 @@ export const UserMenuItems = ({ user, setMobileMenuOpen }: { user?: Partial<User
     <>
       <ul
         className={cn('flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark', {
-          'sm:px-6': path !== '/admin',
-          'px-6': path === '/admin',
+          'sm:px-6': path !== adminDashboardPath,
+          'px-6': path === adminDashboardPath,
         })}
       >
-        {path === '/' || path === '/admin' ? (
+        {path === landingPagePath || path === adminDashboardPath ? (
           <li>
-            <Link
-              to='/demo-app'
+            <WaspRouterLink
+              to={routes.DemoAppRoute.to}
               className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
             >
               <MdOutlineSpaceDashboard size='1.1rem' />
               AI Scheduler (Demo App)
-            </Link>
+            </WaspRouterLink>
           </li>
         ) : null}
         <li>
-          <Link
-            to='/account'
+          <WaspRouterLink
+            to={routes.AccountRoute.to}
             onClick={handleMobileMenuClick}
             className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
           >
@@ -55,25 +57,25 @@ export const UserMenuItems = ({ user, setMobileMenuOpen }: { user?: Partial<User
               />
             </svg>
             Account Settings
-          </Link>
+          </WaspRouterLink>
         </li>
       </ul>
       {!!user && user.isAdmin && (
         <ul
           className={cn('flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark', {
-            'sm:px-6': path !== '/admin',
-            'px-6': path === '/admin',
+            'sm:px-6': path !== adminDashboardPath,
+            'px-6': path === adminDashboardPath,
           })}
         >
           <li className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'>
-            <Link
-              to='/admin'
+            <WaspRouterLink
+              to={routes.AdminRoute.to}
               onClick={handleMobileMenuClick}
               className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
             >
               <TfiDashboard size='1.1rem' />
               Admin Dashboard
-            </Link>
+            </WaspRouterLink>
           </li>
         </ul>
       )}
@@ -82,8 +84,8 @@ export const UserMenuItems = ({ user, setMobileMenuOpen }: { user?: Partial<User
         className={cn(
           'flex items-center gap-3.5 py-4 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500',
           {
-            'sm:px-6': path !== '/admin',
-            'px-6': path === '/admin',
+            'sm:px-6': path !== adminDashboardPath,
+            'px-6': path === adminDashboardPath,
           }
         )}
       >

From 0ce8901d6950c0bcf6d2bf320feb05ea70e556de Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:07:47 +0100
Subject: [PATCH 7/7] Update NavBar.tsx

---
 template/app/src/client/components/NavBar/NavBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index 160033949..a4fed880f 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -6,7 +6,7 @@ import { Dialog } from '@headlessui/react';
 import { BiLogIn } from 'react-icons/bi';
 import { AiFillCloseCircle } from 'react-icons/ai';
 import { HiBars3 } from 'react-icons/hi2';
-import logo from '../static/logo.webp';
+import logo from '../../static/logo.webp';
 import DropdownUser from '../../../user/DropdownUser';
 import { UserMenuItems } from '../../../user/UserMenuItems';
 import DarkModeSwitcher from '../DarkModeSwitcher';