feat: add landing page for Hermes Agent
- Introduced a new landing page with HTML, CSS, and JavaScript files to showcase the Hermes Agent. - Added a banner image and logo to enhance visual appeal. - Implemented interactive features such as a copy-to-clipboard function for installation commands and scroll-triggered animations for improved user engagement. - Designed a responsive layout with sections detailing the agent's features, installation instructions, and community links.
This commit is contained in:
teknium1
BIN
landingpage/hermes-agent-banner.png
Normal file
BIN
landingpage/hermes-agent-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
472
landingpage/index.html
Normal file
472
landingpage/index.html
Normal file
@@ -0,0 +1,472 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hermes Agent — An AI Agent You Can Actually Live With</title>
|
||||
<meta name="description" content="Open-source AI agent that lives on your server, learns your projects, builds its own skills, and reaches you wherever you are. By Nous Research.">
|
||||
<meta name="theme-color" content="#0a0a0f">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="Hermes Agent — AI Agent Framework">
|
||||
<meta property="og:description" content="An open-source AI agent you can actually live with. Install it, give it your messaging accounts, and it becomes a persistent personal agent that grows with you.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://github.com/NousResearch/hermes-agent">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚕</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Ambient glow effects -->
|
||||
<div class="ambient-glow glow-1"></div>
|
||||
<div class="ambient-glow glow-2"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="#" class="nav-logo">
|
||||
<span class="nav-symbol">⚕</span>
|
||||
<span class="nav-brand">Hermes Agent</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#install">Install</a>
|
||||
<a href="https://github.com/NousResearch/hermes-agent" target="_blank" rel="noopener">
|
||||
GitHub
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="external-icon"><path d="M3.5 1.5H10.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 1.5L1.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="https://discord.gg/NousResearch" target="_blank" rel="noopener">Discord</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
Open Source · MIT License
|
||||
</div>
|
||||
|
||||
<div class="hero-ascii" aria-hidden="true">
|
||||
<img src="hermes-agent-banner.png" alt="Hermes Agent" class="hero-logo">
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
An AI agent you can<br>
|
||||
<span class="hero-gradient">actually live with.</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-subtitle">
|
||||
Install it on a machine, give it your messaging accounts, and it becomes a
|
||||
persistent personal agent that grows with you — learning your projects,
|
||||
building its own skills, and reaching you wherever you are.
|
||||
</p>
|
||||
|
||||
<div class="hero-install">
|
||||
<div class="install-box">
|
||||
<code id="install-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code>
|
||||
<button class="copy-btn" onclick="copyInstall()" title="Copy to clipboard">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<span class="copy-text">Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="install-note">Works on Linux & macOS · No Python prerequisite · Installs everything automatically</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-links">
|
||||
<a href="https://github.com/NousResearch/hermes-agent" class="btn btn-primary" target="_blank" rel="noopener">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
View on GitHub
|
||||
</a>
|
||||
<a href="https://discord.gg/NousResearch" class="btn btn-secondary" target="_blank" rel="noopener">
|
||||
Join Community
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What it is -->
|
||||
<section class="section section-what">
|
||||
<div class="container">
|
||||
<p class="lead-text">
|
||||
It's not a coding copilot tethered to an IDE or a chatbot wrapper around a single API.
|
||||
It's an <strong>autonomous agent</strong> that lives on your server, remembers what it learns,
|
||||
and gets more capable the longer it runs.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="section" id="features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>What it does</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💬</div>
|
||||
<h3>Lives Where You Do</h3>
|
||||
<p>Telegram, Discord, Slack, WhatsApp, and CLI — all from a single gateway process. Voice memo transcription, cross-platform continuation. Start a conversation on Telegram, pick it up in your terminal.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🧠</div>
|
||||
<h3>Grows the Longer It Runs</h3>
|
||||
<p>Persistent memory across sessions — it learns your preferences, projects, and environment. When it solves a hard problem, it writes a skill document so it never forgets how. Skills are searchable and shareable.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⏰</div>
|
||||
<h3>Scheduled Automations</h3>
|
||||
<p>Built-in cron scheduler with delivery to any platform. Natural language scheduling for daily reports, nightly backups, weekly audits, morning briefings — all running unattended through the gateway.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔀</div>
|
||||
<h3>Delegates & Parallelizes</h3>
|
||||
<p>Spawn isolated subagents for parallel workstreams. Each gets its own conversation and terminal. Write Python scripts that call tools via RPC, collapsing multi-step pipelines into zero-context-cost turns.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>Real Sandboxing</h3>
|
||||
<p>Five terminal backends: local, Docker, SSH, Singularity, and Modal. Container security hardening with read-only root, dropped capabilities, PID limits, and namespace isolation.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌐</div>
|
||||
<h3>Full Web & Browser Control</h3>
|
||||
<p>Web search, page extraction, full browser automation — navigate, click, type, screenshot. Plus vision analysis, image generation, text-to-speech, and multi-model collaborative reasoning.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Terminal Demo -->
|
||||
<section class="section section-demo" id="demo">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>See it in action</h2>
|
||||
</div>
|
||||
|
||||
<div class="terminal-window">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-dots">
|
||||
<span class="dot dot-red"></span>
|
||||
<span class="dot dot-yellow"></span>
|
||||
<span class="dot dot-green"></span>
|
||||
</div>
|
||||
<span class="terminal-title">hermes</span>
|
||||
</div>
|
||||
<div class="terminal-body" id="terminal-demo">
|
||||
<div class="terminal-line" id="terminal-content"></div>
|
||||
<span class="terminal-cursor" id="terminal-cursor">█</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tools -->
|
||||
<section class="section" id="tools">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>40+ built-in tools</h2>
|
||||
</div>
|
||||
|
||||
<div class="tools-grid">
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🔍</span> Web Search
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">💻</span> Terminal
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">📁</span> File System
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🌐</span> Browser
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">👁</span> Vision
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🎨</span> Image Gen
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🔊</span> Text-to-Speech
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🧠</span> Memory
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">📋</span> Task Planning
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">⏰</span> Cron Jobs
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🐍</span> Code Execution
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🔀</span> Subagents
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">📚</span> Skills
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🤖</span> Multi-Model Reasoning
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">📨</span> Messaging
|
||||
</div>
|
||||
<div class="tool-pill">
|
||||
<span class="tool-emoji">🔎</span> Session Search
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Works With -->
|
||||
<section class="section" id="platforms">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>Works with everything</h2>
|
||||
</div>
|
||||
|
||||
<div class="platforms-row">
|
||||
<div class="platform-group">
|
||||
<h4 class="platform-label">Chat Platforms</h4>
|
||||
<div class="platform-pills">
|
||||
<span class="platform-pill">Telegram</span>
|
||||
<span class="platform-pill">Discord</span>
|
||||
<span class="platform-pill">Slack</span>
|
||||
<span class="platform-pill">WhatsApp</span>
|
||||
<span class="platform-pill">CLI</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="platform-group">
|
||||
<h4 class="platform-label">LLM Providers</h4>
|
||||
<div class="platform-pills">
|
||||
<span class="platform-pill">Nous Portal</span>
|
||||
<span class="platform-pill">OpenRouter</span>
|
||||
<span class="platform-pill">Custom API</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="platform-group">
|
||||
<h4 class="platform-label">Execution Environments</h4>
|
||||
<div class="platform-pills">
|
||||
<span class="platform-pill">Local</span>
|
||||
<span class="platform-pill">Docker</span>
|
||||
<span class="platform-pill">SSH</span>
|
||||
<span class="platform-pill">Singularity</span>
|
||||
<span class="platform-pill">Modal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills -->
|
||||
<section class="section section-skills" id="skills">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>40+ built-in skills & growing</h2>
|
||||
</div>
|
||||
|
||||
<p class="section-desc">
|
||||
Skills are procedural memory — reusable approaches for recurring tasks.
|
||||
The agent creates them when it solves hard problems, and loads them automatically when similar tasks come up.
|
||||
Install more from community hubs with a single command.
|
||||
</p>
|
||||
|
||||
<div class="skills-categories">
|
||||
<div class="skill-category">
|
||||
<h4>Built-in Skills</h4>
|
||||
<p class="skill-hub-desc">40+ skills bundled out of the box covering MLOps, GitHub workflows, diagramming, note-taking, and more. The agent also creates new skills on the fly as it works.</p>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h4>Skills Hub Integrations</h4>
|
||||
<div class="skill-tags">
|
||||
<span><a href="https://agentskills.io" target="_blank" rel="noopener">agentskills.io</a></span>
|
||||
<span><a href="https://github.com" target="_blank" rel="noopener">GitHub Repos</a></span>
|
||||
<span><a href="https://clawhub.ai" target="_blank" rel="noopener">ClawHub</a></span>
|
||||
<span><a href="https://lobehub.com" target="_blank" rel="noopener">LobeHub</a></span>
|
||||
<span>Claude Code Marketplace</span>
|
||||
</div>
|
||||
<p class="skill-hub-desc">Browse, install, and manage skills from multiple community hubs. Quarantine and audit systems keep your agent safe.</p>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h4>Open Standard</h4>
|
||||
<p class="skill-hub-desc">Skills follow the <a href="https://agentskills.io" target="_blank" rel="noopener">agentskills.io</a> open format — portable SKILL.md files that any agent can use. Create your own and share them.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Install -->
|
||||
<section class="section section-install" id="install">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>Get started in 60 seconds</h2>
|
||||
</div>
|
||||
|
||||
<div class="install-steps">
|
||||
<div class="install-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Install</h4>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>bash</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash">Copy</button>
|
||||
</div>
|
||||
<pre><code>curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code></pre>
|
||||
</div>
|
||||
<p class="step-note">Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Configure</h4>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>bash</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="hermes setup">Copy</button>
|
||||
</div>
|
||||
<pre><code><span class="code-comment"># Interactive setup wizard</span>
|
||||
hermes setup
|
||||
|
||||
<span class="code-comment"># Or choose your model</span>
|
||||
hermes model</code></pre>
|
||||
</div>
|
||||
<p class="step-note">Connect to Nous Portal (OAuth), OpenRouter (API key), or your own endpoint.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>Start chatting</h4>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>bash</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="hermes">Copy</button>
|
||||
</div>
|
||||
<pre><code>hermes</code></pre>
|
||||
</div>
|
||||
<p class="step-note">That's it. Full interactive CLI with tools, memory, and skills.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<h4>Go multi-platform <span class="step-optional">(optional)</span></h4>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>bash</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="hermes gateway">Copy</button>
|
||||
</div>
|
||||
<pre><code><span class="code-comment"># Start the messaging gateway</span>
|
||||
hermes gateway
|
||||
|
||||
<span class="code-comment"># Install as a system service</span>
|
||||
hermes gateway install</code></pre>
|
||||
</div>
|
||||
<p class="step-note">Connect Telegram, Discord, Slack, or WhatsApp. Runs as a systemd service.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-windows">
|
||||
<p>Windows? Use WSL or PowerShell:</p>
|
||||
<div class="code-block code-block-sm">
|
||||
<div class="code-header">
|
||||
<span>powershell</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex">Copy</button>
|
||||
</div>
|
||||
<pre><code>irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- For Researchers -->
|
||||
<section class="section section-research" id="research">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-marker">⚕</span>
|
||||
<h2>Research-ready</h2>
|
||||
</div>
|
||||
|
||||
<div class="research-grid">
|
||||
<div class="research-card">
|
||||
<h4>Batch Processing</h4>
|
||||
<p>Generate thousands of tool-calling trajectories in parallel with automatic checkpointing. Configurable workers, batch sizes, and toolset distributions.</p>
|
||||
</div>
|
||||
<div class="research-card">
|
||||
<h4>RL Training</h4>
|
||||
<p>Atropos integration for reinforcement learning on agent behaviors. 11 tool-call parsers for training any model architecture.</p>
|
||||
</div>
|
||||
<div class="research-card">
|
||||
<h4>Trajectory Export</h4>
|
||||
<p>Export conversations in ShareGPT format for fine-tuning. Trajectory compression fits training data into token budgets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-card">
|
||||
<a href="https://github.com/NousResearch/hermes-agent" target="_blank" rel="noopener">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
<span>View Source</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<a href="https://discord.gg/NousResearch" target="_blank" rel="noopener">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286z"/></svg>
|
||||
<span>Join Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<a href="https://nousresearch.com" target="_blank" rel="noopener">
|
||||
<img src="nous-logo.png" alt="Nous Research" class="footer-nous-logo">
|
||||
<span>Nous Research</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<a href="https://agentskills.io" target="_blank" rel="noopener">
|
||||
<span class="footer-skills-icon">📚</span>
|
||||
<span>agentskills.io</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>Built by <a href="https://nousresearch.com" target="_blank" rel="noopener">Nous Research</a> · MIT License · 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
landingpage/nous-logo.png
Normal file
BIN
landingpage/nous-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
284
landingpage/script.js
Normal file
284
landingpage/script.js
Normal file
@@ -0,0 +1,284 @@
|
||||
// =========================================================================
|
||||
// Hermes Agent Landing Page — Interactions
|
||||
// =========================================================================
|
||||
|
||||
// --- Copy to clipboard ---
|
||||
function copyInstall() {
|
||||
const text = document.getElementById('install-command').textContent;
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const btn = document.querySelector('.hero-install .copy-btn');
|
||||
const original = btn.querySelector('.copy-text').textContent;
|
||||
btn.querySelector('.copy-text').textContent = 'Copied!';
|
||||
btn.style.color = 'var(--gold)';
|
||||
setTimeout(() => {
|
||||
btn.querySelector('.copy-text').textContent = original;
|
||||
btn.style.color = '';
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function copyText(btn) {
|
||||
const text = btn.getAttribute('data-text');
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const original = btn.textContent;
|
||||
btn.textContent = 'Copied!';
|
||||
btn.style.color = 'var(--gold)';
|
||||
setTimeout(() => {
|
||||
btn.textContent = original;
|
||||
btn.style.color = '';
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Scroll-triggered fade-in ---
|
||||
function initScrollAnimations() {
|
||||
const elements = document.querySelectorAll(
|
||||
'.feature-card, .tool-pill, .platform-group, .skill-category, ' +
|
||||
'.install-step, .research-card, .footer-card, .section-header, ' +
|
||||
'.lead-text, .section-desc, .terminal-window'
|
||||
);
|
||||
|
||||
elements.forEach(el => el.classList.add('fade-in'));
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Stagger children within grids
|
||||
const parent = entry.target.parentElement;
|
||||
if (parent) {
|
||||
const siblings = parent.querySelectorAll('.fade-in');
|
||||
let idx = Array.from(siblings).indexOf(entry.target);
|
||||
if (idx < 0) idx = 0;
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('visible');
|
||||
}, idx * 60);
|
||||
} else {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
elements.forEach(el => observer.observe(el));
|
||||
}
|
||||
|
||||
// --- Terminal Demo ---
|
||||
const demoSequence = [
|
||||
// Scene 1: Research task with delegation
|
||||
{ type: 'prompt', text: '❯ ' },
|
||||
{ type: 'type', text: 'Research the latest approaches to GRPO training and write a summary', delay: 30 },
|
||||
{ type: 'pause', ms: 600 },
|
||||
{ type: 'output', lines: [
|
||||
'',
|
||||
'<span class="t-dim">┊ 🔍 web_search "GRPO reinforcement learning 2026" 1.2s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ 📄 web_extract arxiv.org/abs/2402.03300 3.1s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ 🔍 web_search "GRPO vs PPO ablation results" 0.9s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ 📄 web_extract huggingface.co/blog/grpo 2.8s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ ✍️ write_file ~/research/grpo-summary.md 0.1s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 500 },
|
||||
{ type: 'output', lines: [
|
||||
'',
|
||||
'<span class="t-text">Done! I\'ve written a summary covering:</span>',
|
||||
'',
|
||||
'<span class="t-text"> <span class="t-green">✓</span> GRPO\'s group-relative advantage (no critic model needed)</span>',
|
||||
'<span class="t-text"> <span class="t-green">✓</span> Comparison with PPO/DPO on reasoning benchmarks</span>',
|
||||
'<span class="t-text"> <span class="t-green">✓</span> Implementation notes for Axolotl and TRL</span>',
|
||||
'',
|
||||
'<span class="t-text">Saved to</span> <span class="t-amber">~/research/grpo-summary.md</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 2500 },
|
||||
|
||||
// Scene 2: Quick delegation
|
||||
{ type: 'clear' },
|
||||
{ type: 'prompt', text: '❯ ' },
|
||||
{ type: 'type', text: 'Review the PR at NousResearch/hermes-agent#42 and fix any issues', delay: 30 },
|
||||
{ type: 'pause', ms: 600 },
|
||||
{ type: 'output', lines: [
|
||||
'',
|
||||
'<span class="t-dim">┊ 🔀 delegate_task "review PR #42 changes" 2.1s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 500 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ 💻 git diff main..pr-42 0.4s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ ✏️ patch tools/registry.py 0.1s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ 💻 python -m pytest tests/ -x 3.2s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 400 },
|
||||
{ type: 'output', lines: [
|
||||
'<span class="t-dim">┊ 💻 git commit -m "fix: handle empty tool schemas" 0.3s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 500 },
|
||||
{ type: 'output', lines: [
|
||||
'',
|
||||
'<span class="t-text">Found 2 issues in the PR and fixed both:</span>',
|
||||
'',
|
||||
'<span class="t-text"> <span class="t-green">✓</span> Empty tool schema crash in registry.py — added guard</span>',
|
||||
'<span class="t-text"> <span class="t-green">✓</span> Missing error handling in delegate_tool.py — added try/except</span>',
|
||||
'',
|
||||
'<span class="t-text">Tests pass. Committed the fix and pushed to the PR branch.</span>',
|
||||
'<span class="t-text">I also saved a</span> <span class="t-amber">skill</span> <span class="t-text">for this PR review pattern.</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 2500 },
|
||||
|
||||
// Scene 3: Session search by keyword
|
||||
{ type: 'clear' },
|
||||
{ type: 'prompt', text: '❯ ' },
|
||||
{ type: 'type', text: 'How did we fix that Docker networking issue?', delay: 35 },
|
||||
{ type: 'pause', ms: 500 },
|
||||
{ type: 'output', lines: [
|
||||
'',
|
||||
'<span class="t-dim">┊ 🔎 session_search "Docker networking" 1.4s</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 500 },
|
||||
{ type: 'output', lines: [
|
||||
'',
|
||||
'<span class="t-text">Found it — from a session on February 12th:</span>',
|
||||
'',
|
||||
'<span class="t-text">The containers couldn\'t reach each other because the compose</span>',
|
||||
'<span class="t-text">file was using the default bridge network. We switched to a</span>',
|
||||
'<span class="t-text">custom network with</span> <span class="t-amber">driver: overlay</span><span class="t-text">, added explicit</span>',
|
||||
'<span class="t-text">aliases, and set</span> <span class="t-amber">dns: 8.8.8.8</span> <span class="t-text">as a fallback.</span>',
|
||||
'',
|
||||
'<span class="t-text">The fix was committed in</span> <span class="t-amber">docker-compose.prod.yml</span><span class="t-text">.</span>',
|
||||
]},
|
||||
{ type: 'pause', ms: 3000 },
|
||||
];
|
||||
|
||||
class TerminalDemo {
|
||||
constructor(element, cursorElement) {
|
||||
this.el = element;
|
||||
this.cursor = cursorElement;
|
||||
this.running = false;
|
||||
this.content = '';
|
||||
this.observer = null;
|
||||
}
|
||||
|
||||
async start() {
|
||||
if (this.running) return;
|
||||
this.running = true;
|
||||
|
||||
while (this.running) {
|
||||
for (const step of demoSequence) {
|
||||
if (!this.running) return;
|
||||
await this.execute(step);
|
||||
}
|
||||
// Loop
|
||||
this.clear();
|
||||
await this.sleep(1000);
|
||||
}
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.running = false;
|
||||
}
|
||||
|
||||
async execute(step) {
|
||||
switch (step.type) {
|
||||
case 'prompt':
|
||||
this.append(`<span class="t-prompt">${step.text}</span>`);
|
||||
break;
|
||||
|
||||
case 'type':
|
||||
for (const char of step.text) {
|
||||
if (!this.running) return;
|
||||
this.append(`<span class="t-cmd">${char}</span>`);
|
||||
await this.sleep(step.delay || 30);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'output':
|
||||
for (const line of step.lines) {
|
||||
if (!this.running) return;
|
||||
this.append('\n' + line);
|
||||
await this.sleep(50);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'pause':
|
||||
await this.sleep(step.ms);
|
||||
break;
|
||||
|
||||
case 'clear':
|
||||
this.clear();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
append(html) {
|
||||
this.content += html;
|
||||
this.el.innerHTML = this.content;
|
||||
// Keep cursor at end
|
||||
this.el.parentElement.scrollTop = this.el.parentElement.scrollHeight;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.content = '';
|
||||
this.el.innerHTML = '';
|
||||
}
|
||||
|
||||
sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
}
|
||||
|
||||
// --- Initialize ---
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initScrollAnimations();
|
||||
|
||||
// Terminal demo - start when visible
|
||||
const terminalEl = document.getElementById('terminal-content');
|
||||
const cursorEl = document.getElementById('terminal-cursor');
|
||||
|
||||
if (terminalEl && cursorEl) {
|
||||
const demo = new TerminalDemo(terminalEl, cursorEl);
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
demo.start();
|
||||
} else {
|
||||
demo.stop();
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
observer.observe(document.querySelector('.terminal-window'));
|
||||
}
|
||||
|
||||
// Smooth nav background on scroll
|
||||
const nav = document.querySelector('.nav');
|
||||
let ticking = false;
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
if (window.scrollY > 50) {
|
||||
nav.style.borderBottomColor = 'rgba(255, 215, 0, 0.1)';
|
||||
} else {
|
||||
nav.style.borderBottomColor = '';
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
950
landingpage/style.css
Normal file
950
landingpage/style.css
Normal file
@@ -0,0 +1,950 @@
|
||||
/* =========================================================================
|
||||
Hermes Agent Landing Page
|
||||
Colors: Gold (#FFD700) / Amber (#FFBF00) / Bronze (#CD7F32)
|
||||
========================================================================= */
|
||||
|
||||
/* --- Reset & Base --- */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--gold: #FFD700;
|
||||
--amber: #FFBF00;
|
||||
--bronze: #CD7F32;
|
||||
--dark-gold: #B8860B;
|
||||
--bg: #07070d;
|
||||
--bg-card: #0f0f18;
|
||||
--bg-card-hover: #14142a;
|
||||
--border: rgba(255, 215, 0, 0.08);
|
||||
--border-hover: rgba(255, 215, 0, 0.18);
|
||||
--text: #e8e4dc;
|
||||
--text-dim: #9a968e;
|
||||
--text-muted: #6a665e;
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||||
--container: 1080px;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
background-image: radial-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--gold);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Ambient Glow --- */
|
||||
.ambient-glow {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
opacity: 0.15;
|
||||
}
|
||||
.glow-1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: var(--gold);
|
||||
top: -200px;
|
||||
left: -200px;
|
||||
opacity: 0.08;
|
||||
}
|
||||
.glow-2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: var(--bronze);
|
||||
bottom: 20%;
|
||||
right: -150px;
|
||||
opacity: 0.06;
|
||||
}
|
||||
|
||||
/* --- Container --- */
|
||||
.container {
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* --- Navigation --- */
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(7, 7, 13, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
.nav-logo:hover { color: var(--gold); }
|
||||
|
||||
.nav-symbol {
|
||||
font-size: 22px;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: #fff; }
|
||||
|
||||
.external-icon { opacity: 0.4; }
|
||||
|
||||
/* --- Hero --- */
|
||||
.hero {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 24px 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 16px;
|
||||
background: rgba(255, 215, 0, 0.06);
|
||||
border: 1px solid rgba(255, 215, 0, 0.15);
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 32px;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
display: inline-block;
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.hero-ascii {
|
||||
margin-bottom: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.15));
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero-ascii:hover .hero-logo {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(36px, 6vw, 56px);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, var(--gold), var(--amber), var(--bronze));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 17px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-dim);
|
||||
max-width: 620px;
|
||||
margin: 0 auto 36px;
|
||||
}
|
||||
|
||||
.hero-install {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.install-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
overflow-x: auto;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.install-box:hover {
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.install-box code {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.copy-btn:hover {
|
||||
color: var(--gold);
|
||||
background: rgba(255, 215, 0, 0.08);
|
||||
}
|
||||
|
||||
.install-note {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.hero-links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 24px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-weight: 550;
|
||||
transition: all 0.25s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
color: var(--gold);
|
||||
border-color: rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: rgba(255, 215, 0, 0.18);
|
||||
border-color: rgba(255, 215, 0, 0.35);
|
||||
color: var(--gold);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-dim);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: var(--text);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* --- Sections --- */
|
||||
.section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-marker {
|
||||
font-size: 20px;
|
||||
color: var(--gold);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-dim);
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
max-width: 640px;
|
||||
margin: 0 auto 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Section: What --- */
|
||||
.section-what {
|
||||
padding: 60px 0 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.lead-text {
|
||||
font-size: 20px;
|
||||
line-height: 1.75;
|
||||
color: var(--text-dim);
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Features Grid --- */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 24px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
background: var(--bg-card-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* --- Terminal Demo --- */
|
||||
.section-demo {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.terminal-window {
|
||||
background: #0c0c14;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-bottom: 1px solid var(--border);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.terminal-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot-red { background: #ff5f57; }
|
||||
.dot-yellow { background: #febc2e; }
|
||||
.dot-green { background: #28c840; }
|
||||
|
||||
.terminal-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
padding: 20px 24px;
|
||||
height: 340px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.terminal-cursor {
|
||||
animation: blink 1s step-end infinite;
|
||||
color: var(--gold);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 0.8; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Terminal demo colors */
|
||||
.t-prompt { color: var(--gold); }
|
||||
.t-cmd { color: #fff; }
|
||||
.t-dim { color: var(--text-muted); }
|
||||
.t-text { color: var(--text-dim); }
|
||||
.t-green { color: #4ade80; }
|
||||
.t-blue { color: #60a5fa; }
|
||||
.t-amber { color: var(--amber); }
|
||||
.t-bronze { color: var(--bronze); }
|
||||
.t-tool { color: var(--text-muted); }
|
||||
|
||||
/* --- Tools Grid --- */
|
||||
.tools-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tool-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 18px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.tool-pill:hover {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text);
|
||||
background: var(--bg-card-hover);
|
||||
}
|
||||
|
||||
.tool-emoji {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* --- Platforms --- */
|
||||
.platforms-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.platform-group {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.platform-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.platform-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.platform-pill {
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.platform-pill:hover {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* --- Skills --- */
|
||||
.section-skills {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.skills-categories {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.skill-category h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gold);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.skill-tags span {
|
||||
padding: 4px 10px;
|
||||
background: rgba(255, 215, 0, 0.04);
|
||||
border: 1px solid rgba(255, 215, 0, 0.08);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.skill-tags span a {
|
||||
color: inherit;
|
||||
}
|
||||
.skill-tags span a:hover {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.skill-hub-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* --- Install Section --- */
|
||||
.section-install {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.install-steps {
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.install-step {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 215, 0, 0.08);
|
||||
border: 1px solid rgba(255, 215, 0, 0.15);
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gold);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.step-content h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.step-optional {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.step-note {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #0c0c14;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-block-sm {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.code-block pre {
|
||||
padding: 14px 16px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.install-windows {
|
||||
margin-top: 48px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid var(--border);
|
||||
max-width: 640px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.install-windows p {
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* --- Research --- */
|
||||
.research-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.research-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.research-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.research-card h4 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.research-card p {
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 80px 0 40px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.footer-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
background: var(--bg-card-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.footer-card a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 28px 20px;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-card a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.footer-card svg {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.footer-nous-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.footer-skills-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.footer-bottom a {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.footer-bottom a:hover {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* --- Scroll Animations --- */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 900px) {
|
||||
.features-grid,
|
||||
.research-grid,
|
||||
.platforms-row,
|
||||
.skills-categories {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero {
|
||||
padding: 100px 20px 60px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.features-grid,
|
||||
.research-grid,
|
||||
.platforms-row,
|
||||
.skills-categories,
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.install-box {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.nav-links a:not(:last-child):not(:nth-last-child(2)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
font-size: 11px;
|
||||
padding: 16px;
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Selection --- */
|
||||
::selection {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- Scrollbar --- */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-hover);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--dark-gold);
|
||||
}
|
||||
Reference in New Issue
Block a user