From 27aadd32c4f660abf16aefc8a3e8e43c3922720e Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Mon, 9 Mar 2026 18:55:11 -0300
Subject: [PATCH] feat: integrate i18next for internationalization across
 components

- Added translation support to FeaturesSection, Footer, HeroSection, Navbar, and SupportedBySection components.
- Refactored static text to use translation keys from JSON files for English and Spanish languages.
- Created new locale files for community, contact, download, features, footer, hero, navbar, and supportedBy sections in both English and Spanish.
- Implemented a language switcher in the Navbar for dynamic language changes.
- Updated package.json to include i18next and react-i18next dependencies.
---
 app/i18n.ts                         |  56 +++++++++
 app/page.tsx                        |   3 +
 components/community-section.tsx    |  39 +++---
 components/contact-section.tsx      |  26 ++--
 components/download-section.tsx     |  70 +++++++----
 components/features-section.tsx     |  83 ++++++-------
 components/footer.tsx               | 163 ++++++++++++++-----------
 components/hero-section.tsx         |  22 ++--
 components/navbar.tsx               | 178 ++++++++++++++++++----------
 components/supported-by-section.tsx |   7 +-
 package.json                        |   3 +
 public/locales/en/community.json    |  18 +++
 public/locales/en/contact.json      |  18 +++
 public/locales/en/download.json     |  25 ++++
 public/locales/en/features.json     |  26 ++++
 public/locales/en/footer.json       |  29 +++++
 public/locales/en/hero.json         |   7 ++
 public/locales/en/navbar.json       |   8 ++
 public/locales/en/supportedBy.json  |   4 +
 public/locales/es/community.json    |  18 +++
 public/locales/es/contact.json      |  18 +++
 public/locales/es/download.json     |  25 ++++
 public/locales/es/features.json     |  26 ++++
 public/locales/es/footer.json       |  29 +++++
 public/locales/es/hero.json         |   7 ++
 public/locales/es/navbar.json       |   8 ++
 public/locales/es/supportedBy.json  |   4 +
 27 files changed, 691 insertions(+), 229 deletions(-)
 create mode 100644 app/i18n.ts
 create mode 100644 public/locales/en/community.json
 create mode 100644 public/locales/en/contact.json
 create mode 100644 public/locales/en/download.json
 create mode 100644 public/locales/en/features.json
 create mode 100644 public/locales/en/footer.json
 create mode 100644 public/locales/en/hero.json
 create mode 100644 public/locales/en/navbar.json
 create mode 100644 public/locales/en/supportedBy.json
 create mode 100644 public/locales/es/community.json
 create mode 100644 public/locales/es/contact.json
 create mode 100644 public/locales/es/download.json
 create mode 100644 public/locales/es/features.json
 create mode 100644 public/locales/es/footer.json
 create mode 100644 public/locales/es/hero.json
 create mode 100644 public/locales/es/navbar.json
 create mode 100644 public/locales/es/supportedBy.json

diff --git a/app/i18n.ts b/app/i18n.ts
new file mode 100644
index 0000000..b29c6e2
--- /dev/null
+++ b/app/i18n.ts
@@ -0,0 +1,56 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import supportedByEN from "../public/locales/en/supportedBy.json";
+import supportedByES from "../public/locales/es/supportedBy.json";
+import navbarEN from "../public/locales/en/navbar.json";
+import navbarES from "../public/locales/es/navbar.json";
+import heroEN from "../public/locales/en/hero.json";
+import heroES from "../public/locales/es/hero.json";
+import featuresEN from "../public/locales/en/features.json";
+import featuresES from "../public/locales/es/features.json";
+import downloadEN from "../public/locales/en/download.json";
+import downloadES from "../public/locales/es/download.json";
+import communityEN from "../public/locales/en/community.json";
+import communityES from "../public/locales/es/community.json";
+import contactEN from "../public/locales/en/contact.json";
+import contactES from "../public/locales/es/contact.json";
+import footerEN from "../public/locales/en/footer.json";
+import footerES from "../public/locales/es/footer.json";
+
+
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    resources: {
+      en: {
+        navbar: navbarEN,
+        hero: heroEN,
+        supportedBy: supportedByEN,
+        features: featuresEN,
+        download: downloadEN,
+        community: communityEN,
+        contact: contactEN,
+        footer: footerEN,
+      },
+      es: {
+        navbar: navbarES,
+        hero: heroES,
+        supportedBy: supportedByES,
+        features: featuresES,
+        download: downloadES,
+        community: communityES,
+        contact: contactES,
+        footer: footerES,
+      }
+    },
+    supportedLngs: ["en", "es"],
+    fallbackLng: "en",
+
+    interpolation: {
+      escapeValue: false
+    }
+  });
+
+export default i18n;
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 805f9f3..a276797 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Navbar } from "@/components/navbar"
 import { HeroSection } from "@/components/hero-section"
 import { FeaturesSection } from "@/components/features-section"
@@ -7,6 +9,7 @@ import { SupportedBySection } from "@/components/supported-by-section"
 import { CommunitySection } from "@/components/community-section"
 import { ContactSection } from "@/components/contact-section"
 import { Footer } from "@/components/footer"
+import "./i18n"
 
 export default function Home() {
   return (
diff --git a/components/community-section.tsx b/components/community-section.tsx
index 2f3c559..304ae2f 100644
--- a/components/community-section.tsx
+++ b/components/community-section.tsx
@@ -1,15 +1,16 @@
 "use client"
 
-import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Github, BookOpen, Code2, Package } from "lucide-react"
 import { siteConfig } from "@/lib/config"
+import { useTranslation } from "react-i18next"
 
 const communityLinks = [
   {
     icon: Github,
-    title: "GitHub",
-    description: "Explore the source code",
+    key: "github",
+    defaultTitle: "GitHub",
+    defaultDescription: "Explore the source code",
     link: siteConfig.github.url,
     // stats: "2.5k stars",
   },
@@ -22,41 +23,51 @@ const communityLinks = [
   // },
   {
     icon: BookOpen,
-    title: "Docs",
-    description: "Visit the technical documentation",
+    key: "docs",
+    defaultTitle: "Docs",
+    defaultDescription: "Visit the technical documentation",
     link: siteConfig.docs.url,
     // stats: "Complete guides",
   },
   {
     icon: Code2,
-    title: "Contribute",
-    description: "Improve the project",
+    key: "contribute",
+    defaultTitle: "Contribute",
+    defaultDescription: "Improve the project",
     link: siteConfig.github.contribute,
     // stats: "Open to all",
   },
 ]
 
 export function CommunitySection() {
+  const { t } = useTranslation()
   return (
     <section id="community" className="py-24 px-4">
       <div className="container mx-auto">
         <div className="text-center mb-16">
           <h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance">
-            {"Built and extended by the community"}
+            {t("community:title", { defaultValue: "Built and extended by the community" })}
           </h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-            {
-              "DashAI's plugin architecture enables anyone to contribute new capabilities. Build plugins, improve the core, and shape the future of open source AI tools."
-            }
+            {t("community:description", {
+              defaultValue:
+                "DashAI's plugin architecture enables anyone to contribute new capabilities. Build plugins, improve the core, and shape the future of open source AI tools.",
+            })}
           </p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6 mb-12">
           {communityLinks.map((item, index) => {
             const Icon = item.icon
+            const title = t(`community:cards.${item.key}.title`, {
+              defaultValue: item.defaultTitle,
+            })
+            const description = t(`community:cards.${item.key}.description`, {
+              defaultValue: item.defaultDescription,
+            })
             return (
               <Card
-                key={index}
+                key={item.key}
                 className="bg-card border-border hover:border-primary/50 transition-all duration-300 cursor-pointer group"
                 onClick={() => window.open(item.link, "_blank", "noopener,noreferrer")}
               >
@@ -64,8 +75,8 @@ export function CommunitySection() {
                   <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
                     <Icon className="h-7 w-7 text-primary" />
                   </div>
-                  <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
-                  <p className="text-muted-foreground mb-3 text-sm leading-relaxed">{item.description}</p>
+                  <h3 className="text-xl font-semibold mb-2">{title}</h3>
+                  <p className="text-muted-foreground mb-3 text-sm leading-relaxed">{description}</p>
                   <span className="text-xs text-primary font-mono">{item.stats}</span>
                 </CardContent>
               </Card>
diff --git a/components/contact-section.tsx b/components/contact-section.tsx
index 4bce56c..bb0e250 100644
--- a/components/contact-section.tsx
+++ b/components/contact-section.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
+import { useTranslation } from 'react-i18next'
 
 export function ContactSection() {
+  const { t } = useTranslation()
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -67,10 +69,12 @@ export function ContactSection() {
       <div className="max-w-2xl mx-auto">
         <div className="text-center mb-12">
           <h2 className="text-4xl md:text-5xl font-bold mb-4">
-            Contact Us
+            {t('contact:title', { defaultValue: 'Contact Us' })}
           </h2>
           <p className="text-muted-foreground text-lg">
-          Have questions or feedback about DashAI? Feel free to get in touch — we’d love to hear from you.
+            {t('contact:description', {
+              defaultValue: 'Have questions or feedback about DashAI? Feel free to get in touch — we’d love to hear from you.',
+            })}
           </p>
         </div>
 
@@ -79,7 +83,7 @@ export function ContactSection() {
             <input
               type="text"
               name="name"
-              placeholder="Name"
+              placeholder={t('contact:fields.name', { defaultValue: 'Name' })}
               value={formData.name}
               onChange={handleChange}
               required
@@ -91,7 +95,7 @@ export function ContactSection() {
             <input
               type="email"
               name="email"
-              placeholder="Email"
+              placeholder={t('contact:fields.email', { defaultValue: 'Email' })}
               value={formData.email}
               onChange={handleChange}
               required
@@ -102,7 +106,7 @@ export function ContactSection() {
           <div>
             <textarea
               name="message"
-              placeholder="Message"
+              placeholder={t('contact:fields.message', { defaultValue: 'Message' })}
               value={formData.message}
               onChange={handleChange}
               required
@@ -116,18 +120,24 @@ export function ContactSection() {
             disabled={status === 'sending'}
             className="w-full py-6 text-lg font-medium cursor-pointer"
           >
-            {status === 'sending' ? 'Sending...' : status === 'success' ? 'Sent!' : 'Send message'}
+            {status === 'sending'
+              ? t('contact:status.sending', { defaultValue: 'Sending...' })
+              : status === 'success'
+              ? t('contact:status.sent', { defaultValue: 'Sent!' })
+              : t('contact:status.idle', { defaultValue: 'Send message' })}
           </Button>
 
           {status === 'success' && (
             <p className="text-center text-primary animate-in fade-in duration-300">
-              Thank you for contacting us! We will get back to you soon.
+              {t('contact:feedback.success', {
+                defaultValue: 'Thank you for contacting us! We will get back to you soon.',
+              })}
             </p>
           )}
 
           {status === 'error' && (
             <p className="text-center text-red-500 animate-in fade-in duration-300">
-              There was an error. Please try again.
+              {t('contact:feedback.error', { defaultValue: 'There was an error. Please try again.' })}
             </p>
           )}
         </form>
diff --git a/components/download-section.tsx b/components/download-section.tsx
index bf8d8f4..8a74f2b 100644
--- a/components/download-section.tsx
+++ b/components/download-section.tsx
@@ -1,51 +1,57 @@
+"use client"
+
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
-import { Download, Terminal, Package } from "lucide-react"
+import { Download, Package } from "lucide-react"
+import { useTranslation } from "react-i18next"
 
 const downloads = [
   {
     icon: Package,
-    platform: "macOS Intel processors",
+    key: "macIntel",
+    defaultPlatform: "macOS Intel processors",
     version: "v0.1.15",
     size: "487 MB",
-    format: "binary",
+    defaultFormat: "binary",
     link: "https://dashai.nyc3.cdn.digitaloceanspaces.com/executables/DashAI-launcher-cpu-x86_64",
   },
   {
     icon: Package,
-    platform: "macOS ARM processors",
+    key: "macArm",
+    defaultPlatform: "macOS ARM processors",
     version: "v0.1.15",
     size: "381 MB",
-    format: "binary",
+    defaultFormat: "binary",
     link: "https://dashai.nyc3.cdn.digitaloceanspaces.com/executables/DashAI-launcher-cpu-arm64",
   },
   {
     icon: Package,
-    platform: "Windows",
+    key: "windows",
+    defaultPlatform: "Windows",
     version: "v0.1.15",
     size: "434 MB",
-    format: ".exe",
+    defaultFormat: ".exe",
     link: "https://dashai.nyc3.cdn.digitaloceanspaces.com/executables/DashAI-launcher-cpu.exe",
   },
-  // {
-  //   icon: Package,
-  //   platform: "Docker",
-  //   version: "latest",
-  //   size: "~300 MB",
-  //   format: "container",
-  //   link: "#",
-  // },
 ]
 
 export function DownloadSection() {
+  const { t } = useTranslation()
   return (
     <section id="download" className="py-24 px-4 bg-secondary/30">
       <div className="container mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-5xl font-bold mb-2 text-balance">Download DashAI</h2>
-          <span className="block text-base text-primary font-semibold mb-4">Beta Version</span>
+          <h2 className="text-3xl md:text-5xl font-bold mb-2 text-balance">
+            {t("download:title", { defaultValue: "Download DashAI" })}
+          </h2>
+          <span className="block text-base text-primary font-semibold mb-4">
+            {t("download:badge", { defaultValue: "Beta Version" })}
+          </span>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-          This early version lets you explore DashAI’s main features. We appreciate your feedback to help us improve before the official release.
+            {t("download:description", {
+              defaultValue:
+                "This early version lets you explore DashAI’s main features. We appreciate your feedback to help us improve before the official release.",
+            })}
           </p>
         </div>
 
@@ -53,21 +59,27 @@ export function DownloadSection() {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
             {downloads.map((download, index) => {
               const Icon = download.icon
+              const platform = t(`download:cards.${download.key}.platform`, {
+                defaultValue: download.defaultPlatform,
+              })
+              const format = t(`download:cards.${download.key}.format`, {
+                defaultValue: download.defaultFormat,
+              })
               return (
                 <Card
-                  key={index}
+                  key={download.key}
                   className="bg-card border-border hover:border-primary/50 transition-all duration-300 group cursor-pointer"
                 >
                   <CardContent className="p-6">
                     <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                       <Icon className="h-6 w-6 text-primary" />
                     </div>
-                    <h3 className="text-xl font-semibold mb-2">{download.platform}</h3>
+                    <h3 className="text-xl font-semibold mb-2">{platform}</h3>
                     <div className="space-y-1 mb-4">
                       <p className="text-sm text-muted-foreground">
                         {download.version} • {download.size}
                       </p>
-                      <p className="text-xs text-muted-foreground font-mono">{download.format}</p>
+                      <p className="text-xs text-muted-foreground font-mono">{format}</p>
                     </div>
                     <Button 
                       className="w-full bg-primary hover:bg-primary/90 text-primary-foreground cursor-pointer" 
@@ -76,7 +88,7 @@ export function DownloadSection() {
                     >
                       <a href={download.link} download>
                         <Download className="mr-2 h-4 w-4" />
-                        Download
+                        {t("download:button", { defaultValue: "Download" })}
                       </a>
                     </Button>
                   </CardContent>
@@ -89,12 +101,20 @@ export function DownloadSection() {
             <CardContent className="p-8">
               <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                 <div>
-                  <h3 className="text-xl font-semibold mb-2">Install via pip</h3>
-                  <p className="text-muted-foreground text-sm">For developers who prefer command-line installation</p>
+                  <h3 className="text-xl font-semibold mb-2">
+                    {t("download:pip.title", { defaultValue: "Install via pip" })}
+                  </h3>
+                  <p className="text-muted-foreground text-sm">
+                    {t("download:pip.subtitle", {
+                      defaultValue: "For developers who prefer command-line installation",
+                    })}
+                  </p>
                 </div>
                 <div className="w-full md:w-auto">
                   <div className="bg-secondary/50 rounded-lg p-4 font-mono text-sm border border-border">
-                    <code className="text-primary">pip install dashai</code>
+                    <code className="text-primary">
+                      {t("download:pip.command", { defaultValue: "pip install dashai" })}
+                    </code>
                   </div>
                 </div>
               </div>
diff --git a/components/features-section.tsx b/components/features-section.tsx
index c6edc15..2036451 100644
--- a/components/features-section.tsx
+++ b/components/features-section.tsx
@@ -1,61 +1,53 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { Trans, useTranslation } from "react-i18next"
 
-const features = [
+const featureItems = [
   {
     id: 1,
-    title: "Data Explorer",
-    description:
-      "Explore, clean, and prepare your data in an intuitive visual environment: perform dynamic, visual, and guided exploratory data analyses (EDA) directly within DashAI.",
+    key: "dataExplorer",
     image: "features/eda_module.png",
-    features: [
-      "Manage all your datasets in one place",
-      "Apply different conversions to your datasets easily",
-      "Generate customizable charts",
-    ],
+    defaultTitle: "Data Explorer",
+    defaultDescription:
+      "Explore, clean, and prepare your data in an intuitive visual environment: perform dynamic, visual, and guided exploratory data analyses (EDA) directly within DashAI.",
   },
   {
     id: 2,
-    title: "ML Experimentation",
-    description:
-      "Set up and manage your ML experiments with an intuitive interface. Select models, configure its hyperparameters, and define evaluation metrics without writing a single line of code.",
+    key: "mlExperimentation",
     image: "features/ml_experimentation.png",
-    features: ["Model selection by task", "Experiment tracking", "One-click experiment runs"],
+    defaultTitle: "ML Experimentation",
+    defaultDescription:
+      "Set up and manage your ML experiments with an intuitive interface. Select models, configure its hyperparameters, and define evaluation metrics without writing a single line of code.",
   },
   {
     id: 3,
-    title: "Results Visualization",
-    description:
-      "Compare model performance across multiple experiments. Interactive dashboards help you identify the best performing models and understand their behavior through comprehensive metrics and visualizations.",
+    key: "resultsVisualization",
     image: "features/results.png",
-    features: ["Performance comparison", "Interactive dashboards", "Custom visualizations"],
+    defaultTitle: "Results Visualization",
+    defaultDescription:
+      "Compare model performance across multiple experiments. Interactive dashboards help you identify the best performing models and understand their behavior through comprehensive metrics and visualizations.",
   },
   {
     id: 4,
-    title: "Model Explanability",
-    description:
-      "Understand how your models make decisions. Generate feature importance plots, SHAP values, and interpretable visualizations that help you trust and debug your AI models.",
+    key: "modelExplainability",
     image: "features/explainability_module.png",
-    features: [
-      "Visual Explanations",
-      "Global y Local explicadores",
-      "Model inspection and analysis"
-    ],
+    defaultTitle: "Model Explainability",
+    defaultDescription:
+      "Understand how your models make decisions. Generate feature importance plots, SHAP values, and interpretable visualizations that help you trust and debug your AI models.",
   },
   {
     id: 5,
-    title: "Generative Module",
-    description:
-      "Experiment with generative AI models seamlessly. Generate text, images, and other content while visualizing the generation process and fine-tuning parameters in real-time.",
+    key: "generativeModule",
     image: "features/generative_module.png",
-    features: ["Multi-modal generation", "Real-time preview", "Parameter control"],
+    defaultTitle: "Generative Module",
+    defaultDescription:
+      "Experiment with generative AI models seamlessly. Generate text, images, and other content while visualizing the generation process and fine-tuning parameters in real-time.",
   },
 ]
 
 export function FeaturesSection() {
+  const { t } = useTranslation()
   const [visibleFeatures, setVisibleFeatures] = useState<Set<number>>(new Set())
   const featureRefs = useRef<(HTMLDivElement | null)[]>([])
 
@@ -87,22 +79,33 @@ export function FeaturesSection() {
     <section id="features" className="py-20 bg-black">
       <div className="container mx-auto px-4">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance text-white">
-            Powerful <span className="text-primary">Features</span>
-          </h2>
+          <Trans i18nKey="features:heading">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance text-white">
+              Powerful <span className="text-primary">Features</span>
+            </h2>
+          </Trans>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-            Discover the powerful features that make DashAI the ultimate platform for AI experimentation
+            {t("features:description", {
+              defaultValue:
+                "Discover the powerful features that make DashAI the ultimate platform for AI experimentation",
+            })}
           </p>
         </div>
 
         <div className="space-y-32">
-          {features.map((feature, index) => {
+          {featureItems.map((feature, index) => {
             const isEven = index % 2 === 0
             const isVisible = visibleFeatures.has(index)
+            const title = t(`features:items.${feature.key}.title`, {
+              defaultValue: feature.defaultTitle,
+            })
+            const description = t(`features:items.${feature.key}.description`, {
+              defaultValue: feature.defaultDescription,
+            })
 
             return (
               <div
-                key={index}
+                key={feature.id}
                 ref={(el) => {
                   featureRefs.current[index] = el
                 }}
@@ -113,9 +116,9 @@ export function FeaturesSection() {
                 }`}
               >
                 <div className="flex-1 space-y-4">
-                  <h3 className="text-3xl md:text-4xl font-bold">{feature.title}</h3>
+                  <h3 className="text-3xl md:text-4xl font-bold">{title}</h3>
                   <p className="text-lg text-muted-foreground leading-relaxed">
-                    {feature.description}
+                    {description}
                   </p>
                 </div>
 
@@ -123,7 +126,7 @@ export function FeaturesSection() {
                   <div className="relative rounded-xl overflow-hidden border border-border shadow-2xl">
                     <img
                       src={feature.image || "/placeholder.svg"}
-                      alt={feature.title}
+                      alt={feature.defaultTitle}
                       className="w-full h-auto"
                     />
                     <div className="absolute inset-0 bg-gradient-to-t from-background/20 to-transparent pointer-events-none" />
diff --git a/components/footer.tsx b/components/footer.tsx
index 5525f29..63de12f 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,96 +1,127 @@
+"use client"
+
 import { Github, Twitter, Linkedin } from "lucide-react"
 import { siteConfig } from "@/lib/config"
+import { useTranslation } from "react-i18next"
+
+const productLinks = [
+  {
+    href: "#features",
+    defaultLabel: "Features",
+    key: "features",
+    external: false,
+  },
+  {
+    href: siteConfig.resources.changelog,
+    defaultLabel: "Changelog",
+    key: "changelog",
+    external: true,
+  },
+]
+
+const resourceLinks = [
+  {
+    href: siteConfig.docs.url,
+    defaultLabel: "Documentation",
+    key: "documentation",
+    external: true,
+  },
+]
+
+const communityLinks = [
+  {
+    href: siteConfig.github.url,
+    defaultLabel: "GitHub",
+    key: "github",
+    external: true,
+  },
+  {
+    href: siteConfig.github.contribute,
+    defaultLabel: "Contribute",
+    key: "contribute",
+    external: true,
+  },
+]
 
 export function Footer() {
+  const { t } = useTranslation()
   return (
     <footer className="border-t border-border py-12 px-4">
       <div className="container mx-auto">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
           <div>
-            <h3 className="font-bold text-lg mb-4 text-primary">DashAI</h3>
+            <h3 className="font-bold text-lg mb-4 text-primary">
+              {t("footer:brand.title", { defaultValue: "DashAI" })}
+            </h3>
             <p className="text-sm text-muted-foreground leading-relaxed">
-              {"Open source platform to democratize access to artificial intelligence."}
+              {t("footer:brand.description", {
+                defaultValue: "Open source platform to democratize access to artificial intelligence.",
+              })}
             </p>
           </div>
           <div>
-            <h4 className="font-semibold mb-4">Product</h4>
+            <h4 className="font-semibold mb-4">
+              {t("footer:sections.product.title", { defaultValue: "Product" })}
+            </h4>
             <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>
-                <a href="#features" className="hover:text-primary transition-colors">
-                  {"Features"}
-                </a>
-              </li>
-              {/* <li>
-                <a href="#modules" className="hover:text-primary transition-colors">
-                  {"Modules"}
-                </a>
-              </li> */}
-              {/* <li>
-                <a href={siteConfig.resources.roadmap} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Roadmap"}
-                </a>
-              </li> */}
-              <li>
-                <a href={siteConfig.resources.changelog} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Changelog"}
-                </a>
-              </li>
+              {productLinks.map((link) => (
+                <li key={link.key}>
+                  <a
+                    href={link.href}
+                    target={link.external ? "_blank" : undefined}
+                    rel={link.external ? "noopener noreferrer" : undefined}
+                    className="hover:text-primary transition-colors"
+                  >
+                    {t(`footer:sections.product.links.${link.key}`, { defaultValue: link.defaultLabel })}
+                  </a>
+                </li>
+              ))}
             </ul>
           </div>
           <div>
-            <h4 className="font-semibold mb-4">Resources</h4>
+            <h4 className="font-semibold mb-4">
+              {t("footer:sections.resources.title", { defaultValue: "Resources" })}
+            </h4>
             <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>
-                <a href={siteConfig.docs.url} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Documentation"}
-                </a>
-              </li>
-              {/* <li>
-                <a href={siteConfig.docs.tutorials} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Tutorials"}
-                </a>
-              </li> */}
-              {/* <li>
-                <a href={siteConfig.docs.apiReference} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"API Reference"}
-                </a>
-              </li> */}
-              {/* <li>
-                <a href={siteConfig.docs.examples} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Examples"}
-                </a>
-              </li> */}
+              {resourceLinks.map((link) => (
+                <li key={link.key}>
+                  <a
+                    href={link.href}
+                    target={link.external ? "_blank" : undefined}
+                    rel={link.external ? "noopener noreferrer" : undefined}
+                    className="hover:text-primary transition-colors"
+                  >
+                    {t(`footer:sections.resources.links.${link.key}`, { defaultValue: link.defaultLabel })}
+                  </a>
+                </li>
+              ))}
             </ul>
           </div>
           <div>
-            <h4 className="font-semibold mb-4">Community</h4>
+            <h4 className="font-semibold mb-4">
+              {t("footer:sections.community.title", { defaultValue: "Community" })}
+            </h4>
             <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>
-                <a href={siteConfig.github.url} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"GitHub"}
-                </a>
-              </li>
-              {/* <li>
-                <a href={siteConfig.social.discord} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Discord"}
-                </a>
-              </li>
-              <li>
-                <a href={siteConfig.social.twitter} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Twitter"}
-                </a>
-              </li> */}
-              <li>
-                <a href={siteConfig.github.contribute} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
-                  {"Contribute"}
-                </a>
-              </li>
+              {communityLinks.map((link) => (
+                <li key={link.key}>
+                  <a
+                    href={link.href}
+                    target={link.external ? "_blank" : undefined}
+                    rel={link.external ? "noopener noreferrer" : undefined}
+                    className="hover:text-primary transition-colors"
+                  >
+                    {t(`footer:sections.community.links.${link.key}`, { defaultValue: link.defaultLabel })}
+                  </a>
+                </li>
+              ))}
             </ul>
           </div>
         </div>
 
         <div className="border-t border-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-sm text-muted-foreground">{"© 2025 DashAI"}</p>
+          <p className="text-sm text-muted-foreground">
+            {t("footer:copyright", { defaultValue: "© 2025 DashAI" })}
+          </p>
           <div className="flex gap-4">
             <a href={siteConfig.github.url} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
               <Github className="h-5 w-5" />
diff --git a/components/hero-section.tsx b/components/hero-section.tsx
index dd187bb..0674659 100644
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -4,8 +4,10 @@ import { Button } from "@/components/ui/button"
 import { Github, BookOpen, Download } from "lucide-react"
 import Image from "next/image"
 import { siteConfig } from "@/lib/config"
+import { useTranslation, Trans } from "react-i18next"
 
 export function HeroSection() {
+  const { t } = useTranslation()
   const scrollToSection = (id: string) => {
     const element = document.getElementById(id)
     if (element) {
@@ -37,15 +39,17 @@ export function HeroSection() {
             />
           </div>
 
-          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-balance leading-tight">
-            {"The "}
-            <span className="text-primary">open source</span>
-            {" platform for AI experimentation"}
-          </h1>
+          <Trans i18nKey="hero:title" >
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-balance leading-tight">
+              {"The "}
+              <span className="text-primary">open source</span>
+              {" platform for AI experimentation"}
+            </h1>
+          </Trans>
 
           <p className="text-lg md:text-xl text-muted-foreground max-w-3xl leading-relaxed">
             {
-              "Integrate, experiment, and visualize AI model results through an intuitive visual interface. Built with an extensible plugin architecture for limitless customization."
+              t("hero:description", "Integrate, experiment, and visualize AI model results through an intuitive visual interface. Built with an extensible plugin architecture for limitless customization.")
             }
           </p>
 
@@ -56,7 +60,7 @@ export function HeroSection() {
               onClick={() => scrollToSection("download")}
             >
               <Download className="mr-2 h-5 w-5" />
-              {"Download Now"}
+              {t("hero:download")}
             </Button>
             <Button
               size="lg"
@@ -66,7 +70,7 @@ export function HeroSection() {
             >
               <a href={siteConfig.github.url} target="_blank" rel="noopener noreferrer">
                 <Github className="mr-2 h-5 w-5" />
-                {"View on GitHub"}
+                {t("hero:viewOnGithub", "View on GitHub")}
               </a>
             </Button>
             <Button 
@@ -77,7 +81,7 @@ export function HeroSection() {
             >
               <a href={siteConfig.docs.url} target="_blank" rel="noopener noreferrer">
                 <BookOpen className="mr-2 h-5 w-5" />
-                {"Documentation"}
+                {t("hero:documentation", "Documentation")}
               </a>
             </Button>
           </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index a9a99be..80b2969 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -2,14 +2,86 @@
 
 import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
-import { Download, Github, Menu, X } from "lucide-react"
+import { Download, Github, Menu, X, Globe, ChevronDown } from "lucide-react"
 import Image from "next/image"
 import { cn } from "@/lib/utils"
 import { siteConfig } from "@/lib/config"
+import { useTranslation } from "react-i18next"
+
+const LANGUAGES = [
+  { code: "en", label: "English", flag: "🇺🇸" },
+  { code: "es", label: "Español", flag: "🇨🇱" },
+]
+
+function LanguageSwitcher() {
+  const { i18n } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const currentLang = LANGUAGES.find((l) => l.code === i18n.language) ?? LANGUAGES[0]
+
+  const changeLanguage = (code: string) => {
+    i18n.changeLanguage(code)
+    setIsOpen(false)
+  }
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      if (!target.closest("[data-lang-switcher]")) setIsOpen(false)
+    }
+    document.addEventListener("mousedown", handler)
+    return () => document.removeEventListener("mousedown", handler)
+  }, [isOpen])
+
+  return (
+    <div className="relative" data-lang-switcher>
+      <button
+        onClick={() => setIsOpen((v) => !v)}
+        className={cn(
+          "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium",
+          "border border-border hover:border-primary/50 hover:bg-primary/5 transition-all duration-150",
+          isOpen && "border-primary/50 bg-primary/5",
+        )}
+        aria-label="Change language"
+      >
+        <Globe className="h-3.5 w-3.5 text-muted-foreground" />
+        <span>{currentLang.flag}</span>
+        <span className="hidden sm:inline text-xs">{currentLang.code.toUpperCase()}</span>
+        <ChevronDown
+          className={cn(
+            "h-3 w-3 text-muted-foreground transition-transform duration-150",
+            isOpen && "rotate-180",
+          )}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-1.5 w-40 rounded-lg border border-border bg-background/95 backdrop-blur-md shadow-lg py-1 z-50">
+          {LANGUAGES.map((lang) => (
+            <button
+              key={lang.code}
+              onClick={() => changeLanguage(lang.code)}
+              className={cn(
+                "w-full flex items-center gap-2.5 px-3 py-1.5 text-sm hover:bg-primary/10 transition-colors text-left",
+                i18n.language === lang.code && "text-primary font-medium bg-primary/5",
+              )}
+            >
+              <span>{lang.flag}</span>
+              <span>{lang.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export function Navbar() {
   const [isScrolled, setIsScrolled] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { t } = useTranslation()
 
   useEffect(() => {
     const handleScroll = () => {
@@ -31,7 +103,9 @@ export function Navbar() {
     <nav
       className={cn(
         "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
-        isScrolled || isMobileMenuOpen ? "bg-background/95 backdrop-blur-md border-b border-border shadow-lg" : "bg-transparent",
+        isScrolled || isMobileMenuOpen
+          ? "bg-background/95 backdrop-blur-md border-b border-border shadow-lg"
+          : "bg-transparent",
       )}
     >
       <div className="container mx-auto px-4">
@@ -43,49 +117,35 @@ export function Navbar() {
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center gap-8">
-            <button
-              onClick={() => scrollToSection("features")}
-              className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-            >
-              Features
+            <button onClick={() => scrollToSection("features")} className="text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+              {t("navbar:features")}
             </button>
-            <button
-              onClick={() => scrollToSection("download")}
-              className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-            >
-              Download
+            <button onClick={() => scrollToSection("download")} className="text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+              {t("navbar:download")}
             </button>
-            <button
-              onClick={() => scrollToSection("community")}
-              className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-            >
-              Community
+            <button onClick={() => scrollToSection("community")} className="text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+              {t("navbar:community")}
             </button>
-            <button
-              onClick={() => scrollToSection("support")}
-              className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-            >
-              Support
+            <button onClick={() => scrollToSection("support")} className="text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+              {t("navbar:support")}
             </button>
-            <button
-              onClick={() => scrollToSection("contact")}
-              className="text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-            >
-              Contact
+            <button onClick={() => scrollToSection("contact")} className="text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+              {t("navbar:contact")}
             </button>
           </div>
 
           {/* Desktop CTA Buttons */}
           <div className="hidden md:flex items-center gap-3">
-            <Button 
-              variant="outline" 
-              size="sm" 
+            <LanguageSwitcher />
+            <Button
+              variant="outline"
+              size="sm"
               className="border-primary text-foreground hover:bg-primary/10 hover:text-foreground dark:hover:bg-primary/20 dark:hover:text-foreground bg-transparent"
               asChild
             >
               <a href={siteConfig.github.url} target="_blank" rel="noopener noreferrer">
                 <Github className="mr-2 h-4 w-4" />
-                GitHub
+                {t("navbar:github")}
               </a>
             </Button>
             <Button
@@ -94,60 +154,48 @@ export function Navbar() {
               onClick={() => scrollToSection("download")}
             >
               <Download className="mr-2 h-4 w-4" />
-              Download
+              {t("navbar:download")}
             </Button>
           </div>
 
           {/* Mobile Menu Button */}
-          <button className="md:hidden p-2" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
-            {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
-          </button>
+          <div className="md:hidden flex items-center gap-2">
+            <LanguageSwitcher />
+            <button className="p-2" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
+              {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            </button>
+          </div>
         </div>
 
         {/* Mobile Menu */}
         {isMobileMenuOpen && (
           <div className="md:hidden py-4 border-t border-border">
             <div className="flex flex-col gap-4">
-              <button
-                onClick={() => scrollToSection("features")}
-                className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-              >
-                Features
+              <button onClick={() => scrollToSection("features")} className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+                {t("navbar:features")}
               </button>
-              <button
-                onClick={() => scrollToSection("download")}
-                className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-              >
-                Download
+              <button onClick={() => scrollToSection("download")} className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+                {t("navbar:download")}
               </button>
-              <button
-                onClick={() => scrollToSection("community")}
-                className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-              >
-                Community
+              <button onClick={() => scrollToSection("community")} className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+                {t("navbar:community")}
               </button>
-              <button
-                onClick={() => scrollToSection("support")}
-                className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-              >
-                Support
+              <button onClick={() => scrollToSection("support")} className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+                {t("navbar:support")}
               </button>
-              <button
-                onClick={() => scrollToSection("contact")}
-                className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer"
-              >
-                Contact
+              <button onClick={() => scrollToSection("contact")} className="text-left text-sm font-medium hover:text-primary transition-colors cursor-pointer">
+                {t("navbar:contact")}
               </button>
               <div className="flex flex-col gap-2 pt-2">
-                <Button 
-                  variant="outline" 
-                  size="sm" 
+                <Button
+                  variant="outline"
+                  size="sm"
                   className="border-primary text-foreground hover:bg-primary/10 hover:text-foreground dark:hover:bg-primary/20 dark:hover:text-foreground bg-transparent w-full justify-start"
                   asChild
                 >
                   <a href={siteConfig.github.url} target="_blank" rel="noopener noreferrer">
                     <Github className="mr-2 h-4 w-4" />
-                    GitHub
+                    {t("navbar:github")}
                   </a>
                 </Button>
               </div>
@@ -157,4 +205,4 @@ export function Navbar() {
       </div>
     </nav>
   )
-}
+}
\ No newline at end of file
diff --git a/components/supported-by-section.tsx b/components/supported-by-section.tsx
index e8c5c16..fcecccb 100644
--- a/components/supported-by-section.tsx
+++ b/components/supported-by-section.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { Card, CardContent } from "@/components/ui/card"
+import { useTranslation } from "react-i18next";
 
 const participatingInstitutions = [
   {
@@ -45,13 +46,15 @@ const partnerOrganizations = [
 ]
 
 export function SupportedBySection() {
+
+  const { t } = useTranslation();
   return (
     <section id="support" className="py-24 px-4 bg-secondary/30">
       <div className="container mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance">Supported By</h2>
+          <h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance">{t("supportedBy:title")}</h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-            DashAI is made possible thanks to the collaboration and support of leading institutions and organizations
+            {t("supportedBy:description")}
           </p>
         </div>
 
diff --git a/package.json b/package.json
index bcd471b..732800f 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,8 @@
     "cmdk": "1.0.4",
     "date-fns": "4.1.0",
     "embla-carousel-react": "8.5.1",
+    "i18next": "^25.8.17",
+    "i18next-browser-languagedetector": "^8.2.1",
     "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
     "next": "16.0.0",
@@ -52,6 +54,7 @@
     "react-day-picker": "9.8.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.60.0",
+    "react-i18next": "^16.5.6",
     "react-resizable-panels": "^2.1.7",
     "recharts": "2.15.4",
     "sonner": "^1.7.4",
diff --git a/public/locales/en/community.json b/public/locales/en/community.json
new file mode 100644
index 0000000..bc92be1
--- /dev/null
+++ b/public/locales/en/community.json
@@ -0,0 +1,18 @@
+{
+  "title": "Built and extended by the community",
+  "description": "DashAI's plugin architecture enables anyone to contribute new capabilities. Build plugins, improve the core, and shape the future of open source AI tools.",
+  "cards": {
+    "github": {
+      "title": "GitHub",
+      "description": "Explore the source code"
+    },
+    "docs": {
+      "title": "Docs",
+      "description": "Visit the technical documentation"
+    },
+    "contribute": {
+      "title": "Contribute",
+      "description": "Improve the project"
+    }
+  }
+}
diff --git a/public/locales/en/contact.json b/public/locales/en/contact.json
new file mode 100644
index 0000000..941b295
--- /dev/null
+++ b/public/locales/en/contact.json
@@ -0,0 +1,18 @@
+{
+  "title": "Contact Us",
+  "description": "Have questions or feedback about DashAI? Feel free to get in touch — we’d love to hear from you.",
+  "fields": {
+    "name": "Name",
+    "email": "Email",
+    "message": "Message"
+  },
+  "status": {
+    "idle": "Send message",
+    "sending": "Sending...",
+    "sent": "Sent!"
+  },
+  "feedback": {
+    "success": "Thank you for contacting us! We will get back to you soon.",
+    "error": "There was an error. Please try again."
+  }
+}
diff --git a/public/locales/en/download.json b/public/locales/en/download.json
new file mode 100644
index 0000000..a634b17
--- /dev/null
+++ b/public/locales/en/download.json
@@ -0,0 +1,25 @@
+{
+  "title": "Download DashAI",
+  "badge": "Beta Version",
+  "description": "This early version lets you explore DashAI’s main features. We appreciate your feedback to help us improve before the official release.",
+  "button": "Download",
+  "cards": {
+    "macIntel": {
+      "platform": "macOS Intel processors",
+      "format": "binary"
+    },
+    "macArm": {
+      "platform": "macOS ARM processors",
+      "format": "binary"
+    },
+    "windows": {
+      "platform": "Windows",
+      "format": ".exe"
+    }
+  },
+  "pip": {
+    "title": "Install via pip",
+    "subtitle": "For developers who prefer command-line installation",
+    "command": "pip install dashai"
+  }
+}
diff --git a/public/locales/en/features.json b/public/locales/en/features.json
new file mode 100644
index 0000000..60f3d06
--- /dev/null
+++ b/public/locales/en/features.json
@@ -0,0 +1,26 @@
+{
+  "heading": "<0>Powerful <1>Features</1></0>",
+  "description": "Discover the powerful features that make DashAI the ultimate platform for AI experimentation",
+  "items": {
+    "dataExplorer": {
+      "title": "Data Explorer",
+      "description": "Explore, clean, and prepare your data in an intuitive visual environment: perform dynamic, visual, and guided exploratory data analyses (EDA) directly within DashAI."
+    },
+    "mlExperimentation": {
+      "title": "ML Experimentation",
+      "description": "Set up and manage your ML experiments with an intuitive interface. Select models, configure hyperparameters, and define evaluation metrics without writing a single line of code."
+    },
+    "resultsVisualization": {
+      "title": "Results Visualization",
+      "description": "Compare model performance across multiple experiments. Interactive dashboards help you identify the best performing models and understand their behavior through comprehensive metrics and visualizations."
+    },
+    "modelExplainability": {
+      "title": "Model Explainability",
+      "description": "Understand how your models make decisions. Generate feature importance plots, SHAP values, and interpretable visualizations that help you trust and debug your AI models."
+    },
+    "generativeModule": {
+      "title": "Generative Module",
+      "description": "Experiment with generative AI models seamlessly. Generate text, images, and other content while visualizing the generation process and fine-tuning parameters in real-time."
+    }
+  }
+}
diff --git a/public/locales/en/footer.json b/public/locales/en/footer.json
new file mode 100644
index 0000000..7b131f1
--- /dev/null
+++ b/public/locales/en/footer.json
@@ -0,0 +1,29 @@
+{
+  "brand": {
+    "title": "DashAI",
+    "description": "Open source platform to democratize access to artificial intelligence."
+  },
+  "sections": {
+    "product": {
+      "title": "Product",
+      "links": {
+        "features": "Features",
+        "changelog": "Changelog"
+      }
+    },
+    "resources": {
+      "title": "Resources",
+      "links": {
+        "documentation": "Documentation"
+      }
+    },
+    "community": {
+      "title": "Community",
+      "links": {
+        "github": "GitHub",
+        "contribute": "Contribute"
+      }
+    }
+  },
+  "copyright": "© 2025 DashAI"
+}
diff --git a/public/locales/en/hero.json b/public/locales/en/hero.json
new file mode 100644
index 0000000..7ec5cea
--- /dev/null
+++ b/public/locales/en/hero.json
@@ -0,0 +1,7 @@
+{
+  "description": "Integrate, experiment, and visualize AI model results through an intuitive visual interface. Built with an extensible plugin architecture for limitless customization.",
+  "documentation": "Documentation",
+  "download": "hero:download",
+  "title": "<0>The <1>open source</1> platform for AI experimentation</0>",
+  "viewOnGithub": "View on GitHub"
+}
diff --git a/public/locales/en/navbar.json b/public/locales/en/navbar.json
new file mode 100644
index 0000000..0cc6ebc
--- /dev/null
+++ b/public/locales/en/navbar.json
@@ -0,0 +1,8 @@
+{
+  "community": "Community",
+  "contact": "Contact",
+  "download": "Download",
+  "features": "Features",
+  "github": "GitHub",
+  "support": "Support"
+}
diff --git a/public/locales/en/supportedBy.json b/public/locales/en/supportedBy.json
new file mode 100644
index 0000000..b4b3418
--- /dev/null
+++ b/public/locales/en/supportedBy.json
@@ -0,0 +1,4 @@
+{
+  "description": "DashAI is made possible thanks to the collaboration and support of leading institutions and organizations",
+  "title": "Supported By"
+}
diff --git a/public/locales/es/community.json b/public/locales/es/community.json
new file mode 100644
index 0000000..ee33ac5
--- /dev/null
+++ b/public/locales/es/community.json
@@ -0,0 +1,18 @@
+{
+  "title": "Construido y ampliado por la comunidad",
+  "description": "La arquitectura de plugins de DashAI permite que cualquiera aporte nuevas capacidades. Crea plugins, mejora el núcleo y da forma al futuro de las herramientas de IA de código abierto.",
+  "cards": {
+    "github": {
+      "title": "GitHub",
+      "description": "Explora el código fuente"
+    },
+    "docs": {
+      "title": "Documentación",
+      "description": "Visita la documentación técnica"
+    },
+    "contribute": {
+      "title": "Contribuye",
+      "description": "Mejora el proyecto"
+    }
+  }
+}
diff --git a/public/locales/es/contact.json b/public/locales/es/contact.json
new file mode 100644
index 0000000..f652b26
--- /dev/null
+++ b/public/locales/es/contact.json
@@ -0,0 +1,18 @@
+{
+  "title": "Contáctanos",
+  "description": "¿Tienes preguntas o comentarios sobre DashAI? Ponte en contacto, nos encantará saber de ti.",
+  "fields": {
+    "name": "Nombre",
+    "email": "Correo electrónico",
+    "message": "Mensaje"
+  },
+  "status": {
+    "idle": "Enviar mensaje",
+    "sending": "Enviando...",
+    "sent": "¡Enviado!"
+  },
+  "feedback": {
+    "success": "¡Gracias por contactarnos! Te responderemos pronto.",
+    "error": "Ocurrió un error. Inténtalo nuevamente."
+  }
+}
diff --git a/public/locales/es/download.json b/public/locales/es/download.json
new file mode 100644
index 0000000..9665881
--- /dev/null
+++ b/public/locales/es/download.json
@@ -0,0 +1,25 @@
+{
+  "title": "Descarga DashAI",
+  "badge": "Versión Beta",
+  "description": "Esta versión temprana te permite explorar las principales funciones de DashAI. Agradecemos tus comentarios para ayudarnos a mejorar antes del lanzamiento oficial.",
+  "button": "Descargar",
+  "cards": {
+    "macIntel": {
+      "platform": "macOS con Intel",
+      "format": "binario"
+    },
+    "macArm": {
+      "platform": "macOS con ARM",
+      "format": "binario"
+    },
+    "windows": {
+      "platform": "Windows",
+      "format": ".exe"
+    }
+  },
+  "pip": {
+    "title": "Instala con pip",
+    "subtitle": "Para desarrolladores que prefieren la instalación por línea de comandos",
+    "command": "pip install dashai"
+  }
+}
diff --git a/public/locales/es/features.json b/public/locales/es/features.json
new file mode 100644
index 0000000..55f1c23
--- /dev/null
+++ b/public/locales/es/features.json
@@ -0,0 +1,26 @@
+{
+  "heading": "<0>Funcionalidades <1>potentes</1></0>",
+  "description": "Descubre las potentes funcionalidades que hacen de DashAI la plataforma definitiva para la experimentación con IA",
+  "items": {
+    "dataExplorer": {
+      "title": "Explorador de Datos",
+      "description": "Explora, limpia y prepara tus datos en un entorno visual intuitivo: realiza análisis exploratorios dinámicos y guiados directamente dentro de DashAI."
+    },
+    "mlExperimentation": {
+      "title": "Experimentación ML",
+      "description": "Configura y gestiona tus experimentos de ML con una interfaz intuitiva. Selecciona modelos, ajusta hiperparámetros y define métricas de evaluación sin escribir una sola línea de código."
+    },
+    "resultsVisualization": {
+      "title": "Visualización de Resultados",
+      "description": "Compara el rendimiento de modelos a lo largo de múltiples experimentos. Los paneles interactivos te ayudan a identificar los mejores modelos y comprender su comportamiento mediante métricas y visualizaciones completas."
+    },
+    "modelExplainability": {
+      "title": "Explicabilidad del Modelo",
+      "description": "Comprende cómo toman decisiones tus modelos. Genera gráficos de importancia de variables, valores SHAP y visualizaciones interpretables que te ayudan a confiar y depurar tus modelos de IA."
+    },
+    "generativeModule": {
+      "title": "Módulo Generativo",
+      "description": "Experimenta con modelos de IA generativa sin fricciones. Genera texto, imágenes y otros contenidos mientras visualizas el proceso de generación y ajustas parámetros en tiempo real."
+    }
+  }
+}
diff --git a/public/locales/es/footer.json b/public/locales/es/footer.json
new file mode 100644
index 0000000..54354a4
--- /dev/null
+++ b/public/locales/es/footer.json
@@ -0,0 +1,29 @@
+{
+  "brand": {
+    "title": "DashAI",
+    "description": "Plataforma de código abierto para democratizar el acceso a la inteligencia artificial."
+  },
+  "sections": {
+    "product": {
+      "title": "Producto",
+      "links": {
+        "features": "Características",
+        "changelog": "Registro de cambios"
+      }
+    },
+    "resources": {
+      "title": "Recursos",
+      "links": {
+        "documentation": "Documentación"
+      }
+    },
+    "community": {
+      "title": "Comunidad",
+      "links": {
+        "github": "GitHub",
+        "contribute": "Contribuir"
+      }
+    }
+  },
+  "copyright": "© 2025 DashAI"
+}
diff --git a/public/locales/es/hero.json b/public/locales/es/hero.json
new file mode 100644
index 0000000..e09afbe
--- /dev/null
+++ b/public/locales/es/hero.json
@@ -0,0 +1,7 @@
+{
+  "description": "Integra, experimenta y visualiza los resultados de los modelos de IA a través de una interfaz visual intuitiva. Construido con una arquitectura de plugins extensible para una personalización ilimitada.",
+  "documentation": "Documentación",
+  "download": "Descargar",
+  "title": "<0>La plataforma de <1>codigo abierto</1> para experimentación con IA</0>",
+  "viewOnGithub": "Ver en GitHub"
+}
diff --git a/public/locales/es/navbar.json b/public/locales/es/navbar.json
new file mode 100644
index 0000000..9aff466
--- /dev/null
+++ b/public/locales/es/navbar.json
@@ -0,0 +1,8 @@
+{
+  "community": "Comunidad",
+  "contact": "Contacto",
+  "download": "Descarga",
+  "features": "Características",
+  "github": "GitHub",
+  "support": "Soporte"
+}
diff --git a/public/locales/es/supportedBy.json b/public/locales/es/supportedBy.json
new file mode 100644
index 0000000..c2a73d3
--- /dev/null
+++ b/public/locales/es/supportedBy.json
@@ -0,0 +1,4 @@
+{
+  "description": "DashAI es posible gracias a la colaboración y el apoyo de instituciones y organizaciones líderes",
+  "title": "Soportado por"
+}