Landing page i18n - full Arabic translation

web/src/components/FAQ.jsx

@@ -1,40 +1,21 @@
 import { useState } from "react";
+import { useI18n } from "../i18n";
 import styles from "./FAQ.module.css";
 
-const items = [
-  {
-    q: "What is TORQ?",
-    a: "TORQ is an event-driven predictive-maintenance pipeline. When a machine faults, the AI autonomously diagnoses the root cause, generates a trilingual work order, and dispatches the right technician \u2014 all in real time.",
-  },
-  {
-    q: "How does the AI diagnosis work?",
-    a: "Hybrid search (dense + BM25 sparse + reranker) retrieves relevant manuals and past repairs. A reasoning LLM produces the diagnosis with grounded citations.",
-  },
-  {
-    q: "What machines are supported?",
-    a: "Any machine. If your equipment sends digital alerts, TORQ can pick them up. If your machines are fully offline, operators can submit faults directly through the dashboard form or from any connected device.",
-  },
-  {
-    q: "How do I integrate TORQ with my plant?",
-    a: "Four ways: (1) Use the dashboard form to report a fault manually. (2) Send fault data from your existing maintenance or ERP system. (3) Connect machines that already produce digital fault signals. (4) Run a small bridge on a device like a Raspberry Pi to connect older controllers — no special hardware required.",
-  },
-  {
-    q: "Is my data secure?",
-    a: "TORQ runs on your infrastructure. LLM calls go to your endpoint. Vector DB can be self-hosted. No data leaves your network.",
-  },
-  {
-    q: "What languages are supported?",
-    a: "English, French, and Arabic (trilingual work-order PDF). Dashboard and API in English.",
-  },
-  {
-    q: "Is this production-ready?",
-    a: "Hackathon prototype demonstrating the architecture. Production deployment requires hardening, auth, and scalability testing.",
-  },
-];
-
 export default function FAQ({ dark }) {
+  const { t } = useI18n();
   const [openIndex, setOpenIndex] = useState(null);
 
+  const items = [
+    { q: t("faq.q1"), a: t("faq.a1") },
+    { q: t("faq.q2"), a: t("faq.a2") },
+    { q: t("faq.q3"), a: t("faq.a3") },
+    { q: t("faq.q4"), a: t("faq.a4") },
+    { q: t("faq.q5"), a: t("faq.a5") },
+    { q: t("faq.q6"), a: t("faq.a6") },
+    { q: t("faq.q7"), a: t("faq.a7") },
+  ];
+
   return (
     <div className={`${styles.faq} ${dark ? styles.dark : ""}`}>
       {items.map((item, i) => (

web/src/components/Footer.jsx

@@ -1,39 +1,41 @@
 import { Link } from "react-router-dom";
 import styles from "./Footer.module.css";
 import FAQ from "./FAQ.jsx";
+import { useI18n } from "../i18n";
 
 export default function Footer() {
+  const { t } = useI18n();
   return (
     <footer className={styles.footer}>
       <div className={styles.inner}>
         <div className={styles.grid}>
           <div className={styles.col}>
-            <h4 className={styles.heading}>Product</h4>
-            <Link to="/" className={styles.link}>Features</Link>
-            <Link to="/" className={styles.link}>Pipeline</Link>
-            <Link to="/" className={styles.link}>How it works</Link>
-            <Link to="/dashboard" className={styles.link}>Dashboard</Link>
+            <h4 className={styles.heading}>{t("footer.product")}</h4>
+            <Link to="/" className={styles.link}>{t("footer.features")}</Link>
+            <Link to="/" className={styles.link}>{t("footer.pipeline")}</Link>
+            <Link to="/" className={styles.link}>{t("footer.how_it_works")}</Link>
+            <Link to="/dashboard" className={styles.link}>{t("footer.dashboard")}</Link>
           </div>
           <div className={styles.col}>
-            <h4 className={styles.heading}>Use Cases</h4>
-            <span className={styles.link}>Manufacturing</span>
-            <span className={styles.link}>Warehousing</span>
-            <span className={styles.link}>Energy</span>
+            <h4 className={styles.heading}>{t("footer.use_cases")}</h4>
+            <span className={styles.link}>{t("footer.manufacturing")}</span>
+            <span className={styles.link}>{t("footer.warehousing")}</span>
+            <span className={styles.link}>{t("footer.energy")}</span>
           </div>
           <div className={styles.col}>
-            <h4 className={styles.heading}>Support</h4>
-            <span className={styles.link}>Documentation</span>
-            <span className={styles.link}>API Reference</span>
-            <span className={styles.link}>Contact sales</span>
-            <span className={styles.link}>Status</span>
+            <h4 className={styles.heading}>{t("footer.support")}</h4>
+            <span className={styles.link}>{t("footer.documentation")}</span>
+            <span className={styles.link}>{t("footer.api_reference")}</span>
+            <span className={styles.link}>{t("footer.contact_sales")}</span>
+            <span className={styles.link}>{t("footer.status")}</span>
           </div>
           <div className={styles.col}>
-            <h4 className={styles.heading}>FAQ</h4>
+            <h4 className={styles.heading}>{t("footer.faq")}</h4>
             <FAQ dark={true} />
           </div>
         </div>
         <div className={styles.bottom}>
-          TORQ &middot; From fault code to fixed. Built for the factory floor.
+          {t("footer.tagline")}
         </div>
       </div>
     </footer>

web/src/components/Navbar.jsx

@@ -10,7 +10,7 @@ const LANGS = [
 ];
 
 export default function Navbar() {
-  const { locale, changeLocale } = useI18n();
+  const { locale, changeLocale, t } = useI18n();
 
   return (
     <nav className={styles.nav}>
@@ -26,7 +26,7 @@ export default function Navbar() {
           </svg>
         </Link>
         <div className={styles.right}>
-          <Link to="/dashboard" className={styles.link}>Dashboard</Link>
+          <Link to="/dashboard" className={styles.link}>{t("navbar.dashboard")}</Link>
           <div className={styles.langGroup}>
             {LANGS.map((l) => (
               <button

web/src/components/PipelineDiagram.jsx

@@ -1,14 +1,17 @@
+import { useI18n } from "../i18n";
 import styles from "./PipelineDiagram.module.css";
 
-const steps = [
-  { label: "1. Machine", desc: "Fault code emitted" },
-  { label: "2. TORQ Agent", desc: "AI diagnoses" },
-  { label: "3. Work Order", desc: "Trilingual PDF" },
-  { label: "4. Supervisor", desc: "Approval queue" },
-  { label: "5. Technician", desc: "Dispatched" },
-];
-
 export default function PipelineDiagram() {
+  const { t } = useI18n();
+
+  const steps = [
+    { label: t("pipeline.step_1_label"), desc: t("pipeline.step_1_desc") },
+    { label: t("pipeline.step_2_label"), desc: t("pipeline.step_2_desc") },
+    { label: t("pipeline.step_3_label"), desc: t("pipeline.step_3_desc") },
+    { label: t("pipeline.step_4_label"), desc: t("pipeline.step_4_desc") },
+    { label: t("pipeline.step_5_label"), desc: t("pipeline.step_5_desc") },
+  ];
+
   return (
     <div className={styles.wrapper}>
       {/* Desktop / Tablet View */}