use basename

Author: dmarakom6

src/App.tsx

@@ -15,10 +15,10 @@ const App = () => (
     <TooltipProvider>
       <Toaster />
       <Sonner />
-      <BrowserRouter>
+      <BrowserRouter basename="/NOTED/">
         <Routes>
-          <Route path="/NOTED/" element={<Index />} />
-          <Route path="/NOTED/docs" element={<Docs />} />
+          <Route path="/" element={<Index />} />
+          <Route path="/docs" element={<Docs />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/Header.tsx

@@ -32,7 +32,7 @@ export const Header = ({ onFocusMode, notes, tasks }: HeaderProps) => {
 
           {/* Buttons - always centered */}
           <div className="flex items-center space-x-1 sm:space-x-3 flex-shrink-0">
-            <Link to="/NOTED/docs">
+            <Link to="/docs">
               <Button variant="outline" className="glass text-xs sm:text-sm whitespace-nowrap px-2 sm:px-4 h-8 sm:h-10">
                 <BookOpen className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
                 <span className="hidden sm:inline">Docs</span>

src/pages/Docs.tsx

@@ -34,7 +34,7 @@ const Docs = () => {
       <div className="container mx-auto px-4 py-6">
         {/* Header */}
         <div className="flex items-center space-x-4 mb-8">
-          <Link to="/NOTED/">
+          <Link to="/">
             <Button variant="ghost" size="icon" className="glass">
               <ArrowLeft className="h-4 w-4" />
             </Button>

src/pages/NotFound.tsx

@@ -17,7 +17,7 @@ const NotFound = () => {
         <h1 className="text-4xl text-violet-500 font-bold mb-4">404</h1>
         <p className="text-xl text-gray-300 mb-4">Kowalski, Status Report.</p>
         <p className="text-m text-gray-600 mb-4">This page was not found, sir.</p>
-        <a href="/NOTED/" className="text-blue-500 hover:text-blue-700 underline">
+        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
           Take me back home
         </a>
       </div>