Supported Languages - Translation Services<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n \/* Custom styles *\/\r\n body {\r\n font-family: 'Inter', sans-serif; \/* Ensure Inter font is used *\/\r\n }\r\n \/* Style for highlighting search matches *\/\r\n .highlight {\r\n background-color: #fdba74; \/* Light orange for highlighting *\/\r\n font-weight: bold;\r\n }\r\n \/* Add a subtle transition for hover effects *\/\r\n .language-card {\r\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n .language-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n }\r\n \/* Ensure category grid takes full width *\/\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); \/* Responsive grid columns *\/\r\n }\r\n @media (min-width: 640px) { \/* sm breakpoint *\/\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\r\n }\r\n }\r\n @media (min-width: 1024px) { \/* lg breakpoint *\/\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\r\n }\r\n }\r\n <\/style>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body class=\"bg-white\">\r\n\r\n <header class=\"bg-white shadow-sm py-6 border-b border-gray-200\">\r\n <div class=\"container mx-auto px-4 text-center\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\r\n Global Reach: Translating Over <span class=\"text-orange-500\">70 Languages<\/span>\r\n <\/h1>\r\n <p class=\"mt-2 text-lg text-gray-600\">\r\n From major world languages to regional dialects, we connect you globally across continents.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"py-8 bg-white\">\r\n <div class=\"container mx-auto px-4 max-w-2xl\">\r\n <label for=\"language-search\" class=\"sr-only\">Search Languages<\/label>\r\n <input\r\n type=\"text\"\r\n id=\"language-search\"\r\n placeholder=\"Search all languages...\"\r\n class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent transition duration-200\"\r\n >\r\n <\/div>\r\n <\/section>\r\n\r\n <main class=\"container mx-auto px-4 py-10\">\r\n <div id=\"language-categories\">\r\n <\/div>\r\n <p id=\"no-results\" class=\"text-center text-gray-500 mt-8 hidden\">No languages found matching your search.<\/p>\r\n <\/main>\r\n\r\n <section class=\"bg-orange-500 text-white py-12 mt-10\">\r\n <div class=\"container mx-auto px-4 text-center\">\r\n <h2 class=\"text-3xl font-bold mb-4 text-white\">Ready to Bridge the Language Gap?<\/h2>\r\n <p class=\"text-lg mb-6 max-w-3xl mx-auto\">\r\n Get your free, no-obligation quote today and let us help you communicate effectively across borders.\r\n <\/p>\r\n <a href=\"#quote\" class=\"inline-block bg-white text-orange-600 font-bold py-3 px-8 rounded-lg shadow hover:bg-gray-100 transition duration-200\">\r\n Request a Free Quote\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ --- Language Data Structure ---\r\n \/\/ Array of objects, each with name and category\r\n const allLanguages = [\r\n \/\/ European Languages\r\n { name: \"Bulgarian\", category: \"European\" }, { name: \"Croatian\", category: \"European\" },\r\n { name: \"Czech\", category: \"European\" }, { name: \"Danish\", category: \"European\" },\r\n { name: \"Dutch\", category: \"European\" }, { name: \"English\", category: \"European\" },\r\n { name: \"Estonian\", category: \"European\" }, { name: \"Finnish\", category: \"European\" },\r\n { name: \"French\", category: \"European\" }, { name: \"German\", category: \"European\" },\r\n { name: \"Greek\", category: \"European\" }, { name: \"Hungarian\", category: \"European\" },\r\n { name: \"Irish\", category: \"European\" }, { name: \"Italian\", category: \"European\" },\r\n { name: \"Latvian\", category: \"European\" }, { name: \"Lithuanian\", category: \"European\" },\r\n { name: \"Maltese\", category: \"European\" }, { name: \"Polish\", category: \"European\" },\r\n { name: \"Portuguese\", category: \"European\" }, { name: \"Romanian\", category: \"European\" },\r\n { name: \"Slovak\", category: \"European\" }, { name: \"Slovene\", category: \"European\" },\r\n { name: \"Spanish\", category: \"European\" }, { name: \"Swedish\", category: \"European\" },\r\n \/\/ Asian Languages\r\n { name: \"Bengali\", category: \"Asian\" }, { name: \"Burmese\", category: \"Asian\" },\r\n { name: \"Cambodian\", category: \"Asian\" }, { name: \"Chinese\", category: \"Asian\" }, \/\/ Assuming Mandarin\/Simplified if not specified\r\n { name: \"Dari\", category: \"Asian\" }, { name: \"Indonesian\", category: \"Asian\" },\r\n { name: \"Japanese\", category: \"Asian\" }, { name: \"Khmer\", category: \"Asian\" }, \/\/ Note: Same as Cambodian? Keeping both as requested.\r\n { name: \"Korean\", category: \"Asian\" }, { name: \"Kurdish\", category: \"Asian\" }, \/\/ Note: Kurdish spans regions, placed in Asian as requested.\r\n { name: \"Lao\", category: \"Asian\" }, { name: \"Malagasy\", category: \"Asian\" }, \/\/ Note: Malagasy is geographically African but linguistically related to Southeast Asia. Placed as requested.\r\n { name: \"Malay\", category: \"Asian\" }, { name: \"Nepalese\", category: \"Asian\" },\r\n { name: \"Pashto\", category: \"Asian\" }, { name: \"Sinhala\", category: \"Asian\" }, \/\/ Often spelled Sinhala\/Sinhalese\r\n { name: \"Sorani\", category: \"Asian\" }, \/\/ Note: Sorani is a Kurdish dialect.\r\n { name: \"Sylheti\", category: \"Asian\" }, { name: \"Thai\", category: \"Asian\" },\r\n { name: \"Vietnamese\", category: \"Asian\" },\r\n \/\/ African Languages (Cleaned List)\r\n { name: \"Afrikaans\", category: \"African\" }, { name: \"Akan\", category: \"African\" },\r\n { name: \"Alago\", category: \"African\" }, { name: \"Amharic\", category: \"African\" },\r\n { name: \"Arabic\", category: \"African\" }, \/\/ Note: Arabic spans regions, placed in African as requested.\r\n { name: \"Assamese\", category: \"African\" }, \/\/ Note: Assamese is primarily Asian (India). Placed as requested.\r\n { name: \"Chewa\", category: \"African\" }, { name: \"Dholuo\", category: \"African\" },\r\n { name: \"Dyula\", category: \"African\" }, { name: \"Fula\", category: \"African\" }, \/\/ Also Fulani, Fulah\r\n { name: \"Ganda\", category: \"African\" }, \/\/ Also Luganda\r\n { name: \"Hausa\", category: \"African\" }, { name: \"Igbo\", category: \"African\" },\r\n { name: \"Kanuri\", category: \"African\" }, { name: \"Kikuyu\", category: \"African\" },\r\n { name: \"Kinyarwanda\", category: \"African\" }, { name: \"Kirundi\", category: \"African\" }, \/\/ Also Rundi\r\n { name: \"Lingala\", category: \"African\" }, { name: \"Luhya\", category: \"African\" },\r\n { name: \"Mossi\", category: \"African\" }, { name: \"Nyanja\", category: \"African\" }, \/\/ Also Chewa\/Chichewa\r\n { name: \"Oromo\", category: \"African\" }, { name: \"Pidgin\", category: \"African\" }, \/\/ Specify which Pidgin if possible (e.g., Nigerian Pidgin)\r\n { name: \"Somali\", category: \"African\" }, { name: \"Southern Sotho\", category: \"African\" }, \/\/ Also Sotho\r\n { name: \"Susu\", category: \"African\" }, { name: \"Swahili\", category: \"African\" },\r\n { name: \"Tigrinya\", category: \"African\" }, { name: \"Twi\", category: \"African\" }, \/\/ Note: Twi is a dialect of Akan.\r\n { name: \"Yoruba\", category: \"African\" }\r\n ].sort((a, b) => a.name.localeCompare(b.name)); \/\/ Sort alphabetically by name initially\r\n\r\n \/\/ --- DOM Elements ---\r\n const categoriesContainer = document.getElementById('language-categories');\r\n const searchInput = document.getElementById('language-search');\r\n const noResultsMsg = document.getElementById('no-results');\r\n\r\n \/\/ --- Functions ---\r\n\r\n \/**\r\n * Renders the categorized list of languages.\r\n * @param {object[]} languagesToRender - Array of language objects {name, category} to display.\r\n * @param {string} [searchTerm=''] - Optional search term for highlighting.\r\n *\/\r\n function renderLanguages(languagesToRender, searchTerm = '') {\r\n categoriesContainer.innerHTML = ''; \/\/ Clear previous results\r\n\r\n if (languagesToRender.length === 0 && searchTerm) {\r\n noResultsMsg.classList.remove('hidden');\r\n } else {\r\n noResultsMsg.classList.add('hidden');\r\n }\r\n\r\n \/\/ Group languages by category from the filtered list\r\n const groupedLanguages = languagesToRender.reduce((acc, lang) => {\r\n const category = lang.category;\r\n if (!acc[category]) {\r\n acc[category] = [];\r\n }\r\n acc[category].push(lang);\r\n return acc;\r\n }, {});\r\n\r\n \/\/ Define the order of categories\r\n const categoryOrder = [\"European\", \"Asian\", \"African\"];\r\n\r\n \/\/ Render each category that has languages in the filtered list\r\n categoryOrder.forEach(categoryName => {\r\n if (groupedLanguages[categoryName] && groupedLanguages[categoryName].length > 0) {\r\n \/\/ Create category container\r\n const categorySection = document.createElement('div');\r\n categorySection.className = 'mb-10'; \/\/ Margin below each category\r\n\r\n \/\/ Create category title\r\n const categoryTitle = document.createElement('h3');\r\n categoryTitle.className = 'text-xl md:text-2xl font-semibold text-orange-600 mb-4 pb-2 border-b border-orange-200';\r\n categoryTitle.textContent = `The ${categoryName} Languages:`;\r\n categorySection.appendChild(categoryTitle);\r\n\r\n \/\/ Create grid for languages in this category\r\n const grid = document.createElement('div');\r\n grid.className = 'category-grid grid gap-4'; \/\/ Use specific class for styling columns\r\n categorySection.appendChild(grid);\r\n\r\n \/\/ Add language cards to the grid\r\n groupedLanguages[categoryName].forEach(lang => {\r\n const card = document.createElement('div');\r\n \/\/ Make the card itself the clickable element container\r\n card.className = 'language-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center';\r\n\r\n \/\/ Create the anchor tag\r\n const link = document.createElement('a');\r\n link.href = '#'; \/\/ Placeholder link - REPLACE THIS LATER\r\n \/\/ Apply styling to the link for better appearance\r\n link.className = 'text-gray-800 hover:text-orange-600 hover:underline focus:outline-none focus:ring-1 focus:ring-orange-300 rounded transition-colors duration-150';\r\n\r\n \/\/ Highlight the search term within the link's text\r\n if (searchTerm) {\r\n const regex = new RegExp(`(${searchTerm.replace(\/[-\\\/\\\\^$*+?.()|[\\]{}]\/g, '\\\\$&')})`, 'gi');\r\n \/\/ Use innerHTML on the link to allow the highlight span\r\n link.innerHTML = lang.name.replace(regex, '<span class=\"highlight\">$1<\/span>');\r\n } else {\r\n link.textContent = lang.name;\r\n }\r\n\r\n \/\/ Append the link to the card\r\n card.innerHTML = ''; \/\/ Clear card before appending link\r\n card.appendChild(link);\r\n grid.appendChild(card);\r\n });\r\n\r\n categoriesContainer.appendChild(categorySection);\r\n }\r\n });\r\n\r\n \/\/ Show \"no results\" if search term exists but no groups were rendered\r\n if (searchTerm && Object.keys(groupedLanguages).length === 0) {\r\n noResultsMsg.classList.remove('hidden');\r\n }\r\n }\r\n\r\n \/**\r\n * Filters languages based on the search input (searches across all categories).\r\n *\/\r\n function filterLanguages() {\r\n const searchTerm = searchInput.value.toLowerCase().trim();\r\n const filteredLanguages = allLanguages.filter(lang =>\r\n lang.name.toLowerCase().includes(searchTerm)\r\n );\r\n renderLanguages(filteredLanguages, searchTerm);\r\n }\r\n\r\n \/\/ --- Initial Setup & Event Listeners ---\r\n\r\n \/\/ Update headline count dynamically\r\n const headlineSpan = document.querySelector('header h1 span');\r\n if(headlineSpan) {\r\n headlineSpan.textContent = `${allLanguages.length} Languages`;\r\n }\r\n\r\n\r\n \/\/ Add event listener to the search input\r\n searchInput.addEventListener('input', filterLanguages);\r\n\r\n \/\/ Initial render of all languages on page load\r\n renderLanguages(allLanguages);\r\n\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Supported Languages – Translation Services Global Reach: Translating Over 70 Languages From major world languages to regional dialects, we connect you globally across continents. Search Languages No languages found matching your search. Ready to Bridge the Language Gap? Get your free, no-obligation quote today and let us help you communicate effectively across borders. Request a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-843","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages\/843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/comments?post=843"}],"version-history":[{"count":31,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages\/843\/revisions"}],"predecessor-version":[{"id":3044,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages\/843\/revisions\/3044"}],"wp:attachment":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/media?parent=843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Supported Languages - Translation Services<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n \/* Custom styles *\/\r\n body {\r\n font-family: 'Inter', sans-serif; \/* Ensure Inter font is used *\/\r\n }\r\n \/* Style for highlighting search matches *\/\r\n .highlight {\r\n background-color: #fdba74; \/* Light orange for highlighting *\/\r\n font-weight: bold;\r\n }\r\n \/* Add a subtle transition for hover effects *\/\r\n .language-card {\r\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n .language-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n }\r\n \/* Ensure category grid takes full width *\/\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); \/* Responsive grid columns *\/\r\n }\r\n @media (min-width: 640px) { \/* sm breakpoint *\/\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\r\n }\r\n }\r\n @media (min-width: 1024px) { \/* lg breakpoint *\/\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\r\n }\r\n }\r\n <\/style>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body class=\"bg-white\">\r\n\r\n <header class=\"bg-white shadow-sm py-6 border-b border-gray-200\">\r\n <div class=\"container mx-auto px-4 text-center\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\r\n Global Reach: Translating Over <span class=\"text-orange-500\">70 Languages<\/span>\r\n <\/h1>\r\n <p class=\"mt-2 text-lg text-gray-600\">\r\n From major world languages to regional dialects, we connect you globally across continents.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"py-8 bg-white\">\r\n <div class=\"container mx-auto px-4 max-w-2xl\">\r\n <label for=\"language-search\" class=\"sr-only\">Search Languages<\/label>\r\n <input\r\n type=\"text\"\r\n id=\"language-search\"\r\n placeholder=\"Search all languages...\"\r\n class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent transition duration-200\"\r\n >\r\n <\/div>\r\n <\/section>\r\n\r\n <main class=\"container mx-auto px-4 py-10\">\r\n <div id=\"language-categories\">\r\n <\/div>\r\n <p id=\"no-results\" class=\"text-center text-gray-500 mt-8 hidden\">No languages found matching your search.<\/p>\r\n <\/main>\r\n\r\n <section class=\"bg-orange-500 text-white py-12 mt-10\">\r\n <div class=\"container mx-auto px-4 text-center\">\r\n <h2 class=\"text-3xl font-bold mb-4 text-white\">Ready to Bridge the Language Gap?<\/h2>\r\n <p class=\"text-lg mb-6 max-w-3xl mx-auto\">\r\n Get your free, no-obligation quote today and let us help you communicate effectively across borders.\r\n <\/p>\r\n <a href=\"#quote\" class=\"inline-block bg-white text-orange-600 font-bold py-3 px-8 rounded-lg shadow hover:bg-gray-100 transition duration-200\">\r\n Request a Free Quote\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ --- Language Data Structure ---\r\n \/\/ Array of objects, each with name and category\r\n const allLanguages = [\r\n \/\/ European Languages\r\n { name: \"Bulgarian\", category: \"European\" }, { name: \"Croatian\", category: \"European\" },\r\n { name: \"Czech\", category: \"European\" }, { name: \"Danish\", category: \"European\" },\r\n { name: \"Dutch\", category: \"European\" }, { name: \"English\", category: \"European\" },\r\n { name: \"Estonian\", category: \"European\" }, { name: \"Finnish\", category: \"European\" },\r\n { name: \"French\", category: \"European\" }, { name: \"German\", category: \"European\" },\r\n { name: \"Greek\", category: \"European\" }, { name: \"Hungarian\", category: \"European\" },\r\n { name: \"Irish\", category: \"European\" }, { name: \"Italian\", category: \"European\" },\r\n { name: \"Latvian\", category: \"European\" }, { name: \"Lithuanian\", category: \"European\" },\r\n { name: \"Maltese\", category: \"European\" }, { name: \"Polish\", category: \"European\" },\r\n { name: \"Portuguese\", category: \"European\" }, { name: \"Romanian\", category: \"European\" },\r\n { name: \"Slovak\", category: \"European\" }, { name: \"Slovene\", category: \"European\" },\r\n { name: \"Spanish\", category: \"European\" }, { name: \"Swedish\", category: \"European\" },\r\n \/\/ Asian Languages\r\n { name: \"Bengali\", category: \"Asian\" }, { name: \"Burmese\", category: \"Asian\" },\r\n { name: \"Cambodian\", category: \"Asian\" }, { name: \"Chinese\", category: \"Asian\" }, \/\/ Assuming Mandarin\/Simplified if not specified\r\n { name: \"Dari\", category: \"Asian\" }, { name: \"Indonesian\", category: \"Asian\" },\r\n { name: \"Japanese\", category: \"Asian\" }, { name: \"Khmer\", category: \"Asian\" }, \/\/ Note: Same as Cambodian? Keeping both as requested.\r\n { name: \"Korean\", category: \"Asian\" }, { name: \"Kurdish\", category: \"Asian\" }, \/\/ Note: Kurdish spans regions, placed in Asian as requested.\r\n { name: \"Lao\", category: \"Asian\" }, { name: \"Malagasy\", category: \"Asian\" }, \/\/ Note: Malagasy is geographically African but linguistically related to Southeast Asia. Placed as requested.\r\n { name: \"Malay\", category: \"Asian\" }, { name: \"Nepalese\", category: \"Asian\" },\r\n { name: \"Pashto\", category: \"Asian\" }, { name: \"Sinhala\", category: \"Asian\" }, \/\/ Often spelled Sinhala\/Sinhalese\r\n { name: \"Sorani\", category: \"Asian\" }, \/\/ Note: Sorani is a Kurdish dialect.\r\n { name: \"Sylheti\", category: \"Asian\" }, { name: \"Thai\", category: \"Asian\" },\r\n { name: \"Vietnamese\", category: \"Asian\" },\r\n \/\/ African Languages (Cleaned List)\r\n { name: \"Afrikaans\", category: \"African\" }, { name: \"Akan\", category: \"African\" },\r\n { name: \"Alago\", category: \"African\" }, { name: \"Amharic\", category: \"African\" },\r\n { name: \"Arabic\", category: \"African\" }, \/\/ Note: Arabic spans regions, placed in African as requested.\r\n { name: \"Assamese\", category: \"African\" }, \/\/ Note: Assamese is primarily Asian (India). Placed as requested.\r\n { name: \"Chewa\", category: \"African\" }, { name: \"Dholuo\", category: \"African\" },\r\n { name: \"Dyula\", category: \"African\" }, { name: \"Fula\", category: \"African\" }, \/\/ Also Fulani, Fulah\r\n { name: \"Ganda\", category: \"African\" }, \/\/ Also Luganda\r\n { name: \"Hausa\", category: \"African\" }, { name: \"Igbo\", category: \"African\" },\r\n { name: \"Kanuri\", category: \"African\" }, { name: \"Kikuyu\", category: \"African\" },\r\n { name: \"Kinyarwanda\", category: \"African\" }, { name: \"Kirundi\", category: \"African\" }, \/\/ Also Rundi\r\n { name: \"Lingala\", category: \"African\" }, { name: \"Luhya\", category: \"African\" },\r\n { name: \"Mossi\", category: \"African\" }, { name: \"Nyanja\", category: \"African\" }, \/\/ Also Chewa\/Chichewa\r\n { name: \"Oromo\", category: \"African\" }, { name: \"Pidgin\", category: \"African\" }, \/\/ Specify which Pidgin if possible (e.g., Nigerian Pidgin)\r\n { name: \"Somali\", category: \"African\" }, { name: \"Southern Sotho\", category: \"African\" }, \/\/ Also Sotho\r\n { name: \"Susu\", category: \"African\" }, { name: \"Swahili\", category: \"African\" },\r\n { name: \"Tigrinya\", category: \"African\" }, { name: \"Twi\", category: \"African\" }, \/\/ Note: Twi is a dialect of Akan.\r\n { name: \"Yoruba\", category: \"African\" }\r\n ].sort((a, b) => a.name.localeCompare(b.name)); \/\/ Sort alphabetically by name initially\r\n\r\n \/\/ --- DOM Elements ---\r\n const categoriesContainer = document.getElementById('language-categories');\r\n const searchInput = document.getElementById('language-search');\r\n const noResultsMsg = document.getElementById('no-results');\r\n\r\n \/\/ --- Functions ---\r\n\r\n \/**\r\n * Renders the categorized list of languages.\r\n * @param {object[]} languagesToRender - Array of language objects {name, category} to display.\r\n * @param {string} [searchTerm=''] - Optional search term for highlighting.\r\n *\/\r\n function renderLanguages(languagesToRender, searchTerm = '') {\r\n categoriesContainer.innerHTML = ''; \/\/ Clear previous results\r\n\r\n if (languagesToRender.length === 0 && searchTerm) {\r\n noResultsMsg.classList.remove('hidden');\r\n } else {\r\n noResultsMsg.classList.add('hidden');\r\n }\r\n\r\n \/\/ Group languages by category from the filtered list\r\n const groupedLanguages = languagesToRender.reduce((acc, lang) => {\r\n const category = lang.category;\r\n if (!acc[category]) {\r\n acc[category] = [];\r\n }\r\n acc[category].push(lang);\r\n return acc;\r\n }, {});\r\n\r\n \/\/ Define the order of categories\r\n const categoryOrder = [\"European\", \"Asian\", \"African\"];\r\n\r\n \/\/ Render each category that has languages in the filtered list\r\n categoryOrder.forEach(categoryName => {\r\n if (groupedLanguages[categoryName] && groupedLanguages[categoryName].length > 0) {\r\n \/\/ Create category container\r\n const categorySection = document.createElement('div');\r\n categorySection.className = 'mb-10'; \/\/ Margin below each category\r\n\r\n \/\/ Create category title\r\n const categoryTitle = document.createElement('h3');\r\n categoryTitle.className = 'text-xl md:text-2xl font-semibold text-orange-600 mb-4 pb-2 border-b border-orange-200';\r\n categoryTitle.textContent = `The ${categoryName} Languages:`;\r\n categorySection.appendChild(categoryTitle);\r\n\r\n \/\/ Create grid for languages in this category\r\n const grid = document.createElement('div');\r\n grid.className = 'category-grid grid gap-4'; \/\/ Use specific class for styling columns\r\n categorySection.appendChild(grid);\r\n\r\n \/\/ Add language cards to the grid\r\n groupedLanguages[categoryName].forEach(lang => {\r\n const card = document.createElement('div');\r\n \/\/ Make the card itself the clickable element container\r\n card.className = 'language-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center';\r\n\r\n \/\/ Create the anchor tag\r\n const link = document.createElement('a');\r\n link.href = '#'; \/\/ Placeholder link - REPLACE THIS LATER\r\n \/\/ Apply styling to the link for better appearance\r\n link.className = 'text-gray-800 hover:text-orange-600 hover:underline focus:outline-none focus:ring-1 focus:ring-orange-300 rounded transition-colors duration-150';\r\n\r\n \/\/ Highlight the search term within the link's text\r\n if (searchTerm) {\r\n const regex = new RegExp(`(${searchTerm.replace(\/[-\\\/\\\\^$*+?.()|[\\]{}]\/g, '\\\\$&')})`, 'gi');\r\n \/\/ Use innerHTML on the link to allow the highlight span\r\n link.innerHTML = lang.name.replace(regex, '<span class=\"highlight\">$1<\/span>');\r\n } else {\r\n link.textContent = lang.name;\r\n }\r\n\r\n \/\/ Append the link to the card\r\n card.innerHTML = ''; \/\/ Clear card before appending link\r\n card.appendChild(link);\r\n grid.appendChild(card);\r\n });\r\n\r\n categoriesContainer.appendChild(categorySection);\r\n }\r\n });\r\n\r\n \/\/ Show \"no results\" if search term exists but no groups were rendered\r\n if (searchTerm && Object.keys(groupedLanguages).length === 0) {\r\n noResultsMsg.classList.remove('hidden');\r\n }\r\n }\r\n\r\n \/**\r\n * Filters languages based on the search input (searches across all categories).\r\n *\/\r\n function filterLanguages() {\r\n const searchTerm = searchInput.value.toLowerCase().trim();\r\n const filteredLanguages = allLanguages.filter(lang =>\r\n lang.name.toLowerCase().includes(searchTerm)\r\n );\r\n renderLanguages(filteredLanguages, searchTerm);\r\n }\r\n\r\n \/\/ --- Initial Setup & Event Listeners ---\r\n\r\n \/\/ Update headline count dynamically\r\n const headlineSpan = document.querySelector('header h1 span');\r\n if(headlineSpan) {\r\n headlineSpan.textContent = `${allLanguages.length} Languages`;\r\n }\r\n\r\n\r\n \/\/ Add event listener to the search input\r\n searchInput.addEventListener('input', filterLanguages);\r\n\r\n \/\/ Initial render of all languages on page load\r\n renderLanguages(allLanguages);\r\n\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Supported Languages – Translation Services Global Reach: Translating Over 70 Languages From major world languages to regional dialects, we connect you globally across continents. Search Languages No languages found matching your search. Ready to Bridge the Language Gap? Get your free, no-obligation quote today and let us help you communicate effectively across borders. Request a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-843","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages\/843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/comments?post=843"}],"version-history":[{"count":31,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages\/843\/revisions"}],"predecessor-version":[{"id":3044,"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/pages\/843\/revisions\/3044"}],"wp:attachment":[{"href":"https:\/\/jargon-ls.com\/ar\/wp-json\/wp\/v2\/media?parent=843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}