feat: add i18n translations for MysticismSection and StickyCTA

gHashTag · ona-agent · gHashTag · commit bfbf797c9106 · 2026-02-04T05:00:21.000Z
- Add mysticism translations to all 5 languages (en, ru, de, zh, es)
- Add stickyCta translations for Invest/Calculator buttons
- Update MysticismSection to use i18n with fallbacks
- Update App.tsx with MysticismToggle component using i18n
- Update StickyCTA to use stickyCta translations

Translations include:
- Mathematical Foundations title
- SU(3) Gauge Symmetry
- Chern-Simons Invariants
- Golden Ratio Identity
- Phoenix Number

Co-authored-by: Ona &lt;no-reply@ona.com&gt;
diff --git a/website/messages/de.json b/website/messages/de.json
@@ -390,5 +390,37 @@
     ],
     "cta": "Vollständigen Bericht auf GitHub lesen",
     "ctaUrl": "https://github.com/gHashTag/vibee-lang/blob/main/docs/BITNET_MATHEMATICAL_PROOF.md"
+  },
+  "mysticism": {
+    "title": "Mathematische Grundlagen",
+    "subtitle": "Diese mathematischen Strukturen bilden die theoretische Grundlage für die Vorteile ternärer Berechnungen.",
+    "toggleShow": "▶ Für Mathematiker: SU(3), Chern-Simons, φ",
+    "toggleHide": "▼ Mathematische Grundlagen ausblenden",
+    "items": [
+      {
+        "title": "SU(3) Eichsymmetrie",
+        "description": "Ternäre Zustände {-1, 0, +1} entsprechen der Farbladung in der Quantenchromodynamik. Die 8 Gluon-Generatoren von SU(3) bieten natürliche Fehlerkorrektur.",
+        "formula": "SU(3) → 8 Generatoren → ternäre Stabilität"
+      },
+      {
+        "title": "Chern-Simons Invarianten",
+        "description": "Topologischer Schutz von Quantenzuständen durch Chern-Simons-Theorie. Die Invariante k=3 entspricht der ternären Logiktiefe.",
+        "formula": "CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)"
+      },
+      {
+        "title": "Goldener Schnitt Identität",
+        "description": "Die heilige Formel φ² + 1/φ² = 3 verbindet den goldenen Schnitt mit der Ternärität.",
+        "formula": "φ² + 1/φ² = 3 = TRINITÄT"
+      },
+      {
+        "title": "Phoenix-Zahl",
+        "description": "Die selbstreferentielle Konstante, die aus ternärer Rekursion entsteht. Verwandt mit Feigenbaum-Konstanten.",
+        "formula": "Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618..."
+      }
+    ]
+  },
+  "stickyCta": {
+    "invest": "Jetzt Investieren",
+    "calculator": "Sparrechner"
   }
 }
diff --git a/website/messages/en.json b/website/messages/en.json
@@ -803,5 +803,37 @@
     "quote": "\"The mathematics of the universe favors the Trinity.\"",
     "cta": "View Full Tokenomics",
     "ctaUrl": "https://github.com/gHashTag/trinity/blob/main/docs/business/TOKENOMICS.md"
+  },
+  "mysticism": {
+    "title": "Mathematical Foundations",
+    "subtitle": "These mathematical structures provide theoretical grounding for ternary computing advantages.",
+    "toggleShow": "▶ For Mathematicians: SU(3), Chern-Simons, φ",
+    "toggleHide": "▼ Hide Mathematical Foundations",
+    "items": [
+      {
+        "title": "SU(3) Gauge Symmetry",
+        "description": "Ternary states {-1, 0, +1} map to color charge in quantum chromodynamics. The 8 gluon generators of SU(3) provide natural error correction.",
+        "formula": "SU(3) → 8 generators → ternary stability"
+      },
+      {
+        "title": "Chern-Simons Invariants",
+        "description": "Topological protection of quantum states through Chern-Simons theory. The invariant k=3 corresponds to ternary logic depth.",
+        "formula": "CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)"
+      },
+      {
+        "title": "Golden Ratio Identity",
+        "description": "The sacred formula φ² + 1/φ² = 3 connects golden ratio to ternary. This identity underlies optimal information encoding.",
+        "formula": "φ² + 1/φ² = 3 = TRINITY"
+      },
+      {
+        "title": "Phoenix Number",
+        "description": "The self-referential constant that emerges from ternary recursion. Related to Feigenbaum constants in chaos theory.",
+        "formula": "Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618..."
+      }
+    ]
+  },
+  "stickyCta": {
+    "invest": "Invest Now",
+    "calculator": "Savings Calculator"
   }
 }
diff --git a/website/messages/es.json b/website/messages/es.json
@@ -390,5 +390,37 @@
     ],
     "cta": "Leer Informe Completo en GitHub",
     "ctaUrl": "https://github.com/gHashTag/vibee-lang/blob/main/docs/BITNET_MATHEMATICAL_PROOF.md"
+  },
+  "mysticism": {
+    "title": "Fundamentos Matemáticos",
+    "subtitle": "Estas estructuras matemáticas proporcionan la base teórica para las ventajas de la computación ternaria.",
+    "toggleShow": "▶ Para Matemáticos: SU(3), Chern-Simons, φ",
+    "toggleHide": "▼ Ocultar Fundamentos Matemáticos",
+    "items": [
+      {
+        "title": "Simetría de Gauge SU(3)",
+        "description": "Los estados ternarios {-1, 0, +1} corresponden a la carga de color en cromodinámica cuántica. Los 8 generadores de gluones de SU(3) proporcionan corrección de errores natural.",
+        "formula": "SU(3) → 8 generadores → estabilidad ternaria"
+      },
+      {
+        "title": "Invariantes de Chern-Simons",
+        "description": "Protección topológica de estados cuánticos a través de la teoría de Chern-Simons. El invariante k=3 corresponde a la profundidad lógica ternaria.",
+        "formula": "CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)"
+      },
+      {
+        "title": "Identidad de la Proporción Áurea",
+        "description": "La fórmula sagrada φ² + 1/φ² = 3 conecta la proporción áurea con lo ternario.",
+        "formula": "φ² + 1/φ² = 3 = TRINIDAD"
+      },
+      {
+        "title": "Número Fénix",
+        "description": "La constante autorreferencial que emerge de la recursión ternaria. Relacionada con las constantes de Feigenbaum.",
+        "formula": "Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618..."
+      }
+    ]
+  },
+  "stickyCta": {
+    "invest": "Invertir Ahora",
+    "calculator": "Calculadora de Ahorro"
   }
 }
diff --git a/website/messages/ru.json b/website/messages/ru.json
@@ -796,5 +796,37 @@
     "quote": "«Математика вселенной благоволит Троице.»",
     "cta": "Полная Токеномика",
     "ctaUrl": "https://github.com/gHashTag/trinity/blob/main/docs/business/TOKENOMICS.md"
+  },
+  "mysticism": {
+    "title": "Математические Основы",
+    "subtitle": "Эти математические структуры обеспечивают теоретическое обоснование преимуществ троичных вычислений.",
+    "toggleShow": "▶ Для Математиков: SU(3), Черн-Саймонс, φ",
+    "toggleHide": "▼ Скрыть Математические Основы",
+    "items": [
+      {
+        "title": "Калибровочная Симметрия SU(3)",
+        "description": "Троичные состояния {-1, 0, +1} соответствуют цветовому заряду в квантовой хромодинамике. 8 глюонных генераторов SU(3) обеспечивают естественную коррекцию ошибок.",
+        "formula": "SU(3) → 8 генераторов → троичная стабильность"
+      },
+      {
+        "title": "Инварианты Черна-Саймонса",
+        "description": "Топологическая защита квантовых состояний через теорию Черна-Саймонса. Инвариант k=3 соответствует глубине троичной логики.",
+        "formula": "CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)"
+      },
+      {
+        "title": "Тождество Золотого Сечения",
+        "description": "Священная формула φ² + 1/φ² = 3 связывает золотое сечение с троичностью. Это тождество лежит в основе оптимального кодирования информации.",
+        "formula": "φ² + 1/φ² = 3 = ТРОИЦА"
+      },
+      {
+        "title": "Число Феникса",
+        "description": "Самореферентная константа, возникающая из троичной рекурсии. Связана с константами Фейгенбаума в теории хаоса.",
+        "formula": "Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618..."
+      }
+    ]
+  },
+  "stickyCta": {
+    "invest": "Инвестировать",
+    "calculator": "Калькулятор Экономии"
   }
 }
diff --git a/website/messages/zh.json b/website/messages/zh.json
@@ -390,5 +390,37 @@
     ],
     "cta": "在GitHub阅读完整报告",
     "ctaUrl": "https://github.com/gHashTag/vibee-lang/blob/main/docs/BITNET_MATHEMATICAL_PROOF.md"
+  },
+  "mysticism": {
+    "title": "数学基础",
+    "subtitle": "这些数学结构为三进制计算的优势提供了理论基础。",
+    "toggleShow": "▶ 数学家专区：SU(3)、陈-西蒙斯、φ",
+    "toggleHide": "▼ 隐藏数学基础",
+    "items": [
+      {
+        "title": "SU(3)规范对称性",
+        "description": "三进制状态{-1, 0, +1}对应量子色动力学中的色荷。SU(3)的8个胶子生成元提供自然纠错。",
+        "formula": "SU(3) → 8个生成元 → 三进制稳定性"
+      },
+      {
+        "title": "陈-西蒙斯不变量",
+        "description": "通过陈-西蒙斯理论对量子态进行拓扑保护。不变量k=3对应三进制逻辑深度。",
+        "formula": "CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)"
+      },
+      {
+        "title": "黄金比例恒等式",
+        "description": "神圣公式φ² + 1/φ² = 3将黄金比例与三进制联系起来。",
+        "formula": "φ² + 1/φ² = 3 = 三位一体"
+      },
+      {
+        "title": "凤凰数",
+        "description": "从三进制递归中产生的自指常数。与混沌理论中的费根鲍姆常数相关。",
+        "formula": "Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618..."
+      }
+    ]
+  },
+  "stickyCta": {
+    "invest": "立即投资",
+    "calculator": "节省计算器"
   }
 }
diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -4,6 +4,38 @@ import Navigation from './components/Navigation'
 import QuantumBackground from './components/QuantumBackground'
 import Footer from './components/Footer'
 import StickyCTA from './components/StickyCTA'
+import { useI18n } from './i18n/context'
+
+// Mysticism toggle component with i18n
+function MysticismToggle({ showMysticism, setShowMysticism }: { showMysticism: boolean; setShowMysticism: (v: boolean) => void }) {
+  const { t } = useI18n();
+  const m = t.mysticism;
+  
+  return (
+    <div style={{ textAlign: 'center', padding: '2rem 0' }}>
+      <button 
+        onClick={() => setShowMysticism(!showMysticism)}
+        style={{
+          background: 'transparent',
+          border: '1px solid var(--border)',
+          color: 'var(--muted)',
+          padding: '0.5rem 1.5rem',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          fontSize: '0.9rem',
+          opacity: 0.6,
+          transition: 'opacity 0.3s'
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
+        onMouseLeave={(e) => e.currentTarget.style.opacity = '0.6'}
+      >
+        {showMysticism 
+          ? (m?.toggleHide || '▼ Hide Mathematical Foundations') 
+          : (m?.toggleShow || '▶ For Mathematicians: SU(3), Chern-Simons, φ')}
+      </button>
+    </div>
+  );
+}
 
 // OPTIMIZED: 8 sections only (was 29)
 // Target: +40% conversion through focused flow
@@ -55,26 +87,7 @@ export default function App() {
         <TeamSection />
         
         {/* MYSTICISM SUBTAB - Hidden by default */}
-        <div style={{ textAlign: 'center', padding: '2rem 0' }}>
-          <button 
-            onClick={() => setShowMysticism(!showMysticism)}
-            style={{
-              background: 'transparent',
-              border: '1px solid var(--border)',
-              color: 'var(--text-secondary)',
-              padding: '0.5rem 1.5rem',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '0.9rem',
-              opacity: 0.6,
-              transition: 'opacity 0.3s'
-            }}
-            onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
-            onMouseLeave={(e) => e.currentTarget.style.opacity = '0.6'}
-          >
-            {showMysticism ? '▼ Hide Mathematical Foundations' : '▶ For Mathematicians: SU(3), Chern-Simons, φ'}
-          </button>
-        </div>
+        <MysticismToggle showMysticism={showMysticism} setShowMysticism={setShowMysticism} />
         {showMysticism && <MysticismSection />}
         
         {/* 8. INVEST - Final CTA */}
diff --git a/website/src/components/StickyCTA.tsx b/website/src/components/StickyCTA.tsx
@@ -57,7 +57,7 @@ export default function StickyCTA() {
             whileTap={{ scale: 0.95 }}
             style={{ minWidth: '160px', textAlign: 'center' }}
           >
-            {t.invest?.cta || 'Invest Now'}
+            💎 {t.stickyCta?.invest || 'Invest Now'}
           </motion.a>
           
           <motion.a
diff --git a/website/src/components/sections/MysticismSection.tsx b/website/src/components/sections/MysticismSection.tsx
@@ -1,30 +1,43 @@
 "use client";
 import { motion } from 'framer-motion';
+import { useI18n } from '../../i18n/context';
 
-const mysticismItems = [
-  {
-    title: 'SU(3) Gauge Symmetry',
-    description: 'Ternary states {-1, 0, +1} map to color charge in quantum chromodynamics. The 8 gluon generators of SU(3) provide natural error correction.',
-    formula: 'SU(3) → 8 generators → ternary stability'
-  },
-  {
-    title: 'Chern-Simons Invariants',
-    description: 'Topological protection of quantum states through Chern-Simons theory. The invariant k=3 corresponds to ternary logic depth.',
-    formula: 'CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)'
-  },
-  {
-    title: 'Golden Ratio Identity',
-    description: 'The sacred formula φ² + 1/φ² = 3 connects golden ratio to ternary. This identity underlies optimal information encoding.',
-    formula: 'φ² + 1/φ² = 3 = TRINITY'
-  },
-  {
-    title: 'Phoenix Number',
-    description: 'The self-referential constant that emerges from ternary recursion. Related to Feigenbaum constants in chaos theory.',
-    formula: 'Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618...'
-  }
-];
+interface MysticismItem {
+  title: string;
+  description: string;
+  formula: string;
+}
 
 export default function MysticismSection() {
+  const { t } = useI18n();
+  const m = t.mysticism;
+  
+  // Fallback items if translations not loaded
+  const defaultItems: MysticismItem[] = [
+    {
+      title: 'SU(3) Gauge Symmetry',
+      description: 'Ternary states {-1, 0, +1} map to color charge in quantum chromodynamics.',
+      formula: 'SU(3) → 8 generators → ternary stability'
+    },
+    {
+      title: 'Chern-Simons Invariants',
+      description: 'Topological protection of quantum states through Chern-Simons theory.',
+      formula: 'CS(A) = k/4π ∫ Tr(A∧dA + ⅔A∧A∧A)'
+    },
+    {
+      title: 'Golden Ratio Identity',
+      description: 'The sacred formula φ² + 1/φ² = 3 connects golden ratio to ternary.',
+      formula: 'φ² + 1/φ² = 3 = TRINITY'
+    },
+    {
+      title: 'Phoenix Number',
+      description: 'The self-referential constant that emerges from ternary recursion.',
+      formula: 'Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618...'
+    }
+  ];
+  
+  const items: MysticismItem[] = m?.items || defaultItems;
+
   return (
     <section id="mysticism" style={{ padding: '4rem 2rem', background: 'rgba(0,0,0,0.3)' }}>
       <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
@@ -34,15 +47,15 @@ export default function MysticismSection() {
           viewport={{ once: true }}
           style={{ textAlign: 'center', marginBottom: '3rem', fontSize: '2rem' }}
         >
-          Mathematical Foundations
+          {m?.title || 'Mathematical Foundations'}
         </motion.h2>
         
         <div style={{ 
           display: 'grid', 
           gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', 
           gap: '1.5rem' 
         }}>
-          {mysticismItems.map((item, index) => (
+          {items.map((item: MysticismItem, index: number) => (
             <motion.div
               key={item.title}
               initial={{ opacity: 0, y: 30 }}
@@ -66,7 +79,7 @@ export default function MysticismSection() {
                 {item.title}
               </h3>
               <p style={{ 
-                color: 'var(--text-secondary)', 
+                color: 'var(--muted)', 
                 fontSize: '0.9rem',
                 lineHeight: 1.6,
                 marginBottom: '1rem'
@@ -99,7 +112,7 @@ export default function MysticismSection() {
             fontStyle: 'italic'
           }}
         >
-          These mathematical structures provide theoretical grounding for ternary computing advantages.
+          {m?.subtitle || 'These mathematical structures provide theoretical grounding for ternary computing advantages.'}
         </motion.p>
       </div>
     </section>

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export default function StickyCTA() {`
`57`	`57`	`whileTap={{ scale: 0.95 }}`
`58`	`58`	`style={{ minWidth: '160px', textAlign: 'center' }}`
`59`	`59`	`>`
`60`		`- {t.invest?.cta \|\| 'Invest Now'}`
	`60`	`+ 💎 {t.stickyCta?.invest \|\| 'Invest Now'}`
`61`	`61`	`</motion.a>`
`62`	`62`
`63`	`63`	`<motion.a`