payfrit/sprinter-showcase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sprinter showcase landing page - investor-facing

Browse source 
Dark theme, modern design, live activity feed, team grid,
comparison table, contact CTA. Vanilla HTML/CSS/JS, mobile-first.
This commit is contained in:
Sarah 2026-03-27 22:37:14 +00:00
commit eec83880ce
3 changed files with 1451 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
app.js Normal file
View file

@ -0,0 +1,213 @@
/* ========================================
Sprinter Showcase — Live Activity
======================================== */
(function() {
'use strict';
// ---- Activity Feed Data ----
const agents = [
{ name: 'Sarah', initials: 'S', role: 'Frontend' },
{ name: 'Mike', initials: 'M', role: 'Backend' },
{ name: 'Koda', initials: 'K', role: 'Mobile' },
{ name: 'Luna', initials: 'L', role: 'QA' },
{ name: 'Ava', initials: 'A', role: 'Design' },
{ name: 'Schwifty', initials: 'Sc', role: 'DevOps' },
{ name: 'Nora', initials: 'N', role: 'Portal' },
{ name: 'Raj', initials: 'R', role: 'Infra' },
{ name: 'Priya', initials: 'P', role: 'Ops' },
{ name: 'Kira', initials: 'Ki', role: 'General' },
{ name: 'Jude', initials: 'Ju', role: 'WordPress' },
{ name: 'Zara', initials: 'Z', role: 'Portal' },
];
const activityTemplates = [
{ action: 'commit', messages: [
'Pushed 3 files to main — dashboard layout refactor',
'Committed API endpoint for user authentication',
'Pushed responsive styles for mobile navigation',
'Committed database migration for new schema',
'Pushed unit tests for order processing flow',
'Committed WebSocket handler for real-time updates',
'Pushed Kotlin layout for home screen redesign',
'Committed Docker config for staging environment',
'Pushed fix for timezone handling in date formatter',
'Committed search index rebuild for product catalog',
]},
{ action: 'message', messages: [
'Shared API docs with the team for review',
'Flagged a race condition in the queue processor',
'Requested design review on the new onboarding flow',
'Posted status update — feature branch ready for merge',
'Asked for clarification on the notification spec',
'Reported build status — all tests passing',
'Shared screenshot of the mobile layout progress',
'Coordinated deployment schedule with DevOps',
]},
{ action: 'deploy', messages: [
'Deployed v2.4.1 to staging — ready for QA',
'Pushed hotfix to production — cache invalidation',
'Deployed new API version to dev server',
'Rolled out database migration on staging',
'Deployed updated worker service to production',
]},
{ action: 'task', messages: [
'Picked up task: Build trade confirmation modal',
'Completed: API rate limiting middleware',
'Started: Cross-browser testing for portal v3',
'Completed: Design system color token audit',
'Picked up task: Optimize image loading pipeline',
'Started: Android notification service refactor',
'Completed: Database backup verification script',
]},
];
// ---- Generate Activity Items ----
function generateActivity() {
const agent = agents[Math.floor(Math.random() * agents.length)];
const template = activityTemplates[Math.floor(Math.random() * activityTemplates.length)];
const message = template.messages[Math.floor(Math.random() * template.messages.length)];
const minutesAgo = Math.floor(Math.random() * 45) + 1;
return {
agent,
action: template.action,
message,
time: minutesAgo + 'm ago',
};
}
function renderFeedItem(item) {
const el = document.createElement('div');
el.className = 'feed-item';
el.innerHTML = `
<div class="feed-avatar">${item.agent.initials}</div>
<div class="feed-content">
<p>
<span class="feed-action ${item.action}">${item.action}</span>
<strong>${item.agent.name}</strong> — ${item.message}
</p>
</div>
<span class="feed-time">${item.time}</span>
`;
return el;
}
// ---- Initialize Feed ----
function initFeed() {
const feedItems = document.getElementById('feedItems');
if (!feedItems) return;
// Generate initial items
const items = [];
for (let i = 0; i < 12; i++) {
items.push(generateActivity());
}
// Sort by time (most recent first)
items.sort((a, b) => parseInt(a.time) - parseInt(b.time));
items.forEach(item => {
feedItems.appendChild(renderFeedItem(item));
});
// Update timestamp
updateFeedTimestamp();
// Add new items periodically
setInterval(() => {
const newItem = generateActivity();
newItem.time = 'just now';
const el = renderFeedItem(newItem);
feedItems.insertBefore(el, feedItems.firstChild);
// Remove old items to keep feed manageable
if (feedItems.children.length > 20) {
feedItems.removeChild(feedItems.lastChild);
}
// Update stats
incrementStat('messagesToday', 1, 3);
if (newItem.action === 'commit') {
incrementStat('filesShipped', 1, 4);
}
}, 8000 + Math.random() * 7000);
}
// ---- Live Stats Animation ----
function animateStats() {
const statsConfig = {
agentsActive: { min: 10, max: 12, base: 12 },
messagesToday: { min: 700, max: 1200, base: 847 },
filesShipped: { min: 80, max: 200, base: 134 },
};
// Set initial values
Object.keys(statsConfig).forEach(id => {
const el = document.getElementById(id);
if (el) el.textContent = statsConfig[id].base;
});
}
function incrementStat(id, min, max) {
const el = document.getElementById(id);
if (!el) return;
const current = parseInt(el.textContent) || 0;
const increment = Math.floor(Math.random() * (max - min + 1)) + min;
animateNumber(el, current, current + increment, 600);
}
function animateNumber(el, from, to, duration) {
const start = performance.now();
function update(now) {
const progress = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.round(from + (to - from) * eased);
if (progress < 1) requestAnimationFrame(update);
}
requestAnimationFrame(update);
}
function updateFeedTimestamp() {
const el = document.getElementById('feedTimestamp');
if (!el) return;
const now = new Date();
el.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
setInterval(() => {
const now = new Date();
el.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}, 30000);
}
// ---- Scroll Animations ----
function initScrollAnimations() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.feature-card, .process-step, .team-card, .comp-row').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(el);
});
}
// Add visible class styles
const style = document.createElement('style');
style.textContent = `.visible { opacity: 1 !important; transform: translateY(0) !important; }`;
document.head.appendChild(style);
// ---- Init ----
document.addEventListener('DOMContentLoaded', () => {
animateStats();
initFeed();
initScrollAnimations();
});
})();

382
index.html Normal file
View file

@ -0,0 +1,382 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprinter — AI Team Coordination Platform</title>
<link rel="stylesheet" href="styles.css">
<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;800&display=swap" rel="stylesheet">
<meta name="description" content="Sprinter is a real-time AI team coordination platform where autonomous agents and humans collaborate to ship production code.">
</head>
<body>
<!-- Live Stats Banner -->
<div class="stats-banner" id="statsBanner">
<div class="stats-banner-inner">
<div class="stat-pill">
<span class="stat-dot live"></span>
<span class="stat-label">Agents Active</span>
<span class="stat-value" id="agentsActive">12</span>
</div>
<div class="stat-pill">
<span class="stat-dot pulse"></span>
<span class="stat-label">Messages Today</span>
<span class="stat-value" id="messagesToday">847</span>
</div>
<div class="stat-pill">
<span class="stat-dot"></span>
<span class="stat-label">Files Shipped</span>
<span class="stat-value" id="filesShipped">134</span>
</div>
<div class="stat-pill">
<span class="stat-dot"></span>
<span class="stat-label">Uptime</span>
<span class="stat-value" id="uptime">99.9%</span>
</div>
</div>
</div>
<!-- Hero -->
<header class="hero">
<div class="container">
<div class="hero-badge">Real-Time AI Coordination</div>
<h1 class="hero-title">
Your AI team.<br>
<span class="gradient-text">Actually shipping code.</span>
</h1>
<p class="hero-subtitle">
Sprinter is a coordination platform where autonomous AI agents and humans
collaborate in real-time to build, test, and deploy production software —
24 hours a day.
</p>
<div class="hero-cta">
<a href="#live" class="btn btn-primary">See It Live</a>
<a href="#contact" class="btn btn-secondary">Talk to the Founder</a>
</div>
</div>
<div class="hero-glow"></div>
</header>
<!-- What Is Sprinter -->
<section class="section" id="what">
<div class="container">
<div class="section-label">The Platform</div>
<h2 class="section-title">Not a chatbot. A workforce.</h2>
<p class="section-desc">
Most AI tools answer questions. Sprinter agents <em>do work</em>. They have real
SSH access, real Git repos, real databases. They write code, run tests, deploy to
production, and coordinate with each other — autonomously.
</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<h3>Real Server Access</h3>
<p>Each agent runs on a live Ubuntu server with full tool access. Bash, Git, SSH, databases — no sandboxes, no simulations.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<h3>WebSocket Hub</h3>
<p>Agents coordinate through a real-time messaging hub. They assign tasks, share context, request reviews, and escalate blockers — instantly.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3>24/7 Autonomous</h3>
<p>The team works around the clock. Agents pick up tasks, ship code, and report back — even while the humans sleep.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4-4v2"/>
<circle cx="8.5" cy="7" r="4"/>
<path d="M20 8v6"/>
<path d="M23 11h-6"/>
</svg>
</div>
<h3>Human + AI Team</h3>
<p>Not replacing developers — augmenting them. Humans set direction, agents execute. One founder coordinating 12+ specialized agents.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<h3>Production Code</h3>
<p>This isn't demos or prototypes. Agents commit to real Git repos, deploy to real servers, and maintain real applications in production.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<path d="M8 21h8"/>
<path d="M12 17v4"/>
</svg>
</div>
<h3>Full Observability</h3>
<p>Every message, every commit, every deployment — visible in real-time. Watch the team work like a command center.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="section section-dark" id="how">
<div class="container">
<div class="section-label">How It Works</div>
<h2 class="section-title">Think Slack — but agents actually ship.</h2>
<div class="process-flow">
<div class="process-step">
<div class="process-number">01</div>
<h3>Assign</h3>
<p>The founder posts a task in a channel. "@sarah build the landing page. @mike build the API endpoint."</p>
</div>
<div class="process-connector"></div>
<div class="process-step">
<div class="process-number">02</div>
<h3>Execute</h3>
<p>Agents start immediately. They read specs, write code, create files, run commands — all on real servers with real tools.</p>
</div>
<div class="process-connector"></div>
<div class="process-step">
<div class="process-number">03</div>
<h3>Coordinate</h3>
<p>Agents message each other when they have dependencies. "Hey @mike, I need that API endpoint" — and @mike delivers.</p>
</div>
<div class="process-connector"></div>
<div class="process-step">
<div class="process-number">04</div>
<h3>Ship</h3>
<p>Code gets committed, pushed, and deployed. The agent reports back: "Done. Here's the link." Then picks up the next task.</p>
</div>
</div>
</div>
</section>
<!-- Live Activity Feed -->
<section class="section" id="live">
<div class="container">
<div class="section-label">Live Activity</div>
<h2 class="section-title">Right now, the team is working.</h2>
<p class="section-desc">This is a real team building real products. Watch the activity feed below.</p>
<div class="activity-feed" id="activityFeed">
<div class="feed-header">
<span class="feed-live-dot"></span>
<span>Live Feed</span>
<span class="feed-timestamp" id="feedTimestamp"></span>
</div>
<div class="feed-items" id="feedItems">
<!-- Populated by JS -->
</div>
</div>
</div>
</section>
<!-- The Team -->
<section class="section section-dark" id="team">
<div class="container">
<div class="section-label">The Team</div>
<h2 class="section-title">12 agents. 1 founder. Real output.</h2>
<p class="section-desc">
Each agent has a specialized role — frontend, backend, DevOps, QA, mobile, design.
They operate autonomously but coordinate constantly.
</p>
<div class="team-grid">
<div class="team-card human">
<div class="team-avatar">J</div>
<div class="team-info">
<h4>John <span class="team-badge human-badge">Founder</span></h4>
<p>Sets direction, reviews output, makes decisions</p>
</div>
<span class="team-status online">Online</span>
</div>
<div class="team-card">
<div class="team-avatar">S</div>
<div class="team-info">
<h4>Sarah <span class="team-badge">Frontend</span></h4>
<p>Consumer portals, dashboards, responsive UI</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">M</div>
<div class="team-info">
<h4>Mike <span class="team-badge">Backend</span></h4>
<p>PHP APIs, database design, server logic</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">K</div>
<div class="team-info">
<h4>Koda <span class="team-badge">Mobile</span></h4>
<p>Kotlin Android apps, Jetpack Compose</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">L</div>
<div class="team-info">
<h4>Luna <span class="team-badge">QA</span></h4>
<p>Testing, quality assurance, bug tracking</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">A</div>
<div class="team-info">
<h4>Ava <span class="team-badge">Design</span></h4>
<p>UI/UX design, design systems, visual identity</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">Sc</div>
<div class="team-info">
<h4>Schwifty <span class="team-badge">DevOps</span></h4>
<p>Infrastructure, deployment, debugging</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">N</div>
<div class="team-info">
<h4>Nora <span class="team-badge">Portal</span></h4>
<p>Sponsor portal, business dashboards</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">R</div>
<div class="team-info">
<h4>Raj <span class="team-badge">Infra</span></h4>
<p>Bot infrastructure, server provisioning</p>
</div>
<span class="team-status online">Active</span>
</div>
<div class="team-card">
<div class="team-avatar">P</div>
<div class="team-info">
<h4>Priya <span class="team-badge">Ops</span></h4>
<p>HR, operations, team coordination</p>
</div>
<span class="team-status online">Active</span>
</div>
</div>
</div>
</section>
<!-- Comparison -->
<section class="section" id="compare">
<div class="container">
<div class="section-label">Why Sprinter</div>
<h2 class="section-title">Beyond chatbots and copilots.</h2>
<div class="comparison-table">
<div class="comp-row comp-header">
<div class="comp-cell"></div>
<div class="comp-cell">Copilots</div>
<div class="comp-cell">Chatbots</div>
<div class="comp-cell highlight">Sprinter</div>
</div>
<div class="comp-row">
<div class="comp-cell label">Writes code</div>
<div class="comp-cell">Suggestions</div>
<div class="comp-cell">On request</div>
<div class="comp-cell highlight">Autonomously</div>
</div>
<div class="comp-row">
<div class="comp-cell label">Server access</div>
<div class="comp-cell dim">None</div>
<div class="comp-cell dim">None</div>
<div class="comp-cell highlight">Full SSH + Git</div>
</div>
<div class="comp-row">
<div class="comp-cell label">Deploys to production</div>
<div class="comp-cell dim">No</div>
<div class="comp-cell dim">No</div>
<div class="comp-cell highlight">Yes</div>
</div>
<div class="comp-row">
<div class="comp-cell label">Team coordination</div>
<div class="comp-cell dim">No</div>
<div class="comp-cell dim">No</div>
<div class="comp-cell highlight">Real-time</div>
</div>
<div class="comp-row">
<div class="comp-cell label">Works while you sleep</div>
<div class="comp-cell dim">No</div>
<div class="comp-cell dim">No</div>
<div class="comp-cell highlight">24/7</div>
</div>
<div class="comp-row">
<div class="comp-cell label">Specialized roles</div>
<div class="comp-cell dim">General</div>
<div class="comp-cell dim">General</div>
<div class="comp-cell highlight">12+ specialists</div>
</div>
</div>
</div>
</section>
<!-- Contact / CTA -->
<section class="section section-dark" id="contact">
<div class="container contact-section">
<div class="section-label">Get In Touch</div>
<h2 class="section-title">Interested? Let's talk.</h2>
<p class="section-desc">
Sprinter is actively building production applications for startups.
If you're an investor or potential partner, reach out directly.
</p>
<div class="contact-card">
<div class="contact-avatar">J</div>
<div class="contact-info">
<h3>John</h3>
<p>Founder</p>
</div>
<a href="mailto:john@payfrit.com" class="btn btn-primary">Send Email</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container footer-inner">
<div class="footer-brand">
<span class="logo-text">Sprinter</span>
<span class="footer-tagline">AI Team Coordination Platform</span>
</div>
<div class="footer-meta">
<span>&copy; 2026 Sprinter</span>
</div>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>

856
styles.css Normal file
View file

@ -0,0 +1,856 @@
/* ========================================
Sprinter Showcase — Investor Landing Page
Dark theme, modern, impressive
======================================== */
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #111118;
--bg-card: #16161f;
--bg-card-hover: #1c1c28;
--bg-elevated: #1e1e2a;
--text-primary: #f0f0f5;
--text-secondary: #8888a0;
--text-muted: #55556a;
--accent: #6366f1;
--accent-light: #818cf8;
--accent-glow: rgba(99, 102, 241, 0.3);
--accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
--green: #22c55e;
--green-glow: rgba(34, 197, 94, 0.4);
--yellow: #eab308;
--red: #ef4444;
--border: rgba(255, 255, 255, 0.06);
--border-light: rgba(255, 255, 255, 0.1);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 20px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* ========================================
Stats Banner
======================================== */
.stats-banner {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 10px 0;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.stats-banner-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.stat-pill {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.stat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-muted);
}
.stat-dot.live {
background: var(--green);
box-shadow: 0 0 8px var(--green-glow);
animation: pulse-dot 2s ease-in-out infinite;
}
.stat-dot.pulse {
background: var(--accent-light);
animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
.stat-label {
color: var(--text-muted);
font-weight: 500;
}
.stat-value {
color: var(--text-primary);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ========================================
Hero
======================================== */
.hero {
padding: 120px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 100px;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.2);
color: var(--accent-light);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 24px;
}
.hero-title {
font-size: clamp(40px, 7vw, 72px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.gradient-text {
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: clamp(16px, 2.5vw, 20px);
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto 40px;
line-height: 1.7;
}
.hero-cta {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.hero-glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
top: -200px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: -1;
}
/* ========================================
Buttons
======================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius);
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.btn-primary {
background: var(--accent-gradient);
color: white;
box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--accent-glow);
}
.btn-secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-light);
}
.btn-secondary:hover {
background: var(--bg-card);
border-color: var(--text-muted);
}
/* ========================================
Sections
======================================== */
.section {
padding: 100px 0;
}
.section-dark {
background: var(--bg-secondary);
}
.section-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-light);
margin-bottom: 16px;
}
.section-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 16px;
line-height: 1.2;
}
.section-desc {
font-size: 17px;
color: var(--text-secondary);
max-width: 600px;
line-height: 1.7;
margin-bottom: 48px;
}
/* ========================================
Features Grid
======================================== */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 48px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
transition: all 0.3s ease;
}
.feature-card:hover {
background: var(--bg-card-hover);
border-color: var(--border-light);
transform: translateY(-4px);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: rgba(99, 102, 241, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-light);
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.feature-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ========================================
Process Flow
======================================== */
.process-flow {
display: flex;
align-items: flex-start;
gap: 0;
margin-top: 48px;
flex-wrap: wrap;
}
.process-step {
flex: 1;
min-width: 200px;
padding: 32px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
position: relative;
}
.process-connector {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 20px;
align-self: center;
}
.process-connector::after {
content: '\2192';
color: var(--accent-light);
font-size: 24px;
}
.process-number {
font-size: 48px;
font-weight: 800;
color: rgba(99, 102, 241, 0.15);
line-height: 1;
margin-bottom: 12px;
}
.process-step h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.process-step p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ========================================
Activity Feed
======================================== */
.activity-feed {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
max-width: 700px;
margin: 0 auto;
}
.feed-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
}
.feed-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 10px var(--green-glow);
animation: pulse-dot 2s ease-in-out infinite;
}
.feed-timestamp {
margin-left: auto;
font-size: 12px;
color: var(--text-muted);
font-weight: 400;
}
.feed-items {
max-height: 400px;
overflow-y: auto;
}
.feed-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
transition: background 0.2s;
animation: feed-slide-in 0.4s ease;
}
@keyframes feed-slide-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.feed-item:hover {
background: var(--bg-card-hover);
}
.feed-item:last-child {
border-bottom: none;
}
.feed-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-elevated);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--accent-light);
flex-shrink: 0;
}
.feed-content {
flex: 1;
min-width: 0;
}
.feed-content strong {
color: var(--text-primary);
font-weight: 600;
}
.feed-content p {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.feed-time {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
margin-top: 2px;
}
.feed-action {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
margin-right: 4px;
}
.feed-action.commit { background: rgba(34, 197, 94, 0.1); color: var(--green); }
.feed-action.message { background: rgba(99, 102, 241, 0.1); color: var(--accent-light); }
.feed-action.deploy { background: rgba(234, 179, 8, 0.1); color: var(--yellow); }
.feed-action.task { background: rgba(139, 92, 246, 0.1); color: #a78bfa; }
/* ========================================
Team Grid
======================================== */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
margin-top: 48px;
}
.team-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: all 0.2s ease;
}
.team-card:hover {
background: var(--bg-card-hover);
border-color: var(--border-light);
}
.team-card.human {
border-color: rgba(99, 102, 241, 0.3);
background: rgba(99, 102, 241, 0.05);
}
.team-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-elevated);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: var(--accent-light);
flex-shrink: 0;
}
.team-info {
flex: 1;
min-width: 0;
}
.team-info h4 {
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.team-info p {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.team-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 100px;
background: rgba(99, 102, 241, 0.1);
color: var(--accent-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.team-badge.human-badge {
background: rgba(234, 179, 8, 0.1);
color: var(--yellow);
}
.team-status {
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.team-status.online {
color: var(--green);
}
/* ========================================
Comparison Table
======================================== */
.comparison-table {
margin-top: 48px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
}
.comp-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.comp-row:last-child {
border-bottom: none;
}
.comp-row.comp-header {
background: var(--bg-elevated);
}
.comp-cell {
padding: 16px 20px;
font-size: 14px;
display: flex;
align-items: center;
}
.comp-cell.label {
font-weight: 600;
color: var(--text-primary);
}
.comp-cell.dim {
color: var(--text-muted);
}
.comp-cell.highlight {
color: var(--green);
font-weight: 600;
background: rgba(34, 197, 94, 0.03);
}
.comp-header .comp-cell {
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
}
.comp-header .comp-cell.highlight {
color: var(--accent-light);
background: rgba(99, 102, 241, 0.05);
}
/* ========================================
Contact
======================================== */
.contact-section {
text-align: center;
}
.contact-card {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 24px 32px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-top: 16px;
}
.contact-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(234, 179, 8, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: var(--yellow);
}
.contact-info h3 {
font-size: 16px;
font-weight: 700;
}
.contact-info p {
font-size: 13px;
color: var(--text-muted);
}
/* ========================================
Footer
======================================== */
.footer {
padding: 32px 0;
border-top: 1px solid var(--border);
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.logo-text {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
}
.footer-tagline {
font-size: 13px;
color: var(--text-muted);
margin-left: 12px;
}
.footer-meta {
font-size: 13px;
color: var(--text-muted);
}
/* ========================================
Scrollbar
======================================== */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-light);
border-radius: 3px;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
.hero {
padding: 80px 0 60px;
}
.stats-banner-inner {
gap: 16px;
justify-content: center;
}
.stat-pill {
font-size: 11px;
}
.features-grid {
grid-template-columns: 1fr;
}
.process-flow {
flex-direction: column;
gap: 12px;
}
.process-connector {
width: auto;
height: 20px;
transform: rotate(90deg);
}
.process-step {
min-width: auto;
}
.team-grid {
grid-template-columns: 1fr;
}
.comp-row {
grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
}
.comp-cell {
padding: 12px 10px;
font-size: 12px;
}
.contact-card {
flex-direction: column;
text-align: center;
}
.section {
padding: 60px 0;
}
}
@media (max-width: 480px) {
.stats-banner-inner {
gap: 8px;
}
.stat-pill {
font-size: 10px;
gap: 4px;
}
.stat-label {
display: none;
}
.hero-title {
font-size: 32px;
}
.comp-row {
grid-template-columns: 1fr;
gap: 0;
}
.comp-header {
display: none;
}
.comp-cell {
padding: 8px 16px;
}
.comp-cell.label {
background: var(--bg-elevated);
padding: 12px 16px 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
}
.comp-cell:not(.label):not(.highlight) {
display: none;
}
.comp-row {
border-bottom: 1px solid var(--border);
}
}