fixed some little issues and added new pages

src/components/PublicLayout.tsx

@@ -1,22 +1,40 @@
 import React, { useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { Sparkles, Menu, X } from 'lucide-react'
+import i18n from '@/i18n/i18n'
 
-/**
- * R-07 FIX: PublicLayout provides navigation for unauthenticated users
- * on public pages (Marketplace, Pricing, ChatbotDetail).
- * Previously these pages had NO navigation header, making it impossible
- * for unauthenticated users to navigate between public pages.
- */
 export const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { t } = useTranslation()
   const location = useLocation()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const currentLang = i18n.language?.startsWith('fr') ? 'fr' : 'en'
 
   const isActive = (path: string) => location.pathname.startsWith(path)
 
+  const setLang = (lang: string) => {
+    i18n.changeLanguage(lang)
+  }
+
+  const LangToggle = ({ size = 'md' }: { size?: 'sm' | 'md' }) =>  (
+    <div className="flex items-center border border-gray-200 rounded-lg overflow-hidden text-xs font-semibold">
+      <button
+        onClick={() => setLang('fr')}
+        className={`${size === 'sm' ? 'px-2 py-1' : 'px-2.5 py-1.5'} transition-colors ${currentLang === 'fr' ? 'bg-primary-600 text-white' : 'text-gray-500 hover:bg-gray-50'}`}
+      >
+        FR
+      </button>
+      <button
+        onClick={() => setLang('en')}
+        className={`${size === 'sm' ? 'px-2 py-1' : 'px-2.5 py-1.5'} transition-colors ${currentLang === 'en' ? 'bg-primary-600 text-white' : 'text-gray-500 hover:bg-gray-50'}`}
+      >
+        EN
+      </button>
+    </div>
+  )
+
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Navigation Header */}
       <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
         <div className="max-w-6xl mx-auto px-4 sm:px-6">
           <div className="flex items-center justify-between h-14">
@@ -37,7 +55,7 @@ export const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children
                   isActive('/marketplace') ? 'text-primary-600' : 'text-gray-600 hover:text-gray-900'
                 }`}
               >
-                Marketplace
+                {t('nav.marketplace')}
               </Link>
               <Link
                 to="/pricing"
@@ -45,31 +63,35 @@ export const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children
                   isActive('/pricing') ? 'text-primary-600' : 'text-gray-600 hover:text-gray-900'
                 }`}
               >
-                Pricing
+                {t('nav.pricing')}
               </Link>
             </div>
 
-            {/* Auth buttons (desktop) */}
+            {/* Desktop right side */}
             <div className="hidden md:flex items-center gap-3">
+              <LangToggle />
               <Link to="/login" className="text-sm text-gray-600 hover:text-gray-900 font-medium px-3 py-1.5 transition-colors">
-                Sign in
+                {t('nav.signin')}
               </Link>
               <Link
                 to="/signup"
                 className="bg-primary-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-primary-700 font-semibold transition-all shadow-sm"
               >
-                Get started free
+                {t('nav.get_started')}
               </Link>
             </div>
 
-            {/* Mobile hamburger */}
-            <button
-              className="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              aria-label="Toggle menu"
-            >
-              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
-            </button>
+            {/* Mobile controls */}
+            <div className="md:hidden flex items-center gap-2">
+              <LangToggle size="sm" />
+              <button
+                className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                aria-label="Toggle menu"
+              >
+                {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+              </button>
+            </div>
           </div>
 
           {/* Mobile menu */}
@@ -80,14 +102,14 @@ export const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children
                 className="block px-3 py-2 text-sm text-gray-700 font-medium rounded-lg hover:bg-gray-50"
                 onClick={() => setMobileMenuOpen(false)}
               >
-                Marketplace
+                {t('nav.marketplace')}
               </Link>
               <Link
                 to="/pricing"
                 className="block px-3 py-2 text-sm text-gray-700 font-medium rounded-lg hover:bg-gray-50"
                 onClick={() => setMobileMenuOpen(false)}
               >
-                Pricing
+                {t('nav.pricing')}
               </Link>
               <hr className="border-gray-100 my-2" />
               <Link
@@ -95,21 +117,20 @@ export const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children
                 className="block px-3 py-2 text-sm text-gray-700 font-medium rounded-lg hover:bg-gray-50"
                 onClick={() => setMobileMenuOpen(false)}
               >
-                Sign in
+                {t('nav.signin')}
               </Link>
               <Link
                 to="/signup"
                 className="block mx-3 bg-primary-600 text-white text-sm px-4 py-2.5 rounded-lg font-semibold text-center"
                 onClick={() => setMobileMenuOpen(false)}
               >
-                Get started free
+                {t('nav.get_started')}
               </Link>
             </div>
           )}
         </div>
       </nav>
 
-      {/* Page content */}
       <main>{children}</main>
     </div>
   )