Update index.html

added translation tools

index.html

@@ -585,4 +585,30 @@
                             </a>
                         </div>
                     </div>
+                </div>
+                <!-- Card 19: Translation -->
+                <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
+                    <h2 class="text-xl font-bold mb-4">Translate Content</h2>
+                
+                    <div class="mt-4 pt-4 border-t">
+                        <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
+                        <div class="flex flex-wrap gap-2">
+                            <a href="https://huggingface.co/spaces/UNESCO/nllb" target="_blank" rel="noopener noreferrer" class="tool-link">
+                                UNESCO Language Translator (200 languages)
+                                <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                                    <polyline points="15 3 21 3 21 9"></polyline>
+                                    <line x1="10" y1="14" x2="21" y2="3"></line>
+                                </svg>
+                            </a>
+                            <a href="https://huggingface.co/spaces/microsoft/PhineSpeechTranslator" target="_blank" rel="noopener noreferrer" class="tool-link">
+                                Phi-4 Audio File Translator (8 languages)
+                                <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                                    <polyline points="15 3 21 3 21 9"></polyline>
+                                    <line x1="10" y1="14" x2="21" y2="3"></line>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
                 </div>