databayt · abdout · Apr 25, 2026
diff --git a/src/app/[lang]/chatbot/page.tsx b/src/app/[lang]/chatbot/page.tsx
@@ -248,11 +248,11 @@ export default function ChatbotPage() {
               disabled={!inputValue.trim() || isLoading}
               className="h-12 w-12 p-0 hover:scale-110 transition-transform shrink-0"
               variant="link"
-              title="Send message"
+              title={t.chatbot.sendMessage}
             >
               <Send className={cn("h-6 w-6", isRTL && "scale-x-[-1]")} />
             </Button>
-            
+
             <Button
               type="button"
               onClick={handleVoiceInput}
@@ -262,7 +262,7 @@ export default function ChatbotPage() {
                 "h-12 w-12 p-0 hover:scale-110 transition-transform shrink-0",
                 isListening && "text-red-500 animate-pulse"
               )}
-              title="Voice input"
+              title={t.chatbot.voiceInput}
             >
               <Mic className="h-6 w-6" />
             </Button>

diff --git a/src/components/chatbot/chat-window.tsx b/src/components/chatbot/chat-window.tsx
@@ -8,6 +8,7 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { CHAT_WINDOW_POSITIONS, CHAT_WINDOW_SIZE } from './constant';
 import type { ChatWindowProps } from './type';
 import { SendIcon, PriceIcon, TimeIcon, ServicesIcon, InfoIcon, VoiceIcon } from './icons';
+import { useTranslations } from '@/lib/use-translations';
 
 export const ChatWindow = memo(function ChatWindow({
   isOpen,
@@ -18,6 +19,7 @@ export const ChatWindow = memo(function ChatWindow({
   error,
   locale,
 }: ChatWindowProps) {
+  const { t } = useTranslations();
   const [input, setInput] = useState('');
   const [isListening, setIsListening] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -407,11 +409,11 @@ export const ChatWindow = memo(function ChatWindow({
                   "hover:scale-110 transition-transform shrink-0 disabled:opacity-50 disabled:hover:scale-100",
                   isMobile ? "h-12 w-12" : "h-10 w-10"
                 )}
-                title="Send message"
+                title={t.chatbot.sendMessage}
               >
                 <SendIcon size={isMobile ? 32 : 20} className={cn(isRTL && "scale-x-[-1]")} />
               </button>
-              
+
               <button
                 type="button"
                 onClick={handleVoiceInput}
@@ -420,7 +422,7 @@ export const ChatWindow = memo(function ChatWindow({
                   isMobile ? "h-12 w-12" : "h-10 w-10",
                   isListening && "text-red-500 animate-pulse"
                 )}
-                title="Voice input"
+                title={t.chatbot.voiceInput}
               >
                 <VoiceIcon size={isMobile ? 32 : 20} />
               </button>

diff --git a/src/components/internationalization/ar.json b/src/components/internationalization/ar.json
@@ -6,7 +6,9 @@
   "chatbot": {
     "title": "مساعد المحادثة",
     "startMessage": "ابدأ محادثة...",
-    "thinking": "أفكر..."
+    "thinking": "أفكر...",
+    "sendMessage": "إرسال الرسالة",
+    "voiceInput": "إدخال صوتي"
   },
   "common": {
     "loading": "جاري التحميل...",
@@ -37,7 +39,8 @@
     "dark": "داكن",
     "system": "النظام",
     "platform": "منصة",
-    "brandName": "داتابيت"
+    "brandName": "داتابيت",
+    "toggleTheme": "تبديل المظهر"
   },
   "navigation": {
     "menu": "القائمة",

diff --git a/src/components/internationalization/en.json b/src/components/internationalization/en.json
@@ -6,7 +6,9 @@
   "chatbot": {
     "title": "Chat Assistant",
     "startMessage": "Start a conversation...",
-    "thinking": "I'm thinking..."
+    "thinking": "I'm thinking...",
+    "sendMessage": "Send message",
+    "voiceInput": "Voice input"
   },
   "common": {
     "loading": "Loading...",
@@ -37,7 +39,8 @@
     "dark": "Dark",
     "system": "System",
     "platform": "Platform",
-    "brandName": "Databayt"
+    "brandName": "Databayt",
+    "toggleTheme": "Toggle theme"
   },
   "navigation": {
     "menu": "Menu",

diff --git a/src/components/marketing/service/branding.tsx b/src/components/marketing/service/branding.tsx
@@ -13,7 +13,7 @@ export default function Branding() {
       <div className="flex items-center justify-center gap-3 mb-4">
         <OptimizedImage
           src="/marketing/site/branding.png"
-          alt="Branding Icon"
+          alt={t.marketing.services.branding.title}
           width={32}
           height={32}
           className="w-8 h-8"
@@ -37,7 +37,7 @@ export default function Branding() {
             <div>
               <OptimizedImage
                 src="/marketing/site/2.jpg"
-                alt="Branding Example 2"
+                alt=""
                 width={600}
                 height={600}
                 className="w-full h-full object-cover"
@@ -48,7 +48,7 @@ export default function Branding() {
             <div>
               <OptimizedImage
                 src="/marketing/site/1.jpg"
-                alt="Branding Example 1"
+                alt=""
                 width={600}
                 height={600}
                 className="w-full h-full object-cover"    
@@ -59,7 +59,7 @@ export default function Branding() {
             <div>
               <OptimizedImage
                 src="/marketing/site/3.jpg"
-                alt="Branding Example 3"
+                alt=""
                 width={600}
                 height={600}
                 className="w-full h-full object-cover"
@@ -70,7 +70,7 @@ export default function Branding() {
             <div>
               <OptimizedImage
                 src="/marketing/site/4.jpg"
-                alt="Branding Example 4"
+                alt=""
                 width={600}
                 height={600}
                 className="w-full h-full object-cover"

diff --git a/src/components/marketing/service/creative.tsx b/src/components/marketing/service/creative.tsx
@@ -14,7 +14,7 @@ export default function Creative() {
       <div className="flex items-center justify-center gap-3 mb-8">
         <OptimizedImage
           src="/marketing/site/creative.png"
-          alt="Creative Icon"
+          alt={t.marketing.services.creative.title}
           width={32}
           height={32}
           className="w-8 h-8"
@@ -44,7 +44,7 @@ export default function Creative() {
 
         <OptimizedImage
           src="/marketing/site/wallet.gif"
-          alt="Wallet Animation"
+          alt=""
           width={500}
           height={350}
           className="rounded-lg w-full md:w-[500px] h-[300px] md:h-[350px] object-cover"
@@ -58,7 +58,7 @@ export default function Creative() {
             <div>
               <OptimizedImage
                 src="/marketing/site/5.jpg"
-                alt="Creative Work 1"
+                alt=""
                 width={400}
                 height={400}
                 className="w-full h-full object-cover"
@@ -70,7 +70,7 @@ export default function Creative() {
             <div>
               <OptimizedImage
                 src="/marketing/site/6.jpg"
-                alt="Creative Work 2"
+                alt=""
                 width={400}
                 height={400}
                 className="w-full h-full object-cover"
@@ -82,7 +82,7 @@ export default function Creative() {
             <div>
               <OptimizedImage
                 src="/marketing/site/9.jpg"
-                alt="Creative Work 3"
+                alt=""
                 width={400}
                 height={400}
                 className="w-full h-full object-cover"
@@ -94,7 +94,7 @@ export default function Creative() {
             <div>
               <OptimizedImage
                 src="/marketing/site/8.jpg"
-                alt="Creative Work 4"
+                alt=""
                 width={400}
                 height={400}
                 className="w-full h-full object-cover"

diff --git a/src/components/marketing/service/design.tsx b/src/components/marketing/service/design.tsx
@@ -14,7 +14,7 @@ export default function Design() {
       <div className="flex items-center justify-center gap-3 mb-8">
         <OptimizedImage
           src="/marketing/site/design.png"
-          alt="Design Icon"
+          alt={t.marketing.services.design.title}
           width={32}
           height={32}
           className="w-8 h-8"
@@ -61,7 +61,7 @@ export default function Design() {
             <div>
               <OptimizedImage
                 src="/marketing/site/d.jpg"
-                alt="Design Image 2"
+                alt=""
                 width={800}
                 height={600}
                 className="w-full h-full object-cover"
@@ -72,7 +72,7 @@ export default function Design() {
             <div>
               <OptimizedImage
                 src="/marketing/site/e.jpg"
-                alt="Design Image 3"
+                alt=""
                 width={800}
                 height={600}
                 className="w-full h-full object-cover"
@@ -83,7 +83,7 @@ export default function Design() {
             <div>
               <OptimizedImage
                 src="/marketing/site/f.jpg"
-                alt="Design Image 4"
+                alt=""
                 width={800}
                 height={600}
                 className="w-full h-full object-cover"

diff --git a/src/components/marketing/service/layout-card.tsx b/src/components/marketing/service/layout-card.tsx
@@ -33,7 +33,7 @@ function MainLayoutCard({ title, description, rightSideImageUrl }: IProps) {
           width={500}
           height={400}
           className="rounded-xl md:max-w-[31.25rem]"
-          alt="overview"
+          alt=""
         />
       </div>
     </section>

diff --git a/src/components/marketing/service/sales.tsx b/src/components/marketing/service/sales.tsx
@@ -27,7 +27,7 @@ export function Sales() {
             >
               <OptimizedImage
                 src="/marketing/site/b.jpg"
-                alt="Gift box icon"
+                alt=""
                 width={20}
                 height={20}
                 className="rounded-sm"
@@ -41,7 +41,7 @@ export function Sales() {
             <div className="relative w-full lg:pl-24">
               <OptimizedImage
                 src="/marketing/site/a.png"
-                alt="Sales representative"
+                alt={t.marketing.services.sales.title}
                 width={200}
                 height={200}
                 className="rounded-lg"

diff --git a/src/components/template/site-header/mode-switcher.tsx b/src/components/template/site-header/mode-switcher.tsx
@@ -3,13 +3,15 @@
 import * as React from "react"
 import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
+import { useTranslations } from "@/lib/use-translations"
 
 interface ModeSwitcherProps {
   className?: string
 }
 
 export function ModeSwitcher({ className }: ModeSwitcherProps) {
   const { setTheme, resolvedTheme } = useTheme()
+  const { t } = useTranslations()
 
   const toggleTheme = React.useCallback(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark")
@@ -22,7 +24,7 @@ export function ModeSwitcher({ className }: ModeSwitcherProps) {
         "flex items-center justify-center size-8 rounded-md hover:bg-accent hover:text-foreground transition-colors cursor-pointer",
         className
       )}
-      title="Toggle theme"
+      title={t.common.toggleTheme}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +45,7 @@ export function ModeSwitcher({ className }: ModeSwitcherProps) {
         <path d="M12 14.3l7.37 -7.37" />
         <path d="M12 19.6l8.85 -8.85" />
       </svg>
-      <span className="sr-only">Toggle theme</span>
+      <span className="sr-only">{t.common.toggleTheme}</span>
     </button>
   )
 }