This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)
...or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
TCC: The Game Changer | Organizational Operating Systems
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { font-family: 'Inter', sans-serif; background-color: #020617; color: #f8fafc; }
h1, h2, h3, .brand-font { font-family: 'Space Grotesk', sans-serif; }
.tech-font { font-family: 'Orbitron', sans-serif; }
/* Grid Background Animation */
.bg-grid {
background-size: 40px 40px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
/* Neon Glow Utilities */
.glow-box { box-shadow: 0 0 20px rgba(99, 102, 241, 0.15); }
/* Tab Transitions */
.tab-content {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Lang Switcher Active State */
.lang-btn.active {
color: #fff;
font-weight: 700;
border-bottom: 2px solid #6366f1;
}
</style><!-- NAVIGATION -->
<nav class="fixed w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800">
<div class="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-indigo-600 rounded flex items-center justify-center font-bold text-white tech-font">T</div>
<span class="text-xl font-bold tracking-tight brand-font">TCC <span class="text-indigo-500">LABS</span></span>
</div>
<div class="flex items-center gap-8">
<div class="hidden md:flex gap-8 text-sm font-medium text-slate-400">
<a href="#problem" class="hover:text-white transition" id="nav-problem">The Problem</a>
<a href="#models" class="hover:text-white transition" id="nav-catalog">The OS Catalog</a>
<a href="#kernel" class="hover:text-white transition" id="nav-kernel">The Kernel</a>
</div>
<!-- Language Switcher -->
<div class="flex items-center gap-3 border-l border-slate-700 pl-6">
<button onclick="setLanguage('en')" class="lang-btn text-xs text-slate-400 hover:text-white transition active" id="btn-en">EN</button>
<button onclick="setLanguage('ro')" class="lang-btn text-xs text-slate-400 hover:text-white transition" id="btn-ro">RO</button>
</div>
<button class="bg-white text-slate-950 px-5 py-2 rounded-full font-bold text-sm hover:bg-indigo-50 transition hidden sm:block" id="nav-cta">
Install OS
</button>
</div>
</div>
</nav>
<!-- HERO SECTION -->
<header class="relative min-h-screen flex items-center justify-center pt-20">
<div class="absolute inset-0 bg-grid -z-10"></div>
<div class="absolute top-20 right-0 w-96 h-96 bg-indigo-600/20 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl"></div>
<div class="max-w-5xl mx-auto px-6 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-indigo-500/30 bg-indigo-500/10 text-indigo-300 text-xs font-mono mb-8 animate-pulse">
<span class="w-2 h-2 rounded-full bg-green-400"></span> <span id="hero-badge">SYSTEM ONLINE: v.2030</span>
</div>
<h1 class="text-5xl md:text-8xl font-bold mb-6 leading-tight brand-font">
<span id="hero-h1-1">Stop Managing.</span><br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400" id="hero-h1-2">Start Playing.</span>
</h1>
<p class="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto mb-10 leading-relaxed font-light" id="hero-desc">
Traditional consulting fails because of <strong>Cognitive Friction</strong>.
We don't just fix your business. We install a new <strong class="text-white">Organizational Operating System (OOS)</strong> wrapped in a metaphor your team actually understands.
</p>
<div class="flex flex-col md:flex-row gap-4 justify-center">
<a href="#models" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-bold transition flex items-center justify-center gap-2" id="hero-btn-1">
<i class="fa-solid fa-download"></i> Choose Your OS
</a>
<a href="#kernel" class="px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-lg font-bold transition border border-slate-700" id="hero-btn-2">
How It Works
</a>
</div>
</div>
</header>
<!-- SECTION 1: THE PROBLEM (Cognitive Friction) -->
<section id="problem" class="py-24 bg-slate-950 border-y border-slate-900">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-4xl font-bold mb-6 brand-font text-white" id="prob-title">The Enemy is <span class="text-red-500">Abstraction</span>.</h2>
<p class="text-slate-400 text-lg mb-6 leading-relaxed" id="prob-p1">
Why do strategies fail? Because the CEO says <em>"Optimize value chain velocity,"</em> and the employee hears <em>"Work harder."</em>
</p>
<p class="text-slate-400 text-lg mb-8 leading-relaxed" id="prob-p2">
This translation gap is <strong>Cognitive Friction</strong>. It kills speed.
<br><br>
TCC removes this friction. If you tell a team <em>"The car is coming in 3 seconds,"</em> they move instantly. Metaphors bypass the brain's resistance and trigger instinct.
</p>
<div class="flex gap-4">
<div class="p-4 bg-slate-900 rounded border border-red-900/50 w-full">
<div class="text-red-500 font-bold mb-1" id="prob-card1-title">Old Way</div>
<div class="text-slate-500 text-sm" id="prob-card1-text">"Cross-functional synergy matrix."</div>
<div class="mt-2 text-xs text-red-400 font-mono" id="prob-card1-status">Status: CONFUSION</div>
</div>
<div class="p-4 bg-slate-900 rounded border border-green-900/50 w-full">
<div class="text-green-500 font-bold mb-1" id="prob-card2-title">TCC Way</div>
<div class="text-slate-500 text-sm" id="prob-card2-text">"Pit Stop. 2.5 Seconds. Go."</div>
<div class="mt-2 text-xs text-green-400 font-mono" id="prob-card2-status">Status: ACTION</div>
</div>
</div>
</div>
<div class="relative">
<!-- Decorative Graphic -->
<div class="absolute inset-0 bg-gradient-to-r from-red-500 to-indigo-500 rounded-2xl opacity-20 blur-2xl"></div>
<div class="relative bg-slate-900 p-8 rounded-2xl border border-slate-800 glow-box">
<h3 class="text-xl font-bold mb-6 text-center border-b border-slate-800 pb-4" id="trans-title">The Translation Layer</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-slate-500 w-1/3" id="trans-col1">Corporate Speak</span>
<i class="fa-solid fa-arrow-right text-slate-700"></i>
<span class="text-indigo-400 w-1/3 text-right font-bold" id="trans-col2">The TCC Metaphor</span>
</div>
<div class="h-px bg-slate-800"></div>
<div class="flex items-center justify-between text-sm">
<span class="text-slate-400" id="trans-row1-l">"Operational Efficiency"</span>
<i class="fa-solid fa-arrow-right text-slate-700"></i>
<span class="text-white text-right" id="trans-row1-r">"Aerodynamics"</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-slate-400" id="trans-row2-l">"Talent Acquisition"</span>
<i class="fa-solid fa-arrow-right text-slate-700"></i>
<span class="text-white text-right" id="trans-row2-r">"The Transfer Market"</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-slate-400" id="trans-row3-l">"Risk Management"</span>
<i class="fa-solid fa-arrow-right text-slate-700"></i>
<span class="text-white text-right" id="trans-row3-r">"Hull Integrity"</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 2: THE CATALOG (Interactive) -->
<section id="models" class="py-24 bg-slate-950 relative">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-4 brand-font" id="cat-title">Choose Your Reality</h2>
<p class="text-slate-400 text-xl" id="cat-desc">Select the Organizational Operating System (OOS) that fits your ambition.</p>
</div>
<!-- TAB CONTROLLERS -->
<div class="flex flex-wrap justify-center gap-4 mb-12">
<button onclick="switchTab('f1')" id="btn-f1" class="px-6 py-3 rounded-full bg-slate-800 text-white hover:bg-slate-700 transition border border-slate-700 font-bold flex items-center gap-2">
<i class="fa-solid fa-flag-checkered text-red-500"></i> <span id="tab-f1">Grand Prix (F1)</span>
</button>
<button onclick="switchTab('soccer')" id="btn-soccer" class="px-6 py-3 rounded-full bg-slate-900 text-slate-400 hover:bg-slate-800 transition border border-slate-800 font-bold flex items-center gap-2">
<i class="fa-solid fa-futbol text-green-500"></i> <span id="tab-soccer">Championship (Soccer)</span>
</button>
<button onclick="switchTab('aviation')" id="btn-aviation" class="px-6 py-3 rounded-full bg-slate-900 text-slate-400 hover:bg-slate-800 transition border border-slate-800 font-bold flex items-center gap-2">
<i class="fa-solid fa-plane-up text-sky-500"></i> <span id="tab-aviation">Aviation (Flight)</span>
</button>
<button onclick="switchTab('maritime')" id="btn-maritime" class="px-6 py-3 rounded-full bg-slate-900 text-slate-400 hover:bg-slate-800 transition border border-slate-800 font-bold flex items-center gap-2">
<i class="fa-solid fa-anchor text-amber-500"></i> <span id="tab-maritime">Maritime (Ship)</span>
</button>
</div>
<!-- DYNAMIC CONTENT AREA -->
<div id="model-display" class="bg-slate-900 rounded-3xl p-8 md:p-12 border border-slate-800 shadow-2xl relative overflow-hidden min-h-[500px] flex items-center">
<!-- Background Glow -->
<div id="glow-bg" class="absolute top-0 right-0 w-[500px] h-[500px] bg-red-600/10 rounded-full blur-[100px] transition-colors duration-500"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full relative z-10">
<!-- Text Content -->
<div class="tab-content">
<div id="model-tag" class="inline-block px-3 py-1 bg-red-500/20 text-red-400 rounded text-xs font-mono mb-4 border border-red-500/50">
FOR: TECH, FINANCE & LOGISTICS
</div>
<h3 id="model-title" class="text-4xl md:text-5xl font-bold mb-6 text-white brand-font">The Grand Prix OS</h3>
<p id="model-desc" class="text-slate-300 text-lg mb-8 leading-relaxed">
Stop driving a bus. Run a Racing Team. This model optimizes for <strong>Speed, Precision, and Data</strong>. We treat your strategy as a race against time where every second of drag costs you the podium.
</p>
<div class="space-y-4">
<div class="flex items-center gap-4 p-4 bg-slate-950/50 rounded border border-slate-800">
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-xl" id="icon-sys">⚙️</div>
<div>
<div class="text-xs text-slate-500 uppercase tracking-widest" id="lbl-sys">System becomes</div>
<div class="font-bold text-white" id="text-sys">The Engine & Chassis</div>
</div>
</div>
<div class="flex items-center gap-4 p-4 bg-slate-950/50 rounded border border-slate-800">
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-xl" id="icon-cap">⛽</div>
<div>
<div class="text-xs text-slate-500 uppercase tracking-widest" id="lbl-cap">Capabilities become</div>
<div class="font-bold text-white" id="text-cap">The Fuel & Pit Crew</div>
</div>
</div>
<div class="flex items-center gap-4 p-4 bg-slate-950/50 rounded border border-slate-800">
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-xl" id="icon-cul">🏎️</div>
<div>
<div class="text-xs text-slate-500 uppercase tracking-widest" id="lbl-cul">Culture becomes</div>
<div class="font-bold text-white" id="text-cul">The Pilot's Nerve</div>
</div>
</div>
</div>
</div>
<!-- Visual Side -->
<div class="flex items-center justify-center">
<div class="relative w-full max-w-md aspect-square bg-slate-950 rounded-2xl border border-slate-800 p-8 flex flex-col items-center justify-center text-center">
<div id="main-icon" class="text-9xl mb-6 transition-all duration-500 transform hover:scale-110 drop-shadow-2xl">🏎️</div>
<div class="text-slate-500 font-mono text-sm" id="lbl-metric">Target Metric:</div>
<div id="kpi-metric" class="text-4xl font-bold text-white tech-font">LAP TIMES</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 3: THE KERNEL (SCC/Liebig) -->
<section id="kernel" class="py-24 bg-slate-900 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 brand-font text-slate-200" id="kern-title">Under the Hood: The TCC Kernel</h2>
<p class="text-slate-500" id="kern-desc">The metaphor is the Interface. The math is the Engine.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-slate-950 p-8 rounded-xl border border-indigo-900/30 hover:border-indigo-500/50 transition duration-300 group">
<div class="w-12 h-12 bg-indigo-900/20 rounded-lg flex items-center justify-center text-indigo-400 mb-6 group-hover:scale-110 transition">
<i class="fa-solid fa-layer-group text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3" id="kern-c1-t">SCC Architecture</h3>
<p class="text-slate-400 text-sm leading-relaxed" id="kern-c1-d">
Regardless of the metaphor, we optimize the three universal resources: <strong>System</strong> (Infrastructure), <strong>Capabilities</strong> (Skill), and <strong>Culture</strong> (Will).
</p>
</div>
<!-- Card 2 -->
<div class="bg-slate-950 p-8 rounded-xl border border-indigo-900/30 hover:border-indigo-500/50 transition duration-300 group">
<div class="w-12 h-12 bg-indigo-900/20 rounded-lg flex items-center justify-center text-indigo-400 mb-6 group-hover:scale-110 transition">
<i class="fa-solid fa-chart-line text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3" id="kern-c2-t">SSP Outcomes</h3>
<p class="text-slate-400 text-sm leading-relaxed" id="kern-c2-d">
We don't just chase "Results." We engineer <strong>Superior Sustainable Performance</strong>. We ensure you can win today without destroying your ability to win tomorrow.
</p>
</div>
<!-- Card 3 -->
<div class="bg-slate-950 p-8 rounded-xl border border-indigo-900/30 hover:border-indigo-500/50 transition duration-300 group">
<div class="w-12 h-12 bg-indigo-900/20 rounded-lg flex items-center justify-center text-indigo-400 mb-6 group-hover:scale-110 transition">
<i class="fa-solid fa-flask text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3" id="kern-c3-t">Liebig's Law</h3>
<p class="text-slate-400 text-sm leading-relaxed" id="kern-c3-d">
Our algorithm finds your "Shortest Stave." We prove that investing in your strengths is waste until you fix your weakest link.
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER CTA -->
<footer class="py-20 bg-black text-center relative overflow-hidden">
<div class="absolute inset-0 bg-indigo-900/10 bg-grid opacity-30"></div>
<div class="relative z-10 max-w-4xl mx-auto px-6">
<h2 class="text-4xl md:text-6xl font-bold text-white mb-8 brand-font" id="foot-title">Ready to Change the Game?</h2>
<p class="text-slate-400 text-xl mb-10" id="foot-desc">
You don't need another 100-page report. You need a new Operating System.
</p>
<button class="px-10 py-5 bg-white text-black rounded-full font-bold text-lg hover:scale-105 transition shadow-[0_0_30px_rgba(255,255,255,0.3)]" id="foot-btn">
Schedule a Demo
</button>
<div class="mt-12 text-slate-600 text-sm">
© 2030 Total Capabilities Center. All Rights Reserved.
</div>
</div>
</footer>
<!-- INTERACTIVITY SCRIPT -->
<script>
let currentLang = 'en';
let currentModelKey = 'f1';
// --- TRANSLATIONS DATABASE ---
const i18n = {
en: {
nav: {
problem: "The Problem",
catalog: "The OS Catalog",
kernel: "The Kernel",
cta: "Install OS"
},
hero: {
badge: "SYSTEM ONLINE: v.2030",
h1_1: "Stop Managing.",
h1_2: "Start Playing.",
desc: "Traditional consulting fails because of <strong>Cognitive Friction</strong>. We don't just fix your business. We install a new <strong class='text-white'>Organizational Operating System (OOS)</strong> wrapped in a metaphor your team actually understands.",
btn1: "<i class='fa-solid fa-download'></i> Choose Your OS",
btn2: "How It Works"
},
prob: {
title: "The Enemy is <span class='text-red-500'>Abstraction</span>.",
p1: "Why do strategies fail? Because the CEO says <em>\"Optimize value chain velocity,\"</em> and the employee hears <em>\"Work harder.\"</em>",
p2: "This translation gap is <strong>Cognitive Friction</strong>. It kills speed.<br><br>TCC removes this friction. If you tell a team <em>\"The car is coming in 3 seconds,\"</em> they move instantly. Metaphors bypass the brain's resistance and trigger instinct.",
c1_title: "Old Way",
c1_text: "\"Cross-functional synergy matrix.\"",
c1_status: "Status: CONFUSION",
c2_title: "TCC Way",
c2_text: "\"Pit Stop. 2.5 Seconds. Go.\"",
c2_status: "Status: ACTION"
},
trans: {
title: "The Translation Layer",
col1: "Corporate Speak",
col2: "The TCC Metaphor",
r1_l: "\"Operational Efficiency\"",
r1_r: "\"Aerodynamics\"",
r2_l: "\"Talent Acquisition\"",
r2_r: "\"The Transfer Market\"",
r3_l: "\"Risk Management\"",
r3_r: "\"Hull Integrity\""
},
cat: {
title: "Choose Your Reality",
desc: "Select the Organizational Operating System (OOS) that fits your ambition.",
tabs: {
f1: "Grand Prix (F1)",
soccer: "Championship (Soccer)",
aviation: "Aviation (Flight)",
maritime: "Maritime (Ship)"
},
lbl_sys: "System becomes",
lbl_cap: "Capabilities become",
lbl_cul: "Culture becomes",
lbl_metric: "Target Metric:"
},
kern: {
title: "Under the Hood: The TCC Kernel",
desc: "The metaphor is the Interface. The math is the Engine.",
c1_t: "SCC Architecture",
c1_d: "Regardless of the metaphor, we optimize the three universal resources: <strong>System</strong> (Infrastructure), <strong>Capabilities</strong> (Skill), and <strong>Culture</strong> (Will).",
c2_t: "SSP Outcomes",
c2_d: "We don't just chase \"Results.\" We engineer <strong>Superior Sustainable Performance</strong>. We ensure you can win today without destroying your ability to win tomorrow.",
c3_t: "Liebig's Law",
c3_d: "Our algorithm finds your \"Shortest Stave.\" We prove that investing in your strengths is waste until you fix your weakest link."
},
foot: {
title: "Ready to Change the Game?",
desc: "You don't need another 100-page report. You need a new Operating System.",
btn: "Schedule a Demo"
}
},
ro: {
nav: {
problem: "Problema",
catalog: "Catalogul OS",
kernel: "Nucleul",
cta: "Instalează OS"
},
hero: {
badge: "SISTEM ONLINE: v.2030",
h1_1: "Nu mai administra.",
h1_2: "Începe să joci.",
desc: "Consultanța tradițională eșuează din cauza <strong>Fricțiunii Cognitive</strong>. Nu doar reparăm afacerea ta. Instalăm un nou <strong class='text-white'>Sistem de Operare Organizațional (OOS)</strong>, ambalat într-o metaforă pe care echipa ta chiar o înțelege.",
btn1: "<i class='fa-solid fa-download'></i> Alege-ți OS-ul",
btn2: "Cum Funcționează"
},
prob: {
title: "Inamicul este <span class='text-red-500'>Abstracția</span>.",
p1: "De ce eșuează strategiile? Pentru că CEO-ul spune <em>\"Optimizați viteza lanțului valoric,\"</em> iar angajatul aude <em>\"Munciți mai mult.\"</em>",
p2: "Acest decalaj de traducere este <strong>Fricțiunea Cognitivă</strong>. Ucide viteza.<br><br>TCC elimină această fricțiune. Dacă spui unei echipe <em>\"Mașina vine în 3 secunde,\"</em> se mișcă instantaneu. Metaforele ocolesc rezistența creierului și declanșează instinctul.",
c1_title: "Modul Vechi",
c1_text: "\"Matrice de sinergie inter-funcțională.\"",
c1_status: "Status: CONFUZIE",
c2_title: "Modul TCC",
c2_text: "\"Pit Stop. 2.5 Secunde. Start.\"",
c2_status: "Status: ACȚIUNE"
},
trans: {
title: "Stratul de Traducere",
col1: "Limbaj Corporativ",
col2: "Metafora TCC",
r1_l: "\"Eficiență Operațională\"",
r1_r: "\"Aerodinamică\"",
r2_l: "\"Achiziție de Talente\"",
r2_r: "\"Piața de Transferuri\"",
r3_l: "\"Managementul Riscului\"",
r3_r: "\"Integritatea Carenei\""
},
cat: {
title: "Alege-ți Realitatea",
desc: "Selectează Sistemul de Operare Organizațional (OOS) care se potrivește ambiției tale.",
tabs: {
f1: "Marele Premiu (F1)",
soccer: "Campionat (Fotbal)",
aviation: "Aviație (Zbor)",
maritime: "Maritim (Navă)"
},
lbl_sys: "Sistemul devine",
lbl_cap: "Capabilitățile devin",
lbl_cul: "Cultura devine",
lbl_metric: "Metrica Țintă:"
},
kern: {
title: "Sub Capotă: Nucleul TCC",
desc: "Metafora este Interfața. Matematica este Motorul.",
c1_t: "Arhitectura SCC",
c1_d: "Indiferent de metaforă, optimizăm cele trei resurse universale: <strong>Sistem</strong> (Infrastructură), <strong>Capabilități</strong> (Abilități) și <strong>Cultură</strong> (Voință).",
c2_t: "Rezultate SSP",
c2_d: "Nu urmărim doar \"Rezultate.\" Inginerim <strong>Performanță Superioară Sustenabilă</strong>. Ne asigurăm că poți câștiga azi fără a distruge capacitatea de a câștiga mâine.",
c3_t: "Legea lui Liebig",
c3_d: "Algoritmul nostru găsește \"Cea mai scurtă doagă.\" Demonstrăm că investiția în punctele forte este o risipă până când nu repari veriga cea mai slabă."
},
foot: {
title: "Gata să schimbi jocul?",
desc: "Nu ai nevoie de încă un raport de 100 de pagini. Ai nevoie de un nou Sistem de Operare.",
btn: "Programează un Demo"
}
}
};
const models = {
f1: {
en: {
tag: "FOR: TECH, FINANCE & LOGISTICS",
title: "The Grand Prix OS",
desc: "Stop driving a bus. Run a Racing Team. This model optimizes for <strong>Speed, Precision, and Data</strong>. We treat your strategy as a race against time where every second of drag costs you the podium.",
sys: "The Engine & Chassis",
cap: "The Fuel & Pit Crew",
cul: "The Pilot's Nerve",
kpi: "LAP TIMES"
},
ro: {
tag: "PENTRU: TECH, FINANȚE & LOGISTICĂ",
title: "Sistemul Grand Prix",
desc: "Nu mai conduce un autobuz. Condu o Echipă de Curse. Acest model optimizează pentru <strong>Viteză, Precizie și Date</strong>. Tratăm strategia ta ca pe o cursă contra cronometru unde fiecare secundă de rezistență te costă podiumul.",
sys: "Motorul & Șasiul",
cap: "Combustibil & Echipă Pit",
cul: "Nervul Pilotului",
kpi: "TIMPI PE TUR"
},
common: { color: "red", icon: "🏎️" }
},
soccer: {
en: {
tag: "FOR: SALES, CREATIVE & SERVICE",
title: "The Championship OS",
desc: "Individual talent wins games. Systems win championships. We stop 'Hero Ball' and install 'Total Football'—fluid formations, passing chemistry, and a locker room built on trust.",
sys: "The Formation & Pitch",
cap: "Fitness & Technique",
cul: "The Locker Room",
kpi: "POSSESSION %"
},
ro: {
tag: "PENTRU: VÂNZĂRI, CREATIV & SERVICII",
title: "Sistemul Campionat",
desc: "Talentul individual câștigă meciuri. Sistemele câștigă campionate. Oprim 'Jocul Eroic' și instalăm 'Fotbalul Total'—formații fluide, chimie la pase și un vestiar construit pe încredere.",
sys: "Formația & Terenul",
cap: "Fitness & Tehnică",
cul: "Vestiarul",
kpi: "POSESIE %"
},
common: { color: "green", icon: "⚽" }
},
aviation: {
en: {
tag: "FOR: HEAVY INDUSTRY & INFRASTRUCTURE",
title: "The Aviation OS",
desc: "Defy gravity securely. We balance Thrust (Capabilities) against Drag (System). If your Ambition (Angle of Attack) is too steep for your Lift (Culture), you stall. We prevent the crash.",
sys: "The Airframe (Drag)",
cap: "The Engines (Thrust)",
cul: "The Cockpit (Lift)",
kpi: "ALTITUDE"
},
ro: {
tag: "PENTRU: INDUSTRIA GREA & INFRASTRUCTURĂ",
title: "Sistemul Aviație",
desc: "Sfidează gravitația în siguranță. Echilibrăm Tracțiunea (Capabilități) cu Rezistența (Sistem). Dacă Ambiția (Unghiul de Atac) e prea abruptă pentru Portanța ta (Cultură), intri în picaj. Noi prevenim prăbușirea.",
sys: "Fuzelajul (Rezistență)",
cap: "Motoarele (Tracțiune)",
cul: "Cabina (Portanță)",
kpi: "ALTITUDINE"
},
common: { color: "sky", icon: "✈️" }
},
maritime: {
en: {
tag: "FOR: MANUFACTURING & SUPPLY CHAIN",
title: "The Maritime OS",
desc: "Maximize capacity without sinking. We apply the Plimsoll Line to your organization. If you load too much Cargo (Results) on a weak Hull (Culture), you breach. We reinforce the steel.",
sys: "Navigation Systems",
cap: "Crew Competence",
cul: "Hull Integrity",
kpi: "TONNAGE"
},
ro: {
tag: "PENTRU: PRODUCȚIE & LANȚ DE APROVIZIONARE",
title: "Sistemul Maritim",
desc: "Maximizează capacitatea fără a te scufunda. Aplicăm Linia Plimsoll organizației tale. Dacă încarci prea multă Marfă (Rezultate) pe o Carenă slabă (Cultură), te fisurezi. Noi întărim oțelul.",
sys: "Sisteme Navigație",
cap: "Competență Echipaj",
cul: "Integritate Carenă",
kpi: "TONAJ"
},
common: { color: "amber", icon: "⚓" }
}
};
function setLanguage(lang) {
currentLang = lang;
// Update Buttons State
document.getElementById('btn-en').className = `lang-btn text-xs text-slate-400 hover:text-white transition ${lang === 'en' ? 'active' : ''}`;
document.getElementById('btn-ro').className = `lang-btn text-xs text-slate-400 hover:text-white transition ${lang === 'ro' ? 'active' : ''}`;
// Update Static Content
const t = i18n[lang];
// Nav
document.getElementById('nav-problem').innerText = t.nav.problem;
document.getElementById('nav-catalog').innerText = t.nav.catalog;
document.getElementById('nav-kernel').innerText = t.nav.kernel;
document.getElementById('nav-cta').innerText = t.nav.cta;
// Hero
document.getElementById('hero-badge').innerText = t.hero.badge;
document.getElementById('hero-h1-1').innerText = t.hero.h1_1;
document.getElementById('hero-h1-2').innerText = t.hero.h1_2;
document.getElementById('hero-desc').innerHTML = t.hero.desc;
document.getElementById('hero-btn-1').innerHTML = t.hero.btn1;
document.getElementById('hero-btn-2').innerText = t.hero.btn2;
// Problem
document.getElementById('prob-title').innerHTML = t.prob.title;
document.getElementById('prob-p1').innerHTML = t.prob.p1;
document.getElementById('prob-p2').innerHTML = t.prob.p2;
document.getElementById('prob-card1-title').innerText = t.prob.c1_title;
document.getElementById('prob-card1-text').innerText = t.prob.c1_text;
document.getElementById('prob-card1-status').innerText = t.prob.c1_status;
document.getElementById('prob-card2-title').innerText = t.prob.c2_title;
document.getElementById('prob-card2-text').innerText = t.prob.c2_text;
document.getElementById('prob-card2-status').innerText = t.prob.c2_status;
document.getElementById('trans-title').innerText = t.trans.title;
document.getElementById('trans-col1').innerText = t.trans.col1;
document.getElementById('trans-col2').innerText = t.trans.col2;
document.getElementById('trans-row1-l').innerText = t.trans.r1_l;
document.getElementById('trans-row1-r').innerText = t.trans.r1_r;
document.getElementById('trans-row2-l').innerText = t.trans.r2_l;
document.getElementById('trans-row2-r').innerText = t.trans.r2_r;
document.getElementById('trans-row3-l').innerText = t.trans.r3_l;
document.getElementById('trans-row3-r').innerText = t.trans.r3_r;
// Catalog Static
document.getElementById('cat-title').innerText = t.cat.title;
document.getElementById('cat-desc').innerText = t.cat.desc;
document.getElementById('tab-f1').innerText = t.cat.tabs.f1;
document.getElementById('tab-soccer').innerText = t.cat.tabs.soccer;
document.getElementById('tab-aviation').innerText = t.cat.tabs.aviation;
document.getElementById('tab-maritime').innerText = t.cat.tabs.maritime;
document.getElementById('lbl-sys').innerText = t.cat.lbl_sys;
document.getElementById('lbl-cap').innerText = t.cat.lbl_cap;
document.getElementById('lbl-cul').innerText = t.cat.lbl_cul;
document.getElementById('lbl-metric').innerText = t.cat.lbl_metric;
// Kernel
document.getElementById('kern-title').innerText = t.kern.title;
document.getElementById('kern-desc').innerText = t.kern.desc;
document.getElementById('kern-c1-t').innerText = t.kern.c1_t;
document.getElementById('kern-c1-d').innerHTML = t.kern.c1_d;
document.getElementById('kern-c2-t').innerText = t.kern.c2_t;
document.getElementById('kern-c2-d').innerHTML = t.kern.c2_d;
document.getElementById('kern-c3-t').innerText = t.kern.c3_t;
document.getElementById('kern-c3-d').innerHTML = t.kern.c3_d;
// Footer
document.getElementById('foot-title').innerText = t.foot.title;
document.getElementById('foot-desc').innerText = t.foot.desc;
document.getElementById('foot-btn').innerText = t.foot.btn;
// Refresh Current Model Tab
switchTab(currentModelKey);
}
function switchTab(modelKey) {
currentModelKey = modelKey;
const data = models[modelKey];
const contentData = data[currentLang];
const common = data.common;
// Reset Buttons
['f1', 'soccer', 'aviation', 'maritime'].forEach(k => {
const btn = document.getElementById(`btn-${k}`);
btn.className = `px-6 py-3 rounded-full bg-slate-900 text-slate-400 hover:bg-slate-800 transition border border-slate-800 font-bold flex items-center gap-2`;
});
// Highlight Active Button
const activeBtn = document.getElementById(`btn-${modelKey}`);
activeBtn.className = `px-6 py-3 rounded-full bg-slate-800 text-white border border-slate-600 font-bold flex items-center gap-2 shadow-lg`;
// Update Content with Fade Effect
const content = document.querySelector('.tab-content');
content.style.opacity = '0';
content.style.transform = 'translateY(10px)';
setTimeout(() => {
// Update Text
document.getElementById('model-tag').innerText = contentData.tag;
document.getElementById('model-tag').className = `inline-block px-3 py-1 bg-${common.color}-500/20 text-${common.color}-400 rounded text-xs font-mono mb-4 border border-${common.color}-500/50`;
document.getElementById('model-title').innerText = contentData.title;
document.getElementById('model-desc').innerHTML = contentData.desc;
document.getElementById('text-sys').innerText = contentData.sys;
document.getElementById('text-cap').innerText = contentData.cap;
document.getElementById('text-cul').innerText = contentData.cul;
document.getElementById('icon-sys').innerText = modelKey === 'f1' ? '⚙️' : (modelKey === 'soccer' ? '📋' : (modelKey === 'aviation' ? '🛫' : '🏗️'));
document.getElementById('icon-cap').innerText = modelKey === 'f1' ? '⛽' : (modelKey === 'soccer' ? '👟' : (modelKey === 'aviation' ? '🚀' : '👷'));
document.getElementById('icon-cul').innerText = modelKey === 'f1' ? '🏎️' : (modelKey === 'soccer' ? '🛡️' : (modelKey === 'aviation' ? '🕹️' : '⚓'));
document.getElementById('main-icon').innerText = common.icon;
document.getElementById('kpi-metric').innerText = contentData.kpi;
// Update Glow Color
const glowColors = {
red: 'bg-red-600/10',
green: 'bg-green-600/10',
sky: 'bg-sky-600/10',
amber: 'bg-amber-600/10'
};
document.getElementById('glow-bg').className = `absolute top-0 right-0 w-[500px] h-[500px] ${glowColors[common.color]} rounded-full blur-[100px] transition-colors duration-500`;
// Fade In
content.style.opacity = '1';
content.style.transform = 'translateY(0)';
}, 300);
}
// Initialize
setLanguage('en');
</script>