Update Owliver language and suggestions

src/layouts/Layout.tsx

@@ -12,6 +12,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import OwliverChatBubble from '@/components/krow/OwliverChatBubble';
 import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card';
 import KrowIdPreview from '@/components/krow/KrowIdPreview';
+import { useTranslation } from 'react-i18next';
 
 const ROLE_NAV = {
   employer: [
@@ -45,6 +46,7 @@ const ROLE_LABEL = { employer: 'Employer', admin: 'Admin', talent: 'Talent' };
 const STATUS_OPTIONS = ['All Statuses', 'Active', 'Draft', 'Paused', 'Closed'];
 
 export default function Layout() {
+  const { t } = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
@@ -206,7 +208,7 @@ export default function Layout() {
                     <HoverCardTrigger asChild>
                       <DropdownMenuItem onClick={() => navigate('/me')} className="cursor-pointer">
                         <UserIcon className="w-4 h-4 mr-2" />
-                        My KROW ID
+                        {t('layout.myKrowId')}
                       </DropdownMenuItem>
                     </HoverCardTrigger>
                     <HoverCardContent side="left" align="start" sideOffset={8} className="w-[380px] p-3 bg-white border border-[#E5E7EB] rounded-2xl shadow-xl">
@@ -216,16 +218,16 @@ export default function Layout() {
                 ) : (
                   <DropdownMenuItem onClick={() => navigate('/me')} className="cursor-pointer">
                     <UserIcon className="w-4 h-4 mr-2" />
-                    My KROW ID
+                    {t('layout.myKrowId')}
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem onClick={() => navigate('/profile')} className="cursor-pointer">
                   <UserIcon className="w-4 h-4 mr-2" />
-                  Profile
+                  {t('layout.profile')}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-600 focus:text-red-600">
                   <LogOut className="w-4 h-4 mr-2" />
-                  Log out
+                  {t('layout.logOut')}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -255,7 +257,7 @@ export default function Layout() {
               <input
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search positions..."
+                placeholder={t('layout.searchPositions')}
                 type="text"
                 className="w-full pl-9 pr-4 h-9 text-[13px] rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:bg-white focus:border-[#0838E0] focus:outline-none transition-all"
               />
@@ -280,7 +282,7 @@ export default function Layout() {
               >
                 <Plus className="w-4 h-4" />
                 {/* The second row leaves room for the label on mobile too */}
-                <span>New Position</span>
+                <span>{t('layout.newPosition')}</span>
               </button>
             </div>
           </div>
@@ -291,7 +293,7 @@ export default function Layout() {
       <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
         <SheetContent side="right" className="w-72 p-0 glass">
           <SheetHeader className="px-5 pt-5 pb-3 border-b border-white/40">
-            <SheetTitle className="text-left font-heading">Menu</SheetTitle>
+            <SheetTitle className="text-left font-heading">{t('layout.menu')}</SheetTitle>
           </SheetHeader>
           <nav className="flex flex-col gap-1 p-3">
             {/* Role switcher (mobile) */}
@@ -341,7 +343,7 @@ export default function Layout() {
                 isActive('/me') ? 'bg-[#EEF3FE] text-[#0838E0]' : 'text-[#374151] hover:bg-white/60'
               )}
             >
-              My KROW ID
+              {t('layout.myKrowId')}
             </Link>
             <Link
               to="/profile"
@@ -351,14 +353,14 @@ export default function Layout() {
                 isActive('/profile') ? 'bg-[#EEF3FE] text-[#0838E0]' : 'text-[#374151] hover:bg-white/60'
               )}
             >
-              Profile
+              {t('layout.profile')}
             </Link>
             <button
               onClick={handleLogout}
               className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-[14px] font-medium text-red-600 hover:bg-red-50/80 transition-colors w-full"
             >
               <LogOut className="w-4 h-4" />
-              Log out
+              {t('layout.logOut')}
             </button>
             {!isTalent && (
               <button
@@ -366,7 +368,7 @@ export default function Layout() {
                 className="mt-2 inline-flex items-center justify-center gap-1.5 bg-[#0838E0] text-white text-[14px] font-semibold px-4 py-2.5 rounded-xl transition-all"
               >
                 <Plus className="w-4 h-4" />
-                New Position
+                {t('layout.newPosition')}
               </button>
             )}
           </nav>