diff --git a/docs/character/drflask-final.png b/docs/character/drflask-final.png new file mode 100644 index 0000000..b8db21d Binary files /dev/null and b/docs/character/drflask-final.png differ diff --git a/frontend/src/assets/mascots/drflask.png b/frontend/src/assets/mascots/drflask.png new file mode 100644 index 0000000..8f62eac Binary files /dev/null and b/frontend/src/assets/mascots/drflask.png differ diff --git a/frontend/src/views/marketing/FaqView.vue b/frontend/src/views/marketing/FaqView.vue index 6b6014e..9561f3a 100644 --- a/frontend/src/views/marketing/FaqView.vue +++ b/frontend/src/views/marketing/FaqView.vue @@ -3,6 +3,9 @@ import { ref, onMounted, onUnmounted } from 'vue' import { RouterLink } from 'vue-router' import Icon from '@/components/ds/core/Icon.vue' import CorrosionMark from '@/components/brand/CorrosionMark.vue' +// Dr. Flask, Ph.D. — the chemistry glossary's mascot/cover (placeholder render). +// Web-optimized from docs/character/drflask-final.png. +import drFlask from '@/assets/mascots/drflask.png' interface FaqItem { question: string @@ -154,50 +157,59 @@ const groups: FaqGroup[] = [ interface ChemTerm { term: string - science: string - role: string + chem: string + corro: string + kicker: string } const chemistry: ChemTerm[] = [ { - term: 'Catalyst', - science: 'Speeds up a reaction without being consumed', - role: 'The control panel — the operator console where you manage servers, players, plugins, files, wipes, and automation.', + term: 'Catalyst Console', + chem: 'A catalyst helps a reaction happen faster or more efficiently without being consumed by it.', + corro: 'The control panel where you manage your game servers, players, plugins, files, wipes, schedules, and automation.', + kicker: 'Mission control for your server community.', }, { term: 're-Agent', - science: 'A reagent causes or takes part in a chemical reaction', - role: 'The host connector you install on the Substrate — it links your machine securely to Catalyst and runs its commands.', + chem: 'A reagent is something that participates in a chemical reaction.', + corro: 'The lightweight agent installed on your server. It connects your hardware to Catalyst over secure outbound communication — so you never open inbound ports.', + kicker: 'What lets Corrosion see, manage, and automate your host.', }, { term: 'Substrate', - science: 'The material or surface on which a reaction takes place', - role: 'The host / bare-metal surface where your game servers actually run — native processes on your own Windows or Linux box.', + chem: 'A substrate is the surface or material where a reaction happens.', + corro: 'The bare-metal or virtual machine your game server runs on — the hardware surface underneath everything, where re-Agent lives and Formulae are applied.', + kicker: 'Think "bedrock," but more chemistry.', }, { term: 'Formulae', - science: 'A formula describes the ingredients and structure of a compound or reaction', - role: 'Deployment recipes — one per game (Rust, Dune, Conan, Soulmask, and more) that define what a server should be.', + chem: 'A formula describes the ingredients, structure, or recipe for something.', + corro: 'Reusable deployment recipes for games and server types — how a Rust server, Dune BattleGroup, Conan world, or Soulmask cluster should be configured and deployed.', + kicker: 'Complex setups, made repeatable instead of manual.', }, { - term: 'Reaction', - science: 'A process where substances transform', - role: 'A job executing against the Substrate — a wipe, restart, update, deploy, or backup.', + term: 'Reactions', + chem: 'A chemical reaction is a process where things change from one state to another.', + corro: 'The jobs and workflows that change your server state — wipes, restarts, updates, backups, maintenance windows, deployments, and scheduled tasks.', + kicker: 'When Corrosion does work, a Reaction is usually happening.', }, { - term: 'Compound', - science: 'A combination of elements bonded together', - role: 'A grouped set of runtime services that run together as one stack (a Dune battlegroup is a Compound).', + term: 'Compounds', + chem: 'A compound is made when different elements combine into something that works as a whole.', + corro: 'Grouped services or stack components that belong together — a game server, supporting services, shared storage, config, and helper processes as one unit.', + kicker: 'Related pieces, treated as one operational unit.', }, { term: 'Lab Notes', - science: 'Recorded observations and results from an experiment', - role: 'Logs, audit history, and job results — what happened, when, and to what.', + chem: 'Lab notes record what happened during an experiment.', + corro: 'The logs, audit history, job results, and operational records — what happened, when it happened, and whether it succeeded.', + kicker: 'If something goes sideways, start here.', }, { term: 'The Exchange', - science: 'Ion exchange transfers ions between materials', - role: 'The Corrosion-native marketplace — items, VIP packages, and automated in-game delivery.', + chem: 'Ion exchange is a process where ions are swapped between materials.', + corro: 'The native marketplace layer for server communities — item catalogs, VIP packages, payment processing, and automated in-game delivery.', + kicker: 'Where your community trades value for perks, packages, and content.', }, ] @@ -307,50 +319,63 @@ onUnmounted(() => { io?.disconnect() }) -
+
-
- Glossary -

Brush up on your chemistry while managing your game server

-

- Corrosion uses a chemistry-inspired naming system because managing game servers is all - about controlled reactions — deploying, updating, wiping, automating, and recovering - complex systems without letting them melt down. -

-
- -
-
- Term - Chemistry meaning - In Corrosion -
-
- {{ t.term }} - {{ t.science }} - {{ t.role }} +
+ Dr. Flask, Ph.D. — Chemistry Teacher +
+ Glossary +

Brush up on your chemistry while managing your game server

+

+ Corrosion uses a chemistry-inspired naming system because running game servers is a lot + like managing controlled reactions: the right ingredients, the right environment, the + right timing, and a safe way to see what happened when the smoke clears. +

+

+ You don't need a chemistry degree to use Corrosion. The names are here to make the + platform more memorable — and to give each part of the system a clear job. +

-
-

- You don't need a chemistry degree to use Corrosion. The names are here to make the - platform memorable — and to give each part of the system a clear job. -

+ +

+ In plain English: Catalyst is the console, + re-Agent connects your server, Substrate is the hardware + it runs on, Formulae define game deployments, and + Lab Notes show you what happened. +

-
@@ -452,51 +477,55 @@ onUnmounted(() => { io?.disconnect() }) line-height: 1.65; } -/* Chemistry glossary */ -.glossary { - max-width: 920px; - margin: 0 auto; - background: var(--surface-base); - border-radius: var(--radius-lg); - box-shadow: var(--ring-default); - overflow: hidden; +/* Chemistry glossary — "lab zone": scope the accent tokens to green so the whole + section (eyebrow, term color, flow chips, callout) reads as Dr. Flask's corner + without touching the orange brand everywhere else. */ +.sec--lab { + --accent: #3fb968; + --accent-text: #5bd183; + --accent-soft: rgba(82, 200, 124, 0.13); + --accent-border: rgba(82, 200, 124, 0.34); } -.glossary__row { - display: grid; - grid-template-columns: 150px 1.05fr 1.6fr; - gap: 18px; - padding: 15px 20px; - border-top: 1px solid var(--border-subtle); - align-items: start; -} -.glossary__row:first-child { border-top: none; } -.glossary__row--head { - font-size: var(--text-xs); - text-transform: uppercase; - letter-spacing: 0.06em; - font-weight: 600; - color: var(--text-muted); - background: var(--surface-raised-2); -} -.glossary__term { font-weight: 700; color: var(--accent-text); font-size: var(--text-sm); } -.glossary__sci { font-size: var(--text-sm); color: var(--text-tertiary); font-style: italic; line-height: 1.55; } -.glossary__role { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; } -.glossary__foot { +.lab-intro { + display: grid; + grid-template-columns: minmax(0, 300px) 1fr; + gap: 30px; + align-items: center; max-width: 920px; - margin: 22px auto 0; - display: flex; - flex-direction: column; - gap: 12px; + margin: 0 auto 40px; } -.glossary__note { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.65; margin: 0; } +.lab-intro__card { + width: 100%; + height: auto; + border-radius: var(--radius-lg); + box-shadow: var(--ring-default), 0 18px 40px rgba(0, 0, 0, 0.45); +} +.lab-intro__copy { text-align: left; } +.lab-intro__copy .eyebrow { display: block; margin-bottom: 12px; } +.lab-intro__copy .title { margin: 0 0 14px; } +.lab-plain { + max-width: 920px; + margin: 0 auto 14px; + font-size: var(--text-sm); + color: var(--text-primary); + line-height: 1.65; + padding: 14px 18px; + background: var(--accent-soft); + border-radius: var(--radius-md); + box-shadow: inset 0 0 0 1px var(--accent-border); + text-align: center; +} +.lab-plain strong { color: var(--accent-text); } + .flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; - padding: 4px 0; + max-width: 920px; + margin: 0 auto 28px; } .flow__step { font-size: var(--text-xs); @@ -509,22 +538,56 @@ onUnmounted(() => { io?.disconnect() }) white-space: nowrap; } .flow__arr { color: var(--text-muted); font-size: var(--text-sm); } -.glossary__plain { - font-size: var(--text-sm); - color: var(--text-primary); - line-height: 1.65; - margin: 0; - padding: 14px 16px; - background: var(--accent-soft); - border-radius: var(--radius-md); - box-shadow: inset 0 0 0 1px var(--accent-border); +/* Term cards — the full glossary, one card per term */ +.term-grid { + max-width: 920px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; } -.glossary__plain strong { color: var(--accent-text); } +.term-card { + background: var(--surface-base); + border-radius: var(--radius-lg); + box-shadow: var(--ring-default); + padding: 18px 20px; + display: flex; + flex-direction: column; + gap: 8px; +} +.term-card__name { font-size: var(--text-base, 1rem); font-weight: 700; color: var(--accent-text); margin: 0; } +.term-card__chem { font-size: var(--text-sm); color: var(--text-tertiary); font-style: italic; line-height: 1.55; margin: 0; } +.term-card__corro { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; } +.term-card__kick { font-size: var(--text-sm); color: var(--accent-text); font-weight: 600; line-height: 1.5; margin: 4px 0 0; } + +/* Dr. Flask sign-off */ +.drflask-card { + max-width: 920px; + margin: 14px auto 0; + background: var(--accent-soft); + border-radius: var(--radius-lg); + box-shadow: inset 0 0 0 1px var(--accent-border); + padding: 20px 22px; + display: flex; + flex-direction: column; + gap: 10px; +} +.drflask-card__quips { + list-style: none; + padding: 0; + margin: 2px 0 0; + display: flex; + flex-direction: column; + gap: 4px; + font-size: var(--text-sm); + color: var(--text-secondary); +} +.drflask-card__quips strong { color: var(--accent-text); } @media (max-width: 720px) { - .glossary__row { grid-template-columns: 1fr; gap: 5px; padding: 16px; } - .glossary__row--head { display: none; } - .glossary__sci::before { content: 'Chemistry — '; color: var(--text-muted); font-style: normal; } - .glossary__role::before { content: 'In Corrosion — '; color: var(--text-muted); } + .lab-intro { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; } + .lab-intro__card { max-width: 280px; } + .lab-intro__copy { text-align: center; } + .term-grid { grid-template-columns: 1fr; } }