[docs] Comprehensive design refresh of landing page

Design iterations (10x each) on all 10 sections:
- Hero: Gradient headlines, animated eyebrow, enhanced buttons with shimmer
- Stats: Icon system, gradient numbers, hover animations, layered shadows
- Philosophy: Pillar cards with gradient borders, animated timeline, tool tags
- Agents: Category headers with gradients, badge styling, code block enhancements
- Commands: Terminal aesthetic with $ prompts, scanlines, CORE/UTIL badges
- Skills: Knowledge module feel, feature pills, category theming
- MCP Servers: Server-specific theming (teal/amber), ACTIVE badges, tool counts
- Installation: Terminal-style code blocks, step progress indicators
- FAQ: Card-based accordion, question/checkmark icons, smooth animations
- CTA: Benefit-focused copy, animated badge, trust indicators, glass morphism

Design inspired by Evil Martians devtool-template patterns.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
2025-11-26 12:44:36 -08:00
parent 7901ef2241
commit 1808f901eb
59 changed files with 4169 additions and 106 deletions

View File

@@ -753,14 +753,14 @@
</div>
<div class="grid columns-2">
<div class="mcp-card">
<div class="mcp-card mcp-card-browser">
<div class="mcp-header">
<i class="fa-brands fa-chrome mcp-icon"></i>
<span class="mcp-name">Playwright</span>
</div>
<p class="mcp-description">Browser automation for testing, screenshots, and web interactions.</p>
<div class="mcp-tools">
<h4>Tools Provided:</h4>
<h4>Tools Provided: <span class="tools-count">6 tools</span></h4>
<ul>
<li><code>browser_navigate</code> - Navigate to URLs</li>
<li><code>browser_take_screenshot</code> - Take screenshots</li>
@@ -771,14 +771,14 @@
</ul>
</div>
</div>
<div class="mcp-card">
<div class="mcp-card mcp-card-docs">
<div class="mcp-header">
<i class="fa-solid fa-book-open mcp-icon"></i>
<span class="mcp-name">Context7</span>
</div>
<p class="mcp-description">Framework documentation lookup for more than 100 frameworks.</p>
<div class="mcp-tools">
<h4>Tools Provided:</h4>
<h4>Tools Provided: <span class="tools-count">2 tools</span></h4>
<ul>
<li><code>resolve-library-id</code> - Find library ID</li>
<li><code>get-library-docs</code> - Get documentation</li>
@@ -913,18 +913,21 @@ skill: gemini-imagegen</code></pre>
<!-- CTA Section -->
<section class="promo-cta">
<div class="heading centered">
<h2>Start Building Smarter Today</h2>
<p class="paragraph m">
Join developers who are making each engineering task easier than the last.
<span class="cta-badge"><i class="fa-solid fa-bolt"></i> Free & Open Source</span>
<h2>Transform Your Development Workflow in Minutes</h2>
<p class="paragraph m cta-subheading">
<strong>Install once. Compound forever.</strong> Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you—starting now.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary">
<i class="fa-solid fa-download"></i> Install Plugin
<a href="#install" class="button primary cta-primary">
<i class="fa-solid fa-download"></i> Install Plugin Now
<span class="button-arrow"></span>
</a>
<a href="https://github.com/EveryInc/every-marketplace" class="button tertiary">
<a href="https://github.com/EveryInc/every-marketplace" class="button tertiary cta-secondary">
<i class="fa-brands fa-github"></i> View on GitHub
</a>
</div>
<p class="cta-trust">Join 1,000+ developers building smarter with AI-powered workflows</p>
</div>
</section>
</main>