examples.html•32.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples - Worksona Agents</title>
<meta name="description" content="Real-world examples and use cases for Worksona Agents MCP server - from startups to enterprise projects.">
<link rel="stylesheet" href="css/styles.css">
<style>
.example-card {
background: white;
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
transition: all 0.3s;
}
.example-card:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-lg);
}
.example-header {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.example-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
}
.example-icon svg {
color: var(--primary-color);
}
.example-meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.example-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(99, 102, 241, 0.1);
color: var(--primary-color);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
}
.example-agents {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.5rem 0;
}
.agent-badge {
padding: 0.5rem 1rem;
background: var(--bg-gray);
border-radius: var(--radius-md);
font-size: 0.875rem;
color: var(--text-dark);
font-weight: 500;
}
.example-prompt-wrapper {
position: relative;
margin: 1.5rem 0;
}
.example-prompt {
background: var(--bg-dark);
color: #10b981;
padding: 2rem 3rem 2rem 2rem;
margin: 0;
font-family: 'Courier New', monospace;
font-size: 0.9375rem;
line-height: 1.8;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.copy-prompt-btn {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--text-dark);
color: white;
border: 2px solid var(--text-dark);
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.15s;
}
.copy-prompt-btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
}
.copy-prompt-btn.copied {
background: var(--success-color);
border-color: var(--success-color);
}
.copy-prompt-btn svg {
width: 14px;
height: 14px;
}
.example-results {
background: var(--bg-gray);
padding: 1.5rem;
border-radius: var(--radius-md);
margin: 1.5rem 0;
}
.example-results h4 {
margin-top: 0;
color: var(--text-dark);
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="nav-container">
<div class="nav-brand">
<svg class="logo" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
<span class="brand-name">Worksona Agents</span>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="agents.html">Agent Directory</a></li>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="examples.html" class="active">Examples</a></li>
<li><a href="https://github.com/worksona/worksona-mcp-server" target="_blank" class="btn-github">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a></li>
</ul>
<button class="mobile-menu-btn" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- Page Header -->
<section class="page-header">
<div class="container">
<h1>Real-World Examples</h1>
<p>See how Worksona Agents helps teams tackle real projects</p>
</div>
</section>
<!-- Examples -->
<section style="padding: 4rem 0;">
<div class="container" style="max-width: 1000px;">
<!-- Example 1: Startup MVP -->
<div class="example-card" style="margin-bottom: 3rem;">
<div class="example-header">
<div class="example-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5l7 7-7 7"/>
</svg>
</div>
<div style="flex: 1;">
<h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">Startup MVP Development</h2>
<div class="example-meta">
<span class="example-tag">Startup</span>
<span class="example-tag">Full-Stack</span>
<span class="example-tag">MVP</span>
<span class="example-tag">Timeline: 4-6 weeks</span>
</div>
</div>
</div>
<p style="color: var(--text-light); line-height: 1.6; margin-bottom: 1rem;">
<strong>Scenario:</strong> Early-stage startup needs to build and launch an MVP quickly to validate product-market fit with limited resources.
</p>
<h4>Agents Used:</h4>
<div class="example-agents">
<span class="agent-badge">👔 product-manager</span>
<span class="agent-badge">🏗️ backend-architect</span>
<span class="agent-badge">💻 frontend-developer</span>
<span class="agent-badge">📝 doc-writer</span>
</div>
<h4>Example Prompt:</h4>
<div class="example-prompt-wrapper">
<pre class="example-prompt">I'm building a SaaS platform for freelance project management. I need to go from idea to launch in 6 weeks.
**Product Concept:**
- Target: Freelancers and small agencies
- Core features: Project tracking, time tracking, client portal, invoicing
- Tech constraints: Bootstrap budget, team of 2 developers
**Goals:**
1. Validate and refine MVP scope
2. Choose the right tech stack for rapid development
3. Build core application with essential features
4. Create basic documentation
5. Plan launch strategy
Please coordinate the relevant agents to help me build this MVP efficiently.</pre>
<button class="copy-prompt-btn" data-prompt="I'm building a SaaS platform for freelance project management. I need to go from idea to launch in 6 weeks.
**Product Concept:**
- Target: Freelancers and small agencies
- Core features: Project tracking, time tracking, client portal, invoicing
- Tech constraints: Bootstrap budget, team of 2 developers
**Goals:**
1. Validate and refine MVP scope
2. Choose the right tech stack for rapid development
3. Build core application with essential features
4. Create basic documentation
5. Plan launch strategy
Please coordinate the relevant agents to help me build this MVP efficiently.">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Copy
</button>
</div>
<div class="example-results">
<h4>What Happens:</h4>
<ul style="color: var(--text-light); line-height: 1.8;">
<li><strong>product-manager</strong> refines the scope, prioritizes features, and creates a lean roadmap</li>
<li><strong>backend-architect</strong> designs scalable API architecture and recommends Next.js + PostgreSQL stack</li>
<li><strong>frontend-developer</strong> builds responsive UI with React and implements core workflows</li>
<li><strong>doc-writer</strong> creates user documentation and onboarding guides</li>
</ul>
<p style="color: var(--success-color); font-weight: 600; margin: 1rem 0 0;">Result: Complete MVP launched in 5 weeks, validated with first 50 beta users</p>
</div>
</div>
<!-- Example 2: Security Audit -->
<div class="example-card" style="margin-bottom: 3rem;">
<div class="example-header">
<div class="example-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="11" width="14" height="10" rx="2" ry="2"/>
<path d="M12 16h.01"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<div style="flex: 1;">
<h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">Enterprise Security Audit</h2>
<div class="example-meta">
<span class="example-tag">Enterprise</span>
<span class="example-tag">Security</span>
<span class="example-tag">Compliance</span>
<span class="example-tag">Timeline: 2 weeks</span>
</div>
</div>
</div>
<p style="color: var(--text-light); line-height: 1.6; margin-bottom: 1rem;">
<strong>Scenario:</strong> Mid-sized company needs comprehensive security assessment before SOC2 compliance certification.
</p>
<h4>Agents Used:</h4>
<div class="example-agents">
<span class="agent-badge">🔒 security-auditor</span>
<span class="agent-badge">🚨 incident-responder</span>
<span class="agent-badge">⚖️ risk-manager</span>
<span class="agent-badge">💻 code-reviewer</span>
</div>
<h4>Example Prompt:</h4>
<div class="example-prompt-wrapper">
<pre class="example-prompt">I need a comprehensive security review of our SaaS platform before SOC2 audit.
**System Details:**
- Application: Multi-tenant B2B SaaS platform
- Stack: Node.js, React, PostgreSQL, AWS
- Users: 500+ enterprise customers
- Data: Customer PII, financial records
**Requirements:**
1. Vulnerability assessment and penetration testing
2. Code security review
3. Incident response planning
4. Risk assessment and compliance gap analysis
Use coordinate_team with sequential coordination for thorough security review.</pre>
<button class="copy-prompt-btn" data-prompt="I need a comprehensive security review of our SaaS platform before SOC2 audit.
**System Details:**
- Application: Multi-tenant B2B SaaS platform
- Stack: Node.js, React, PostgreSQL, AWS
- Users: 500+ enterprise customers
- Data: Customer PII, financial records
**Requirements:**
1. Vulnerability assessment and penetration testing
2. Code security review
3. Incident response planning
4. Risk assessment and compliance gap analysis
Use coordinate_team with sequential coordination for thorough security review.">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Copy
</button>
</div>
<div class="example-results">
<h4>What Happens:</h4>
<ul style="color: var(--text-light); line-height: 1.8;">
<li><strong>security-auditor</strong> performs comprehensive vulnerability scan, identifies 23 issues (3 critical)</li>
<li><strong>code-reviewer</strong> analyzes codebase for security flaws, reviews authentication/authorization</li>
<li><strong>incident-responder</strong> creates incident response playbook and monitoring setup</li>
<li><strong>risk-manager</strong> assesses business risks, creates security policies, prepares for SOC2</li>
</ul>
<p style="color: var(--success-color); font-weight: 600; margin: 1rem 0 0;">Result: All critical vulnerabilities fixed, SOC2 certification achieved in 8 weeks</p>
</div>
</div>
<!-- Example 3: Performance Optimization -->
<div class="example-card" style="margin-bottom: 3rem;">
<div class="example-header">
<div class="example-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
</div>
<div style="flex: 1;">
<h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">Performance Crisis Resolution</h2>
<div class="example-meta">
<span class="example-tag">Performance</span>
<span class="example-tag">Scale</span>
<span class="example-tag">Critical</span>
<span class="example-tag">Timeline: 1 week</span>
</div>
</div>
</div>
<p style="color: var(--text-light); line-height: 1.6; margin-bottom: 1rem;">
<strong>Scenario:</strong> E-commerce platform experiencing severe performance degradation during peak traffic, losing customers.
</p>
<h4>Agents Used:</h4>
<div class="example-agents">
<span class="agent-badge">⚡ performance-engineer</span>
<span class="agent-badge">📊 database-optimizer</span>
<span class="agent-badge">☁️ cloud-architect</span>
<span class="agent-badge">⚙️ devops-engineer</span>
</div>
<h4>Example Prompt:</h4>
<div class="example-prompt-wrapper">
<pre class="example-prompt">URGENT: Our e-commerce site is experiencing severe performance issues during peak hours.
**Current Situation:**
- Response times: 8-15 seconds (was 1-2 seconds)
- Database CPU: 95%+ during peak
- Checkout abandonment: Up 40%
- Traffic: 50K concurrent users during peak
**Issues:**
- Slow product page loads
- Database query timeouts
- API response delays
- Infrastructure not scaling
Use coordinate_team with parallel coordination for immediate performance improvements across all layers.</pre>
<button class="copy-prompt-btn" data-prompt="URGENT: Our e-commerce site is experiencing severe performance issues during peak hours.
**Current Situation:**
- Response times: 8-15 seconds (was 1-2 seconds)
- Database CPU: 95%+ during peak
- Checkout abandonment: Up 40%
- Traffic: 50K concurrent users during peak
**Issues:**
- Slow product page loads
- Database query timeouts
- API response delays
- Infrastructure not scaling
Use coordinate_team with parallel coordination for immediate performance improvements across all layers.">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Copy
</button>
</div>
<div class="example-results">
<h4>What Happens:</h4>
<ul style="color: var(--text-light); line-height: 1.8;">
<li><strong>performance-engineer</strong> profiles application, identifies N+1 queries and caching opportunities</li>
<li><strong>database-optimizer</strong> adds indexes, optimizes slow queries, implements query caching</li>
<li><strong>cloud-architect</strong> designs auto-scaling strategy, adds read replicas, implements CDN</li>
<li><strong>devops-engineer</strong> deploys performance fixes, sets up monitoring and alerts</li>
</ul>
<p style="color: var(--success-color); font-weight: 600; margin: 1rem 0 0;">Result: Response times reduced to <1 second, handled 2x traffic growth, recovered lost revenue</p>
</div>
</div>
<!-- Example 4: AI Integration -->
<div class="example-card" style="margin-bottom: 3rem;">
<div class="example-header">
<div class="example-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
</div>
<div style="flex: 1;">
<h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">AI-Powered Feature Development</h2>
<div class="example-meta">
<span class="example-tag">AI/ML</span>
<span class="example-tag">Innovation</span>
<span class="example-tag">Product</span>
<span class="example-tag">Timeline: 3 weeks</span>
</div>
</div>
</div>
<p style="color: var(--text-light); line-height: 1.6; margin-bottom: 1rem;">
<strong>Scenario:</strong> SaaS company wants to add AI-powered features to differentiate from competitors and increase user engagement.
</p>
<h4>Agents Used:</h4>
<div class="example-agents">
<span class="agent-badge">🤖 ai-engineer</span>
<span class="agent-badge">🏗️ backend-architect</span>
<span class="agent-badge">💻 frontend-developer</span>
<span class="agent-badge">📊 data-scientist</span>
</div>
<h4>Example Prompt:</h4>
<div class="example-prompt-wrapper">
<pre class="example-prompt">I want to add AI capabilities to our project management app to help users work smarter.
**Current App:**
- Type: Project management SaaS
- Stack: React, Node.js, MongoDB
- Users: 10K active users
- Core features: Tasks, projects, team collaboration
**AI Features Desired:**
- Intelligent task prioritization
- Smart deadline predictions
- Automated task categorization
- Natural language task creation
Help me design and implement these AI features with best practices.</pre>
<button class="copy-prompt-btn" data-prompt="I want to add AI capabilities to our project management app to help users work smarter.
**Current App:**
- Type: Project management SaaS
- Stack: React, Node.js, MongoDB
- Users: 10K active users
- Core features: Tasks, projects, team collaboration
**AI Features Desired:**
- Intelligent task prioritization
- Smart deadline predictions
- Automated task categorization
- Natural language task creation
Help me design and implement these AI features with best practices.">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Copy
</button>
</div>
<div class="example-results">
<h4>What Happens:</h4>
<ul style="color: var(--text-light); line-height: 1.8;">
<li><strong>ai-engineer</strong> designs AI architecture using OpenAI API + custom models</li>
<li><strong>data-scientist</strong> analyzes historical data, trains prioritization model</li>
<li><strong>backend-architect</strong> implements AI service layer, async processing, caching</li>
<li><strong>frontend-developer</strong> builds AI-powered UI components with real-time feedback</li>
</ul>
<p style="color: var(--success-color); font-weight: 600; margin: 1rem 0 0;">Result: 35% increase in user engagement, 25% reduction in missed deadlines, differentiating feature</p>
</div>
</div>
<!-- Example 5: Legacy Modernization -->
<div class="example-card">
<div class="example-header">
<div class="example-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
<path d="M21 3v5h-5"/>
</svg>
</div>
<div style="flex: 1;">
<h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">Legacy System Modernization</h2>
<div class="example-meta">
<span class="example-tag">Enterprise</span>
<span class="example-tag">Migration</span>
<span class="example-tag">Modernization</span>
<span class="example-tag">Timeline: 6 months</span>
</div>
</div>
</div>
<p style="color: var(--text-light); line-height: 1.6; margin-bottom: 1rem;">
<strong>Scenario:</strong> Enterprise needs to modernize 10-year-old monolithic application that's becoming unmaintainable and limiting business growth.
</p>
<h4>Agents Used:</h4>
<div class="example-agents">
<span class="agent-badge">🔄 legacy-modernizer</span>
<span class="agent-badge">🏗️ backend-architect</span>
<span class="agent-badge">☁️ cloud-architect</span>
<span class="agent-badge">📊 database-optimizer</span>
<span class="agent-badge">⚙️ devops-engineer</span>
</div>
<h4>Example Prompt:</h4>
<div class="example-prompt-wrapper">
<pre class="example-prompt">I need to modernize a 10-year-old Java monolith that's critical to our business.
**Current System:**
- Technology: Java 8, Spring 3.x, Oracle DB, On-premise
- Size: 500K lines of code, 200+ database tables
- Users: 5K employees, 24/7 operation
- Issues: Hard to maintain, slow deployments, scaling problems
**Goals:**
- Microservices architecture
- Cloud migration (AWS preferred)
- Zero downtime during migration
- Maintain data integrity
Create a comprehensive modernization strategy with phased execution plan.</pre>
<button class="copy-prompt-btn" data-prompt="I need to modernize a 10-year-old Java monolith that's critical to our business.
**Current System:**
- Technology: Java 8, Spring 3.x, Oracle DB, On-premise
- Size: 500K lines of code, 200+ database tables
- Users: 5K employees, 24/7 operation
- Issues: Hard to maintain, slow deployments, scaling problems
**Goals:**
- Microservices architecture
- Cloud migration (AWS preferred)
- Zero downtime during migration
- Maintain data integrity
Create a comprehensive modernization strategy with phased execution plan.">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Copy
</button>
</div>
<div class="example-results">
<h4>What Happens:</h4>
<ul style="color: var(--text-light); line-height: 1.8;">
<li><strong>legacy-modernizer</strong> analyzes codebase, creates strangler fig migration strategy</li>
<li><strong>backend-architect</strong> designs microservices architecture, API gateway, event-driven patterns</li>
<li><strong>cloud-architect</strong> plans AWS infrastructure, multi-region deployment, disaster recovery</li>
<li><strong>database-optimizer</strong> designs data migration strategy, implements dual-write pattern</li>
<li><strong>devops-engineer</strong> sets up CI/CD, blue-green deployments, monitoring</li>
</ul>
<p style="color: var(--success-color); font-weight: 600; margin: 1rem 0 0;">Result: Successfully migrated in 6 months with zero downtime, 3x faster deployments, 60% cost savings</p>
</div>
</div>
<!-- CTA Section -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem; border-radius: var(--radius-xl); text-align: center; margin-top: 4rem;">
<h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 1rem;">Ready to Transform Your Project?</h2>
<p style="font-size: 1.125rem; opacity: 0.95; margin-bottom: 2rem;">Get started with Worksona Agents and tackle your toughest challenges</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="documentation.html#quick-start" class="btn btn-primary btn-large">Get Started</a>
<a href="agents.html" class="btn btn-secondary btn-large">Browse Agents</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>Worksona Agents</h4>
<p>Multi-agent platform for Claude Desktop</p>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="agents.html">Agent Directory</a></li>
<li><a href="examples.html">Examples</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/worksona/worksona-mcp-server" target="_blank">GitHub</a></li>
<li><a href="https://worksona.io" target="_blank">Worksona.io</a></li>
<li><a href="https://atomic47.co" target="_blank">Atomic 47 Labs</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>All Rights Reserved: Atomic 47 Labs Inc [<a href="https://atomic47.co" target="_blank" style="color: inherit;">atomic47.co</a>]. 2025. A <a href="https://worksona.io" target="_blank" style="color: inherit;">worksona.io</a> project. Contact: <a href="mailto:david@atomic47.co" style="color: inherit;">david@atomic47.co</a></p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script>
// Copy button functionality for example prompts
document.addEventListener('DOMContentLoaded', () => {
const copyButtons = document.querySelectorAll('.copy-prompt-btn');
copyButtons.forEach(button => {
button.addEventListener('click', async () => {
const prompt = button.getAttribute('data-prompt');
try {
await navigator.clipboard.writeText(prompt);
// Show success state
button.classList.add('copied');
const originalHTML = button.innerHTML;
button.innerHTML = `
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<polyline points="20 6 9 17 4 12"/>
</svg>
Copied!
`;
// Reset after 2 seconds
setTimeout(() => {
button.classList.remove('copied');
button.innerHTML = originalHTML;
}, 2000);
} catch (err) {
console.error('Failed to copy:', err);
button.textContent = 'Failed!';
setTimeout(() => {
button.innerHTML = originalHTML;
}, 2000);
}
});
});
});
</script>
</body>
</html>