feat: implement conditional Navbar visibility and enhance LandingPage with authentication buttons for improved user experience

src/App.tsx

@@ -1,6 +1,12 @@
 import { Authenticated, AuthLoading, Unauthenticated } from 'convex/react'
 import { Loader2 } from 'lucide-react'
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import {
+  BrowserRouter,
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+} from 'react-router-dom'
 import { Toaster } from '@/components/ui/sonner'
 import Navbar from './components/Navbar'
 import Dashboard from './pages/Dashboard'
@@ -9,6 +15,14 @@ import ProfileDetail from './pages/ProfileDetail'
 import ProfileEditorPage from './pages/ProfileEditorPage'
 import ProfileFlash from './pages/ProfileFlash'
 
+function ConditionalNavbar() {
+  const location = useLocation()
+  if (location.pathname === '/') {
+    return null
+  }
+  return <Navbar />
+}
+
 function App() {
   return (
     <BrowserRouter>
@@ -19,7 +33,7 @@ function App() {
       </AuthLoading>
 
       <Unauthenticated>
-        <Navbar />
+        <ConditionalNavbar />
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/profiles/:id" element={<ProfileDetail />} />
@@ -28,7 +42,7 @@ function App() {
       </Unauthenticated>
 
       <Authenticated>
-        <Navbar />
+        <ConditionalNavbar />
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/dashboard" element={<Dashboard />} />

src/pages/LandingPage.tsx

@@ -1,13 +1,16 @@
-import { useQuery } from 'convex/react'
+import { useAuthActions } from '@convex-dev/auth/react'
+import { Authenticated, Unauthenticated, useQuery } from 'convex/react'
 import { useNavigate } from 'react-router-dom'
 import {
   ProfileCardContent,
   profileCardClasses,
 } from '@/components/ProfileCard'
+import { Button } from '@/components/ui/button'
 import { api } from '../../convex/_generated/api'
 
 export default function LandingPage() {
   const navigate = useNavigate()
+  const { signIn } = useAuthActions()
   const profiles = useQuery(api.profiles.listPublic)
 
   return (
@@ -20,10 +23,32 @@ export default function LandingPage() {
               Manage your Meshtastic fleet
             </span>
           </h1>
-          <p className="text-xl md:text-2xl text-slate-400 max-w-2xl mx-auto">
+          <p className="text-xl md:text-2xl text-slate-400 max-w-2xl mx-auto mb-8">
             Create custom profiles, build firmware in the cloud, and flash
             directly from your browser.
           </p>
+          <div className="flex justify-center">
+            <Authenticated>
+              <Button
+                onClick={() => navigate('/dashboard')}
+                size="lg"
+                className="bg-white text-slate-900 hover:bg-slate-200"
+              >
+                Go to Dashboard
+              </Button>
+            </Authenticated>
+            <Unauthenticated>
+              <Button
+                onClick={() =>
+                  signIn('google', { redirectTo: window.location.href })
+                }
+                size="lg"
+                className="bg-white text-slate-900 hover:bg-slate-200"
+              >
+                Sign in
+              </Button>
+            </Unauthenticated>
+          </div>
         </div>
 
         <main className="px-8 pb-8">