e504f0d1bf
- Add session-summary-v3.png screenshot for hook documentation - Add GitHub issue templates (bug report, feature request, question) - Add new skills: ccboard, guide-recap, landing-page-generator, release-notes-generator, skill-creator Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<!-- Quick Start / Install Section Template -->
|
|
<section id="install" class="install">
|
|
<div class="container">
|
|
<h2 class="section-title">Quick Start</h2>
|
|
|
|
<!-- One-liner install -->
|
|
<div class="install-hero">
|
|
<p class="install-intro">Get started in {{INSTALL_TIME}}:</p>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">📋 Copy</button>
|
|
</div>
|
|
<pre><code>{{INSTALL_COMMAND}}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setup steps -->
|
|
<div class="install-steps">
|
|
<h3>Setup</h3>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">📋 Copy</button>
|
|
</div>
|
|
<pre><code>{{SETUP_COMMANDS}}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage example -->
|
|
<div class="install-usage">
|
|
<h3>First Usage</h3>
|
|
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">📋 Copy</button>
|
|
</div>
|
|
<pre><code>{{USAGE_EXAMPLE}}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Link to full docs -->
|
|
<p class="install-more">
|
|
<a href="{{DOCS_URL}}">Full installation guide →</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
PLACEHOLDERS:
|
|
- {{INSTALL_TIME}}: Time estimate (e.g., "30 seconds", "2 minutes")
|
|
- {{INSTALL_COMMAND}}: One-liner install command
|
|
- {{SETUP_COMMANDS}}: Additional setup (aliases, config)
|
|
- {{USAGE_EXAMPLE}}: First usage example
|
|
- {{DOCS_URL}}: Link to full documentation
|
|
-->
|
|
|
|
<style>
|
|
.install-hero {
|
|
max-width: 800px;
|
|
margin: 0 auto var(--space-2xl);
|
|
}
|
|
|
|
.install-intro {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.install-steps,
|
|
.install-usage {
|
|
max-width: 800px;
|
|
margin: 0 auto var(--space-xl);
|
|
}
|
|
|
|
.install-steps h3,
|
|
.install-usage h3 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: var(--space-md);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.install-more {
|
|
text-align: center;
|
|
margin-top: var(--space-xl);
|
|
}
|
|
</style>
|