feat: implement localization with i18next for English, Hungarian, and German #69

- Added i18next, react-i18next, and i18next-browser-languagedetector packages
- Created translation files for English (en.json), Hungarian (hu.json), and German (de.json)
- Implemented automatic language detection from browser preferences
- Created LanguageSelector component with language switching functionality
- Translated LandingPage component (hero, features, stats, testimonials, CTA, footer)
- Translated Login page component (form labels, placeholders, buttons)
- Translated AppSidebar component (menu items, settings, logout)
- Added language selector to header navigation, login page, and sidebar
- Configured i18n to store language preference in localStorage

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/package.json

@@ -45,6 +45,8 @@
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.3.0",
+    "i18next": "^25.6.1",
+    "i18next-browser-languagedetector": "^8.2.0",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
@@ -52,6 +54,7 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-i18next": "^16.2.4",
     "react-resizable-panels": "^2.1.3",
     "react-router-dom": "^6.26.2",
     "recharts": "^2.12.7",

shopcall.ai-main/src/components/AppSidebar.tsx

@@ -13,58 +13,61 @@ import {
 import { useNavigate } from "react-router-dom";
 import { LayoutDashboard, Phone, BarChart3, Settings, CreditCard, Layers3, PhoneCall, LogOut } from "lucide-react";
 import { useAuth } from "@/components/context/AuthContext";
-
-const menuItems = [
-  {
-    title: "Dashboard",
-    icon: LayoutDashboard,
-    url: "/dashboard",
-    active: false,
-  },
-  {
-    title: "Call Logs",
-    icon: Phone,
-    url: "/call-logs",
-    active: false,
-  },
-  {
-    title: "Analytics",
-    icon: BarChart3,
-    url: "/analytics",
-    active: false,
-  },
-  {
-    title: "Webshops",
-    icon: Layers3,
-    url: "/webshops",
-    active: false,
-  },
-  {
-    title: "Phone Numbers",
-    icon: PhoneCall,
-    url: "/phone-numbers",
-    active: false,
-  },
-];
-
-const configItems = [
-  {
-    title: "AI Configuration",
-    icon: Settings,
-    url: "/ai-config",
-  },
-  {
-    title: "Billing & Plan",
-    icon: CreditCard,
-    url: "/billing",
-  },
-];
+import { useTranslation } from 'react-i18next';
+import { LanguageSelector } from "./LanguageSelector";
 
 export function AppSidebar() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const currentPath = window.location.pathname;
   const { logout } = useAuth();
 
+  const menuItems = [
+    {
+      title: t('sidebar.dashboard'),
+      icon: LayoutDashboard,
+      url: "/dashboard",
+      active: false,
+    },
+    {
+      title: t('sidebar.calls'),
+      icon: Phone,
+      url: "/call-logs",
+      active: false,
+    },
+    {
+      title: t('sidebar.analytics'),
+      icon: BarChart3,
+      url: "/analytics",
+      active: false,
+    },
+    {
+      title: t('sidebar.webshops'),
+      icon: Layers3,
+      url: "/webshops",
+      active: false,
+    },
+    {
+      title: t('sidebar.phoneNumbers'),
+      icon: PhoneCall,
+      url: "/phone-numbers",
+      active: false,
+    },
+  ];
+
+  const configItems = [
+    {
+      title: t('sidebar.aiConfig'),
+      icon: Settings,
+      url: "/ai-config",
+    },
+    {
+      title: "Billing & Plan",
+      icon: CreditCard,
+      url: "/billing",
+    },
+  ];
+
   return (
     <Sidebar className="border-r border-slate-700/50 bg-slate-900 text-white">
       <SidebarHeader className="p-6 bg-slate-900">
@@ -131,16 +134,19 @@ export function AppSidebar() {
 
       <SidebarFooter className="p-6 bg-slate-900">
         <div className="flex flex-col gap-2">
+          <div className="flex justify-center mb-2">
+            <LanguageSelector />
+          </div>
           <div className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
             <Settings className="w-4 h-4 text-slate-400" />
-            <span className="text-sm text-slate-300">Settings</span>
+            <span className="text-sm text-slate-300">{t('sidebar.settings')}</span>
           </div>
           <button
             onClick={logout}
             className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors cursor-pointer"
           >
             <LogOut className="w-4 h-4 text-slate-400" />
-            <span className="text-sm text-slate-300">Logout</span>
+            <span className="text-sm text-slate-300">{t('sidebar.logout')}</span>
           </button>
         </div>
       </SidebarFooter>

shopcall.ai-main/src/components/LandingPage.tsx

@@ -18,40 +18,43 @@ import {
   Headphones,
   Award
 } from "lucide-react";
+import { useTranslation } from 'react-i18next';
+import { LanguageSelector } from "./LanguageSelector";
 
 const LandingPage = () => {
+  const { t } = useTranslation();
   const isAuthenticated = localStorage.getItem('IsAuthenticated');
   console.log(isAuthenticated);
   const features = [
     {
       icon: Phone,
-      title: "Connect Any Phone Number",
-      description: "Seamlessly integrate with any existing phone system or get new numbers instantly in 100+ countries."
+      title: t('landing.features.phone.title'),
+      description: t('landing.features.phone.description')
     },
     {
       icon: Globe,
-      title: "Multi-Language Support",
-      description: "Support customers in 50+ languages with native-speaking AI that understands cultural nuances."
+      title: t('landing.features.language.title'),
+      description: t('landing.features.language.description')
     },
     {
       icon: Zap,
-      title: "Lightning Fast Response",
-      description: "AI responds in under 300ms, providing instant customer support that never sleeps."
+      title: t('landing.features.fast.title'),
+      description: t('landing.features.fast.description')
     },
     {
       icon: Shield,
-      title: "Enterprise Security",
-      description: "Bank-level encryption and compliance with GDPR, HIPAA, and SOC 2 standards."
+      title: t('landing.features.security.title'),
+      description: t('landing.features.security.description')
     },
     {
       icon: BarChart3,
-      title: "Advanced Analytics",
-      description: "Deep insights into call patterns, customer satisfaction, and performance metrics."
+      title: t('landing.features.analytics.title'),
+      description: t('landing.features.analytics.description')
     },
     {
       icon: MessageCircle,
-      title: "Natural Conversations",
-      description: "AI that understands context, emotions, and can handle complex customer inquiries naturally."
+      title: t('landing.features.conversation.title'),
+      description: t('landing.features.conversation.description')
     }
   ];
 
@@ -83,12 +86,12 @@ const LandingPage = () => {
   ];
 
   const stats = [
-    { value: "78%", label: "Average Cost Reduction" },
-    { value: "99.9%", label: "Uptime Guarantee" },
-    { value: "50+", label: "Languages Supported" },
-    { value: "300ms", label: "Average Response Time" },
-    { value: "94%", label: "Customer Satisfaction" },
-    { value: "24/7", label: "Availability" }
+    { value: "78%", label: t('landing.stats.costReduction') },
+    { value: "99.9%", label: t('landing.stats.uptime') },
+    { value: "50+", label: t('landing.stats.languages') },
+    { value: "300ms", label: t('landing.stats.responseTime') },
+    { value: "94%", label: t('landing.stats.satisfaction') },
+    { value: "24/7", label: t('landing.stats.availability') }
   ];
 
   const partners = [
@@ -140,14 +143,15 @@ const LandingPage = () => {
               <span className="text-xl font-bold text-white">ShopCall.ai</span>
             </div>
             <div className="flex items-center gap-4">
+              <LanguageSelector />
               {
                 isAuthenticated === "false" || isAuthenticated === null ?
                 <Button variant="ghost" className="text-slate-300 hover:text-white hover:bg-slate-800" asChild>
-                  <a href="/signup">Start Free Trial</a>
+                  <a href="/signup">{t('landing.hero.startTrial')}</a>
                 </Button> : ''
               }
               <Button variant="outline" className="border-slate-600 text-black hover:bg-slate-800 hover:text-white bg-white" asChild>
-                <a href={isAuthenticated === "true" ? "/dashboard" : "/login"}>{isAuthenticated === "true" ? "Dashboard" : "Login"}</a>
+                <a href={isAuthenticated === "true" ? "/dashboard" : "/login"}>{isAuthenticated === "true" ? t('sidebar.dashboard') : t('auth.login.title')}</a>
               </Button>
             </div>
           </div>
@@ -180,25 +184,24 @@ const LandingPage = () => {
         <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-20">
           <div className="text-center">
             <Badge className="mb-4 bg-slate-700/80 text-slate-300 border-slate-600/50">
-              🚀 Trusted by 1000+ E-commerce Businesses
+              🚀 {t('landing.trusted')}
             </Badge>
             <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
-              AI Phone Support That
-              <span className="text-[#52b3d0] block">Never Sleeps</span>
+              {t('landing.hero.title')}
+              <span className="text-[#52b3d0] block">{t('landing.hero.subtitle')}</span>
             </h1>
             <p className="text-xl md:text-2xl text-slate-300 mb-8 max-w-4xl mx-auto leading-relaxed">
-              Transform your customer service with AI that handles calls in 50+ languages,
-              reduces costs by 78%, and provides 24/7 support that your customers will love.
+              {t('landing.hero.description')}
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
               <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-8 py-4 text-lg" asChild>
                 <a href="/signup">
-                  Start Free Trial
+                  {t('landing.hero.startTrial')}
                   <Zap className="ml-2 h-5 w-5" />
                 </a>
               </Button>
               <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-8 py-4 text-lg">
-                Watch Demo
+                {t('landing.hero.watchDemo')}
                 <Phone className="ml-2 h-5 w-5" />
               </Button>
             </div>
@@ -220,8 +223,8 @@ const LandingPage = () => {
       <section className="py-16 bg-slate-800/30">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-12">
-            <h2 className="text-2xl font-semibold mb-4 text-slate-300">Seamlessly integrates with</h2>
-            <p className="text-slate-400">Connect with your existing e-commerce platform in minutes</p>
+            <h2 className="text-2xl font-semibold mb-4 text-slate-300">{t('landing.partners.title')}</h2>
+            <p className="text-slate-400">{t('landing.partners.description')}</p>
           </div>
 
           <div className="flex justify-center">
@@ -242,7 +245,7 @@ const LandingPage = () => {
           </div>
 
           <div className="text-center mt-12">
-            <p className="text-slate-400 text-sm">+ 50+ more platforms supported</p>
+            <p className="text-slate-400 text-sm">{t('landing.partners.more')}</p>
           </div>
         </div>
       </section>
@@ -251,9 +254,9 @@ const LandingPage = () => {
       <section className="py-24 bg-slate-800/50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold mb-6">Everything You Need for Perfect Customer Service</h2>
+            <h2 className="text-4xl font-bold mb-6">{t('landing.features.title')}</h2>
             <p className="text-xl text-slate-300 max-w-3xl mx-auto">
-              Built for e-commerce businesses that want to scale without compromising on customer experience.
+              {t('landing.features.description')}
             </p>
           </div>
 
@@ -281,9 +284,9 @@ const LandingPage = () => {
       <section className="py-24">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold mb-6">How Much Are E-commerce Stores Saving?</h2>
+            <h2 className="text-4xl font-bold mb-6">{t('landing.savings.title')}</h2>
             <p className="text-xl text-slate-300 max-w-3xl mx-auto mb-12">
-              Real results from businesses that switched to ShopCall.ai
+              {t('landing.savings.description')}
             </p>
           </div>
 
@@ -291,15 +294,15 @@ const LandingPage = () => {
             <Card className="bg-slate-800 border-slate-700 hover:bg-slate-700/80 transition-colors">
               <CardHeader className="text-center">
                 <div className="text-4xl font-bold text-green-400 mb-2">$35,000</div>
-                <CardTitle className="text-white text-xl">Average Monthly Savings</CardTitle>
+                <CardTitle className="text-white text-xl">{t('landing.savings.average.title')}</CardTitle>
                 <CardDescription className="text-slate-300 text-base">
-                  Across 500+ e-commerce businesses
+                  {t('landing.savings.average.description')}
                 </CardDescription>
               </CardHeader>
               <CardContent className="text-center">
                 <div className="flex items-center justify-center gap-2 text-green-400 font-medium">
                   <TrendingUp className="h-5 w-5" />
-                  <span>78% cost reduction</span>
+                  <span>78% {t('landing.savings.average.reduction')}</span>
                 </div>
               </CardContent>
             </Card>
@@ -307,15 +310,15 @@ const LandingPage = () => {
             <Card className="bg-slate-800 border-slate-700 hover:bg-slate-700/80 transition-colors">
               <CardHeader className="text-center">
                 <div className="text-4xl font-bold text-[#52b3d0] mb-2">5,000+</div>
-                <CardTitle className="text-white text-xl">Calls Handled Daily</CardTitle>
+                <CardTitle className="text-white text-xl">{t('landing.savings.calls.title')}</CardTitle>
                 <CardDescription className="text-slate-300 text-base">
-                  Per AI agent, 24/7 availability
+                  {t('landing.savings.calls.description')}
                 </CardDescription>
               </CardHeader>
               <CardContent className="text-center">
                 <div className="flex items-center justify-center gap-2 text-[#52b3d0] font-medium">
                   <Clock className="h-5 w-5" />
-                  <span>300ms response time</span>
+                  <span>300ms {t('landing.savings.calls.response')}</span>
                 </div>
               </CardContent>
             </Card>
@@ -323,15 +326,15 @@ const LandingPage = () => {
             <Card className="bg-slate-800 border-slate-700 hover:bg-slate-700/80 transition-colors">
               <CardHeader className="text-center">
                 <div className="text-4xl font-bold text-purple-400 mb-2">94%</div>
-                <CardTitle className="text-white text-xl">Customer Satisfaction</CardTitle>
+                <CardTitle className="text-white text-xl">{t('landing.savings.satisfaction.title')}</CardTitle>
                 <CardDescription className="text-slate-300 text-base">
-                  Higher than traditional call centers
+                  {t('landing.savings.satisfaction.description')}
                 </CardDescription>
               </CardHeader>
               <CardContent className="text-center">
                 <div className="flex items-center justify-center gap-2 text-purple-400 font-medium">
                   <Award className="h-5 w-5" />
-                  <span>Industry leading</span>
+                  <span>{t('landing.savings.satisfaction.leading')}</span>
                 </div>
               </CardContent>
             </Card>
@@ -343,9 +346,9 @@ const LandingPage = () => {
       <section className="py-24 bg-slate-800/50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold mb-6">What Our Customers Say</h2>
+            <h2 className="text-4xl font-bold mb-6">{t('landing.testimonials.title')}</h2>
             <p className="text-xl text-slate-300 max-w-3xl mx-auto">
-              Join thousands of businesses that have transformed their customer service
+              {t('landing.testimonials.description')}
             </p>
           </div>
 
@@ -370,7 +373,7 @@ const LandingPage = () => {
                     ))}
                   </div>
                   <Badge className="bg-green-600/20 text-green-300 border-green-500/30">
-                    Saves {testimonial.savings}
+                    {t('landing.testimonials.saves')} {testimonial.savings}
                   </Badge>
                 </CardHeader>
                 <CardContent>
@@ -385,36 +388,36 @@ const LandingPage = () => {
       {/* CTA Section */}
       <section className="py-24">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-4xl font-bold mb-6">Ready to Transform Your Customer Service?</h2>
+          <h2 className="text-4xl font-bold mb-6">{t('landing.cta.title')}</h2>
           <p className="text-xl text-slate-300 mb-12">
-            Join 1000+ businesses saving an average of $35,000/month with ShopCall.ai
+            {t('landing.cta.description')}
           </p>
 
           <div className="bg-slate-800/50 rounded-2xl p-8 border border-slate-700">
             <div className="grid md:grid-cols-3 gap-6 mb-8">
               <div className="flex items-center gap-3">
                 <CheckCircle className="h-5 w-5 text-green-400" />
-                <span className="text-slate-300">Free 14-day trial</span>
+                <span className="text-slate-300">{t('landing.cta.freeTrial')}</span>
               </div>
               <div className="flex items-center gap-3">
                 <CheckCircle className="h-5 w-5 text-green-400" />
-                <span className="text-slate-300">Setup in under 2 hours</span>
+                <span className="text-slate-300">{t('landing.cta.setup')}</span>
               </div>
               <div className="flex items-center gap-3">
                 <CheckCircle className="h-5 w-5 text-green-400" />
-                <span className="text-slate-300">No long-term contracts</span>
+                <span className="text-slate-300">{t('landing.cta.contracts')}</span>
               </div>
             </div>
 
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-12 py-4 text-lg" asChild>
                 <a href="/signup">
-                  Start Free Trial
+                  {t('landing.hero.startTrial')}
                   <Zap className="ml-2 h-5 w-5" />
                 </a>
               </Button>
               <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-12 py-4 text-lg">
-                Schedule Demo
+                {t('landing.cta.schedulDemo')}
                 <Headphones className="ml-2 h-5 w-5" />
               </Button>
             </div>
@@ -431,18 +434,18 @@ const LandingPage = () => {
               <h3 className="text-2xl font-bold text-white">ShopCall.ai</h3>
             </div>
             <p className="text-slate-400 mb-6">
-              The future of customer service is here. Available in 50+ languages, 100+ countries.
+              {t('landing.footer.description')}
             </p>
             <div className="flex justify-center items-center gap-4 text-sm text-slate-500">
-              <span>© 2024 ShopCall.ai. All rights reserved.</span>
+              <span>{t('landing.footer.rights')}</span>
               <span>•</span>
-              <a href="/about" className="hover:text-slate-300">About Us</a>
+              <a href="/about" className="hover:text-slate-300">{t('landing.footer.about')}</a>
               <span>•</span>
-              <a href="/privacy" className="hover:text-slate-300">Privacy Policy</a>
+              <a href="/privacy" className="hover:text-slate-300">{t('landing.footer.privacy')}</a>
               <span>•</span>
-              <a href="/terms" className="hover:text-slate-300">Terms & Conditions</a>
+              <a href="/terms" className="hover:text-slate-300">{t('landing.footer.terms')}</a>
               <span>•</span>
-              <a href="/contact" className="hover:text-slate-300">Contact Us</a>
+              <a href="/contact" className="hover:text-slate-300">{t('landing.footer.contact')}</a>
             </div>
           </div>
         </div>

shopcall.ai-main/src/components/LanguageSelector.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from 'react-i18next';
+import { Globe } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+
+const languages = [
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'hu', name: 'Magyar', flag: '🇭🇺' },
+  { code: 'de', name: 'Deutsch', flag: '🇩🇪' }
+];
+
+export function LanguageSelector() {
+  const { i18n } = useTranslation();
+
+  const changeLanguage = (languageCode: string) => {
+    i18n.changeLanguage(languageCode);
+  };
+
+  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="gap-2">
+          <Globe className="h-4 w-4" />
+          <span className="hidden sm:inline">{currentLanguage.flag} {currentLanguage.name}</span>
+          <span className="sm:hidden">{currentLanguage.flag}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {languages.map((language) => (
+          <DropdownMenuItem
+            key={language.code}
+            onClick={() => changeLanguage(language.code)}
+            className={i18n.language === language.code ? 'bg-slate-700' : ''}
+          >
+            <span className="mr-2">{language.flag}</span>
+            {language.name}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

shopcall.ai-main/src/i18n/config.ts

@@ -0,0 +1,32 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from './locales/en.json';
+import hu from './locales/hu.json';
+import de from './locales/de.json';
+
+i18n
+  .use(LanguageDetector) // Detects user language
+  .use(initReactI18next) // Passes i18n down to react-i18next
+  .init({
+    resources: {
+      en: { translation: en },
+      hu: { translation: hu },
+      de: { translation: de }
+    },
+    fallbackLng: 'en', // Use English if detected language is not available
+    debug: false,
+
+    interpolation: {
+      escapeValue: false // React already protects from XSS
+    },
+
+    detection: {
+      order: ['localStorage', 'navigator', 'htmlTag'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'i18nextLng'
+    }
+  });
+
+export default i18n;

shopcall.ai-main/src/i18n/locales/de.json

@@ -0,0 +1,194 @@
+{
+  "landing": {
+    "trusted": "Vertraut von 1000+ E-Commerce-Unternehmen",
+    "hero": {
+      "title": "KI-Telefonsupport, Der",
+      "subtitle": "Niemals Schläft",
+      "description": "Transformieren Sie Ihren Kundenservice mit KI, die Anrufe in über 50 Sprachen bearbeitet, Kosten um 78% senkt und 24/7-Support bietet, den Ihre Kunden lieben werden.",
+      "startTrial": "Kostenlose Testversion Starten",
+      "watchDemo": "Demo Ansehen"
+    },
+    "stats": {
+      "costReduction": "Durchschnittliche Kostenreduzierung",
+      "uptime": "Verfügbarkeitsgarantie",
+      "languages": "Unterstützte Sprachen",
+      "responseTime": "Durchschnittliche Antwortzeit",
+      "satisfaction": "Kundenzufriedenheit",
+      "availability": "Verfügbarkeit"
+    },
+    "partners": {
+      "title": "Nahtlos integriert mit",
+      "description": "Verbinden Sie Ihre bestehende E-Commerce-Plattform in wenigen Minuten",
+      "more": "+ 50+ weitere unterstützte Plattformen"
+    },
+    "features": {
+      "title": "Alles, Was Sie für Perfekten Kundenservice Brauchen",
+      "description": "Entwickelt für E-Commerce-Unternehmen, die ohne Kompromisse bei der Kundenerfahrung wachsen möchten.",
+      "phone": {
+        "title": "Beliebige Telefonnummer Verbinden",
+        "description": "Nahtlose Integration mit jedem bestehenden Telefonsystem oder sofortige neue Nummern in über 100 Ländern."
+      },
+      "language": {
+        "title": "Mehrsprachiger Support",
+        "description": "Unterstützen Sie Kunden in über 50 Sprachen mit muttersprachlicher KI, die kulturelle Nuancen versteht."
+      },
+      "fast": {
+        "title": "Blitzschnelle Reaktion",
+        "description": "KI antwortet in unter 300ms und bietet sofortigen Kundensupport, der niemals schläft."
+      },
+      "security": {
+        "title": "Unternehmenssicherheit",
+        "description": "Verschlüsselung auf Bankniveau und Konformität mit DSGVO, HIPAA und SOC 2 Standards."
+      },
+      "analytics": {
+        "title": "Erweiterte Analysen",
+        "description": "Tiefe Einblicke in Anrufmuster, Kundenzufriedenheit und Leistungskennzahlen."
+      },
+      "conversation": {
+        "title": "Natürliche Gespräche",
+        "description": "KI, die Kontext und Emotionen versteht und komplexe Kundenanfragen natürlich bearbeiten kann."
+      }
+    },
+    "savings": {
+      "title": "Wie Viel Sparen E-Commerce-Shops?",
+      "description": "Echte Ergebnisse von Unternehmen, die zu ShopCall.ai gewechselt sind",
+      "average": {
+        "title": "Durchschnittliche Monatliche Einsparungen",
+        "description": "Über 500+ E-Commerce-Unternehmen",
+        "reduction": "Kostenreduzierung"
+      },
+      "calls": {
+        "title": "Täglich Bearbeitete Anrufe",
+        "description": "Pro KI-Agent, 24/7 Verfügbarkeit",
+        "response": "Antwortzeit"
+      },
+      "satisfaction": {
+        "title": "Kundenzufriedenheit",
+        "description": "Höher als bei traditionellen Call-Centern",
+        "leading": "Branchenführend"
+      }
+    },
+    "testimonials": {
+      "title": "Was Unsere Kunden Sagen",
+      "description": "Schließen Sie sich Tausenden von Unternehmen an, die ihren Kundenservice transformiert haben",
+      "saves": "Spart"
+    },
+    "cta": {
+      "title": "Bereit, Ihren Kundenservice Zu Transformieren?",
+      "description": "Schließen Sie sich 1000+ Unternehmen an, die durchschnittlich $35.000/Monat mit ShopCall.ai sparen",
+      "freeTrial": "Kostenlose 14-Tage-Testversion",
+      "setup": "Einrichtung in unter 2 Stunden",
+      "contracts": "Keine langfristigen Verträge",
+      "schedulDemo": "Demo Planen"
+    },
+    "footer": {
+      "description": "Die Zukunft des Kundenservice ist hier. Verfügbar in über 50 Sprachen, 100+ Ländern.",
+      "rights": "© 2024 ShopCall.ai. Alle Rechte vorbehalten.",
+      "about": "Über Uns",
+      "privacy": "Datenschutzerklärung",
+      "terms": "Allgemeine Geschäftsbedingungen",
+      "contact": "Kontakt"
+    }
+  },
+  "auth": {
+    "login": {
+      "title": "Anmelden",
+      "welcome": "Willkommen zurück! Bitte melden Sie sich bei Ihrem Konto an",
+      "email": "E-Mail",
+      "emailPlaceholder": "Geben Sie Ihre E-Mail ein",
+      "password": "Passwort",
+      "passwordPlaceholder": "Geben Sie Ihr Passwort ein",
+      "submit": "Anmelden",
+      "signingIn": "Anmeldung...",
+      "noAccount": "Sie haben noch kein Konto?",
+      "signup": "Registrieren"
+    },
+    "signup": {
+      "title": "Konto Erstellen",
+      "description": "Starten Sie heute Ihre kostenlose Testversion",
+      "fullName": "Vollständiger Name",
+      "fullNamePlaceholder": "Geben Sie Ihren vollständigen Namen ein",
+      "email": "E-Mail",
+      "emailPlaceholder": "Geben Sie Ihre E-Mail ein",
+      "password": "Passwort",
+      "passwordPlaceholder": "Erstellen Sie ein Passwort",
+      "companyName": "Firmenname",
+      "companyNamePlaceholder": "Geben Sie Ihren Firmennamen ein",
+      "username": "Benutzername",
+      "usernamePlaceholder": "Wählen Sie einen Benutzernamen",
+      "submit": "Konto Erstellen",
+      "creating": "Konto Wird Erstellt...",
+      "hasAccount": "Sie haben bereits ein Konto?",
+      "login": "Anmelden"
+    },
+    "otp": {
+      "title": "Bestätigen Sie Ihre E-Mail",
+      "description": "Wir haben einen Bestätigungscode an Ihre E-Mail gesendet",
+      "codePlaceholder": "6-stelligen Code eingeben",
+      "verify": "E-Mail Bestätigen",
+      "verifying": "Bestätigung...",
+      "resend": "Code nicht erhalten?",
+      "resendButton": "Erneut Senden"
+    }
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "welcome": "Willkommen zurück",
+    "overview": "Übersicht",
+    "kpi": {
+      "totalCalls": "Gesamtanrufe",
+      "activeCalls": "Aktive Anrufe",
+      "avgDuration": "Durchschn. Anrufdauer",
+      "successRate": "Erfolgsquote",
+      "totalRevenue": "Gesamtumsatz",
+      "costSavings": "Kosteneinsparungen"
+    },
+    "charts": {
+      "callVolume": "Anrufvolumen",
+      "resolutionRate": "Lösungsrate",
+      "topIntents": "Häufigste Anrufabsichten"
+    },
+    "recentCalls": {
+      "title": "Neueste Anrufe",
+      "viewAll": "Alle Anzeigen",
+      "customer": "Kunde",
+      "duration": "Dauer",
+      "status": "Status",
+      "intent": "Absicht",
+      "outcome": "Ergebnis",
+      "actions": "Aktionen"
+    }
+  },
+  "sidebar": {
+    "dashboard": "Dashboard",
+    "calls": "Anrufprotokolle",
+    "analytics": "Analysen",
+    "webshops": "Webshops",
+    "phoneNumbers": "Telefonnummern",
+    "aiConfig": "KI-Konfiguration",
+    "apiKeys": "API-Schlüssel",
+    "settings": "Einstellungen",
+    "logout": "Abmelden"
+  },
+  "common": {
+    "loading": "Wird geladen...",
+    "error": "Fehler",
+    "success": "Erfolg",
+    "save": "Speichern",
+    "cancel": "Abbrechen",
+    "delete": "Löschen",
+    "edit": "Bearbeiten",
+    "add": "Hinzufügen",
+    "remove": "Entfernen",
+    "search": "Suchen",
+    "filter": "Filtern",
+    "export": "Exportieren",
+    "import": "Importieren",
+    "back": "Zurück",
+    "next": "Weiter",
+    "previous": "Vorherige",
+    "close": "Schließen",
+    "view": "Ansehen",
+    "details": "Details"
+  }
+}

shopcall.ai-main/src/i18n/locales/en.json

@@ -0,0 +1,194 @@
+{
+  "landing": {
+    "trusted": "Trusted by 1000+ E-commerce Businesses",
+    "hero": {
+      "title": "AI Phone Support That",
+      "subtitle": "Never Sleeps",
+      "description": "Transform your customer service with AI that handles calls in 50+ languages, reduces costs by 78%, and provides 24/7 support that your customers will love.",
+      "startTrial": "Start Free Trial",
+      "watchDemo": "Watch Demo"
+    },
+    "stats": {
+      "costReduction": "Average Cost Reduction",
+      "uptime": "Uptime Guarantee",
+      "languages": "Languages Supported",
+      "responseTime": "Average Response Time",
+      "satisfaction": "Customer Satisfaction",
+      "availability": "Availability"
+    },
+    "partners": {
+      "title": "Seamlessly integrates with",
+      "description": "Connect with your existing e-commerce platform in minutes",
+      "more": "+ 50+ more platforms supported"
+    },
+    "features": {
+      "title": "Everything You Need for Perfect Customer Service",
+      "description": "Built for e-commerce businesses that want to scale without compromising on customer experience.",
+      "phone": {
+        "title": "Connect Any Phone Number",
+        "description": "Seamlessly integrate with any existing phone system or get new numbers instantly in 100+ countries."
+      },
+      "language": {
+        "title": "Multi-Language Support",
+        "description": "Support customers in 50+ languages with native-speaking AI that understands cultural nuances."
+      },
+      "fast": {
+        "title": "Lightning Fast Response",
+        "description": "AI responds in under 300ms, providing instant customer support that never sleeps."
+      },
+      "security": {
+        "title": "Enterprise Security",
+        "description": "Bank-level encryption and compliance with GDPR, HIPAA, and SOC 2 standards."
+      },
+      "analytics": {
+        "title": "Advanced Analytics",
+        "description": "Deep insights into call patterns, customer satisfaction, and performance metrics."
+      },
+      "conversation": {
+        "title": "Natural Conversations",
+        "description": "AI that understands context, emotions, and can handle complex customer inquiries naturally."
+      }
+    },
+    "savings": {
+      "title": "How Much Are E-commerce Stores Saving?",
+      "description": "Real results from businesses that switched to ShopCall.ai",
+      "average": {
+        "title": "Average Monthly Savings",
+        "description": "Across 500+ e-commerce businesses",
+        "reduction": "cost reduction"
+      },
+      "calls": {
+        "title": "Calls Handled Daily",
+        "description": "Per AI agent, 24/7 availability",
+        "response": "response time"
+      },
+      "satisfaction": {
+        "title": "Customer Satisfaction",
+        "description": "Higher than traditional call centers",
+        "leading": "Industry leading"
+      }
+    },
+    "testimonials": {
+      "title": "What Our Customers Say",
+      "description": "Join thousands of businesses that have transformed their customer service",
+      "saves": "Saves"
+    },
+    "cta": {
+      "title": "Ready to Transform Your Customer Service?",
+      "description": "Join 1000+ businesses saving an average of $35,000/month with ShopCall.ai",
+      "freeTrial": "Free 14-day trial",
+      "setup": "Setup in under 2 hours",
+      "contracts": "No long-term contracts",
+      "schedulDemo": "Schedule Demo"
+    },
+    "footer": {
+      "description": "The future of customer service is here. Available in 50+ languages, 100+ countries.",
+      "rights": "© 2024 ShopCall.ai. All rights reserved.",
+      "about": "About Us",
+      "privacy": "Privacy Policy",
+      "terms": "Terms & Conditions",
+      "contact": "Contact Us"
+    }
+  },
+  "auth": {
+    "login": {
+      "title": "Sign In",
+      "welcome": "Welcome back! Please sign in to your account",
+      "email": "Email",
+      "emailPlaceholder": "Enter your email",
+      "password": "Password",
+      "passwordPlaceholder": "Enter your password",
+      "submit": "Sign In",
+      "signingIn": "Signing In...",
+      "noAccount": "Don't have an account?",
+      "signup": "Sign up"
+    },
+    "signup": {
+      "title": "Create Account",
+      "description": "Start your free trial today",
+      "fullName": "Full Name",
+      "fullNamePlaceholder": "Enter your full name",
+      "email": "Email",
+      "emailPlaceholder": "Enter your email",
+      "password": "Password",
+      "passwordPlaceholder": "Create a password",
+      "companyName": "Company Name",
+      "companyNamePlaceholder": "Enter your company name",
+      "username": "Username",
+      "usernamePlaceholder": "Choose a username",
+      "submit": "Create Account",
+      "creating": "Creating Account...",
+      "hasAccount": "Already have an account?",
+      "login": "Sign in"
+    },
+    "otp": {
+      "title": "Verify Your Email",
+      "description": "We've sent a verification code to your email",
+      "codePlaceholder": "Enter 6-digit code",
+      "verify": "Verify Email",
+      "verifying": "Verifying...",
+      "resend": "Didn't receive code?",
+      "resendButton": "Resend"
+    }
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "welcome": "Welcome back",
+    "overview": "Overview",
+    "kpi": {
+      "totalCalls": "Total Calls",
+      "activeCalls": "Active Calls",
+      "avgDuration": "Avg Call Duration",
+      "successRate": "Success Rate",
+      "totalRevenue": "Total Revenue",
+      "costSavings": "Cost Savings"
+    },
+    "charts": {
+      "callVolume": "Call Volume",
+      "resolutionRate": "Resolution Rate",
+      "topIntents": "Top Call Intents"
+    },
+    "recentCalls": {
+      "title": "Recent Calls",
+      "viewAll": "View All",
+      "customer": "Customer",
+      "duration": "Duration",
+      "status": "Status",
+      "intent": "Intent",
+      "outcome": "Outcome",
+      "actions": "Actions"
+    }
+  },
+  "sidebar": {
+    "dashboard": "Dashboard",
+    "calls": "Call Logs",
+    "analytics": "Analytics",
+    "webshops": "Webshops",
+    "phoneNumbers": "Phone Numbers",
+    "aiConfig": "AI Configuration",
+    "apiKeys": "API Keys",
+    "settings": "Settings",
+    "logout": "Logout"
+  },
+  "common": {
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "edit": "Edit",
+    "add": "Add",
+    "remove": "Remove",
+    "search": "Search",
+    "filter": "Filter",
+    "export": "Export",
+    "import": "Import",
+    "back": "Back",
+    "next": "Next",
+    "previous": "Previous",
+    "close": "Close",
+    "view": "View",
+    "details": "Details"
+  }
+}

shopcall.ai-main/src/i18n/locales/hu.json

@@ -0,0 +1,194 @@
+{
+  "landing": {
+    "trusted": "1000+ e-kereskedelmi vállalkozás által megbízható",
+    "hero": {
+      "title": "AI Telefonos Támogatás Amely",
+      "subtitle": "Soha Nem Alszik",
+      "description": "Alakítsa át ügyfélszolgálatát olyan AI-val, amely 50+ nyelven kezeli a hívásokat, 78%-kal csökkenti a költségeket, és 24/7 támogatást nyújt, amelyet ügyfelei imádni fognak.",
+      "startTrial": "Ingyenes Próba Indítása",
+      "watchDemo": "Demó Megtekintése"
+    },
+    "stats": {
+      "costReduction": "Átlagos Költségcsökkentés",
+      "uptime": "Rendelkezésre Állási Garancia",
+      "languages": "Támogatott Nyelv",
+      "responseTime": "Átlagos Válaszidő",
+      "satisfaction": "Ügyfélelégedettség",
+      "availability": "Elérhetőség"
+    },
+    "partners": {
+      "title": "Zökkenőmentesen integrálódik",
+      "description": "Csatlakoztassa meglévő e-kereskedelmi platformját percek alatt",
+      "more": "+ 50+ további támogatott platform"
+    },
+    "features": {
+      "title": "Minden, Amire Szükséged Van a Tökéletes Ügyfélszolgálathoz",
+      "description": "E-kereskedelmi vállalkozások számára készült, amelyek az ügyfélélmény feláldozása nélkül szeretnének növekedni.",
+      "phone": {
+        "title": "Bármely Telefonszám Csatlakoztatása",
+        "description": "Zökkenőmentesen integrálódjon bármely meglévő telefonrendszerrel, vagy szerezzen új számokat azonnal 100+ országban."
+      },
+      "language": {
+        "title": "Többnyelvű Támogatás",
+        "description": "Támogassa ügyfeleit 50+ nyelven anyanyelvi szintű AI-val, amely megérti a kulturális árnyalatokat."
+      },
+      "fast": {
+        "title": "Villámgyors Válasz",
+        "description": "Az AI 300 ms alatt válaszol, azonnali ügyfélszolgálatot biztosítva, amely soha nem alszik."
+      },
+      "security": {
+        "title": "Vállalati Szintű Biztonság",
+        "description": "Banki szintű titkosítás és megfelelés a GDPR, HIPAA és SOC 2 szabványoknak."
+      },
+      "analytics": {
+        "title": "Fejlett Elemzések",
+        "description": "Mélyreható betekintés a hívásmintákba, ügyfélelégedettségbe és teljesítménymutatókba."
+      },
+      "conversation": {
+        "title": "Természetes Beszélgetések",
+        "description": "AI, amely megérti a kontextust, érzelmeket, és természetesen kezeli a komplex ügyfél-megkereséseket."
+      }
+    },
+    "savings": {
+      "title": "Mennyit Takarítanak Meg az E-kereskedelmi Üzletek?",
+      "description": "Valós eredmények azoktól a vállalkozásoktól, amelyek átálltak a ShopCall.ai-ra",
+      "average": {
+        "title": "Átlagos Havi Megtakarítás",
+        "description": "500+ e-kereskedelmi vállalkozás körében",
+        "reduction": "költségcsökkentés"
+      },
+      "calls": {
+        "title": "Napi Kezelt Hívások",
+        "description": "AI ügynökönként, 24/7 elérhetőség",
+        "response": "válaszidő"
+      },
+      "satisfaction": {
+        "title": "Ügyfélelégedettség",
+        "description": "Magasabb, mint a hagyományos call centerekben",
+        "leading": "Iparágvezető"
+      }
+    },
+    "testimonials": {
+      "title": "Mit Mondanak Ügyfeleink",
+      "description": "Csatlakozzon több ezer vállalkozáshoz, amelyek átalakították ügyfélszolgálatukat",
+      "saves": "Megtakarítás"
+    },
+    "cta": {
+      "title": "Készen Áll Ügyfélszolgálatának Átalakítására?",
+      "description": "Csatlakozzon 1000+ vállalkozáshoz, amelyek átlagosan $35,000/hónapot takarítanak meg a ShopCall.ai-val",
+      "freeTrial": "Ingyenes 14 napos próbaverzió",
+      "setup": "Beállítás 2 órán belül",
+      "contracts": "Nincsenek hosszú távú szerződések",
+      "schedulDemo": "Demó Időpontfoglalás"
+    },
+    "footer": {
+      "description": "Az ügyfélszolgálat jövője itt van. Elérhető 50+ nyelven, 100+ országban.",
+      "rights": "© 2024 ShopCall.ai. Minden jog fenntartva.",
+      "about": "Rólunk",
+      "privacy": "Adatvédelmi Nyilatkozat",
+      "terms": "Felhasználási Feltételek",
+      "contact": "Kapcsolat"
+    }
+  },
+  "auth": {
+    "login": {
+      "title": "Bejelentkezés",
+      "welcome": "Üdvözöljük újra! Kérjük, jelentkezzen be fiókjába",
+      "email": "Email",
+      "emailPlaceholder": "Írja be email címét",
+      "password": "Jelszó",
+      "passwordPlaceholder": "Írja be jelszavát",
+      "submit": "Bejelentkezés",
+      "signingIn": "Bejelentkezés...",
+      "noAccount": "Nincs még fiókja?",
+      "signup": "Regisztráció"
+    },
+    "signup": {
+      "title": "Fiók Létrehozása",
+      "description": "Kezdje el ingyenes próbaverzióját még ma",
+      "fullName": "Teljes Név",
+      "fullNamePlaceholder": "Írja be teljes nevét",
+      "email": "Email",
+      "emailPlaceholder": "Írja be email címét",
+      "password": "Jelszó",
+      "passwordPlaceholder": "Hozzon létre jelszót",
+      "companyName": "Cégnév",
+      "companyNamePlaceholder": "Írja be cége nevét",
+      "username": "Felhasználónév",
+      "usernamePlaceholder": "Válasszon felhasználónevet",
+      "submit": "Fiók Létrehozása",
+      "creating": "Fiók Létrehozása...",
+      "hasAccount": "Már van fiókja?",
+      "login": "Bejelentkezés"
+    },
+    "otp": {
+      "title": "Email Cím Ellenőrzése",
+      "description": "Ellenőrző kódot küldtünk email címére",
+      "codePlaceholder": "Írja be a 6 számjegyű kódot",
+      "verify": "Email Ellenőrzése",
+      "verifying": "Ellenőrzés...",
+      "resend": "Nem kapta meg a kódot?",
+      "resendButton": "Újraküldés"
+    }
+  },
+  "dashboard": {
+    "title": "Irányítópult",
+    "welcome": "Üdvözöljük újra",
+    "overview": "Áttekintés",
+    "kpi": {
+      "totalCalls": "Összes Hívás",
+      "activeCalls": "Aktív Hívások",
+      "avgDuration": "Átl. Híváshossz",
+      "successRate": "Sikerességi Arány",
+      "totalRevenue": "Teljes Bevétel",
+      "costSavings": "Költségmegtakarítás"
+    },
+    "charts": {
+      "callVolume": "Hívásmennyiség",
+      "resolutionRate": "Megoldási Arány",
+      "topIntents": "Leggyakoribb Hívási Szándékok"
+    },
+    "recentCalls": {
+      "title": "Legutóbbi Hívások",
+      "viewAll": "Összes Megtekintése",
+      "customer": "Ügyfél",
+      "duration": "Időtartam",
+      "status": "Állapot",
+      "intent": "Szándék",
+      "outcome": "Eredmény",
+      "actions": "Műveletek"
+    }
+  },
+  "sidebar": {
+    "dashboard": "Irányítópult",
+    "calls": "Hívásnapló",
+    "analytics": "Elemzések",
+    "webshops": "Webáruházak",
+    "phoneNumbers": "Telefonszámok",
+    "aiConfig": "AI Konfiguráció",
+    "apiKeys": "API Kulcsok",
+    "settings": "Beállítások",
+    "logout": "Kijelentkezés"
+  },
+  "common": {
+    "loading": "Betöltés...",
+    "error": "Hiba",
+    "success": "Sikeres",
+    "save": "Mentés",
+    "cancel": "Mégse",
+    "delete": "Törlés",
+    "edit": "Szerkesztés",
+    "add": "Hozzáadás",
+    "remove": "Eltávolítás",
+    "search": "Keresés",
+    "filter": "Szűrés",
+    "export": "Exportálás",
+    "import": "Importálás",
+    "back": "Vissza",
+    "next": "Következő",
+    "previous": "Előző",
+    "close": "Bezárás",
+    "view": "Megtekintés",
+    "details": "Részletek"
+  }
+}

shopcall.ai-main/src/main.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import './i18n/config'
 
 createRoot(document.getElementById("root")!).render(<App />);

shopcall.ai-main/src/pages/Login.tsx

@@ -6,8 +6,11 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Phone, Mail, Lock, Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "@/components/context/AuthContext";
+import { useTranslation } from 'react-i18next';
+import { LanguageSelector } from "@/components/LanguageSelector";
 
 const Login = () => {
+  const { t } = useTranslation();
   const { login } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -32,28 +35,33 @@ const Login = () => {
   return (
     <div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-4">
       <div className="w-full max-w-md">
+        {/* Language Selector */}
+        <div className="flex justify-end mb-4">
+          <LanguageSelector />
+        </div>
+
         {/* Logo */}
         <div className="text-center mb-8">
           <div className="flex items-center justify-center gap-3 mb-4">
             <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai" className="w-10 h-10" />
             <span className="text-2xl font-bold text-white">ShopCall.ai</span>
           </div>
-          <p className="text-slate-400">Welcome back! Please sign in to your account</p>
+          <p className="text-slate-400">{t('auth.login.welcome')}</p>
         </div>
 
         <Card className="bg-slate-800 border-slate-700">
           <CardHeader>
-            <CardTitle className="text-white text-center">Sign In</CardTitle>
+            <CardTitle className="text-white text-center">{t('auth.login.title')}</CardTitle>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleLogin} className="space-y-4">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-300">Email</label>
+                <label className="text-sm font-medium text-slate-300">{t('auth.login.email')}</label>
                 <div className="relative">
                   <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
                   <Input
                     type="email"
-                    placeholder="Enter your email"
+                    placeholder={t('auth.login.emailPlaceholder')}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     className="pl-10 bg-slate-700 border-slate-600 text-white placeholder-slate-400"
@@ -63,12 +71,12 @@ const Login = () => {
               </div>
 
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-300">Password</label>
+                <label className="text-sm font-medium text-slate-300">{t('auth.login.password')}</label>
                 <div className="relative">
                   <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
                   <Input
                     type="password"
-                    placeholder="Enter your password"
+                    placeholder={t('auth.login.passwordPlaceholder')}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     className="pl-10 bg-slate-700 border-slate-600 text-white placeholder-slate-400"
@@ -77,27 +85,27 @@ const Login = () => {
                 </div>
               </div>
 
-              <Button 
-                type="submit" 
+              <Button
+                type="submit"
                 disabled={isLoading}
                 className="w-full bg-cyan-500 hover:bg-cyan-600 text-white disabled:opacity-50"
               >
                 {isLoading ? (
                   <>
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Signing In...
+                    {t('auth.login.signingIn')}
                   </>
                 ) : (
-                  "Sign In"
+                  t('auth.login.submit')
                 )}
               </Button>
             </form>
 
             <div className="mt-6 text-center">
               <p className="text-slate-400 text-sm">
-                Don't have an account?{" "}
+                {t('auth.login.noAccount')}{" "}
                 <a href="/signup" className="text-cyan-400 hover:text-cyan-300">
-                  Sign up
+                  {t('auth.login.signup')}
                 </a>
               </p>
             </div>