> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_14/session_01_hero_cockpit_and_primary_ctas.md).

# Session 01: Hero Cockpit And Primary CTAs

**Session ID**: `phase14-session01-hero-cockpit-and-primary-ctas` **Package**: public-website **Status**: Not Started **Estimated Tasks**: \~18-24 **Estimated Duration**: 2-4 hours

***

## Objective

Build the homepage first viewport with a strong FactionOS signal, simulated terminal cockpit, live status readouts, and visible demo/docs CTAs.

***

## Scope

### In Scope (MVP)

* Build `HeroCockpit.astro`.
* Build or complete `LiveStatusPanel.astro`.
* Add homepage hero copy centered on mission control for AI coding agents.
* Show a simulated terminal prompt and local runtime/event hints.
* Show concise product positioning for local-first observability and orchestration.
* Add primary CTA to `https://demo.faction-os.com/`.
* Add secondary CTA to `https://faction-os.gitbook.io/faction-os-docs`.
* Keep demo/docs actions visible without scrolling on desktop and mobile.
* Include FactionOS brand mark or clear brand treatment in the first viewport.
* Avoid a generic split text/media layout or card-only SaaS hero.
* Ensure hero text wraps cleanly at mobile widths.

### Out of Scope

* Full battlefield visualization beyond a lightweight placeholder or integrated preview slot.
* Completing all homepage sections.
* Adding real runtime calls, analytics, forms, or session storage.

***

## Prerequisites

* [ ] Phase 13 shared shell and global CSS completed.
* [ ] Site data contains demo/docs URLs.
* [ ] Brand asset path available or a text-first fallback approved.

***

## Deliverables

1. `src/components/marketing/HeroCockpit.astro`.
2. `src/components/marketing/LiveStatusPanel.astro` or equivalent status component.
3. Homepage route updated to use the hero.
4. Hero CTAs wired to demo and public docs.
5. Responsive and reduced-motion-safe hero styles.

***

## Content Requirements

Hero should communicate:

* FactionOS.
* Mission control for AI coding agents.
* Local-first observability and orchestration.
* Claude Code, Codex CLI, and compatible event producer support.
* A live browser cockpit rather than a generic dashboard.

Status panel should use simulated values only, such as:

* Local server online.
* Active agents.
* Events processed.
* Mission state.

The simulated nature of the values must not imply live hosted data collection.

***

## Task Expansion Guidance

When expanded with `plansession`, keep the checklist to 18-24 tasks covering:

* Hero component.
* Status component.
* CTA component usage.
* Copy integration.
* Brand asset integration.
* Responsive desktop layout.
* Responsive mobile layout.
* Focus and keyboard checks.
* Reduced-motion rules.
* Metadata update for home.
* Visual smoke in local dev.

***

## Success Criteria

* [ ] First viewport clearly identifies FactionOS and the product concept.
* [ ] Demo and docs CTAs are visible without scrolling on desktop and mobile.
* [ ] Hero uses tactical/cockpit visual language instead of generic SaaS composition.
* [ ] CTAs have accessible names and visible focus states.
* [ ] No text overlaps at 360px, 768px, 1280px, or wide desktop viewports.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_14/session_01_hero_cockpit_and_primary_ctas.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.