2026-06-17 Nosia.ai Landing Page Design
Status: Draft
Author: Mistral Vibe
Reviewers: Pending
Last Updated: 2026-06-17
Overview
Purpose
This document specifies the design for a static GitHub Pages site serving as the project overview hub for Nosia.ai. The site will be hosted at nosia.ai from the dilolabs/nosia-ai GitHub repository and will act as a central directory linking to all existing Nosia resources (documentation, guides, community, installation).
Background
Nosia is an open-source, self-hosted AI RAG + MCP Platform that allows users to run AI models on their own data with complete privacy and control. The project currently has:
- Main repository: github.com/nosia-ai/nosia
- Documentation: guides.nosia.ai
- Installation: get.nosia.ai
- Existing documentation in the main repo under
/docs
The new landing page will consolidate access to these resources in a single, professional, easy-to-navigate hub.
Goals
- Provide a clear, professional first impression of the Nosia project
- Direct users to the appropriate resources based on their needs
- Showcase key features and capabilities
- Facilitate quick installation and getting started
- Link to all existing documentation and community resources
- Maintain consistency with existing Nosia branding
Non-Goals
- Replace existing documentation sites (guides.nosia.ai, docs in main repo)
- Host detailed technical documentation on the landing page
- Create a multi-page website (single-page design)
- Implement user authentication or dynamic features
Requirements
Functional Requirements
| ID | Requirement | Priority |
|---|---|---|
| R01 | Display project logo prominently | High |
| R02 | Present hero section with main value proposition | High |
| R03 | Show key features in an easily scannable format | High |
| R04 | Provide one-command installation instructions | High |
| R05 | Link to all existing documentation resources | High |
| R06 | Link to community support channels | High |
| R07 | Include copyright and license information | Medium |
| R08 | Support dark theme | High |
| R09 | Be fully responsive on mobile devices | High |
| R10 | Load quickly (< 2 seconds) | Medium |
Non-Functional Requirements
| ID | Requirement | Priority |
|---|---|---|
| NF01 | Hosted on GitHub Pages | High |
| NF02 | Custom domain: nosia.ai | High |
| NF03 | Built with Jekyll | High |
| NF04 | HTTPS enabled | High |
| NF05 | SEO optimized | Medium |
| NF06 | Accessible (WCAG 2.1 AA) | Medium |
| NF07 | Maintainable by non-developers | Medium |
Design
Architecture
Static Site Generator: Jekyll
Hosting: GitHub Pages
Repository: dilolabs/nosia-ai
Custom Domain: nosia.ai
Build: GitHub Pages native Jekyll build
Repository Structure
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 wrapping all pages
├── assets/
│ ├── css/
│ │ └── style.css # Custom styles (dark theme)
│ └── images/
│ ├── nosia-logo.png # Project logo (provided by user)
│ ├── favicon-16x16.png # Favicon
│ └── favicon-32x32.png # Favicon
├── index.md # Main page content in Markdown
├── 404.html # Custom 404 page
├── CNAME # Custom domain configuration
├── Gemfile # Jekyll dependencies
├── Gemfile.lock # Locked dependency versions
├── .gitignore # Git ignore rules
└── .github/
└── workflows/
└── deploy.yml # GitHub Actions workflow (optional)
Rationale:
- Minimal structure for a single-page site
- Separation of concerns: layouts, includes, assets
- Markdown for content enables easy editing by non-developers
- Custom CSS for consistent branding
Page Layout
Single-column, scrollable layout with the following sections in order:
1. Header
- Content: Logo (left), Navigation links (right)
- Navigation Links:
- Documentation
- Community
- GitHub
- Behavior: Fixed at top, collapses on scroll
2. Hero Section
- Content:
- Logo (nosia-logo.png, 80px height)
- Headline: “Self-hosted AI RAG + MCP Platform”
- Subheadline: “Run AI models on your own data with complete privacy and control”
- Primary CTA Button: “Get Started” → links to https://get.nosia.ai
- Behavior: Centered, full-width background
3. Project Description
- Content: 2-3 sentence overview
- Example text:
“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.”
4. Key Features
- Format: Grid of feature cards (3 columns on desktop, 2 on tablet, 1 on mobile)
- Features to include:
- 🔒 Private & Secure - Your data stays on your infrastructure
- 🤖 OpenAI-Compatible API - Drop-in replacement for OpenAI clients
- 📚 RAG-Powered - Augment AI responses with your documents
- 🔌 MCP Integration - Connect AI to external tools and services
- 🤖 Agent Skills - Extend chat with custom LLM-driven and Ruby-based skills
- 🔄 Real-time Streaming - Server-sent events for live responses
- Each card: Icon, title, brief description
5. Quick Start
- Content:
- Section title: “Get Started in Minutes”
- macOS/Linux install command:
curl -fsSL https://get.nosia.ai | sh - Windows install command:
Invoke-WebRequest https://get.nosia.ai/install.ps1 -OutFile install.ps1; .\install.ps1 - Note: “One command installs Docker and all dependencies”
6. Documentation Links
- Format: Grid of documentation cards
- Links:
- 📖 Nosia Guides - Step-by-step tutorials
- 📐 Architecture Documentation - Technical deep dive
- 🚀 Deployment Guide - Production deployment strategies
- 🤖 Agent Skills Development - Create custom skills
- 📋 Complete Documentation Index - All documentation
- 📊 System Diagrams - Visual representations
- Note: All links open in new tabs
7. Community & Support
- Format: Grid of community cards
- Links:
- 💬 GitHub Discussions - Ask questions and share ideas
- 🐛 Report Issues - Bug reports and feature requests
- 📝 Contributing Guide - How to contribute
- 🤝 Code of Conduct - Community guidelines
8. Footer
- Content:
- Copyright: “Copyright © 2024-2026 Cyril Blaecke”
- License: “Licensed under MIT License”
- Links:
- Website: nosia.ai
- GitHub: github.com/nosia-ai/nosia
- Docker Hub: hub.docker.com/u/ai
- Note: Social links if any exist
Visual Design
Color Palette
| Name | Hex | Usage |
|---|---|---|
| Primary | #22c55e |
Logo, accents, buttons |
| Primary Dark | #16a34a |
Hover states |
| Background | #0f172a |
Page background |
| Background Secondary | #1e293b |
Card backgrounds |
| Background Tertiary | #334155 |
Borders |
| Text Primary | #f1f5f9 |
Body text |
| Text Secondary | #94a3b8 |
Subtle text, descriptions |
| Accent | #06b6d4 |
CTA buttons, links |
| Accent Dark | #0891b2 |
CTA hover states |
Typography
:root {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
}
body {
font-family: var(--font-sans);
line-height: 1.6;
}
code, pre {
font-family: var(--font-mono);
}
Headings:
- H1: 3rem (48px), bold, primary color
- H2: 2.25rem (36px), bold, text primary
- H3: 1.5rem (24px), bold, text primary
- H4: 1.25rem (20px), semibold, text secondary
Body:
- Base: 1rem (16px), regular, text primary
- Lead: 1.125rem (18px), lighter weight
Spacing
- Base unit: 0.25rem (4px)
- Section gaps: 3rem (48px) on desktop, 2rem (32px) on mobile
- Card padding: 1.5rem (24px)
- Border radius: 0.5rem (8px) for cards, 0.25rem (4px) for buttons
Logo Usage
- Header: 48px height
- Hero: 80px height
- File:
assets/images/nosia-logo.png - Format: PNG with transparent background
Component Styles
Cards:
- Background:
var(--background-secondary) - Border: 1px solid
var(--background-tertiary) - Border radius: 0.5rem
- Padding: 1.5rem
- Hover: border color changes to primary
Buttons:
- Primary: Background
#22c55e, text white - Secondary: Background
var(--background-secondary), border#334155 - Padding: 0.75rem 1.5rem
- Border radius: 0.25rem
- Transition: all 0.2s ease
Links:
- Color:
#06b6d4 - Hover:
#0891b2 - External: opens in new tab, has external link icon (┗)
Code Blocks:
- Background:
var(--background-secondary) - Border: 1px solid
var(--background-tertiary) - Border radius: 0.5rem
- Padding: 1rem
- Overflow: auto
Navigation & User Flow
Header Navigation:
[Logo] Documentation Community GitHub
In-Page Navigation:
- Clicking nav links smoothly scrolls to corresponding section
- URL hash updates (e.g.,
nosia.ai/#features) - Current section highlighted in nav (optional enhancement)
External Links:
- All documentation, community, and install links point to external sites
- Opens in new tab by default
- External link indicator (┗ icon)
CTA Priority:
- Primary: “Get Started” button in hero → https://get.nosia.ai
- Secondary: Documentation cards
- Tertiary: Community cards
Scroll Behavior:
- Smooth scroll for all anchor links
- Header reduces in size on scroll (from 80px to 64px)
- “Back to top” button appears when scrolled past viewport height
Responsive Design
Breakpoints:
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: ≥ 1024px
Adaptations:
- Mobile: Single column, stacked sections, navigation hidden
- Tablet: 2-column grid for features and cards
- Desktop: 3-column grid for features and cards
Technical Implementation
Jekyll Configuration (_config.yml)
# 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
Layout Template (_layouts/default.html)
<!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 - 2026-06-17 Nosia.ai Landing Page Design</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>
<h1 id="nosiaai-landing-page-implementation-plan">Nosia.ai Landing Page Implementation Plan</h1>
<blockquote>
<p><strong>For agentic workers:</strong> REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (<code class="language-plaintext highlighter-rouge">- [ ]</code>) syntax for tracking.</p>
</blockquote>
<p><strong>Goal:</strong> Create a static Jekyll-based GitHub Pages site at <code class="language-plaintext highlighter-rouge">nosia.ai</code> serving as a project overview hub for Nosia, linking to all existing resources (documentation, guides, community, installation).</p>
<p><strong>Architecture:</strong> Minimalist single-page Jekyll site with dark theme, hosted on GitHub Pages from the <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai</code> repository. The site features 8 content sections (Hero, Description, Features, Quick Start, Documentation, Community, Footer) with responsive design and smooth scroll navigation.</p>
<p><strong>Tech Stack:</strong> Jekyll 4.3+, GitHub Pages, HTML5, CSS3 (custom), Markdown, GitHub Actions (optional)</p>
<hr />
<h2 id="file-structure">File Structure</h2>
<p>The implementation will create the following files in the <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai</code> repository:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>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
</code></pre></div></div>
<hr />
<h2 id="prerequisites">Prerequisites</h2>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />GitHub repository <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai</code> exists (currently local only)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Custom domain <code class="language-plaintext highlighter-rouge">nosia.ai</code> DNS configured (CNAME to <code class="language-plaintext highlighter-rouge">dilolabs.github.io</code> or A records to GitHub Pages IPs)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Logo file <code class="language-plaintext highlighter-rouge">nosia-logo.png</code> available in repository</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Ruby 3.0+ installed locally for development (optional for GitHub Pages)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Jekyll CLI installed locally for testing: <code class="language-plaintext highlighter-rouge">gem install jekyll bundler</code></li>
</ul>
<hr />
<h2 id="implementation-plan">Implementation Plan</h2>
<h3 id="phase-1-repository-setup-and-configuration">Phase 1: Repository Setup and Configuration</h3>
<hr />
<h4 id="task-1-initialize-repository-structure">Task 1: Initialize Repository Structure</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/.gitignore</code></li>
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_config.yml</code></li>
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/Gemfile</code></li>
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/CNAME</code></p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create .gitignore</strong></li>
</ul>
<p>Create <code class="language-plaintext highlighter-rouge">.gitignore</code> with Jekyll-specific exclusions:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cat</span> <span class="o">></span> /home/cbldev/gitd/dilolabs/nosia-ai/.gitignore <span class="o"><<</span> <span class="sh">'</span><span class="no">EOF</span><span class="sh">'
# 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/
</span><span class="no">EOF
</span></code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify .gitignore created</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/.gitignore</code>
Expected: File contains all Jekyll and development exclusions</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Create CNAME file for custom domain</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s2">"nosia.ai"</span> <span class="o">></span> /home/cbldev/gitd/dilolabs/nosia-ai/CNAME
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Verify CNAME file</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/CNAME</code>
Expected: <code class="language-plaintext highlighter-rouge">nosia.ai</code></p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 5: Commit repository setup files</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add .gitignore CNAME
git commit <span class="nt">-m</span> <span class="s2">"setup: add gitignore and CNAME for GitHub Pages
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h4 id="task-2-configure-jekyll">Task 2: Configure Jekyll</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_config.yml</code></li>
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/Gemfile</code></p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create _config.yml</strong></li>
</ul>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">cat > /home/cbldev/gitd/dilolabs/nosia-ai/_config.yml << 'EOF'</span>
<span class="c1"># Site settings</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">Nosia</span>
<span class="na">description</span><span class="pi">:</span> <span class="pi">>-</span>
<span class="s">Self-hosted AI RAG + MCP Platform. Run AI models on your own data with</span>
<span class="s">complete privacy and control.</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">https://nosia.ai</span>
<span class="na">baseurl</span><span class="pi">:</span> <span class="s2">"</span><span class="s">"</span>
<span class="c1"># Build settings</span>
<span class="na">theme</span><span class="pi">:</span> <span class="no">null</span>
<span class="na">plugins</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll-sitemap</span>
<span class="pi">-</span> <span class="s">jekyll-feed</span>
<span class="c1"># Exclude from processing</span>
<span class="na">exclude</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Gemfile</span>
<span class="pi">-</span> <span class="s">Gemfile.lock</span>
<span class="pi">-</span> <span class="s">node_modules</span>
<span class="pi">-</span> <span class="s">vendor/bundle/</span>
<span class="pi">-</span> <span class="s">.github/</span>
<span class="pi">-</span> <span class="s">.gitignore</span>
<span class="pi">-</span> <span class="s">README.md</span>
<span class="s">EOF</span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify _config.yml</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/_config.yml</code>
Expected: YAML file with site settings, plugins, and exclusions</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Create Gemfile</strong></li>
</ul>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">cat</span> <span class="o">></span> <span class="sr">/home/</span><span class="n">cbldev</span><span class="o">/</span><span class="n">gitd</span><span class="o">/</span><span class="n">dilolabs</span><span class="o">/</span><span class="n">nosia</span><span class="o">-</span><span class="n">ai</span><span class="o">/</span><span class="no">Gemfile</span> <span class="o"><<</span> <span class="s1">'EOF'</span>
<span class="n">source</span> <span class="s2">"https://rubygems.org"</span>
<span class="n">gem</span> <span class="s2">"jekyll"</span><span class="p">,</span> <span class="s2">"~> 4.3"</span>
<span class="n">gem</span> <span class="s2">"jekyll-sitemap"</span>
<span class="n">gem</span> <span class="s2">"jekyll-feed"</span>
<span class="no">EOF</span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Verify Gemfile</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/Gemfile</code>
Expected: Ruby gemfile with jekyll and plugins</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 5: Commit Jekyll configuration</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add _config.yml Gemfile
git commit <span class="nt">-m</span> <span class="s2">"config: add Jekyll configuration files
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h4 id="task-3-create-directory-structure">Task 3: Create Directory Structure</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_includes/</code></li>
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_layouts/</code></li>
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/assets/css/</code></li>
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/assets/images/</code></li>
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/.github/workflows/</code></p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create all directories</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
<span class="nb">mkdir</span> <span class="nt">-p</span> _includes _layouts assets/css assets/images .github/workflows
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify directories exist</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">ls -la /home/cbldev/gitd/dilolabs/nosia-ai/</code>
Expected: All directories created successfully</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Create placeholder .gitkeep files (optional)</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for </span><span class="nb">dir </span><span class="k">in </span>_includes _layouts assets/css assets/images .github/workflows<span class="p">;</span> <span class="k">do
</span><span class="nb">touch</span> /home/cbldev/gitd/dilolabs/nosia-ai/<span class="nv">$dir</span>/.gitkeep
<span class="nb">rm</span> /home/cbldev/gitd/dilolabs/nosia-ai/<span class="nv">$dir</span>/.gitkeep
<span class="k">done</span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Commit directory structure</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add _includes/ _layouts/ assets/ .github/
git commit <span class="nt">-m</span> <span class="s2">"setup: create directory structure
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h3 id="phase-2-create-layout-and-includes">Phase 2: Create Layout and Includes</h3>
<hr />
<h4 id="task-4-create-default-layout">Task 4: Create Default Layout</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_layouts/default.html</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create default.html layout</strong></p>
</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cat > /home/cbldev/gitd/dilolabs/nosia-ai/_layouts/default.html <span class="nt"><</span><span class="err"><</span> <span class="err">'</span><span class="na">EOF</span><span class="err">'</span>
<span class="err"><!</span><span class="na">DOCTYPE</span> <span class="na">html</span><span class="nt">></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control."</span><span class="nt">></span>
<span class="c"><!-- Open Graph / Social --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"website"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:url"</span> <span class="na">content=</span><span class="s">"https://nosia.ai"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Nosia"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control."</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:image"</span> <span class="na">content=</span><span class="s">"https://nosia.ai/assets/images/nosia-logo.png"</span><span class="nt">></span>
<span class="c"><!-- Twitter --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:card"</span> <span class="na">content=</span><span class="s">"summary_large_image"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:title"</span> <span class="na">content=</span><span class="s">"Nosia"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:description"</span> <span class="na">content=</span><span class="s">"Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control."</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:image"</span> <span class="na">content=</span><span class="s">"https://nosia.ai/assets/images/nosia-logo.png"</span><span class="nt">></span>
<span class="c"><!-- Favicon --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"/assets/images/favicon-32x32.png"</span> <span class="na">sizes=</span><span class="s">"32x32"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"/assets/images/favicon-16x16.png"</span> <span class="na">sizes=</span><span class="s">"16x16"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"/assets/images/nosia-logo.png"</span><span class="nt">></span>
<span class="c"><!-- Styles --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"/assets/css/style.css"</span><span class="nt">></span>
<span class="nt"><title></span>Nosia - Nosia.ai Landing Page Implementation Plan<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><header</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">class=</span><span class="s">"logo"</span> <span class="na">aria-label=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/images/nosia-logo.png"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">height=</span><span class="s">"48"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav"</span> <span class="na">aria-label=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#documentation"</span><span class="nt">></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#community"</span><span class="nt">></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>GitHub<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"lang-toggle"</span> <span class="na">data-lang-toggle</span> <span class="na">aria-label=</span><span class="s">""</span><span class="nt">></span>English<span class="nt"></a></span>
<span class="nt"></nav></span>
<span class="nt"></div></span>
<span class="nt"></header></span>
<span class="nt"><main></span>
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"hero"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/images/nosia-logo.png"</span> <span class="na">alt=</span><span class="s">"Nosia"</span> <span class="na">height=</span><span class="s">"80"</span> <span class="nt">/></span>
<span class="nt"><h1></span>Plateforme AI RAG + MCP auto-hébergée<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>Exécutez des modèles d'IA sur vos propres données avec une confidentialité et un contrôle complets<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#quickstart"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Commencer<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"description"</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><p></span>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.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"story"</span> <span class="na">class=</span><span class="s">"story highlighted"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>🌱 Notre histoire<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"story-content"</span><span class="nt">></span>
<span class="nt"><p></span>Nosia, c'est avant tout une <span class="nt"><strong></span>belle histoire humaine<span class="nt"></strong></span>. 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 : <span class="nt"><strong></span>la technologie doit servir l'humain, pas l'inverse<span class="nt"></strong></span>.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Tout a commencé en 2024.<span class="nt"></strong></span> Olivier, toujours à l'affût des innovations qui font sens, partage avec Cyril sa découverte du RAG. Une étincelle. <span class="nt"><strong></span>C'est Cyril qui trouve le nom Nosia<span class="nt"></strong></span> — 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.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Des heures de brainstorming, des tests, des prototypes...<span class="nt"></strong></span> 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 ?<span class="nt"></p></span>
<span class="nt"><p><strong></span>C'est dans cette énergie collective que Nosia a pris vie.<span class="nt"></strong></span> 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.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Et cette aventure humaine et responsable<span class="nt"></strong></span> continue. En <span class="nt"><strong></span>juin 2026<span class="nt"></strong></span>, François, qui anime la chaîne YouTube <span class="nt"><strong></span>Kokori Kodo<span class="nt"></strong></span>, a réalisé une première vidéo de présentation — que vous pouvez découvrir dans la section suivante.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"demo"</span> <span class="na">class=</span><span class="s">"demo"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Découvrez Nosia en action<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"video-container"</span><span class="nt">></span>
<span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://www.youtube-nocookie.com/embed/HD5k-LjGvGw?si=eaYP5pCkKq-qHh3A"</span> <span class="na">title=</span><span class="s">"Nosia - Démo de la plateforme AI RAG + MCP auto-hébergée"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allow=</span><span class="s">"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"</span> <span class="na">referrerpolicy=</span><span class="s">"strict-origin-when-cross-origin"</span> <span class="na">allowfullscreen=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></iframe></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"features"</span> <span class="na">class=</span><span class="s">"features"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Fonctionnalités clés<span class="nt"></h2></span>
<span class="nt"><p></span>Découvrez comment Nosia vous donne le contrôle total sur votre IA avec des outils puissants et intuitifs.<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🔒<span class="nt"></span></span>
<span class="nt"><h3></span>Privé <span class="ni">&amp;</span> Sécurisé<span class="nt"></h3></span>
<span class="nt"><p></span>Vos données restent sur votre infrastructure<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤖<span class="nt"></span></span>
<span class="nt"><h3></span>API compatible OpenAI<span class="nt"></h3></span>
<span class="nt"><p></span>Remplacement direct des clients OpenAI<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📚<span class="nt"></span></span>
<span class="nt"><h3></span>Propulsé par RAG<span class="nt"></h3></span>
<span class="nt"><p></span>Enrichissez les réponses de l'IA avec vos documents<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🔌<span class="nt"></span></span>
<span class="nt"><h3></span>Intégration MCP<span class="nt"></h3></span>
<span class="nt"><p></span>Connectez l'IA à des outils et services externes<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤖<span class="nt"></span></span>
<span class="nt"><h3></span>Compétences d'agent (bientôt)<span class="nt"></h3></span>
<span class="nt"><p></span>Étendez le chat avec des compétences personnalisées basées sur LLM et Ruby<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🔄<span class="nt"></span></span>
<span class="nt"><h3></span>Streaming en temps réel<span class="nt"></h3></span>
<span class="nt"><p></span>Événements envoyés par le serveur pour des réponses en direct<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"quickstart"</span> <span class="na">class=</span><span class="s">"quickstart"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Commencez en quelques minutes<span class="nt"></h2></span>
<span class="nt"><p></span>Une seule commande installe Docker et toutes ses dépendances :<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"code-block"</span><span class="nt">></span>
<span class="nt"><code></span>curl -fsSL https://get.nosia.ai | sh<span class="nt"></code></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Pour Windows :<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"code-block"</span><span class="nt">></span>
<span class="nt"><code></span>Invoke-WebRequest https://get.nosia.ai/install.ps1 -OutFile install.ps1; .\install.ps1<span class="nt"></code></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"documentation"</span> <span class="na">class=</span><span class="s">"documentation"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Documentation<span class="nt"></h2></span>
<span class="nt"><p></span>Toute la documentation dont vous avez besoin pour déployer et utiliser Nosia efficacement.<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://blog.nosia.ai/"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📖<span class="nt"></span></span>
<span class="nt"><h3></span>Blog Nosia<span class="nt"></h3></span>
<span class="nt"><p></span>Notre vision, notre mission, nos histoires<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/ARCHITECTURE.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📐<span class="nt"></span></span>
<span class="nt"><h3></span>Documentation sur l'architecture<span class="nt"></h3></span>
<span class="nt"><p></span>Plongée technique approfondie<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/DEPLOYMENT.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🚀<span class="nt"></span></span>
<span class="nt"><h3></span>Guide de déploiement<span class="nt"></h3></span>
<span class="nt"><p></span>Stratégies de déploiement en production<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/OBSERVABILITY.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📝<span class="nt"></span></span>
<span class="nt"><h3></span>Observabilité<span class="nt"></h3></span>
<span class="nt"><p></span>Observabilité complète<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/tree/main/docs"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📋<span class="nt"></span></span>
<span class="nt"><h3></span>Index complet de la documentation<span class="nt"></h3></span>
<span class="nt"><p></span>Toute la documentation<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/DIAGRAMS.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📊<span class="nt"></span></span>
<span class="nt"><h3></span>Diagrammes du système<span class="nt"></h3></span>
<span class="nt"><p></span>Représentations visuelles<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"community"</span> <span class="na">class=</span><span class="s">"community"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Communauté <span class="ni">&amp;</span> Support<span class="nt"></h2></span>
<span class="nt"><p></span>Rejoignez notre communauté croissante et bénéficiez d'un support actif.<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/discussions"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>💬<span class="nt"></span></span>
<span class="nt"><h3></span>Discussions GitHub<span class="nt"></h3></span>
<span class="nt"><p></span>Posez des questions et partagez vos idées<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/issues"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🐛<span class="nt"></span></span>
<span class="nt"><h3></span>Signaler des problèmes<span class="nt"></h3></span>
<span class="nt"><p></span>Signaler des bugs et demander des fonctionnalités<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/CONTRIBUTING.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📝<span class="nt"></span></span>
<span class="nt"><h3></span>Guide de contribution<span class="nt"></h3></span>
<span class="nt"><p></span>Comment contribuer<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/CODE_OF_CONDUCT.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤝<span class="nt"></span></span>
<span class="nt"><h3></span>Code de conduite<span class="nt"></h3></span>
<span class="nt"><p></span>Règles de la communauté<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"footer"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><p></span>Copyright © 2024-2026 Dilolabs<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"links"</span><span class="nt">></span>Sous licence <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/LICENSE"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>MIT<span class="nt"></a></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"links"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://nosia.ai"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>Site web<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>GitHub<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://hub.docker.com/r/dilolabs/nosia"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>Docker Hub<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></footer></span>
<span class="nt"></main></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"back-to-top"</span> <span class="na">aria-label=</span><span class="s">"Back to top"</span><span class="nt">></span>^<span class="nt"></a></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
EOF
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify layout file</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/_layouts/default.html</code>
Expected: HTML5 document with includes for head and header, plus back-to-top button</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit layout</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add _layouts/default.html
git commit <span class="nt">-m</span> <span class="s2">"layout: add default HTML layout
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h4 id="task-5-create-head-include">Task 5: Create Head Include</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_includes/head.html</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create head.html</strong></p>
</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cat > /home/cbldev/gitd/dilolabs/nosia-ai/_includes/head.html <span class="nt"><</span><span class="err"><</span> <span class="err">'</span><span class="na">EOF</span><span class="err">'</span>
<span class="err"><</span><span class="na">meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control."</span><span class="nt">></span>
<span class="c"><!-- Open Graph / Social --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"website"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:url"</span> <span class="na">content=</span><span class="s">"https://nosia.ai"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Nosia"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control."</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:image"</span> <span class="na">content=</span><span class="s">"https://nosia.ai/assets/images/nosia-logo.png"</span><span class="nt">></span>
<span class="c"><!-- Twitter --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:card"</span> <span class="na">content=</span><span class="s">"summary_large_image"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:title"</span> <span class="na">content=</span><span class="s">"Nosia"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:description"</span> <span class="na">content=</span><span class="s">"Self-hosted AI RAG + MCP Platform. Run AI models on your own data with complete privacy and control."</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:image"</span> <span class="na">content=</span><span class="s">"https://nosia.ai/assets/images/nosia-logo.png"</span><span class="nt">></span>
<span class="c"><!-- Favicon --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"/assets/images/favicon-32x32.png"</span> <span class="na">sizes=</span><span class="s">"32x32"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"/assets/images/favicon-16x16.png"</span> <span class="na">sizes=</span><span class="s">"16x16"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"/assets/images/nosia-logo.png"</span><span class="nt">></span>
<span class="c"><!-- Styles --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"/assets/css/style.css"</span><span class="nt">></span>
<span class="nt"><title></span>Nosia - Nosia.ai Landing Page Implementation Plan<span class="nt"></title></span>
EOF
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify head.html</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/_includes/head.html</code>
Expected: HTML head with meta tags, Open Graph, Twitter cards, favicons, and CSS link</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit head include</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add _includes/head.html
git commit <span class="nt">-m</span> <span class="s2">"include: add head.html with metadata and favicons
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h4 id="task-6-create-header-include">Task 6: Create Header Include</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/_includes/header.html</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create header.html</strong></p>
</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cat > /home/cbldev/gitd/dilolabs/nosia-ai/_includes/header.html <span class="nt"><</span><span class="err"><</span> <span class="err">'</span><span class="na">EOF</span><span class="err">'</span>
<span class="err"><</span><span class="na">header</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">class=</span><span class="s">"logo"</span> <span class="na">aria-label=</span><span class="s">"Nosia Home"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/images/nosia-logo.png"</span> <span class="na">alt=</span><span class="s">"Nosia Logo"</span> <span class="na">height=</span><span class="s">"48"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav"</span> <span class="na">aria-label=</span><span class="s">"Main navigation"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#documentation"</span><span class="nt">></span>Documentation<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#community"</span><span class="nt">></span>Community<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>GitHub<span class="nt"><span</span> <span class="na">class=</span><span class="s">"external-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>┗<span class="nt"></span></a></span>
<span class="nt"></nav></span>
<span class="nt"></div></span>
<span class="nt"></header></span>
EOF
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify header.html</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/_includes/header.html</code>
Expected: Header with logo, navigation links, and external icon for GitHub</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit header include</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add _includes/header.html
git commit <span class="nt">-m</span> <span class="s2">"include: add header.html with logo and navigation
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h3 id="phase-3-create-styles">Phase 3: Create Styles</h3>
<hr />
<h4 id="task-7-create-css-stylesheet">Task 7: Create CSS Stylesheet</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/assets/css/style.css</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create style.css with all styles from design spec</strong></p>
</li>
</ul>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">cat</span> <span class="o">></span> <span class="o">/</span><span class="nt">home</span><span class="o">/</span><span class="nt">cbldev</span><span class="o">/</span><span class="nt">gitd</span><span class="o">/</span><span class="nt">dilolabs</span><span class="o">/</span><span class="nt">nosia-ai</span><span class="o">/</span><span class="nt">assets</span><span class="o">/</span><span class="nt">css</span><span class="o">/</span><span class="nt">style</span><span class="nc">.css</span> <span class="o"><<</span> <span class="s2">'EOF'</span>
<span class="c">/* ===== CSS Variables ===== */</span>
<span class="nd">:root</span> <span class="p">{</span>
<span class="py">--color-primary</span><span class="p">:</span> <span class="m">#22c55e</span><span class="p">;</span>
<span class="py">--color-primary-dark</span><span class="p">:</span> <span class="m">#16a34a</span><span class="p">;</span>
<span class="py">--color-bg</span><span class="p">:</span> <span class="m">#0f172a</span><span class="p">;</span>
<span class="py">--color-bg-secondary</span><span class="p">:</span> <span class="m">#1e293b</span><span class="p">;</span>
<span class="py">--color-bg-tertiary</span><span class="p">:</span> <span class="m">#334155</span><span class="p">;</span>
<span class="py">--color-text</span><span class="p">:</span> <span class="m">#f1f5f9</span><span class="p">;</span>
<span class="py">--color-text-secondary</span><span class="p">:</span> <span class="m">#94a3b8</span><span class="p">;</span>
<span class="py">--color-accent</span><span class="p">:</span> <span class="m">#06b6d4</span><span class="p">;</span>
<span class="py">--color-accent-dark</span><span class="p">:</span> <span class="m">#0891b2</span><span class="p">;</span>
<span class="py">--font-sans</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="s1">"Helvetica Neue"</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="py">--font-mono</span><span class="p">:</span> <span class="s1">"SF Mono"</span><span class="p">,</span> <span class="s1">"Monaco"</span><span class="p">,</span> <span class="s1">"Inconsolata"</span><span class="p">,</span> <span class="s1">"Fira Code"</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
<span class="py">--spacing-xs</span><span class="p">:</span> <span class="m">0.25rem</span><span class="p">;</span>
<span class="py">--spacing-sm</span><span class="p">:</span> <span class="m">0.5rem</span><span class="p">;</span>
<span class="py">--spacing-md</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
<span class="py">--spacing-lg</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span>
<span class="py">--spacing-xl</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span>
<span class="py">--spacing-2xl</span><span class="p">:</span> <span class="m">3rem</span><span class="p">;</span>
<span class="py">--spacing-3xl</span><span class="p">:</span> <span class="m">4rem</span><span class="p">;</span>
<span class="py">--radius-sm</span><span class="p">:</span> <span class="m">0.25rem</span><span class="p">;</span>
<span class="py">--radius-md</span><span class="p">:</span> <span class="m">0.5rem</span><span class="p">;</span>
<span class="py">--max-width</span><span class="p">:</span> <span class="m">1200px</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== Reset & Base ===== */</span>
<span class="o">*,</span> <span class="o">*</span><span class="nd">::before</span><span class="o">,</span> <span class="o">*</span><span class="nd">::after</span> <span class="p">{</span>
<span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">html</span> <span class="p">{</span>
<span class="py">scroll-behavior</span><span class="p">:</span> <span class="n">smooth</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-sans</span><span class="p">);</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg</span><span class="p">);</span>
<span class="nl">-webkit-font-smoothing</span><span class="p">:</span> <span class="n">antialiased</span><span class="p">;</span>
<span class="nl">-moz-osx-font-smoothing</span><span class="p">:</span> <span class="n">grayscale</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.container</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">max-width</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--max-width</span><span class="p">);</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="p">}</span>
<span class="c">/* ===== Typography ===== */</span>
<span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="p">{</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.2</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">3rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2.25rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h3</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h4</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.25rem</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">p</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-md</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.subtitle</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1.25rem</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xl</span><span class="p">);</span>
<span class="nl">max-width</span><span class="p">:</span> <span class="m">700px</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== Layout ===== */</span>
<span class="nt">section</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-3xl</span><span class="p">)</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.grid</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span>
<span class="py">grid-template-columns</span><span class="p">:</span> <span class="nb">repeat</span><span class="p">(</span><span class="n">auto-fit</span><span class="p">,</span> <span class="n">minmax</span><span class="p">(</span><span class="m">300px</span><span class="p">,</span> <span class="m">1</span><span class="n">fr</span><span class="p">));</span>
<span class="py">gap</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="p">}</span>
<span class="c">/* ===== Header ===== */</span>
<span class="nc">.header</span> <span class="p">{</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">fixed</span><span class="p">;</span>
<span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">1000</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-md</span><span class="p">)</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg</span><span class="p">);</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-tertiary</span><span class="p">);</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">padding</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">,</span> <span class="n">box-shadow</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.header.scrolled</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-sm</span><span class="p">)</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">6px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.1</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.header</span> <span class="nc">.container</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-between</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.logo</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.logo</span> <span class="nt">img</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.nav</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xl</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.nav</span> <span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">color</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.nav</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.nav</span> <span class="nt">a</span><span class="nd">::after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"┗"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.75em</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0.7</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xs</span><span class="p">);</span>
<span class="p">}</span>
<span class="c">/* ===== Hero ===== */</span>
<span class="nc">.hero</span> <span class="p">{</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--spacing-3xl</span><span class="p">)</span> <span class="err">+</span> <span class="m">80px</span><span class="p">);</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.hero</span> <span class="nc">.container</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.hero</span> <span class="nt">img</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xl</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.hero</span> <span class="nt">h1</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">90deg</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-primary</span><span class="p">),</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-accent</span><span class="p">));</span>
<span class="nl">-webkit-background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
<span class="nl">-webkit-text-fill-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== Cards ===== */</span>
<span class="nc">.card</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-secondary</span><span class="p">);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-tertiary</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--radius-md</span><span class="p">);</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">border-color</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">,</span> <span class="n">transform</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">,</span> <span class="n">box-shadow</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.card</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-primary</span><span class="p">);</span>
<span class="nl">transform</span><span class="p">:</span> <span class="n">translateY</span><span class="p">(</span><span class="m">-4px</span><span class="p">);</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">15px</span> <span class="m">-3px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.1</span><span class="p">),</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">6px</span> <span class="m">-2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.05</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.card</span> <span class="nc">.icon</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-md</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.card</span> <span class="nt">h3</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-sm</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.card</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== Buttons ===== */</span>
<span class="nc">.btn</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-md</span><span class="p">)</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xl</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--radius-sm</span><span class="p">);</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.btn-primary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-primary</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.btn-primary</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-primary-dark</span><span class="p">);</span>
<span class="p">}</span>
<span class="c">/* ===== Code Blocks ===== */</span>
<span class="nc">.code-block</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-secondary</span><span class="p">);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-tertiary</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--radius-md</span><span class="p">);</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="nl">overflow-x</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-md</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.code-block</span> <span class="nt">code</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-mono</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875rem</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span>
<span class="nl">background</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">white-space</span><span class="p">:</span> <span class="n">pre-wrap</span><span class="p">;</span>
<span class="nl">word-break</span><span class="p">:</span> <span class="n">break-all</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== Footer ===== */</span>
<span class="nc">.footer</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-3xl</span><span class="p">)</span> <span class="m">0</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xl</span><span class="p">);</span>
<span class="nl">border-top</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-tertiary</span><span class="p">);</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.footer</span> <span class="nc">.container</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-md</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.footer</span> <span class="nt">p</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.footer</span> <span class="nc">.links</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="nl">flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.footer</span> <span class="nc">.links</span> <span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.footer</span> <span class="nc">.links</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span>
<span class="p">}</span>
<span class="c">/* ===== Responsive ===== */</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.nav</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2.25rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.75rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.hero</span> <span class="p">{</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--spacing-3xl</span><span class="p">)</span> <span class="err">+</span> <span class="m">60px</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.subtitle</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.nav</span> <span class="nt">a</span><span class="nd">::after</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c">/* ===== External Link Indicator ===== */</span>
<span class="nt">a</span><span class="o">[</span><span class="nt">target</span><span class="o">=</span><span class="s1">"_blank"</span><span class="o">]</span><span class="nd">::after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"┗"</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-xs</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.75em</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0.7</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== Back to Top Button ===== */</span>
<span class="nc">.back-to-top</span> <span class="p">{</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">fixed</span><span class="p">;</span>
<span class="nl">bottom</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="nl">right</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-lg</span><span class="p">);</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-secondary</span><span class="p">);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-bg-tertiary</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-secondary</span><span class="p">);</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">1000</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.back-to-top</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-primary</span><span class="p">);</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-primary</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.back-to-top.visible</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* ===== In-page anchor link styling ===== */</span>
<span class="o">[</span><span class="nt">href</span><span class="o">^=</span><span class="s1">"#"</span><span class="o">]</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-accent</span><span class="p">);</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">href</span><span class="o">^=</span><span class="s1">"#"</span><span class="o">]</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-accent-dark</span><span class="p">);</span>
<span class="p">}</span>
<span class="nt">EOF</span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify style.css exists and has content</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">wc -l /home/cbldev/gitd/dilolabs/nosia-ai/assets/css/style.css</code>
Expected: File with ~200+ lines of CSS</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit stylesheet</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add assets/css/style.css
git commit <span class="nt">-m</span> <span class="s2">"styles: add complete CSS with dark theme and responsive design
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h3 id="phase-4-create-page-content">Phase 4: Create Page Content</h3>
<hr />
<h4 id="task-8-create-index-page">Task 8: Create Index Page</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/index.md</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create index.md with all content sections</strong></p>
</li>
</ul>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh">cat > /home/cbldev/gitd/dilolabs/nosia-ai/index.md << 'EOF'
---
</span>layout: default
<span class="gh">title: Home
---
</span>
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"hero"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/images/nosia-logo.png"</span> <span class="na">alt=</span><span class="s">"Nosia"</span> <span class="na">height=</span><span class="s">"80"</span><span class="nt">></span>
<span class="nt"><h1></span>Self-hosted AI RAG + MCP Platform<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>Run AI models on your own data with complete privacy and control<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://get.nosia.ai"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Get Started<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"description"</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><p></span>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.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"features"</span> <span class="na">class=</span><span class="s">"features"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Key Features<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🔒<span class="nt"></span></span>
<span class="nt"><h3></span>Private & Secure<span class="nt"></h3></span>
<span class="nt"><p></span>Your data stays on your infrastructure<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤖<span class="nt"></span></span>
<span class="nt"><h3></span>OpenAI-Compatible API<span class="nt"></h3></span>
<span class="nt"><p></span>Drop-in replacement for OpenAI clients<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📚<span class="nt"></span></span>
<span class="nt"><h3></span>RAG-Powered<span class="nt"></h3></span>
<span class="nt"><p></span>Augment AI responses with your documents<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🔌<span class="nt"></span></span>
<span class="nt"><h3></span>MCP Integration<span class="nt"></h3></span>
<span class="nt"><p></span>Connect AI to external tools and services<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤖<span class="nt"></span></span>
<span class="nt"><h3></span>Agent Skills<span class="nt"></h3></span>
<span class="nt"><p></span>Extend chat with custom LLM-driven and Ruby-based skills<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🔄<span class="nt"></span></span>
<span class="nt"><h3></span>Real-time Streaming<span class="nt"></h3></span>
<span class="nt"><p></span>Server-sent events for live responses<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"quickstart"</span> <span class="na">class=</span><span class="s">"quickstart"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Get Started in Minutes<span class="nt"></h2></span>
<span class="nt"><p></span>One command installs Docker and all dependencies:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"code-block"</span><span class="nt">></span>
<span class="nt"><code></span>curl -fsSL https://get.nosia.ai | sh<span class="nt"></code></span>
<span class="nt"></div></span>
<span class="nt"><p></span>For Windows:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"code-block"</span><span class="nt">></span>
<span class="nt"><code></span>Invoke-WebRequest https://get.nosia.ai/install.ps1 -OutFile install.ps1; .<span class="se">\i</span>nstall.ps1<span class="nt"></code></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"documentation"</span> <span class="na">class=</span><span class="s">"documentation"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Documentation<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://guides.nosia.ai/"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📖<span class="nt"></span></span>
<span class="nt"><h3></span>Nosia Guides<span class="nt"></h3></span>
<span class="nt"><p></span>Step-by-step tutorials<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/ARCHITECTURE.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📐<span class="nt"></span></span>
<span class="nt"><h3></span>Architecture Documentation<span class="nt"></h3></span>
<span class="nt"><p></span>Technical deep dive<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/DEPLOYMENT.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🚀<span class="nt"></span></span>
<span class="nt"><h3></span>Deployment Guide<span class="nt"></h3></span>
<span class="nt"><p></span>Production deployment strategies<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/agent-skills-development.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤖<span class="nt"></span></span>
<span class="nt"><h3></span>Agent Skills Development<span class="nt"></h3></span>
<span class="nt"><p></span>Create custom skills<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/tree/main/docs"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📋<span class="nt"></span></span>
<span class="nt"><h3></span>Complete Documentation Index<span class="nt"></h3></span>
<span class="nt"><p></span>All documentation<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/docs/DIAGRAMS.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📊<span class="nt"></span></span>
<span class="nt"><h3></span>System Diagrams<span class="nt"></h3></span>
<span class="nt"><p></span>Visual representations<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"community"</span> <span class="na">class=</span><span class="s">"community"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h2></span>Community & Support<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/discussions"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>💬<span class="nt"></span></span>
<span class="nt"><h3></span>GitHub Discussions<span class="nt"></h3></span>
<span class="nt"><p></span>Ask questions and share ideas<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/issues"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🐛<span class="nt"></span></span>
<span class="nt"><h3></span>Report Issues<span class="nt"></h3></span>
<span class="nt"><p></span>Bug reports and feature requests<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/CONTRIBUTING.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>📝<span class="nt"></span></span>
<span class="nt"><h3></span>Contributing Guide<span class="nt"></h3></span>
<span class="nt"><p></span>How to contribute<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/CODE_OF_CONDUCT.md"</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>🤝<span class="nt"></span></span>
<span class="nt"><h3></span>Code of Conduct<span class="nt"></h3></span>
<span class="nt"><p></span>Community guidelines<span class="nt"></p></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"footer"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><p></span>Copyright © 2024-2026 Cyril Blaecke<span class="nt"></p></span>
<span class="nt"><p></span>Licensed under <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia/blob/main/LICENSE"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>MIT License<span class="nt"></a></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"links"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://nosia.ai"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>Website<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/nosia-ai/nosia"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>GitHub<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://hub.docker.com/u/ai"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>Docker Hub<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></footer></span>
<span class="nt"><script></span>
// 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'
});
}
});
});
<span class="nt"></script></span>
EOF
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify index.md</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">wc -l /home/cbldev/gitd/dilolabs/nosia-ai/index.md</code>
Expected: File with ~100+ lines of Markdown</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit index page</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add index.md
git commit <span class="nt">-m</span> <span class="s2">"content: add index.md with all page sections and JavaScript
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h4 id="task-9-create-custom-404-page">Task 9: Create Custom 404 Page</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/404.html</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create 404.html</strong></p>
</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cat > /home/cbldev/gitd/dilolabs/nosia-ai/404.html <span class="nt"><</span><span class="err"><</span> <span class="err">'</span><span class="na">EOF</span><span class="err">'</span>
<span class="err"><!</span><span class="na">DOCTYPE</span> <span class="na">html</span><span class="nt">></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Page not found - Nosia"</span><span class="nt">></span>
<span class="nt"><title></span>404 - Page Not Found | Nosia<span class="nt"></title></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"/assets/images/favicon-32x32.png"</span> <span class="na">sizes=</span><span class="s">"32x32"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"/assets/css/style.css"</span><span class="nt">></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><header</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">class=</span><span class="s">"logo"</span> <span class="na">aria-label=</span><span class="s">"Nosia Home"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/images/nosia-logo.png"</span> <span class="na">alt=</span><span class="s">"Nosia Logo"</span> <span class="na">height=</span><span class="s">"48"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></header></span>
<span class="nt"><main></span>
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"hero"</span> <span class="na">style=</span><span class="s">"padding-top: 120px;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><h1></span>404<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>Page Not Found<span class="nt"></p></span>
<span class="nt"><p></span>The page you're looking for doesn't exist or has been moved.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go Home<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"></main></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
EOF
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify 404.html</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/404.html</code>
Expected: HTML 404 page with header, error message, and Go Home button</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit 404 page</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add 404.html
git commit <span class="nt">-m</span> <span class="s2">"content: add custom 404 error page
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h3 id="phase-5-generate-favicons">Phase 5: Generate Favicons</h3>
<hr />
<h4 id="task-10-create-favicon-images">Task 10: Create Favicon Images</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/assets/images/favicon-16x16.png</code></li>
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/assets/images/favicon-32x32.png</code></p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Generate favicons from logo</strong></li>
</ul>
<p>Use ImageMagick (if installed):</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Convert logo to 32x32 favicon</span>
convert /home/cbldev/gitd/dilolabs/nosia-ai/nosia-logo.png <span class="se">\</span>
<span class="nt">-resize</span> 32x32 <span class="se">\</span>
<span class="nt">-background</span> transparent <span class="se">\</span>
/home/cbldev/gitd/dilolabs/nosia-ai/assets/images/favicon-32x32.png
<span class="c"># Convert logo to 16x16 favicon</span>
convert /home/cbldev/gitd/dilolabs/nosia-ai/nosia-logo.png <span class="se">\</span>
<span class="nt">-resize</span> 16x16 <span class="se">\</span>
<span class="nt">-background</span> transparent <span class="se">\</span>
/home/cbldev/gitd/dilolabs/nosia-ai/assets/images/favicon-16x16.png
</code></pre></div></div>
<p><strong>OR use online tool:</strong></p>
<ul class="task-list">
<li>Go to https://favicon.io/favicon-converter/</li>
<li>Upload nosia-logo.png</li>
<li>Download 16x16 and 32x32 PNG versions</li>
<li>
<p>Save to <code class="language-plaintext highlighter-rouge">assets/images/</code></p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify favicons exist</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">ls -la /home/cbldev/gitd/dilolabs/nosia-ai/assets/images/</code>
Expected: favicon-16x16.png and favicon-32x32.png present</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit favicons</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add assets/images/favicon-16x16.png assets/images/favicon-32x32.png
git commit <span class="nt">-m</span> <span class="s2">"assets: add favicon images
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h3 id="phase-6-optional-github-actions-workflow">Phase 6: Optional GitHub Actions Workflow</h3>
<hr />
<h4 id="task-11-create-github-actions-deploy-workflow">Task 11: Create GitHub Actions Deploy Workflow</h4>
<p><strong>Files:</strong></p>
<ul class="task-list">
<li>
<p>Create: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai/.github/workflows/deploy.yml</code></p>
</li>
<li class="task-list-item">
<p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create deploy.yml</strong></p>
</li>
</ul>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">cat > /home/cbldev/gitd/dilolabs/nosia-ai/.github/workflows/deploy.yml << 'EOF'</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">Deploy to GitHub Pages</span>
<span class="na">on</span><span class="pi">:</span>
<span class="na">push</span><span class="pi">:</span>
<span class="na">branches</span><span class="pi">:</span> <span class="pi">[</span><span class="s2">"</span><span class="s">main"</span><span class="pi">]</span>
<span class="na">workflow_dispatch</span><span class="pi">:</span>
<span class="na">jobs</span><span class="pi">:</span>
<span class="na">deploy</span><span class="pi">:</span>
<span class="na">runs-on</span><span class="pi">:</span> <span class="s">ubuntu-latest</span>
<span class="na">permissions</span><span class="pi">:</span>
<span class="na">contents</span><span class="pi">:</span> <span class="s">read</span>
<span class="na">pages</span><span class="pi">:</span> <span class="s">write</span>
<span class="na">id-token</span><span class="pi">:</span> <span class="s">write</span>
<span class="na">environment</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">github-pages</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">https://nosia.ai</span>
<span class="na">steps</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Checkout</span>
<span class="na">uses</span><span class="pi">:</span> <span class="s">actions/checkout@v4</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Setup Ruby</span>
<span class="na">uses</span><span class="pi">:</span> <span class="s">ruby/setup-ruby@v1</span>
<span class="na">with</span><span class="pi">:</span>
<span class="na">ruby-version</span><span class="pi">:</span> <span class="s1">'</span><span class="s">3.2'</span>
<span class="na">bundler-cache</span><span class="pi">:</span> <span class="no">true</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Install dependencies</span>
<span class="na">run</span><span class="pi">:</span> <span class="pi">|</span>
<span class="s">gem install bundler</span>
<span class="s">bundle install</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Build site</span>
<span class="na">run</span><span class="pi">:</span> <span class="s">bundle exec jekyll build --baseurl ""</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Setup Pages</span>
<span class="na">uses</span><span class="pi">:</span> <span class="s">actions/configure-pages@v4</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Upload artifact</span>
<span class="na">uses</span><span class="pi">:</span> <span class="s">actions/upload-pages-artifact@v3</span>
<span class="na">with</span><span class="pi">:</span>
<span class="na">path</span><span class="pi">:</span> <span class="s">_site/</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Deploy to GitHub Pages</span>
<span class="na">uses</span><span class="pi">:</span> <span class="s">actions/deploy-pages@v4</span>
<span class="s">EOF</span>
</code></pre></div></div>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify workflow file</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">cat /home/cbldev/gitd/dilolabs/nosia-ai/.github/workflows/deploy.yml</code>
Expected: GitHub Actions workflow YAML</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit workflow</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git add .github/workflows/deploy.yml
git commit <span class="nt">-m</span> <span class="s2">"ci: add GitHub Pages deployment workflow
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>"</span>
</code></pre></div></div>
<hr />
<h3 id="phase-7-local-testing">Phase 7: Local Testing</h3>
<hr />
<h4 id="task-12-install-jekyll-dependencies">Task 12: Install Jekyll Dependencies</h4>
<p><strong>Prerequisite:</strong> Ruby 3.0+ installed</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Install Bundler</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">gem install bundler</code>
Expected: Bundler installed successfully</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Install Jekyll and plugins</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
bundle <span class="nb">install</span>
</code></pre></div></div>
<p>Expected: All gems installed</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Verify dependencies</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">bundle exec jekyll --version</code>
Expected: Jekyll version displayed (4.3.x or higher)</p>
<hr />
<h4 id="task-13-test-local-build">Task 13: Test Local Build</h4>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Build the site</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
bundle <span class="nb">exec </span>jekyll build <span class="nt">--baseurl</span> <span class="s2">""</span>
</code></pre></div></div>
<p>Expected: Site built successfully, <code class="language-plaintext highlighter-rouge">_site</code> directory created</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify _site directory</strong></li>
</ul>
<p>Run: <code class="language-plaintext highlighter-rouge">ls -la /home/cbldev/gitd/dilolabs/nosia-ai/_site/</code>
Expected: index.html, assets/, etc. present</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Start development server</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
bundle <span class="nb">exec </span>jekyll serve <span class="nt">--livereload</span> <span class="nt">--baseurl</span> <span class="s2">""</span>
</code></pre></div></div>
<p>Expected: Server running at http://localhost:4000</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Test in browser</strong></li>
</ul>
<p>Open: http://localhost:4000
Verify:</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Page loads without errors</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All sections visible (Hero, Features, Quick Start, Documentation, Community, Footer)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Logo displays correctly</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Dark theme appears as designed</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Responsive on different screen sizes</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Navigation links work (smooth scroll)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />External links open in new tabs</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Code blocks display correctly</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Cards have hover effects</li>
</ul>
<hr />
<h4 id="task-14-run-test-checklist">Task 14: Run Test Checklist</h4>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 1: Page loads</strong>
<ul>
<li>Open http://localhost:4000</li>
<li>Expected: Page loads without errors</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 2: All sections render</strong>
<ul>
<li>Scroll through page</li>
<li>Expected: Hero, Description, Features (6), Quick Start, Documentation (6), Community (4), Footer all visible</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 3: Logo displays</strong>
<ul>
<li>Check header and hero</li>
<li>Expected: nosia-logo.png visible in both locations</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 4: Install commands copyable</strong>
<ul>
<li>Try to select and copy install commands</li>
<li>Expected: Text is selectable and copyable</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 5: Smooth scroll works</strong>
<ul>
<li>Click “Documentation” in nav</li>
<li>Expected: Smooth scroll to documentation section</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 6: Header collapses on scroll</strong>
<ul>
<li>Scroll down</li>
<li>Expected: Header reduces in size</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 7: Back to top button</strong>
<ul>
<li>Scroll down past viewport height</li>
<li>Expected: Button appears in bottom right</li>
<li>Click button</li>
<li>Expected: Smooth scroll to top</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 8: Responsive mobile</strong>
<ul>
<li>Resize browser to < 768px</li>
<li>Expected: Navigation hidden, single column layout</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 9: External links</strong>
<ul>
<li>Click any external link (GitHub, Documentation, etc.)</li>
<li>Expected: Opens in new tab</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Test 10: Footer links</strong>
<ul>
<li>Click footer links</li>
<li>Expected: All links work correctly</li>
</ul>
</li>
</ul>
<hr />
<h3 id="phase-8-deploy-to-github-pages">Phase 8: Deploy to GitHub Pages</h3>
<hr />
<h4 id="task-15-push-to-github">Task 15: Push to GitHub</h4>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create remote repository (if not exists)</strong></li>
</ul>
<p>On GitHub.com:</p>
<ul class="task-list">
<li>Create new repository: <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai</code></li>
<li>Keep it public</li>
<li>
<p>Do NOT initialize with README, .gitignore, or license</p>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Add remote and push</strong></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/cbldev/gitd/dilolabs/nosia-ai
git remote add origin git@github.com:dilolabs/nosia-ai.git
git branch <span class="nt">-M</span> main
git push <span class="nt">-u</span> origin main
</code></pre></div></div>
<p>Expected: All commits pushed to GitHub</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Verify on GitHub</strong></li>
</ul>
<p>Open: https://github.com/dilolabs/nosia-ai
Expected: All files visible in repository</p>
<hr />
<h4 id="task-16-enable-github-pages">Task 16: Enable GitHub Pages</h4>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Configure GitHub Pages</strong></li>
</ul>
<p>On GitHub.com:</p>
<ol>
<li>Go to repository Settings</li>
<li>Navigate to Pages (left sidebar)</li>
<li>Under “Source”, select: <code class="language-plaintext highlighter-rouge">Deploy from a branch</code></li>
<li>Branch: <code class="language-plaintext highlighter-rouge">main</code></li>
<li>Folder: <code class="language-plaintext highlighter-rouge">/ (root)</code></li>
<li>Click Save</li>
</ol>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Configure custom domain</strong></li>
</ul>
<p>On GitHub.com:</p>
<ol>
<li>In Pages settings, enter <code class="language-plaintext highlighter-rouge">nosia.ai</code> under Custom domain</li>
<li>Click Save</li>
<li>Wait for DNS verification (may take a few minutes)</li>
</ol>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Configure DNS</strong></li>
</ul>
<p>With your DNS provider:</p>
<ul class="task-list">
<li>Add CNAME record: <code class="language-plaintext highlighter-rouge">nosia.ai</code> → <code class="language-plaintext highlighter-rouge">dilolabs.github.io</code></li>
<li>OR add A records:
<ul>
<li><code class="language-plaintext highlighter-rouge">185.199.108.153</code></li>
<li><code class="language-plaintext highlighter-rouge">185.199.109.153</code></li>
<li><code class="language-plaintext highlighter-rouge">185.199.110.153</code></li>
<li><code class="language-plaintext highlighter-rouge">185.199.111.153</code></li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Verify deployment</strong></li>
</ul>
<p>Open: https://nosia.ai
Expected: Site loads successfully (may take 1-2 minutes for first deployment)</p>
<hr />
<h4 id="task-17-post-deployment-verification">Task 17: Post-Deployment Verification</h4>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Check HTTPS</strong>
<ul>
<li>Open: https://nosia.ai</li>
<li>Expected: Secure connection, no warnings</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify all links</strong>
<ul>
<li>Test every link on the page</li>
<li>Expected: All links work correctly</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Check mobile</strong>
<ul>
<li>Open on mobile device or use browser dev tools</li>
<li>Expected: Responsive design works correctly</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 4: Check SEO</strong>
<ul>
<li>Use https://socialsharepreview.com/</li>
<li>Enter: https://nosia.ai</li>
<li>Expected: Correct title, description, and image preview</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 5: Check 404 page</strong>
<ul>
<li>Open: https://nosia.ai/nonexistent</li>
<li>Expected: Custom 404 page displays</li>
</ul>
</li>
</ul>
<hr />
<h2 id="final-commit-structure">Final Commit Structure</h2>
<p>After all tasks are complete, the repository should have the following commit history:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>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
</code></pre></div></div>
<hr />
<h2 id="rollback-plan">Rollback Plan</h2>
<p>If issues occur during deployment:</p>
<ol>
<li><strong>Build fails on GitHub Pages:</strong>
<ul>
<li>Check GitHub Actions logs</li>
<li>Test locally: <code class="language-plaintext highlighter-rouge">bundle exec jekyll build</code></li>
<li>Fix any dependency or syntax errors</li>
<li>Push fixes to main branch</li>
</ul>
</li>
<li><strong>DNS not resolving:</strong>
<ul>
<li>Verify CNAME record exists and is correct</li>
<li>Check TTL (should be low for testing)</li>
<li>Wait up to 48 hours for propagation</li>
<li>Use https://dnschecker.org/ to verify</li>
</ul>
</li>
<li><strong>HTTPS not working:</strong>
<ul>
<li>GitHub Pages automatically provisions HTTPS</li>
<li>Wait 10-15 minutes after DNS configuration</li>
<li>Check GitHub Pages settings for custom domain</li>
</ul>
</li>
<li><strong>Content errors:</strong>
<ul>
<li>Fix in local development</li>
<li>Test with <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve</code></li>
<li>Push changes to main branch</li>
<li>GitHub Pages will auto-redeploy</li>
</ul>
</li>
</ol>
<hr />
<h2 id="success-criteria">Success Criteria</h2>
<p>The implementation is considered complete when:</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Repository <code class="language-plaintext highlighter-rouge">dilolabs/nosia-ai</code> exists on GitHub</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />GitHub Pages enabled with custom domain <code class="language-plaintext highlighter-rouge">nosia.ai</code></li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Site loads at https://nosia.ai without errors</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All 8 content sections are present and correctly styled</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Dark theme is applied consistently</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Responsive design works on mobile, tablet, and desktop</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All links (internal and external) work correctly</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Smooth scroll navigation works</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Header collapses on scroll</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Back to top button appears and works</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Custom 404 page displays for missing pages</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />SEO meta tags are present</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Favicon displays correctly</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Page loads in under 2 seconds</li>
</ul>
<hr />
<h2 id="two-execution-options">Two Execution Options</h2>
<p><strong>Plan complete and saved to <code class="language-plaintext highlighter-rouge">/home/cbldev/gitd/dilolabs/nosia-ai/docs/superpowers/plans/2026-06-17-nosia-ai-landing-page-implementation.md</code></strong></p>
<p>Two execution options:</p>
<p><strong>1. Subagent-Driven (recommended)</strong> - I dispatch a fresh subagent per task, review between tasks, fast iteration</p>
<p><strong>2. Inline Execution</strong> - Execute tasks in this session using executing-plans, batch execution with checkpoints</p>
<p><strong>Which approach?</strong></p>
</main>
</body>
</html>
Head Include (_includes/head.html)
<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 - 2026-06-17 Nosia.ai Landing Page Design</title>
Header Include (_includes/header.html)
<header class="header">
<div class="container">
<a href="/" class="logo">
<img src="/assets/images/nosia-logo.png" alt="Nosia" height="48">
</a>
<nav class="nav">
<a href="#documentation">Documentation</a>
<a href="#community">Community</a>
<a href="https://github.com/nosia-ai/nosia" target="_blank" rel="noopener">GitHub┗</a>
</nav>
</div>
</header>
Page Content (index.md)
---
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>
<div class="code-block">
<code>curl -fsSL https://get.nosia.ai | sh</code>
</div>
<p>One command installs Docker and all dependencies</p>
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">MIT License</a></p>
<div class="links">
<a href="https://nosia.ai">Website</a>
<a href="https://github.com/nosia-ai/nosia">GitHub</a>
<a href="https://hub.docker.com/u/ai">Docker Hub</a>
</div>
</div>
</footer>
<script>
// Simple 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');
}
});
</script>
Styles (assets/css/style.css)
```css /* ===== 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); }
/* ===== 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; } }
/* ===== 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); }
color: var(–color-accent-dark); }