# VOLUME 3 · Website Manual
_How the BSGOTECH website is built and why every section exists._

---

## 1. Domains & routes
- Public production: `hx.bsgotech.com`
- Every path except `/api/*` and `/downloads/*` is a React SPA route.
- `/api/*` is the FastAPI backend.
- `/downloads/*` serves large static PDFs and manual assets (must NEVER collide with a React route).

## 2. Global visual identity
- **Palette**: dark navy `#080B12` (bg), `#0A0F1A` (bg2), ink `#E8ECF0`, silver `#C0C7CE`, green `#22C55E`, rose `#F43F5E`, teal `#14B8A6`, amber `#F59E0B`, blue `#3B82F6`, purple `#A855F7`.
- **Typography**: system default, negative letter-spacing on headings, uppercase small caps for labels with 0.24em-0.42em tracking.
- **Icons**: `lucide-react` — never emoji.
- **Animations**: `framer-motion`; entrances are subtle (opacity + 8–20px y), never bounce.

## 3. Homepage (`/`)
Sections in the order visitors see them:

### 3.1 Hero
- Logo, tagline "Engineering Intelligent Ecosystems.", subtitle, four vertical badges (AI / Energy / Industry / Health), three CTAs (Enter NeuNexus / Explore Divisions / Our Ecosystem).
- **Why it exists**: to state, in seven seconds, that BSGOTECH is a European technology parent with four verticals.

### 3.2 Ecosystem Architecture (new)
- Title "One Ecosystem. Multiple Intelligent Solutions.", animated diagram BSGOTECH → NeuNexus → (RENALIX | NeuGreen Energy).
- **Why**: to make the corporate architecture visually undeniable before visitors dive into any division.

### 3.3 Brand Cards (new)
- Four uniform premium cards for the four brands with equal logo tile, equal typography, equal CTA.
- **Why**: to communicate visual and organisational parity between the platforms.

### 3.4 About
- Seven engineering disciplines (AI, Cloud, IoT, Edge, Automation, Security, Data).
- **Why**: to prove BSGOTECH's competence spans the full stack.

### 3.5 Ecosystem Architecture (existing detailed Arch section)
- Deeper architectural diagram — parent / platform / divisions.

### 3.6 Tech Quiz
- 8-question interactive quiz, three personas.
- **Why**: engagement, lead capture, education.

### 3.7 Divisions
- Cards for NeuGreen (Active), NEUNEXUS Factory (Proposed), Renalix Health (Vision), NEUNEXUS Enterprise (Roadmap).

### 3.8 Platform Stack
- Layered platform explanation.

### 3.9 Partners
- Grid of strategic partners with real logos.

### 3.10 Roadmap
- Phased delivery plan through 2035.

### 3.11 Footer
- Copyright, address, contact.

## 4. Other pages
| Route | Purpose |
|-------|---------|
| `/neunexus` | NeuNexus Industrial Innovation Platform homepage |
| `/neunexus/pitch` | Uetze Consortium executive slide pitch (15 slides) |
| `/neugreen` | NeuGreen Energy corporate briefing (13 slides) |
| `/renalix` | RENALIX AI Healthcare landing |
| `/report` | Strategic Executive Report — Autonomous Manufacturing Blueprint (full document) |
| `/reports` | Hub of executive reports with PDF downloads |
| `/our-ecosystem` | Institutional ecosystem page with capabilities per level |
| `/partners` | Full partner directory |
| `/partners/:slug` | Partner profile page |
| `/ops` | Operations Center (internal, password-protected) |
| `/mionga`, `/press-kit`, `/blueprint`, `/blueprint-automotive` | Legacy / project pages |

## 5. Buttons
- **Primary**: white background, dark text — reserved for the single strongest CTA per section.
- **Secondary**: bordered, transparent — every other CTA.
- **Accent**: coloured border matching the section's accent (green / teal / rose / amber).
- **Hover**: subtle background lift on secondary; -4px y-translate on cards.
- **Test IDs**: every interactive element carries a unique `data-testid`.

## 6. Logo rules
- Every logo appears inside a **white rounded tile** with equal height (`h-11` on cards, `h-16` on hero decks).
- Max logo height inside the tile is 44–48 px depending on context.
- Minimum padding: `px-6 py-4` on rectangular tiles.
- **Never** stretch. Always `object-contain`.
- **Never** apply drop-shadows to the logo image itself — the tile provides the framing.
- **Never** use a logo where fallback text is acceptable (partners without an official file get text pills).

## 7. Animations
- Section entrances via `motion.div` with `initial={{ opacity: 0, y: 12 }} whileInView={{ opacity: 1, y: 0 }}`.
- Pulses on ecosystem nodes: subtle `scale: [1, 1.06, 1]` on 3.6s loop.
- Path draws: `pathLength: 0 → 1` over ~1s.
- Travelling dots on SVG paths via `offsetPath` / `offsetDistance`.
- Never any bounce, spin, or comic timing.

## 8. Language
- DE / EN / PT via a shared React `LangCtx` and per-page `DATA` dictionaries.
- Language switcher pill fixed top-right.
- Language persists in `localStorage` under `neunexus_lang`.
- Every public section must have DE, EN and PT copy for the primary title, subtitle, labels and calls-to-action.