Upgrade flags to svg

Author: tutosrive

website/src/components/layout/Navbar.css

@@ -106,6 +106,7 @@
 .lang-toggle {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   padding: 8px 12px;
   background: var(--bg-tertiary);
@@ -140,6 +141,7 @@
 .lang-option {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 10px;
   width: 100%;
   padding: 10px 12px;
@@ -161,8 +163,16 @@
   color: var(--color-primary);
 }
 
-.lang-flag {
-  font-size: 1.2rem;
+.lang-flag-icon {
+  width: 20px;
+  height: 15px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.lang-text {
+  font-weight: 500;
+  font-size: 0.9rem;
 }
 
 .theme-toggle {

website/src/components/layout/Navbar.tsx

@@ -42,22 +42,22 @@ export default function Navbar() {
 
   const languages = useMemo(
     () => {
-      const flags: Record<string, string> = {
-        en: '🇺🇸',
-        es: '🇪🇸',
-        pt: '🇵🇹',
-        zh: '🇨🇳',
-        hi: '🇮🇳',
-        fr: '🇫🇷',
-        ar: '🇸🇦',
-        ru: '🇷🇺',
-        de: '🇩🇪',
-        ja: '🇯🇵'
+      const countryCodes: Record<string, string> = {
+        en: 'us',
+        es: 'co', 
+        pt: 'pt',
+        zh: 'cn',
+        hi: 'in',
+        fr: 'fr',
+        ar: 'sa',
+        ru: 'ru',
+        de: 'de',
+        ja: 'jp'
       };
       return ['en', 'es', 'pt', 'zh', 'hi', 'fr', 'ar', 'ru', 'de', 'ja'].map(code => ({
         code,
-        name: flags[code],
-        flag: code.toUpperCase()
+        flagUrl: `https://flagcdn.com/${countryCodes[code]}.svg`,
+        label: code.toUpperCase()
       }));
     },
     []
@@ -156,8 +156,8 @@ export default function Navbar() {
                       className={`lang-option ${i18n.language === lang.code ? 'active' : ''}`}
                       onClick={() => changeLanguage(lang.code)}
                     >
-                      <span className="lang-flag">{lang.flag}</span>
-                      <span>{lang.name}</span>
+                      <span className="lang-text">{lang.label}</span>
+                      <img src={lang.flagUrl} alt={lang.label} className="lang-flag-icon" />
                     </button>
                   ))}
                 </div>

website/src/components/sections/HeroSection.css

@@ -227,3 +227,77 @@
     height: 180px;
   }
 }
+
+.preview-link {
+  position: relative;
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.preview-link:hover {
+  text-decoration: underline;
+}
+
+.preview-tooltip {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%) translateY(10px);
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  padding: 12px;
+  border-radius: 8px;
+  width: 280px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+  z-index: 100;
+}
+
+.preview-link:hover .preview-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+.tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tooltip-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+}
+
+.tooltip-desc {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.tooltip-url {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  opacity: 0.8;
+}
+
+/* Arrow */
+.preview-tooltip::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  width: 12px;
+  height: 12px;
+  background: var(--bg-card);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}

website/src/components/sections/HeroSection.tsx

@@ -1,10 +1,28 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Download, BookOpen, ArrowRight } from 'lucide-react';
 import './HeroSection.css';
 
 const LOGO_URL = 'https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/bridgex-v0.1.0.webp';
 
+const MarkitdownPreview = (
+  <a 
+    href="https://github.com/microsoft/markitdown" 
+    target="_blank" 
+    rel="noopener noreferrer" 
+    className="preview-link"
+  >
+    markitdown
+    <span className="preview-tooltip">
+      <span className="tooltip-content">
+        <span className="tooltip-title">microsoft/markitdown</span>
+        <span className="tooltip-desc">Python tool for converting various files to Markdown (e.g., for LLM use)</span>
+        <span className="tooltip-url">github.com/microsoft/markitdown</span>
+      </span>
+    </span>
+  </a>
+);
+
 export default function HeroSection() {
   const { t } = useTranslation();
 
@@ -26,7 +44,9 @@ export default function HeroSection() {
             <span className="gradient-text">{t('hero.title')}</span>
           </h1>
 
-          <p className="hero-subtitle">{t('hero.subtitle')}</p>
+          <p className="hero-subtitle">
+            <Trans i18nKey="hero.subtitle" components={[MarkitdownPreview]} />
+          </p>
 
           <p className="hero-description">{t('hero.description')}</p>
 

website/src/i18n/locales/es.json

@@ -8,7 +8,7 @@
   },
   "hero": {
     "title": "Bridgex",
-    "subtitle": "Tu Puente hacia Markdown",
+    "subtitle": "Tu Puente hacia <0>markitdown</0>",
     "description": "Una interfaz gráfica de código abierto para convertir archivos a Markdown, construida en Python con PySide6. Simplifica tu flujo de trabajo con el poder de Markitdown.",
     "cta": {
       "download": "Descargar Ahora",