Nosia.ai Landing Page Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Create a static Jekyll-based GitHub Pages site at nosia.ai serving as a project overview hub for Nosia, linking to all existing resources (documentation, guides, community, installation).

Architecture: Minimalist single-page Jekyll site with dark theme, hosted on GitHub Pages from the dilolabs/nosia-ai repository. The site features 8 content sections (Hero, Description, Features, Quick Start, Documentation, Community, Footer) with responsive design and smooth scroll navigation.

Tech Stack: Jekyll 4.3+, GitHub Pages, HTML5, CSS3 (custom), Markdown, GitHub Actions (optional)

File Structure

The implementation will create the following files in the dilolabs/nosia-ai repository:

dilolabs/nosia-ai/
├── _config.yml              # Jekyll configuration
├── _includes/
│   ├── head.html            # HTML head with metadata, favicon, styles
│   └── header.html          # Site header with logo and navigation
├── _layouts/
│   └── default.html         # Base layout
├── assets/
│   ├── css/
│   │   └── style.css        # Custom dark theme styles
│   └── images/
│       ├── nosia-logo.png   # Already exists
│       ├── favicon-16x16.png # To be generated
│       └── favicon-32x32.png # To be generated
├── _site/                  # Generated (gitignored)
├── index.md                # Main page content
├── 404.html                # Custom 404 page
├── CNAME                   # Custom domain: nosia.ai
├── Gemfile                 # Jekyll dependencies
├── Gemfile.lock            # Dependency lockfile
├── .gitignore              # Git ignore rules
└── .github/
    └── workflows/
        └── deploy.yml       # GitHub Actions workflow

Prerequisites

Implementation Plan

Phase 1: Repository Setup and Configuration

Task 1: Initialize Repository Structure

Files:

Create .gitignore with Jekyll-specific exclusions:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/.gitignore << 'EOF'
# Jekyll
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata

# Ruby
Gemfile.lock
*.gem
.bundle/

# Environment
.env
.env.*

# OS
.DS_Store
Thumbs.db

# IDE
.idea/
.vscode/
*.swp
*.swo

# Logs
*.log
npm-debug.log*

# Node (if added later)
node_modules/
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/.gitignore Expected: File contains all Jekyll and development exclusions

echo "nosia.ai" > /home/cbldev/gitd/dilolabs/nosia-ai/CNAME

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/CNAME Expected: nosia.ai

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add .gitignore CNAME
git commit -m "setup: add gitignore and CNAME for GitHub Pages

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Task 2: Configure Jekyll

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/_config.yml << 'EOF'
# Site settings
title: Nosia
description: >-
  Self-hosted AI RAG + MCP Platform. Run AI models on your own data with
  complete privacy and control.
url: https://nosia.ai
baseurl: ""

# Build settings
theme: null
plugins:
  - jekyll-sitemap
  - jekyll-feed

# Exclude from processing
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor/bundle/
  - .github/
  - .gitignore
  - README.md
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/_config.yml Expected: YAML file with site settings, plugins, and exclusions

cat > /home/cbldev/gitd/dilolabs/nosia-ai/Gemfile << 'EOF'
source "https://rubygems.org"

gem "jekyll", "~> 4.3"
gem "jekyll-sitemap"
gem "jekyll-feed"
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/Gemfile Expected: Ruby gemfile with jekyll and plugins

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add _config.yml Gemfile
git commit -m "config: add Jekyll configuration files

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Task 3: Create Directory Structure

Files:

cd /home/cbldev/gitd/dilolabs/nosia-ai
mkdir -p _includes _layouts assets/css assets/images .github/workflows

Run: ls -la /home/cbldev/gitd/dilolabs/nosia-ai/ Expected: All directories created successfully

for dir in _includes _layouts assets/css assets/images .github/workflows; do
  touch /home/cbldev/gitd/dilolabs/nosia-ai/$dir/.gitkeep
  rm /home/cbldev/gitd/dilolabs/nosia-ai/$dir/.gitkeep
done

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add _includes/ _layouts/ assets/ .github/
git commit -m "setup: create directory structure

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Phase 2: Create Layout and Includes

Task 4: Create Default Layout

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/_layouts/default.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control.">

<!-- Open Graph / Social -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://nosia.ai">
<meta property="og:title" content="Nosia">
<meta property="og:description" content="Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control.">
<meta property="og:image" content="https://nosia.ai/assets/images/nosia-logo.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Nosia">
<meta property="twitter:description" content="Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control.">
<meta property="twitter:image" content="https://nosia.ai/assets/images/nosia-logo.png">

<!-- Favicon -->
<link rel="icon" type="image/png" href="/assets/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/images/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/assets/images/nosia-logo.png">

<!-- Styles -->
<link rel="stylesheet" href="/assets/css/style.css">

<title>Nosia - Nosia.ai Landing Page Implementation Plan</title>

</head>
<body>
  <header class="header">
  <div class="container">
    
    <a href="/" class="logo" aria-label="">
      <img src="/assets/images/nosia-logo.png" alt="" height="48">
    </a>
    <nav class="nav" aria-label="">
      <a href="#documentation"></a>
      <a href="#community"></a>
      <a href="https://github.com/nosia-ai/nosia" target="_blank" rel="noopener noreferrer">GitHub</a>
      <a href="#" class="lang-toggle" data-lang-toggle aria-label="">English</a>
    </nav>
  </div>
</header>

  <main>
    <section class="hero">
  <div class="container">
    <img src="/assets/images/nosia-logo.png" alt="Nosia" height="80" />
    <h1>Plateforme AI RAG + MCP auto-hébergée</h1>
    <p class="subtitle">Exécutez des modèles d'IA sur vos propres données avec une confidentialité et un contrôle complets</p>
    <a href="#quickstart" class="btn btn-primary">Commencer</a>
  </div>
</section>

<section id="description" class="description">
  <div class="container">
    <p>Nosia est une plateforme open-source qui apporte des capacités d'IA de niveau entreprise à votre propre infrastructure. Avec la génération augmentée par récupération (RAG), l'intégration du protocole MCP (Model Context Protocol), et des APIs compatibles OpenAI, vous pouvez construire des applications d'IA qui fonctionnent avec vos données, à votre manière.</p>
  </div>
</section>

<section id="story" class="story highlighted">
  <div class="container">
    <h2>🌱 Notre histoire</h2>
    <div class="story-content">
      <p>Nosia, c'est avant tout une <strong>belle histoire humaine</strong>. Celle de quatre passionnés — Cyril, Olivier, Aude et Melvin — unis par des années d'amitié et de collaboration. Une aventure née d'une conviction commune : <strong>la technologie doit servir l'humain, pas l'inverse</strong>.</p>
      
      <p><strong>Tout a commencé en 2024.</strong> Olivier, toujours à l'affût des innovations qui font sens, partage avec Cyril sa découverte du RAG. Une étincelle. <strong>C'est Cyril qui trouve le nom Nosia</strong> — un nom qui porte nos valeurs : souveraineté numérique, éthique, respect des données. Puis Aude, Cyril et Melvin relèvent le défi : allier l'expertise technique à une approche centrée humain, pour créer une IA qui respecte à la fois les personnes et la planète.</p>
      
      <p><strong>Des heures de brainstorming, des tests, des prototypes...</strong> Toujours la même question : comment concilier innovation technologique, souveraineté des données, open source et valeurs européennes ? Comment prouver qu'un autre numérique est possible, plus responsable, plus humain ?</p>
      
      <p><strong>C'est dans cette énergie collective que Nosia a pris vie.</strong> Pas dans le cadre formel d'une entreprise, mais dans l'enthousiasme de quatre personnes convaincues qu'on peut allier performance technique et éthique. Une aventure où chaque détail compte : du choix du nom jusqu'à la dernière ligne de code.</p>
      
      <p><strong>Et cette aventure humaine et responsable</strong> continue. En <strong>juin 2026</strong>, François, qui anime la chaîne YouTube <strong>Kokori Kodo</strong>, a réalisé une première vidéo de présentation — que vous pouvez découvrir dans la section suivante.</p>
    </div>
  </div>
</section>

<section id="demo" class="demo">
  <div class="container">
    <h2>Découvrez Nosia en action</h2>
    <div class="video-container">
      <iframe src="https://www.youtube-nocookie.com/embed/HD5k-LjGvGw?si=eaYP5pCkKq-qHh3A" title="Nosia - Démo de la plateforme AI RAG + MCP auto-hébergée" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
      </iframe>
    </div>
  </div>
</section>

<section id="features" class="features">
  <div class="container">
    <h2>Fonctionnalités clés</h2>
    <p>Découvrez comment Nosia vous donne le contrôle total sur votre IA avec des outils puissants et intuitifs.</p>
    <div class="grid">
      <div class="card">
        <span class="icon">🔒</span>
        <h3>Privé &amp; Sécurisé</h3>
        <p>Vos données restent sur votre infrastructure</p>
      </div>
      <div class="card">
        <span class="icon">🤖</span>
        <h3>API compatible OpenAI</h3>
        <p>Remplacement direct des clients OpenAI</p>
      </div>
      <div class="card">
        <span class="icon">📚</span>
        <h3>Propulsé par RAG</h3>
        <p>Enrichissez les réponses de l'IA avec vos documents</p>
      </div>
      <div class="card">
        <span class="icon">🔌</span>
        <h3>Intégration MCP</h3>
        <p>Connectez l'IA à des outils et services externes</p>
      </div>
      <div class="card">
        <span class="icon">🤖</span>
        <h3>Compétences d'agent (bientôt)</h3>
        <p>Étendez le chat avec des compétences personnalisées basées sur LLM et Ruby</p>
      </div>
      <div class="card">
        <span class="icon">🔄</span>
        <h3>Streaming en temps réel</h3>
        <p>Événements envoyés par le serveur pour des réponses en direct</p>
      </div>
    </div>
  </div>
</section>

<section id="quickstart" class="quickstart">
  <div class="container">
    <h2>Commencez en quelques minutes</h2>
    <p>Une seule commande installe Docker et toutes ses dépendances :</p>
    <div class="code-block">
      <code>curl -fsSL https://get.nosia.ai | sh</code>
    </div>
    <p>Pour Windows :</p>
    <div class="code-block">
      <code>Invoke-WebRequest https://get.nosia.ai/install.ps1 -OutFile install.ps1; .\install.ps1</code>
    </div>
  </div>
</section>

<section id="documentation" class="documentation">
  <div class="container">
    <h2>Documentation</h2>
    <p>Toute la documentation dont vous avez besoin pour déployer et utiliser Nosia efficacement.</p>
    <div class="grid">
      <a href="https://blog.nosia.ai/" class="card" target="_blank" rel="noopener">
        <span class="icon">📖</span>
        <h3>Blog Nosia</h3>
        <p>Notre vision, notre mission, nos histoires</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/ARCHITECTURE.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📐</span>
        <h3>Documentation sur l'architecture</h3>
        <p>Plongée technique approfondie</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/DEPLOYMENT.md" class="card" target="_blank" rel="noopener">
        <span class="icon">🚀</span>
        <h3>Guide de déploiement</h3>
        <p>Stratégies de déploiement en production</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/OBSERVABILITY.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📝</span>
        <h3>Observabilité</h3>
        <p>Observabilité complète</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/tree/main/docs" class="card" target="_blank" rel="noopener">
        <span class="icon">📋</span>
        <h3>Index complet de la documentation</h3>
        <p>Toute la documentation</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/DIAGRAMS.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📊</span>
        <h3>Diagrammes du système</h3>
        <p>Représentations visuelles</p>
      </a>
    </div>
  </div>
</section>

<section id="community" class="community">
  <div class="container">
    <h2>Communauté &amp; Support</h2>
    <p>Rejoignez notre communauté croissante et bénéficiez d'un support actif.</p>
    <div class="grid">
      <a href="https://github.com/nosia-ai/nosia/discussions" class="card" target="_blank" rel="noopener">
        <span class="icon">💬</span>
        <h3>Discussions GitHub</h3>
        <p>Posez des questions et partagez vos idées</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/issues" class="card" target="_blank" rel="noopener">
        <span class="icon">🐛</span>
        <h3>Signaler des problèmes</h3>
        <p>Signaler des bugs et demander des fonctionnalités</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/CONTRIBUTING.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📝</span>
        <h3>Guide de contribution</h3>
        <p>Comment contribuer</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/CODE_OF_CONDUCT.md" class="card" target="_blank" rel="noopener">
        <span class="icon">🤝</span>
        <h3>Code de conduite</h3>
        <p>Règles de la communauté</p>
      </a>
    </div>
  </div>
</section>

<footer class="footer">
  <div class="container">
    <p>Copyright © 2024-2026 Dilolabs</p>
    <p class="links">Sous licence <a href="https://github.com/nosia-ai/nosia/blob/main/LICENSE" target="_blank" rel="noopener">MIT</a></p>
    <div class="links">
      <a href="https://nosia.ai" target="_blank" rel="noopener">Site web</a>
      <a href="https://github.com/nosia-ai/nosia" target="_blank" rel="noopener">GitHub</a>
      <a href="https://hub.docker.com/r/dilolabs/nosia" target="_blank" rel="noopener">Docker Hub</a>
    </div>
  </div>
</footer>

  </main>
  <a href="#" class="back-to-top" aria-label="Back to top">^</a>
</body>
</html>
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/_layouts/default.html Expected: HTML5 document with includes for head and header, plus back-to-top button

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add _layouts/default.html
git commit -m "layout: add default HTML layout

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Task 5: Create Head Include

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/_includes/head.html << 'EOF'
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control.">

<!-- Open Graph / Social -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://nosia.ai">
<meta property="og:title" content="Nosia">
<meta property="og:description" content="Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control.">
<meta property="og:image" content="https://nosia.ai/assets/images/nosia-logo.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Nosia">
<meta property="twitter:description" content="Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control.">
<meta property="twitter:image" content="https://nosia.ai/assets/images/nosia-logo.png">

<!-- Favicon -->
<link rel="icon" type="image/png" href="/assets/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/images/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/assets/images/nosia-logo.png">

<!-- Styles -->
<link rel="stylesheet" href="/assets/css/style.css">

<title>Nosia - Nosia.ai Landing Page Implementation Plan</title>
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/_includes/head.html Expected: HTML head with meta tags, Open Graph, Twitter cards, favicons, and CSS link

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add _includes/head.html
git commit -m "include: add head.html with metadata and favicons

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Task 6: Create Header Include

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/_includes/header.html << 'EOF'
<header class="header">
  <div class="container">
    <a href="/" class="logo" aria-label="Nosia Home">
      <img src="/assets/images/nosia-logo.png" alt="Nosia Logo" height="48">
    </a>
    <nav class="nav" aria-label="Main navigation">
      <a href="#documentation">Documentation</a>
      <a href="#community">Community</a>
      <a href="https://github.com/nosia-ai/nosia" target="_blank" rel="noopener noreferrer">GitHub<span class="external-icon" aria-hidden="true">┗</span></a>
    </nav>
  </div>
</header>
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/_includes/header.html Expected: Header with logo, navigation links, and external icon for GitHub

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add _includes/header.html
git commit -m "include: add header.html with logo and navigation

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Phase 3: Create Styles

Task 7: Create CSS Stylesheet

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/assets/css/style.css << 'EOF'
/* ===== CSS Variables ===== */
:root {
  --color-primary: #22c55e;
  --color-primary-dark: #16a34a;
  --color-bg: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-accent: #06b6d4;
  --color-accent-dark: #0891b2;
  
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  
  --max-width: 1200px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; font-weight: 600; }

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
}

.subtitle {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Layout ===== */
section {
  padding: var(--spacing-3xl) 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--spacing-md) 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-bg-tertiary);
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}

.header.scrolled {
  padding: var(--spacing-sm) 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: block;
}

.logo img {
  height: 48px;
}

.nav {
  display: flex;
  gap: var(--spacing-xl);
}

.nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

.nav a:hover {
  color: var(--color-text);
}

.nav a::after {
  content: "┗";
  font-size: 0.75em;
  opacity: 0.7;
  margin-left: var(--spacing-xs);
}

/* ===== Hero ===== */
.hero {
  padding-top: calc(var(--spacing-3xl) + 80px);
  text-align: center;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero img {
  margin-bottom: var(--spacing-xl);
}

.hero h1 {
  margin-bottom: var(--spacing-lg);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Cards ===== */
.card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: block;
}

.card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card .icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--spacing-md);
}

.card h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.card p {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

/* ===== Code Blocks ===== */
.code-block {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}

.code-block code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text);
  background: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== Footer ===== */
.footer {
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
  border-top: 1px solid var(--color-bg-tertiary);
  text-align: center;
}

.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.footer p {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.footer .links {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.footer .links a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.footer .links a:hover {
  color: var(--color-text);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .nav {
    display: none;
  }
  
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  
  .hero {
    padding-top: calc(var(--spacing-3xl) + 60px);
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .nav a::after {
    display: none;
  }
}

/* ===== External Link Indicator ===== */
a[target="_blank"]::after {
  content: "┗";
  margin-left: var(--spacing-xs);
  font-size: 0.75em;
  opacity: 0.7;
}

/* ===== Back to Top Button ===== */
.back-to-top {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: 50%;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.2s ease;
  z-index: 1000;
}

.back-to-top:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.back-to-top.visible {
  display: flex;
}

/* ===== In-page anchor link styling ===== */
[href^="#"] {
  color: var(--color-accent);
}

[href^="#"]:hover {
  color: var(--color-accent-dark);
}
EOF

Run: wc -l /home/cbldev/gitd/dilolabs/nosia-ai/assets/css/style.css Expected: File with ~200+ lines of CSS

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add assets/css/style.css
git commit -m "styles: add complete CSS with dark theme and responsive design

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Phase 4: Create Page Content

Task 8: Create Index Page

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/index.md << 'EOF'
---
layout: default
title: Home
---

<section class="hero">
  <div class="container">
    <img src="/assets/images/nosia-logo.png" alt="Nosia" height="80">
    <h1>Self-hosted AI RAG + MCP Platform</h1>
    <p class="subtitle">Run AI models on your own data with complete privacy and control</p>
    <a href="https://get.nosia.ai" class="btn btn-primary">Get Started</a>
  </div>
</section>

<section id="description" class="description">
  <div class="container">
    <p>Nosia is an open-source platform that brings enterprise-grade AI capabilities to your own infrastructure. With Retrieval Augmented Generation (RAG), Model Context Protocol (MCP) integration, and OpenAI-compatible APIs, you can build AI applications that work with your data, your way.</p>
  </div>
</section>

<section id="features" class="features">
  <div class="container">
    <h2>Key Features</h2>
    <div class="grid">
      <div class="card">
        <span class="icon">🔒</span>
        <h3>Private & Secure</h3>
        <p>Your data stays on your infrastructure</p>
      </div>
      <div class="card">
        <span class="icon">🤖</span>
        <h3>OpenAI-Compatible API</h3>
        <p>Drop-in replacement for OpenAI clients</p>
      </div>
      <div class="card">
        <span class="icon">📚</span>
        <h3>RAG-Powered</h3>
        <p>Augment AI responses with your documents</p>
      </div>
      <div class="card">
        <span class="icon">🔌</span>
        <h3>MCP Integration</h3>
        <p>Connect AI to external tools and services</p>
      </div>
      <div class="card">
        <span class="icon">🤖</span>
        <h3>Agent Skills</h3>
        <p>Extend chat with custom LLM-driven and Ruby-based skills</p>
      </div>
      <div class="card">
        <span class="icon">🔄</span>
        <h3>Real-time Streaming</h3>
        <p>Server-sent events for live responses</p>
      </div>
    </div>
  </div>
</section>

<section id="quickstart" class="quickstart">
  <div class="container">
    <h2>Get Started in Minutes</h2>
    <p>One command installs Docker and all dependencies:</p>
    <div class="code-block">
      <code>curl -fsSL https://get.nosia.ai | sh</code>
    </div>
    <p>For Windows:</p>
    <div class="code-block">
      <code>Invoke-WebRequest https://get.nosia.ai/install.ps1 -OutFile install.ps1; .\install.ps1</code>
    </div>
  </div>
</section>

<section id="documentation" class="documentation">
  <div class="container">
    <h2>Documentation</h2>
    <div class="grid">
      <a href="https://guides.nosia.ai/" class="card" target="_blank" rel="noopener">
        <span class="icon">📖</span>
        <h3>Nosia Guides</h3>
        <p>Step-by-step tutorials</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/ARCHITECTURE.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📐</span>
        <h3>Architecture Documentation</h3>
        <p>Technical deep dive</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/DEPLOYMENT.md" class="card" target="_blank" rel="noopener">
        <span class="icon">🚀</span>
        <h3>Deployment Guide</h3>
        <p>Production deployment strategies</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/agent-skills-development.md" class="card" target="_blank" rel="noopener">
        <span class="icon">🤖</span>
        <h3>Agent Skills Development</h3>
        <p>Create custom skills</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/tree/main/docs" class="card" target="_blank" rel="noopener">
        <span class="icon">📋</span>
        <h3>Complete Documentation Index</h3>
        <p>All documentation</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/docs/DIAGRAMS.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📊</span>
        <h3>System Diagrams</h3>
        <p>Visual representations</p>
      </a>
    </div>
  </div>
</section>

<section id="community" class="community">
  <div class="container">
    <h2>Community & Support</h2>
    <div class="grid">
      <a href="https://github.com/nosia-ai/nosia/discussions" class="card" target="_blank" rel="noopener">
        <span class="icon">💬</span>
        <h3>GitHub Discussions</h3>
        <p>Ask questions and share ideas</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/issues" class="card" target="_blank" rel="noopener">
        <span class="icon">🐛</span>
        <h3>Report Issues</h3>
        <p>Bug reports and feature requests</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/CONTRIBUTING.md" class="card" target="_blank" rel="noopener">
        <span class="icon">📝</span>
        <h3>Contributing Guide</h3>
        <p>How to contribute</p>
      </a>
      <a href="https://github.com/nosia-ai/nosia/blob/main/CODE_OF_CONDUCT.md" class="card" target="_blank" rel="noopener">
        <span class="icon">🤝</span>
        <h3>Code of Conduct</h3>
        <p>Community guidelines</p>
      </a>
    </div>
  </div>
</section>

<footer class="footer">
  <div class="container">
    <p>Copyright © 2024-2026 Cyril Blaecke</p>
    <p>Licensed under <a href="https://github.com/nosia-ai/nosia/blob/main/LICENSE" target="_blank" rel="noopener">MIT License</a></p>
    <div class="links">
      <a href="https://nosia.ai" target="_blank" rel="noopener">Website</a>
      <a href="https://github.com/nosia-ai/nosia" target="_blank" rel="noopener">GitHub</a>
      <a href="https://hub.docker.com/u/ai" target="_blank" rel="noopener">Docker Hub</a>
    </div>
  </div>
</footer>

<script>
// Scroll behavior for header
window.addEventListener('scroll', function() {
  const header = document.querySelector('.header');
  if (window.scrollY > 10) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

// Back to top button
window.addEventListener('scroll', function() {
  const backToTop = document.querySelector('.back-to-top');
  if (window.scrollY > window.innerHeight) {
    backToTop.classList.add('visible');
  } else {
    backToTop.classList.remove('visible');
  }
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});
</script>
EOF

Run: wc -l /home/cbldev/gitd/dilolabs/nosia-ai/index.md Expected: File with ~100+ lines of Markdown

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add index.md
git commit -m "content: add index.md with all page sections and JavaScript

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Task 9: Create Custom 404 Page

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/404.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Page not found - Nosia">
  <title>404 - Page Not Found | Nosia</title>
  <link rel="icon" type="image/png" href="/assets/images/favicon-32x32.png" sizes="32x32">
  <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
  <header class="header">
    <div class="container">
      <a href="/" class="logo" aria-label="Nosia Home">
        <img src="/assets/images/nosia-logo.png" alt="Nosia Logo" height="48">
      </a>
    </div>
  </header>
  <main>
    <section class="hero" style="padding-top: 120px;">
      <div class="container">
        <h1>404</h1>
        <p class="subtitle">Page Not Found</p>
        <p>The page you're looking for doesn't exist or has been moved.</p>
        <a href="/" class="btn btn-primary">Go Home</a>
      </div>
    </section>
  </main>
</body>
</html>
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/404.html Expected: HTML 404 page with header, error message, and Go Home button

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add 404.html
git commit -m "content: add custom 404 error page

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Phase 5: Generate Favicons

Task 10: Create Favicon Images

Files:

Use ImageMagick (if installed):

# Convert logo to 32x32 favicon
convert /home/cbldev/gitd/dilolabs/nosia-ai/nosia-logo.png \
  -resize 32x32 \
  -background transparent \
  /home/cbldev/gitd/dilolabs/nosia-ai/assets/images/favicon-32x32.png

# Convert logo to 16x16 favicon
convert /home/cbldev/gitd/dilolabs/nosia-ai/nosia-logo.png \
  -resize 16x16 \
  -background transparent \
  /home/cbldev/gitd/dilolabs/nosia-ai/assets/images/favicon-16x16.png

OR use online tool:

Run: ls -la /home/cbldev/gitd/dilolabs/nosia-ai/assets/images/ Expected: favicon-16x16.png and favicon-32x32.png present

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add assets/images/favicon-16x16.png assets/images/favicon-32x32.png
git commit -m "assets: add favicon images

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Phase 6: Optional GitHub Actions Workflow

Task 11: Create GitHub Actions Deploy Workflow

Files:

cat > /home/cbldev/gitd/dilolabs/nosia-ai/.github/workflows/deploy.yml << 'EOF'
name: Deploy to GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: https://nosia.ai
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true
      
      - name: Install dependencies
        run: |
          gem install bundler
          bundle install
      
      - name: Build site
        run: bundle exec jekyll build --baseurl ""
      
      - name: Setup Pages
        uses: actions/configure-pages@v4
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: _site/
      
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
EOF

Run: cat /home/cbldev/gitd/dilolabs/nosia-ai/.github/workflows/deploy.yml Expected: GitHub Actions workflow YAML

cd /home/cbldev/gitd/dilolabs/nosia-ai
git add .github/workflows/deploy.yml
git commit -m "ci: add GitHub Pages deployment workflow

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"

Phase 7: Local Testing

Task 12: Install Jekyll Dependencies

Prerequisite: Ruby 3.0+ installed

Run: gem install bundler Expected: Bundler installed successfully

cd /home/cbldev/gitd/dilolabs/nosia-ai
bundle install

Expected: All gems installed

Run: bundle exec jekyll --version Expected: Jekyll version displayed (4.3.x or higher)

Task 13: Test Local Build

cd /home/cbldev/gitd/dilolabs/nosia-ai
bundle exec jekyll build --baseurl ""

Expected: Site built successfully, _site directory created

Run: ls -la /home/cbldev/gitd/dilolabs/nosia-ai/_site/ Expected: index.html, assets/, etc. present

cd /home/cbldev/gitd/dilolabs/nosia-ai
bundle exec jekyll serve --livereload --baseurl ""

Expected: Server running at http://localhost:4000

Open: http://localhost:4000 Verify:

Task 14: Run Test Checklist

Phase 8: Deploy to GitHub Pages

Task 15: Push to GitHub

On GitHub.com:

cd /home/cbldev/gitd/dilolabs/nosia-ai
git remote add origin git@github.com:dilolabs/nosia-ai.git
git branch -M main
git push -u origin main

Expected: All commits pushed to GitHub

Open: https://github.com/dilolabs/nosia-ai Expected: All files visible in repository

Task 16: Enable GitHub Pages

On GitHub.com:

  1. Go to repository Settings
  2. Navigate to Pages (left sidebar)
  3. Under “Source”, select: Deploy from a branch
  4. Branch: main
  5. Folder: / (root)
  6. Click Save

On GitHub.com:

  1. In Pages settings, enter nosia.ai under Custom domain
  2. Click Save
  3. Wait for DNS verification (may take a few minutes)

With your DNS provider:

Open: https://nosia.ai Expected: Site loads successfully (may take 1-2 minutes for first deployment)

Task 17: Post-Deployment Verification

Final Commit Structure

After all tasks are complete, the repository should have the following commit history:

1daef07 docs: add Nosia.ai landing page design specification
<commit> setup: add gitignore and CNAME for GitHub Pages
<commit> config: add Jekyll configuration files
<commit> setup: create directory structure
<commit> layout: add default HTML layout
<commit> include: add head.html with metadata and favicons
<commit> include: add header.html with logo and navigation
<commit> styles: add complete CSS with dark theme and responsive design
<commit> content: add index.md with all page sections and JavaScript
<commit> content: add custom 404 error page
<commit> assets: add favicon images
<commit> ci: add GitHub Pages deployment workflow

Rollback Plan

If issues occur during deployment:

  1. Build fails on GitHub Pages:
    • Check GitHub Actions logs
    • Test locally: bundle exec jekyll build
    • Fix any dependency or syntax errors
    • Push fixes to main branch
  2. DNS not resolving:
    • Verify CNAME record exists and is correct
    • Check TTL (should be low for testing)
    • Wait up to 48 hours for propagation
    • Use https://dnschecker.org/ to verify
  3. HTTPS not working:
    • GitHub Pages automatically provisions HTTPS
    • Wait 10-15 minutes after DNS configuration
    • Check GitHub Pages settings for custom domain
  4. Content errors:
    • Fix in local development
    • Test with bundle exec jekyll serve
    • Push changes to main branch
    • GitHub Pages will auto-redeploy

Success Criteria

The implementation is considered complete when:

Two Execution Options

Plan complete and saved to /home/cbldev/gitd/dilolabs/nosia-ai/docs/superpowers/plans/2026-06-17-nosia-ai-landing-page-implementation.md

Two execution options:

1. Subagent-Driven (recommended) - I dispatch a fresh subagent per task, review between tasks, fast iteration

2. Inline Execution - Execute tasks in this session using executing-plans, batch execution with checkpoints

Which approach?

^