added header

web/src/components/Navbar.jsx

@@ -15,7 +15,12 @@ export default function Navbar() {
   return (
     <nav className={styles.nav}>
       <div className={styles.inner}>
-        <Link to="/" className={styles.brand}>
+        <Link to="/" className={styles.brand} onClick={(e) => {
+          if (window.location.pathname === '/') {
+            e.preventDefault();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+        }}>
           <svg className={styles.logoSvg} width="110" height="38" viewBox="0 0 519 182" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M63.2463 94.2015C61.2021 92.1572 61.2021 88.8428 63.2463 86.7985L68.7985 81.2463C70.8428 79.2021 74.1572 79.2021 76.2014 81.2463L81.7536 86.7985C83.7979 88.8428 83.7979 92.1572 81.7536 94.2015L76.2014 99.7537C74.1572 101.798 70.8428 101.798 68.7985 99.7537L63.2463 94.2015Z" />
             <path d="M132.699 51.2401H111.76V129.76H132.699V112.224H145V68.7762H132.699V51.2401Z" />
@@ -25,6 +30,11 @@ export default function Navbar() {
             <path d="M225.619 152V62.72H187.539V48H280.819V62.72H242.739V152H225.619ZM316.908 153.92C292.588 153.92 272.588 137.44 272.588 110.4C272.588 83.36 292.588 66.88 316.908 66.88C341.228 66.88 361.228 83.36 361.228 110.4C361.228 137.44 341.228 153.92 316.908 153.92ZM316.908 141.28C331.628 141.28 344.588 129.28 344.588 110.4C344.588 91.52 331.628 79.52 316.908 79.52C302.028 79.52 289.228 91.52 289.228 110.4C289.228 129.28 302.028 141.28 316.908 141.28ZM422.836 85.28C397.716 85.28 387.316 95.2 387.316 113.44V152H370.356V68.8H387.316V98.4C391.156 80.32 402.516 68.8 422.836 68.8V85.28ZM460.809 67.04C479.209 67.04 492.809 81.28 495.209 97.28V68.8H511.529V172.8H494.569V126.08C492.489 140.48 478.569 153.76 461.449 153.76C441.929 153.76 422.889 139.2 422.889 110.4C422.889 81.76 441.289 67.04 460.809 67.04ZM467.849 80C451.849 80 439.529 91.52 439.529 110.4C439.529 129.28 451.849 140.8 467.849 140.8C481.449 140.8 494.889 129.28 494.889 110.4C494.889 91.52 481.449 80 467.849 80Z" />
           </svg>
         </Link>
+        <div className={styles.navLinks}>
+          <a href="#pipeline" className={styles.link}>Pipeline</a>
+          <a href="#features" className={styles.link}>Features</a>
+          <a href="#how-it-works" className={styles.link}>How it works</a>
+        </div>
         <div className={styles.right}>
           <Link to="/dashboard" className={styles.link}>{t("navbar.dashboard")}</Link>
           <div className={styles.langGroup}>

web/src/components/Navbar.module.css

@@ -21,6 +21,7 @@
   align-items: center;
   justify-content: space-between;
   height: 64px;
+  position: relative;
 }
 
 .brand {
@@ -45,6 +46,21 @@
   fill: currentColor;
 }
 
+.navLinks {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media (max-width: 900px) {
+  .navLinks {
+    display: none;
+  }
+}
+
 .right {
   display: flex;
   align-items: center;

web/src/pages/LandingPage.jsx

@@ -228,6 +228,33 @@ export default function LandingPage() {
         </div>
       </section>
 
+      {/* ── FAQ ── */}
+      <section className={styles.faqSection} id="faq">
+        <div className={styles.sectionInner}>
+          <SectionTitle subtitle="Common questions about TORQ.">
+            FAQ
+          </SectionTitle>
+          <div className={styles.faqGrid}>
+            <div className={styles.faqCard}>
+              <h3>How does TORQ retrieve documentation?</h3>
+              <p>We use a hybrid search approach (dense vector + BM25) coupled with a cross-encoder reranker to pinpoint the exact paragraphs needed for any fault code.</p>
+            </div>
+            <div className={styles.faqCard}>
+              <h3>Can I add my own manuals?</h3>
+              <p>Yes. TORQ ingests standard PDF manuals, translates them, and chunks them automatically into the knowledge base.</p>
+            </div>
+            <div className={styles.faqCard}>
+              <h3>What languages are supported?</h3>
+              <p>Currently, the TORQ agent outputs in English, French, and Arabic to support diverse maintenance teams.</p>
+            </div>
+            <div className={styles.faqCard}>
+              <h3>Is my factory data secure?</h3>
+              <p>Absolutely. TORQ runs entirely on isolated infrastructure with zero data leakage to public models.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* ── CTA ── */}
       <section className={styles.ctaSection}>
         <div className={styles.ctaInner}>

web/src/pages/LandingPage.module.css

@@ -393,6 +393,55 @@
   transition: color 0.35s;
 }
 
+/* ── FAQ Section ── */
+.faqSection {
+  padding: 96px 0;
+  background: var(--bg-secondary);
+}
+
+.faqGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+}
+
+.faqCard {
+  background: var(--surface);
+  border: 1px solid var(--border-color);
+  padding: 32px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.3s, box-shadow 0.3s, border-color 0.35s, background 0.35s;
+}
+
+.faqCard:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--text-primary);
+}
+
+.faqCard h3 {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 20px;
+  color: var(--text-primary);
+  margin: 0 0 12px;
+}
+
+.faqCard p {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .faqGrid {
+    grid-template-columns: 1fr;
+  }
+}
 
 .ctaSection {
   padding: 120px 24px;