All Prompts
All Prompts
Axis Software Landing Page Template
Шаблон лендинга Axis Software для IT-компаний. Чистый, современный дизайн. HTML/CSS. Создайте эффективную страницу для вашего продукта.
Prompt
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orbit - The Modern Development Cycle</title>
<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&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #050505;
--panel-bg: #0A0A0A;
--text-main: #F7F8F8;
--text-muted: #8A8F98;
--primary-button: #F7F8F8;
--primary-button-text: #08090A;
--border-color: rgba(255, 255, 255, 0.08);
--accent-purple: #5E6AD2;
--accent-green: #4DAF73;
--accent-yellow: #E2B340;
--accent-glow: rgba(94, 106, 210, 0.25);
--glass-bg: rgba(20, 20, 22, 0.6);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-main); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* --- Navbar --- */
nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: rgba(5, 5, 5, 0.7); backdrop-filter: blur(12px); z-index: 1000; border-bottom: 1px solid var(--border-color); }
.logo { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; letter-spacing: -0.5px; }
.logo-icon { width: 18px; height: 18px; background: white; border-radius: 50%; position: relative; }
.logo-icon::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: var(--bg-color); border-radius: 50%; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links li a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 400; transition: color 0.2s; }
.nav-links li a:hover { color: var(--text-main); }
.nav-auth { display: flex; align-items: center; gap: 20px; }
.login-btn { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.login-btn:hover { color: var(--text-main); }
.signup-btn { background: rgba(255,255,255,0.1); color: var(--text-main); padding: 7px 14px; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.2s; }
.signup-btn:hover { background: rgba(255,255,255,0.18); }
/* --- Hero Section --- */
.hero { display: flex; flex-direction: column; align-items: center; padding-top: 120px; position: relative; perspective: 2500px; min-height: 100vh; overflow: visible; margin-bottom: 0; padding-bottom: 50px; }
.hero::before { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 1200px; height: 800px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); z-index: -1; pointer-events: none; }
.hero-content { text-align: center; max-width: 900px; padding: 0 20px; z-index: 10; margin-bottom: 80px; animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
h1 { font-size: 84px; line-height: 1; font-weight: 600; letter-spacing: -2.5px; margin-bottom: 24px; background: linear-gradient(180deg, #FFFFFF 0%, #B0B0B0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtext { font-size: 22px; color: var(--text-muted); line-height: 1.4; max-width: 620px; margin: 0 auto 40px; font-weight: 400; }
.cta-container { display: flex; align-items: center; justify-content: center; gap: 20px; }
.primary-cta { background-color: var(--primary-button); color: var(--primary-button-text); padding: 14px 28px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.primary-cta:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(255,255,255,0.3); }
.secondary-link { color: var(--text-main); text-decoration: none; font-size: 15px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); padding: 10px 18px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.05); transition: background 0.2s; }
.secondary-link:hover { background: rgba(255,255,255,0.1); }
.secondary-link span { color: #8A8F98; }
/* --- 3D Dashboard --- */
.dashboard-wrapper { position: relative; transform: rotateX(20deg) rotateY(-8deg) rotateZ(5deg); transform-style: preserve-3d; box-shadow: 0 50px 100px -20px rgba(0,0,0,0.7); border-radius: 12px; background: #111214; border: 1px solid rgba(255,255,255,0.1); width: 1000px; height: 650px; opacity: 0; animation: boardEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; transition: transform 0.1s linear; }
@keyframes boardEntrance { 0% { opacity: 0; translate: 0 100px; } 100% { opacity: 1; translate: 0 0; } }
.dashboard-container { width: 100%; height: 100%; display: flex; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, rgba(20,20,20,1) 0%, rgba(10,10,10,1) 100%); }
.dash-sidebar { width: 240px; background: rgba(255, 255, 255, 0.02); border-right: 1px solid var(--border-color); padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.window-controls { display: flex; gap: 8px; opacity: 0.6; }
.control { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #FF5F57; } .yellow { background: #FEBC2E; } .green { background: #28C840; }
.sidebar-menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #888; padding: 6px 8px; border-radius: 6px; }
.menu-item.active { background: rgba(255,255,255,0.06); color: #fff; }
.icon-box { width: 16px; height: 16px; background: #333; border-radius: 3px; }
.dash-content { flex: 1; display: flex; flex-direction: column; }
.dash-header { height: 54px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.breadcrumb { font-size: 13px; color: #888; display: flex; align-items: center; gap: 8px; }
.breadcrumb span { color: #fff; font-weight: 500; }
.header-actions { display: flex; gap: 10px; }
.h-btn { font-size: 12px; color: #777; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); }
.list-container { flex: 1; padding: 10px; overflow: hidden; }
.list-header { display: grid; grid-template-columns: 80px 1fr 100px 30px; padding: 10px 16px; font-size: 11px; color: #555; text-transform: uppercase; }
.list-row { display: grid; grid-template-columns: 80px 1fr 100px 30px; align-items: center; padding: 12px 16px; border-radius: 6px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.02); background: transparent; opacity: 0; transform: translateY(-20px) scale(0.98); animation: fallIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes fallIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.list-row:nth-child(2) { animation-delay: 0.6s; } .list-row:nth-child(3) { animation-delay: 0.7s; } .list-row:nth-child(4) { animation-delay: 0.8s; } .list-row:nth-child(5) { animation-delay: 0.9s; }
.list-row:hover { background: rgba(255,255,255,0.04); }
.id-col { font-family: 'Courier New', monospace; color: #666; font-size: 12px; }
.title-col { display: flex; align-items: center; gap: 10px; color: #ddd; font-weight: 400; }
.status-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #444; position: relative; }
.status-dot.todo { border-color: #666; } .status-dot.inprogress { border-color: #E2B340; background: rgba(226, 179, 64, 0.2); } .status-dot.done { border-color: #5E6AD2; background: rgba(94, 106, 210, 0.2); }
.status-dot.done::after { content:'✓'; position:absolute; font-size:9px; top:-1px; left:3px; color:#5E6AD2; }
.priority-col { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.05); color: #777; width: max-content; }
.priority-col.high { color: #FF5F57; background: rgba(255, 95, 87, 0.1); }
.avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(45deg, #444, #666); }
.floating-card { position: absolute; bottom: 40px; right: -20px; width: 300px; background: #1A1B20; border: 1px solid #333; border-radius: 8px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transform: translateZ(50px); animation: floatCard 1s ease-out forwards 1.2s; opacity: 0; }
@keyframes floatCard { from { opacity: 0; transform: translateZ(50px) translateY(20px); } to { opacity: 1; transform: translateZ(50px) translateY(0); } }
.code-snip { font-family: monospace; font-size: 11px; color: #aaa; line-height: 1.6; }
.c-kw { color: #C678DD; } .c-str { color: #98C379; }
/* --- CLIENTS --- */
.clients-section { padding: 80px 0 100px 0; background: var(--bg-color); position: relative; z-index: 5; mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); }
.clients-header { text-align: center; margin-bottom: 50px; }
.clients-header h2 { font-size: 20px; font-weight: 500; color: var(--text-main); margin-bottom: 8px; }
.clients-header p { font-size: 16px; color: var(--text-muted); }
.ticker-row { display: flex; width: 100%; overflow: hidden; margin-bottom: 20px; }
.track { display: flex; align-items: center; gap: 80px; width: max-content; }
.track-right { animation: scrollRight 40s linear infinite; }
.track-left { animation: scrollLeft 40s linear infinite; }
.client-logo { display: flex; align-items: center; gap: 10px; opacity: 0.6; transition: opacity 0.3s; color: #fff; white-space: nowrap; }
.client-logo:hover { opacity: 1; }
.c-svg { height: 24px; width: auto; fill: currentColor; }
.c-name { font-size: 18px; font-weight: 600; letter-spacing: -0.5px; }
@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
/* --- NEW: ISSUE TRACKING SECTION --- */
.issue-tracking-section {
display: flex;
padding: 140px 24px;
max-width: 1300px;
margin: 0 auto;
align-items: center;
position: relative;
overflow: hidden;
}
.it-content {
flex: 1;
padding-right: 60px;
z-index: 10;
}
.it-tag {
color: var(--accent-yellow);
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.it-tag .dot { width: 8px; height: 8px; background: var(--accent-yellow); border-radius: 50%; box-shadow: 0 0 10px var(--accent-yellow); }
.it-content h2 {
font-size: 64px;
line-height: 1;
font-weight: 600;
letter-spacing: -2px;
margin-bottom: 30px;
background: linear-gradient(180deg, #FFFFFF 0%, #AAA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.it-content p {
font-size: 20px;
color: var(--text-muted);
line-height: 1.6;
max-width: 480px;
}
.it-visual {
flex: 1.5;
height: 600px;
position: relative;
perspective: 1200px;
/* Fade edges */
mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}
.it-board {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
/* Initial tilt similar to the image */
transform: rotateX(25deg) rotateY(-15deg) rotateZ(5deg);
transition: transform 0.1s ease-out;
}
/* Column Headers */
.it-col-header {
position: absolute;
font-size: 14px;
color: #555;
font-weight: 500;
transform: translateZ(0);
}
/* Floating Cards */
.it-card {
position: absolute;
width: 340px;
background: rgba(30, 32, 35, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 16px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
gap: 12px;
transform-style: preserve-3d;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
}
.it-card:hover {
background: rgba(40, 42, 45, 0.6);
border-color: rgba(255,255,255,0.15);
}
.it-id { font-size: 12px; color: #666; font-family: monospace; }
.it-title { font-size: 15px; color: #ccc; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.it-meta { display: flex; gap: 8px; }
.it-chip { background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 4px; font-size: 11px; color: #777; display: flex; align-items: center; gap: 4px; }
.p-icon-high { color: var(--accent-yellow); }
.p-icon-urgent { color: #FF5F57; }
/* Card Positioning */
.card-1 {
top: 180px; left: 50px;
background: linear-gradient(135deg, rgba(40,40,40,0.8), rgba(20,20,20,0.9));
border: 1px solid rgba(255,255,255,0.15);
transform: translateZ(60px); /* Popped out */
z-index: 10;
box-shadow: 0 40px 80px rgba(0,0,0,0.8);
animation: floatCard 6s ease-in-out infinite;
}
.card-1 .it-title { color: #fff; font-size: 16px; }
.card-2 {
top: 100px; left: 420px;
transform: translateZ(0px);
opacity: 0.6;
}
.card-3 {
top: 360px; left: 80px;
transform: translateZ(-20px);
opacity: 0.4;
}
.card-4 {
top: 240px; left: 450px;
transform: translateZ(-10px);
opacity: 0.3;
}
@keyframes floatCard {
0%, 100% { transform: translateZ(60px) translateY(0); }
50% { transform: translateZ(60px) translateY(-15px); }
}
/* --- FEATURES --- */
.features { max-width: 1200px; margin: 0 auto; padding: 100px 24px; }
.feature-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; }
.feature-title { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -1px; background: linear-gradient(to bottom, #fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.feature-text p { font-size: 20px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.feature-link { color: var(--text-main); text-decoration: none; font-size: 16px; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.2s; }
.feature-link span { color: var(--accent-purple); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; height: 480px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; cursor: default; transition: border-color 0.3s; }
.feature-card:hover { border-color: rgba(255,255,255,0.15); }
.card-visual { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.card-footer { padding: 32px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.03); z-index: 2; background: rgba(0,0,0,0.2); }
.card-title { font-size: 18px; font-weight: 500; color: #eee; }
.plus-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #333; background: #111; color: #555; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; }
.feature-card:hover .plus-btn { background: #222; color: #fff; border-color: #555; }
/* --- AI SECTION --- */
.ai-section { padding: 100px 24px; max-width: 1200px; margin: 0 auto; position: relative; }
.ai-tag { color: #00D5FF; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.ai-tag .dot { width: 8px; height: 8px; background: #00D5FF; border-radius: 50%; box-shadow: 0 0 10px #00D5FF; }
.ai-title { font-size: 56px; line-height: 1.1; font-weight: 600; letter-spacing: -2px; margin-bottom: 30px; background: linear-gradient(180deg, #FFFFFF 0%, #999 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ai-subtext { font-size: 20px; color: var(--text-muted); max-width: 600px; line-height: 1.6; margin-bottom: 40px; }
.ai-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; color: #fff; text-decoration: none; font-size: 14px; transition: all 0.2s; }
.ai-btn:hover { background: rgba(255,255,255,0.15); }
.ai-demo-wrapper { margin-top: 80px; height: 500px; display: flex; justify-content: center; perspective: 1200px; }
.ai-menu-container { width: 700px; background: rgba(20, 20, 20, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px; box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1); transform: rotateX(20deg) scale(0.95); transform-origin: center top; transition: transform 0.1s ease-out; position: relative; overflow: hidden; }
.input-bar { font-size: 16px; color: #666; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 10px; font-family: 'Inter', sans-serif; font-style: italic; }
.agent-list { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 2; }
.agent-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 8px; cursor: pointer; transition: background 0.2s; position: relative; }
.agent-item:hover { background: rgba(255,255,255,0.05); }
.agent-left { display: flex; align-items: center; gap: 12px; }
.a-icon { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; background: #333; color: white; }
.a-name { font-size: 15px; color: #eee; font-weight: 500; }
.check-icon { color: #fff; opacity: 0; transform: scale(0.8); transition: all 0.2s; }
.agent-item:hover .check-icon { opacity: 1; transform: scale(1); }
/* --- GRID SECTION (Self-driving & MCP) --- */
.grid-section { border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); max-width: 100%; margin: 0 auto; display: flex; position: relative; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 50px 50px; }
.grid-col { flex: 1; padding: 100px 60px; display: flex; flex-direction: column; gap: 50px; position: relative; overflow: hidden; transition: background 0.3s; }
.grid-col:hover { background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%); }
.grid-divider { width: 1px; background: rgba(255,255,255,0.08); position: relative; }
.col-text h3 { font-size: 32px; font-weight: 500; color: #fff; margin-bottom: 16px; letter-spacing: -0.5px; }
.col-text p { font-size: 17px; color: var(--text-muted); line-height: 1.6; max-width: 420px; }
.col-visual { height: 380px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.triage-container { width: 100%; max-width: 400px; background: #0F1011; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.t-header { font-size: 13px; color: #666; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-weight: 500; }
.t-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #888; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.t-pill { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px; color: #aaa; font-size: 12px; }
.t-avatar { width: 16px; height: 16px; border-radius: 50%; background: #444; }
.reasoning-card { position: absolute; top: 60px; left: 40px; right: -20px; background: rgba(25, 26, 28, 0.95); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.08); transform: translateY(10px); opacity: 0.9; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 10; }
.triage-container:hover .reasoning-card { transform: translateY(0); opacity: 1; box-shadow: 0 40px 100px rgba(0,0,0,0.8); }
.rc-title { font-size: 14px; color: #fff; margin-bottom: 8px; font-weight: 500; }
.rc-desc { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 20px; }
.accept-btn { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #ddd; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 500; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.accept-btn:hover { background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.3); color: #2ecc71; }
.mcp-container { width: 100%; max-width: 420px; height: 300px; position: relative; display: flex; align-items: center; justify-content: center; }
.code-block { position: absolute; width: 100%; height: 100%; background: #0A0B0C; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); padding: 24px; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; color: #555; mask-image: linear-gradient(to bottom, black 40%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%); z-index: 1; transition: opacity 0.3s; animation: codePulse 4s infinite ease-in-out; }
@keyframes codePulse { 0% { opacity: 0.6; } 50% { opacity: 0.8; } 100% { opacity: 0.6; } }
.ai-chat-card { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05); z-index: 2; }
.chat-input { display: flex; align-items: center; gap: 4px; color: #aaa; font-size: 14px; margin-bottom: 16px; }
.chat-actions { display: flex; gap: 8px; }
.chat-pill { font-size: 11px; padding: 6px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); color: #888; background: rgba(255,255,255,0.03); display: flex; align-items: center; gap: 6px; transition: all 0.2s; cursor: pointer; font-weight: 500; }
.chat-pill:hover { border-color: rgba(255,255,255,0.3); color: #fff; background: rgba(255,255,255,0.08); box-shadow: 0 0 15px rgba(255,255,255,0.1); }
/* --- ROADMAP --- */
.roadmap-section { position: relative; padding: 120px 24px; background: #050505; overflow: hidden; display: flex; flex-direction: column; perspective: 2000px; }
.roadmap-content { margin-left: 10%; margin-bottom: 60px; z-index: 10; position: relative; }
.roadmap-tag { color: var(--accent-green); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.roadmap-tag .dot { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 10px var(--accent-green); }
.roadmap-section h2 { font-size: 56px; line-height: 1.1; font-weight: 600; letter-spacing: -2px; margin-bottom: 24px; background: linear-gradient(180deg, #FFFFFF 0%, #999 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.roadmap-section p { font-size: 20px; color: var(--text-muted); max-width: 500px; line-height: 1.6; }
.roadmap-visual-wrapper { width: 100%; height: 600px; position: absolute; top: 200px; left: 0; mask-image: radial-gradient(circle at center, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%); pointer-events: none; }
.roadmap-plane { width: 150%; height: 400px; position: absolute; top: 100px; left: -25%; transform: rotateX(60deg) rotateZ(-20deg) scale(1.1); transform-style: preserve-3d; transition: transform 0.1s ease-out; }
.timeline-axis { width: 100%; height: 100%; border-top: 1px solid rgba(255,255,255,0.15); background-image: linear-gradient(to right, rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 40px 100%; background-repeat: repeat-x; display: flex; align-items: flex-start; padding-top: 20px; font-family: monospace; font-size: 14px; color: #555; animation: driftTime 30s linear infinite; }
@keyframes driftTime { from { background-position: 0 0; } to { background-position: -800px 0; } }
.current-marker { position: absolute; left: 60%; top: -50px; height: 500px; width: 1px; background: rgba(255,255,255,0.1); z-index: 0; }
.marker-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotateX(-60deg); background: #222; border: 1px solid #444; padding: 4px 8px; border-radius: 4px; color: #aaa; font-size: 12px; white-space: nowrap; }
.roadmap-bar { position: absolute; height: 50px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); display: flex; align-items: center; padding: 0 20px; color: #ddd; font-size: 16px; font-weight: 500; transform: translateZ(40px); transition: all 0.3s; }
.roadmap-bar:hover { background: rgba(255,255,255,0.06); transform: translateZ(60px); box-shadow: 0 20px 50px rgba(0,0,0,0.7); }
.roadmap-bar::after { content: ''; position: absolute; top: 100%; left: 20px; height: 40px; width: 1px; border-left: 1px dashed rgba(255,255,255,0.2); transform-origin: top; transform: rotateX(-90deg); }
.bar-1 { width: 350px; top: 50px; left: 20%; }
.bar-2 { width: 400px; top: 150px; left: 55%; }
/* --- PROJECT GRID SECTION --- */
.project-grid-section { border-top: 1px solid rgba(255,255,255,0.05); max-width: 1200px; margin: 0 auto; display: flex; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pg-col { flex: 1; padding: 80px 40px; border-right: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 40px; }
.pg-col:last-child { border-right: none; }
.pg-card { background: #0F1011; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5); width: 100%; max-width: 400px; margin: 0 auto; }
.ov-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 14px; color: #888; }
.ov-val { color: #eee; display: flex; align-items: center; gap: 8px; }
.update-stack { position: relative; height: 200px; width: 100%; max-width: 400px; margin: 0 auto; perspective: 1000px; }
.update-card { position: absolute; width: 100%; padding: 20px; background: rgba(20,20,20,0.9); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s; display: flex; flex-direction: column; gap: 8px; }
.uc-1 { top: 0; transform: scale(1); z-index: 3; } .uc-2 { top: 20px; transform: scale(0.95); opacity: 0.6; z-index: 2; } .uc-3 { top: 40px; transform: scale(0.9); opacity: 0.3; z-index: 1; }
.update-stack:hover .uc-1 { transform: translateY(-10px); } .update-stack:hover .uc-2 { transform: translateY(5px) scale(0.95); opacity: 0.8; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; color: #4DAF73; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.uc-text { color: #ddd; font-size: 14px; line-height: 1.4; }
.uc-date { color: #555; font-size: 12px; margin-top: 8px; }
/* --- COLLAB SECTION --- */
.collab-section { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 100px 0; background: var(--bg-color); }
.collab-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 60px; padding: 0 24px; align-items: center; }
.collab-text { flex: 1; }
.collab-list { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 0; border-left: 1px solid rgba(255,255,255,0.1); }
.collab-li { padding: 12px 20px; color: #666; font-size: 16px; cursor: pointer; transition: color 0.2s; position: relative; }
.collab-li.active { color: #fff; font-weight: 500; }
.collab-li.active::before { content:''; position: absolute; left: -1px; top: 0; height: 100%; width: 2px; background: var(--accent-green); }
.collab-visual { flex: 1.5; position: relative; }
.editor-window { background: #0F1011; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; height: 350px; position: relative; box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
.ew-header { height: 40px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; padding: 0 16px; gap: 10px; }
.ew-content { padding: 30px; font-family: 'Inter', sans-serif; color: #888; line-height: 1.8; font-size: 15px; }
.user-cursor { position: absolute; pointer-events: none; transition: all 2s ease-in-out; display: flex; flex-direction: column; z-index: 10; }
.cursor-arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid; }
.cursor-tag { padding: 2px 6px; border-radius: 4px; color: #fff; font-size: 10px; margin-top: 2px; font-weight: 600; }
.cursor-1 { top: 120px; left: 180px; color: #4DAF73; animation: moveC1 6s infinite; }
.cursor-1 .cursor-tag, .cursor-1 .cursor-arrow { background: #4DAF73; border-bottom-color: #4DAF73; }
.cursor-2 { top: 200px; left: 350px; color: #5E6AD2; animation: moveC2 7s infinite reverse; }
.cursor-2 .cursor-tag, .cursor-2 .cursor-arrow { background: #5E6AD2; border-bottom-color: #5E6AD2; }
@keyframes moveC1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, 20px); } }
@keyframes moveC2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, -40px); } }
.feature-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1200px; margin: 80px auto; padding: 0 24px; }
.ff-item h4 { color: #fff; font-size: 15px; margin-bottom: 8px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ff-item p { color: #666; font-size: 14px; line-height: 1.5; }
.ff-icon { width: 16px; height: 16px; fill: #fff; opacity: 0.8; }
@media (max-width: 900px) {
.grid-section, .project-grid-section { flex-direction: column; }
.collab-container { flex-direction: column; gap: 40px; }
.feature-footer { grid-template-columns: 1fr; gap: 30px; }
.pg-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 40px 24px; }
.roadmap-visual-wrapper { opacity: 0.3; }
.issue-tracking-section { flex-direction: column; padding: 80px 24px; }
.it-visual { height: 400px; width: 100%; margin-top: 40px; }
.it-board { transform: rotateX(20deg); }
.card-1 { left: 10px; } .card-2 { left: 50px; }
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Configure Tailwind to include our custom 3D transform utilities
tailwind.config = {
theme: {
extend: {
// Add any custom theme extensions here if needed
}
},
plugins: [
function({ addUtilities }) {
const rotateXUtilities = {};
const rotateYUtilities = {};
const rotateZUtilities = {};
const rotateValues = [0, 5, 10, 15, 20, 30, 45, 75];
// Generate rotate-x utilities
rotateValues.forEach((value) => {
rotateXUtilities[`.rotate-x-${value}`] = {
'--tw-rotate-x': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateXUtilities[`.-rotate-x-${value}`] = {
'--tw-rotate-x': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-y utilities
rotateValues.forEach((value) => {
rotateYUtilities[`.rotate-y-${value}`] = {
'--tw-rotate-y': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateYUtilities[`.-rotate-y-${value}`] = {
'--tw-rotate-y': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-z utilities
rotateValues.forEach((value) => {
rotateZUtilities[`.rotate-z-${value}`] = {
'--tw-rotate-z': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateZUtilities[`.-rotate-z-${value}`] = {
'--tw-rotate-z': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Perspective utilities
const perspectiveUtilities = {
".perspective-none": { perspective: "none" },
".perspective-dramatic": { perspective: "100px" },
".perspective-near": { perspective: "300px" },
".perspective-normal": { perspective: "500px" },
".perspective-midrange": { perspective: "800px" },
".perspective-distant": { perspective: "1200px" },
};
// Transform style utilities
const transformStyleUtilities = {
".transform-style-preserve-3d": { "transform-style": "preserve-3d" },
".transform-style-flat": { "transform-style": "flat" },
};
addUtilities({
...rotateXUtilities,
...rotateYUtilities,
...rotateZUtilities,
...perspectiveUtilities,
...transformStyleUtilities,
});
}
]
};
</script>
<style id="aura-editor-visibility-style">
.invisible { visibility: hidden !important; }
</style>
<style>
/* Scroll Reveal Animations */
.reveal {
opacity: 0;
filter: blur(10px);
transform: translateY(30px) scale(0.98);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, filter, transform;
}
.reveal.active {
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
}
.reveal-left {
opacity: 0;
filter: blur(5px);
transform: translateX(-40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.active {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.reveal-right {
opacity: 0;
filter: blur(5px);
transform: translateX(40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.active {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-500 { transition-delay: 0.5s; }
/* Responsive Dashboard Scaling */
@media (max-width: 1200px) {
.dashboard-3d-wrapper {
transform: scale(0.7) translateX(-10%) !important;
transform-origin: top center;
}
}
@media (max-width: 768px) {
.dashboard-3d-wrapper {
transform: scale(0.45) !important;
transform-origin: top center;
margin-left: -50px;
margin-bottom: -200px;
}
.hero-container { padding-top: 80px; }
h1 { font-size: 42px !important; line-height: 1.1 !important; }
.hero-subtext { font-size: 18px !important; }
}
<!-- CTA BUTTON (Self-contained) -->
<div class="cta-container">
<a href="#" class="primary-cta">
<span class="cta-text">Start building</span>
</a>
</div>
<style>
/* CTA container */
.cta-container {
display: flex;
justify-content: center;
align-items: center;
}
/* Button base */
.primary-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 38px;
border-radius: 999px;
background: #ffffff;
color: #050505;
font-size: 16px;
font-weight: 600;
letter-spacing: 0px;
text-decoration: none;
overflow: hidden;
isolation: isolate;
cursor: pointer;
/* Depth + polish */
box-shadow:
0 6px 20px rgba(255, 255, 255, 0.12),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
transition:
transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1),
letter-spacing 0.45s ease;
}
.primary-cta .cta-text {
position: relative;
z-index: 2;
transition: letter-spacing 0.45s ease;
}
/* Background gradient layer */
.primary-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
#ffffff,
#e6ebff,
#ffffff
);
background-size: 200% 100%;
z-index: -2;
transition: background-position 0.6s ease;
}
/* Warp / light sweep */
.primary-cta::after {
content: "";
position: absolute;
top: -50%;
left: -150%;
width: 120%;
height: 200%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.9),
transparent
);
transform: skewX(-25deg);
z-index: -1;
}
/* Hover state */
.primary-cta:hover {
transform: translateY(-5px) scale(1.05);
letter-spacing: 1px;
box-shadow:
0 0 30px rgba(94, 106, 210, 0.55),
0 0 70px rgba(94, 106, 210, 0.35),
inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.primary-cta:hover::before {
background-position: 100% 0;
}
.primary-cta:hover::after {
animation: warp-sheen 0.7s ease-in-out forwards;
}
/* Click / press */
.primary-cta:active {
transform: translateY(-2px) scale(1.02);
}
/* Warp animation */
@keyframes warp-sheen {
from { left: -150%; }
to { left: 150%; }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.primary-cta,
.primary-cta::before,
.primary-cta::after {
transition: none;
animation: none;
}
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style> <style>
/* 3D Transform utilities */
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }
</style></head>
<body class="antialiased overflow-x-hidden text-white bg-black relative">
<!-- Background (component) added by Aura -->
<div class="aura-background-component top-0 w-full -z-10 absolute h-screen" data-alpha-mask="41" style="; mask-image: linear-gradient(to bottom, transparent, black 0%, black 41%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 41%, transparent)"><div data-us-project="FD47WQ7ROdJlcijHXL7X" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.33/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script></div>
<!-- Unicorn / Aura Background -->
<!-- Unicorn script (can sit anywhere in body) -->
<script type="text/javascript" class="">
!function () {
if (!window.UnicornStudio) {
window.UnicornStudio = { isInitialized: !1 };
var i = document.createElement("script");
i.src = "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js";
i.onload = function () {
if (!window.UnicornStudio.isInitialized) {
UnicornStudio.init();
window.UnicornStudio.isInitialized = !0;
}
};
(document.head || document.body).appendChild(i);
}
}();
</script>
<nav class="fixed flex transition-all duration-500 hover:border-white/10 hover:bg-[#050505]/80 group/nav z-[1000] md:px-12 bg-[#050505]/60 w-full border-white/5 border-b pt-4 pr-6 pb-4 pl-6 top-0 left-0 backdrop-blur-xl items-center justify-between">
<style>
/* Toggle visibility of hamburger icons based on checkbox state since they are wrapped */
#mobile-menu-toggle:checked ~ .nav-right-group .hamburger-open { display: none; }
#mobile-menu-toggle:checked ~ .nav-right-group .hamburger-close { display: block; }
</style>
<!-- Mobile Menu Toggle Checkbox (Hidden) -->
<input type="checkbox" id="mobile-menu-toggle" class="peer hidden" aria-hidden="true">
<!-- Logo with subtle glow on hover -->
<a href="/home" class="bg-center hover:opacity-100 transition-all duration-300 hover:drop-shadow-[0_0_15px_rgba(255,255,255,0.3)] opacity-80 w-[100px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/22a501b8-fdc0-4b37-85e9-0367b65fcc58_1600w.png)] bg-cover rounded relative z-[1002]"></a>
<!-- Creative Floating Pill Menu (Desktop) -->
<ul class="nav-links hidden lg:flex items-center gap-1 bg-[#ffffff0a] p-1.5 rounded-full border border-white/5 shadow-2xl backdrop-blur-md transition-all duration-300 hover:border-white/10 hover:shadow-[0_0_20px_rgba(0,0,0,0.4)] hover:bg-[#ffffff0f]">
<!-- Product Link with Creative Popover -->
<li class="relative group">
<button class="text-[13px] transition-all duration-300 hover:text-[#F7F8F8] hover:bg-white/10 flex items-center gap-2 overflow-hidden font-medium text-[#8A8F98] rounded-full py-2 px-5 relative cursor-pointer" onclick="window.location.href='/product'">
<span class="z-10 relative">Product</span>
<!-- Active Dot -->
<div class="w-1.5 h-1.5 rounded-full bg-[#5E6AD2] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 shadow-[0_0_8px_#5E6AD2]"></div>
</button>
<!-- Popover Menu -->
<div class="absolute top-full left-1/2 -translate-x-[40%] pt-4 w-[600px] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top translate-y-2 group-hover:translate-y-0 z-50">
<div class="bg-[#0A0A0A] border border-white/10 rounded-2xl shadow-[0_50px_100px_-20px_rgba(0,0,0,0.7),0_0_0_1px_rgba(255,255,255,0.05)] overflow-hidden p-2 backdrop-blur-3xl">
<div class="flex gap-2 h-full">
<!-- Left Column: Features List -->
<div class="w-[260px] flex flex-col gap-1">
<div class="px-3 py-2 text-[11px] font-medium text-[#555] uppercase tracking-wider font-mono">Core</div>
<a href="#" class="group/item flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors relative overflow-hidden">
<div class="w-8 h-8 rounded-md bg-[#161616] border border-white/5 flex items-center justify-center text-gray-400 group-hover/item:text-[#5E6AD2] group-hover/item:border-[#5E6AD2]/20 transition-all z-10 shadow-sm">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
</div>
<div class="z-10">
<div class="text-[13px] font-medium text-gray-200 group-hover/item:text-white transition-colors">Issues</div>
<div class="text-[11px] text-gray-500 group-hover/item:text-gray-400 transition-colors">Task management</div>
</div>
</a>
<a href="#" class="group/item flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors relative overflow-hidden">
<div class="w-8 h-8 rounded-md bg-[#161616] border border-white/5 flex items-center justify-center text-gray-400 group-hover/item:text-[#E2B340] group-hover/item:border-[#E2B340]/20 transition-all z-10 shadow-sm">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
</div>
<div class="z-10">
<div class="text-[13px] font-medium text-gray-200 group-hover/item:text-white transition-colors">Cycles</div>
<div class="text-[11px] text-gray-500 group-hover/item:text-gray-400 transition-colors">Sprint planning</div>
</div>
</a>
<a href="#" class="group/item flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors relative overflow-hidden">
<div class="w-8 h-8 rounded-md bg-[#161616] border border-white/5 flex items-center justify-center text-gray-400 group-hover/item:text-[#4DAF73] group-hover/item:border-[#4DAF73]/20 transition-all z-10 shadow-sm">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20"></path><path d="M2 12h20"></path></svg>
</div>
<div class="z-10">
<div class="text-[13px] font-medium text-gray-200 group-hover/item:text-white transition-colors">Roadmaps</div>
<div class="text-[11px] text-gray-500 group-hover/item:text-gray-400 transition-colors">Long-term goals</div>
</div>
</a>
<a href="#" class="group/item flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors relative overflow-hidden">
<div class="w-8 h-8 rounded-md bg-[#161616] border border-white/5 flex items-center justify-center text-gray-400 group-hover/item:text-[#FF5F57] group-hover/item:border-[#FF5F57]/20 transition-all z-10 shadow-sm">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg>
</div>
<div class="z-10">
<div class="text-[13px] font-medium text-gray-200 group-hover/item:text-white transition-colors">Views</div>
<div class="text-[11px] text-gray-500 group-hover/item:text-gray-400 transition-colors">Custom filters</div>
</div>
</a>
</div>
<!-- Right Column: Visual Card -->
<div class="flex-1">
<a href="#" class="block h-full w-full rounded-xl bg-[#111] border border-white/5 relative overflow-hidden group/card hover:border-white/20 transition-all">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-900/20 via-black to-black opacity-80"></div>
<div class="absolute inset-0 p-5 flex flex-col justify-between z-10">
<div class="flex justify-between items-start">
<span class="px-2 py-0.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-[10px] font-semibold text-indigo-300 uppercase tracking-wide backdrop-blur-sm">New Feature</span>
</div>
<div class="relative">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-white mb-3 shadow-lg shadow-indigo-500/30 group-hover/card:scale-110 transition-transform duration-300 ease-out">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
</div>
<h4 class="text-[15px] font-medium text-white mb-1">Axis Import</h4>
<p class="text-[12px] text-gray-400 leading-relaxed group-hover/card:text-gray-300 transition-colors">Move your tasks from Jira, Asana, or GitHub in minutes.</p>
<!-- Fake Loading Bar -->
<div class="w-full h-1 bg-white/10 rounded-full mt-3 overflow-hidden">
<div class="h-full w-3/4 bg-indigo-500 rounded-full animate-[shimmer_2s_infinite] relative">
<div class="absolute inset-0 bg-white/20"></div>
</div>
</div>
</div>
</div>
<!-- Decorative Abstract Shapes -->
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-indigo-500/10 rounded-full blur-2xl group-hover/card:bg-indigo-500/20 transition-colors duration-500"></div>
<div class="absolute top-0 right-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 pointer-events-none"></div>
</a>
</div>
</div>
<!-- Footer -->
<div class="mt-2 pt-2 border-t border-white/5 flex items-center justify-between px-2">
<div class="flex items-center gap-4">
<a href="#" class="text-[11px] font-medium text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1.5 group/link">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 group-hover/link:shadow-[0_0_5px_#10B981] transition-shadow"></span>
Changelog
</a>
<a href="#" class="text-[11px] font-medium text-gray-500 hover:text-gray-300 transition-colors">Documentation</a>
</div>
<a href="#" class="text-[11px] font-medium text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1">
All features <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
</li>
<li class="relative group">
<a href="/method" class="text-[13px] transition-all duration-300 hover:text-[#F7F8F8] hover:bg-white/10 flex items-center gap-2 overflow-hidden font-medium text-[#8A8F98] rounded-full pt-2 pr-5 pb-2 pl-5 relative">
<span class="z-10 cursor-pointer relative" onclick="window.location.href='/method'">Method</span>
</a>
</li>
<li class="relative group">
<a href="/pricing" class="text-[13px] transition-all duration-300 hover:text-[#F7F8F8] hover:bg-white/10 flex items-center gap-2 overflow-hidden font-medium text-[#8A8F98] rounded-full pt-2 pr-5 pb-2 pl-5 relative">
<span class="cursor-pointer z-10 relative" onclick="window.location.href='/pricing'">Pricing</span>
</a>
</li>
<li class="relative group">
<a href="/customers" class="text-[13px] transition-all duration-300 hover:text-[#F7F8F8] hover:bg-white/10 flex items-center gap-2 overflow-hidden font-medium text-[#8A8F98] rounded-full pt-2 pr-5 pb-2 pl-5 relative">
<span class="cursor-pointer z-10 relative" onclick="window.location.href='/customers'">Customers</span>
</a>
</li>
<li class="relative group">
<a href="/changelog" class="text-[13px] transition-all duration-300 hover:text-[#F7F8F8] hover:bg-white/10 flex items-center gap-2 overflow-hidden font-medium text-[#8A8F98] rounded-full pt-2 pr-5 pb-2 pl-5 relative">
<span class="cursor-pointer z-10 relative" onclick="window.location.href='/changelog'">Changelog</span>
</a>
</li>
</ul>
<!-- Right Side Wrapper (Auth + Hamburger) -->
<div class="nav-right-group flex items-center gap-2 md:gap-4 z-[1002]">
<div class="nav-auth hidden md:flex items-center gap-5">
<a href="/login" class="text-[13px] hover:text-[#F7F8F8] transition-colors group font-medium text-[#8A8F98] relative">
Log in
<span class="absolute bottom-0 left-0 w-0 h-px bg-white transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="signup-btn text-[13px] overflow-hidden group transition-all duration-300 hover:border-white/20 hover:bg-white/[0.12] hover:shadow-[0_0_20px_rgba(255,255,255,0.1)] font-medium text-[#F7F8F8] border-white/5 border rounded-lg pt-2 pr-4 pb-2 pl-4 relative">
<span class="cursor-pointer z-10 relative" onclick="window.location.href='/signup'" role="button">Sign up</span>
<div class="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-500 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12"></div>
</a>
</div>
<label for="mobile-menu-toggle" class="hamburger-open lg:hidden hover:text-white cursor-pointer block transition-colors text-[#8A8F98] p-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg>
</label>
<label for="mobile-menu-toggle" class="hamburger-close lg:hidden text-[#8A8F98] hover:text-white cursor-pointer p-2 hidden transition-colors">
<svg xmlns="http://www.w3.org/2000/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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
</label>
</div>
<!-- Mobile Menu Overlay -->
<div class="fixed top-0 left-0 w-full h-[100dvh] bg-[#050505] z-[1001] hidden peer-checked:flex flex-col pt-28 px-6 pb-10 gap-6 lg:hidden overflow-y-auto animate-in fade-in slide-in-from-top-4 duration-300 supports-[height:100dvh]:h-[100dvh]">
<div class="flex flex-col gap-6">
<a href="/product" class="text-xl font-medium text-[#F7F8F8] flex items-center justify-between group">
Product
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#5E6AD2] opacity-0 group-hover:opacity-100 transition-opacity translate-x-[-10px] group-hover:translate-x-0 duration-300"><path d="m9 18 6-6-6-6"></path></svg>
</a>
<a href="/method" class="text-xl font-medium text-[#8A8F98] hover:text-[#F7F8F8] transition-colors flex items-center justify-between group">
Method
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#4DAF73] opacity-0 group-hover:opacity-100 transition-opacity translate-x-[-10px] group-hover:translate-x-0 duration-300"><path d="m9 18 6-6-6-6"></path></svg>
</a>
<a href="/pricing" class="text-xl font-medium text-[#8A8F98] hover:text-[#F7F8F8] transition-colors flex items-center justify-between group">
Pricing
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#E2B340] opacity-0 group-hover:opacity-100 transition-opacity translate-x-[-10px] group-hover:translate-x-0 duration-300"><path d="m9 18 6-6-6-6"></path></svg>
</a>
<a href="/customers" class="text-xl font-medium text-[#8A8F98] hover:text-[#F7F8F8] transition-colors flex items-center justify-between group">
Customers
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#FF5F57] opacity-0 group-hover:opacity-100 transition-opacity translate-x-[-10px] group-hover:translate-x-0 duration-300"><path d="m9 18 6-6-6-6"></path></svg>
</a>
<a href="/changelog" class="text-xl font-medium text-[#8A8F98] hover:text-[#F7F8F8] transition-colors flex items-center justify-between group">
Changelog
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white opacity-0 group-hover:opacity-100 transition-opacity translate-x-[-10px] group-hover:translate-x-0 duration-300"><path d="m9 18 6-6-6-6"></path></svg>
</a>
</div>
<div class="h-px bg-white/10 w-full my-2"></div>
<div class="flex flex-col gap-4">
<a href="#" class="text-[15px] font-medium text-[#F7F8F8] bg-white/10 rounded-lg py-3 text-center border border-white/5 hover:bg-white/15 transition-colors">Log in</a>
<a href="#" class="text-[15px] font-medium text-[#050505] bg-white rounded-lg py-3 text-center hover:bg-gray-200 transition-colors">Sign up</a>
</div>
</div>
</nav>
<!-- HERO SECTION -->
<main class="flex min-h-screen flex-col overflow-hidden antialiased selection:bg-purple-500/30 selection:text-purple-200 pt-32 pb-20 relative perspective-[2000px] items-center justify-start" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent);">
<!-- Animation Styles -->
<style class="">
@keyframes float-in-up {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes drop-in {
0% { opacity: 0; transform: translateY(-40px) translateZ(-50px); }
100% { opacity: 1; transform: translateY(0) translateZ(0); }
}
@keyframes reveal-pane {
0% { opacity: 0; transform: translateX(-10px); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes item-slide {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
.anim-delay-100 { animation-delay: 100ms; }
.anim-delay-200 { animation-delay: 200ms; }
.anim-delay-300 { animation-delay: 300ms; }
.anim-delay-400 { animation-delay: 400ms; }
.anim-delay-500 { animation-delay: 500ms; }
.anim-delay-600 { animation-delay: 600ms; }
.anim-delay-700 { animation-delay: 700ms; }
.glass-panel {
background: rgba(15, 16, 18, 0.95);
backdrop-filter: blur(20px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.08),
0 20px 50px -10px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.1);
}
</style>
<!-- Hero Content -->
<div class="flex flex-col animate-[float-in-up_0.8s_ease-out_forwards] z-20 text-center max-w-[1000px] mb-24 pr-6 pl-6 relative items-center">
<h1 class="leading-[0.9] bg-clip-text md:text-[92px] text-6xl font-semibold text-transparent tracking-[-0.04em] bg-gradient-to-b from-white via-white to-white/60 mb-8 pt-2 pb-2">The new standard for<br>building software</h1>
<p class="text-[21px] leading-[1.5] text-[#8A8F98] max-w-[640px] mx-auto mb-10 font-normal">
Meet the system for modern software development.
Streamline issues, projects, and product roadmaps.
</p>
<div class="flex flex-col sm:flex-row items-center gap-6">
<button class="group relative h-12 px-8 rounded-full bg-white text-black font-medium text-[15px] overflow-hidden transition-all duration-300 hover:scale-[1.03] hover:shadow-[0_0_40px_rgba(255,255,255,0.5)]">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-gray-300/40 to-transparent translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-700 ease-in-out skew-x-12"></div>
<span class="relative z-10 flex items-center gap-2">
Start building
<svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</span>
</button>
<a href="#" class="group flex items-center gap-2 text-[15px] text-[#8A8F98] hover:text-white transition-colors">
<span class="">New: Axis agent for Slack</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="transition-transform group-hover:translate-x-0.5"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
<!-- 3D Dashboard Visual -->
<div class="flex overflow-visible w-full h-[800px] max-w-[1400px] z-10 pt-44 pb-0 relative perspective-[2000px] justify-center" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent);">
<div class="dashboard-wrapper transition-all duration-75 ease-linear hover:scale-[1.01] absolute top-0" style="transform: rotateX(16.1deg) rotateY(-6.44deg) rotateZ(4.025deg); transform-style: preserve-3d; width: 1050px; height: 700px;">
<style>
@keyframes scan-line { 0% { top: -20%; opacity: 0; } 10% { opacity: 1; } 100% { top: 120%; opacity: 0; } }
@keyframes draw-path { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes fade-up-stagger { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-slow { 0%,100% { transform: translateZ(60px) translateY(0); } 50% { transform: translateZ(60px) translateY(-10px); } }
@keyframes float-delayed { 0%,100% { transform: translateZ(40px) translateY(0) rotateY(-10deg); } 50% { transform: translateZ(40px) translateY(8px) rotateY(-10deg); } }
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(2); opacity: 0; } }
</style>
<!-- 1. Ambient Glow Backing -->
<div class="absolute inset-0 bg-indigo-500/10 blur-[80px] -z-10" style="transform: translateZ(-60px);"></div>
<!-- 2. Main Window Frame -->
<div class="overflow-hidden flex flex-col z-10 bg-[#0A0A0A] w-full h-full border-white/10 border rounded-xl relative shadow-2xl">
<!-- Header -->
<div class="flex select-none bg-[#0F0F0F] h-12 border-white/5 border-b pr-5 pl-5 items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-[#2A2A2A] border border-white/5 group-hover:bg-[#FF5F57] transition-colors duration-300"></div>
<div class="w-3 h-3 rounded-full bg-[#2A2A2A] border border-white/5 group-hover:bg-[#FEBC2E] transition-colors duration-300"></div>
<div class="w-3 h-3 rounded-full bg-[#2A2A2A] border border-white/5 group-hover:bg-[#28C840] transition-colors duration-300"></div>
</div>
<div class="flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/5 text-[11px] font-mono text-gray-500">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span class="text-gray-300">orbit</span>
<span class="text-gray-600">/</span>
<span class="text-indigo-400">overview</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
<span class="text-[10px] text-emerald-400 font-medium uppercase tracking-wider">Live</span>
</div>
</div>
</div>
<!-- Body -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<div class="flex flex-col gap-6 bg-[#0C0C0C] w-60 border-white/5 border-r pt-3 pr-3 pb-3 pl-3 gap-x-6 gap-y-6">
<!-- Menu -->
<div class="space-y-1">
<div class="px-3 py-2 rounded-md bg-indigo-500/10 border border-indigo-500/20 text-indigo-200 text-xs font-medium flex items-center gap-3 cursor-pointer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
Dashboard
</div>
<div class="px-3 py-2 rounded-md hover:bg-white/5 text-gray-500 hover:text-gray-300 text-xs font-medium flex items-center gap-3 transition-colors cursor-pointer group">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Active Issues
<span class="ml-auto bg-[#222] text-gray-400 px-1.5 py-0.5 rounded text-[9px] group-hover:text-white group-hover:bg-[#333] transition-colors">12</span>
</div>
<div class="px-3 py-2 rounded-md hover:bg-white/5 text-gray-500 hover:text-gray-300 text-xs font-medium flex items-center gap-3 transition-colors cursor-pointer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
Sprints
</div>
<div class="hover:bg-white/5 hover:text-gray-300 flex gap-3 transition-colors cursor-pointer text-xs font-medium text-gray-500 rounded-md pt-2 pr-3 pb-2 pl-3 gap-x-3 gap-y-3 items-center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
Team
</div>
</div>
<!-- Spacer -->
<div class="flex-1"></div>
<!-- Team Status -->
<div class="pt-4 border-t border-white/5">
<div class="text-[10px] font-bold text-gray-700 uppercase tracking-widest mb-3 px-2">System</div>
<div class="flex items-center gap-3 px-2 mb-2">
<div class="relative">
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
<div class="absolute inset-0 w-2 h-2 rounded-full bg-emerald-500 animate-ping opacity-75"></div>
</div>
<span class="text-xs text-gray-400">All Systems Normal</span>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 bg-[#0A0A0A] relative flex flex-col">
<!-- Subtle Grid Background -->
<div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 32px 32px;"></div>
<!-- Top Stats / Chart Area -->
<div class="z-10 flex flex-col overflow-hidden h-52 border-white/5 border-b pt-6 pr-6 pb-6 pl-6 relative justify-between">
<div class="flex justify-between items-start z-10">
<div class="">
<div class="text-[11px] text-gray-500 font-mono mb-1 uppercase tracking-wider">Sprint Velocity</div>
<div class="text-3xl font-medium text-white tracking-tight">248 <span class="text-lg text-gray-600 font-normal">pts</span></div>
</div>
<div class="flex gap-2">
<span class="flex items-center gap-1.5 text-[10px] text-gray-400 bg-white/5 px-2 py-1 rounded-full border border-white/5">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span> Predicted
</span>
<span class="flex items-center gap-1.5 text-[10px] text-gray-400 bg-white/5 px-2 py-1 rounded-full border border-white/5">
<span class="w-1.5 h-1.5 rounded-full bg-gray-500"></span> Average
</span>
</div>
</div>
<!-- Interactive SVG Chart -->
<div class="absolute bottom-0 left-0 right-0 h-32 opacity-90 pointer-events-none">
<svg width="100%" height="100%" viewBox="0 0 800 100" preserveAspectRatio="none">
<defs>
<linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5E6AD2" stop-opacity="0.15"></stop>
<stop offset="100%" stop-color="#5E6AD2" stop-opacity="0"></stop>
</linearGradient>
</defs>
<path d="M0,100 L0,60 C50,65 100,50 150,40 C200,30 250,55 300,45 C350,35 400,20 450,15 C500,10 550,25 600,20 C650,15 700,5 750,10 L800,5 L800,100 Z" fill="url(#chart-grad)"></path>
<path d="M0,60 C50,65 100,50 150,40 C200,30 250,55 300,45 C350,35 400,20 450,15 C500,10 550,25 600,20 C650,15 700,5 750,10 L800,5" fill="none" stroke="#5E6AD2" stroke-width="2" stroke-dasharray="1000" stroke-dashoffset="1000" style="animation: draw-path 2.5s ease-out forwards;"></path>
</svg>
<!-- Animated Point -->
<div class="absolute top-[15px] left-[56%] w-2.5 h-2.5 bg-indigo-500 rounded-full border-2 border-[#0A0A0A] shadow-[0_0_15px_#5E6AD2] animate-[fade-up-stagger_0.5s_ease-out_2s_forwards] opacity-0"></div>
<!-- Floating Tooltip -->
<div class="absolute top-[-10px] left-[56%] -translate-x-1/2 bg-[#151515] border border-white/10 px-2.5 py-1 rounded-md text-[10px] font-medium text-indigo-300 animate-[fade-up-stagger_0.5s_ease-out_2.2s_forwards] opacity-0 shadow-lg">
+12%
</div>
</div>
</div>
<!-- Detailed Issue List -->
<div class="flex-1 z-10 pt-6 pr-6 pb-6 pl-6 relative space-y-3">
<div class="flex items-center justify-between mb-2">
<div class="text-[11px] text-gray-500 font-mono uppercase tracking-wider">Priority Issues</div>
<div class="text-[10px] text-gray-600 hover:text-gray-400 cursor-pointer transition-colors">View All</div>
</div>
<!-- Row 1: Active -->
<div class="group flex gap-4 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer animate-[fade-up-stagger_0.6s_ease-out_0.5s_forwards] opacity-0 border-white/5 border rounded-lg pt-3 pr-3 pb-3 pl-3 gap-x-4 gap-y-4 items-center">
<div class="w-5 h-5 rounded bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-[10px] text-orange-400 font-bold">!</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-0.5">
<span class="font-mono text-[10px] text-gray-500">ORB-1294</span>
<span class="text-[13px] text-gray-200 font-medium">Database migration timeout</span>
</div>
</div>
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 border border-[#0A0A0A]"></div>
</div>
<div class="w-20 h-1.5 bg-gray-800 rounded-full overflow-hidden">
<div class="w-3/4 h-full bg-orange-500 rounded-full"></div>
</div>
</div>
<!-- Row 2: In Progress -->
<div class="group flex items-center gap-4 p-3 rounded-lg border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all cursor-pointer opacity-0 animate-[fade-up-stagger_0.6s_ease-out_0.6s_forwards]">
<div class="w-5 h-5 rounded bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-[10px] text-blue-400 font-bold">⚡</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-0.5">
<span class="font-mono text-[10px] text-gray-500">ORB-1301</span>
<span class="text-[13px] text-gray-400">Implement new auth flow</span>
</div>
</div>
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full bg-gray-700 border border-[#0A0A0A]"></div>
<div class="w-6 h-6 rounded-full bg-gray-600 border border-[#0A0A0A]"></div>
</div>
<div class="w-20 h-1.5 bg-gray-800 rounded-full overflow-hidden">
<div class="w-1/3 h-full bg-blue-500 rounded-full"></div>
</div>
</div>
<!-- Row 3: Done -->
<div class="group flex items-center gap-4 p-3 rounded-lg border border-transparent hover:border-white/5 hover:bg-white/[0.02] transition-all cursor-pointer opacity-0 animate-[fade-up-stagger_0.6s_ease-out_0.7s_forwards]">
<div class="w-5 h-5 rounded bg-gray-800 border border-gray-700 flex items-center justify-center text-[10px] text-gray-400">✓</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-0.5">
<span class="font-mono text-[10px] text-gray-600">ORB-1288</span>
<span class="text-[13px] text-gray-500 line-through">Refactor frontend state</span>
</div>
</div>
<div class="w-6 h-6 rounded-full bg-gray-800 border border-[#0A0A0A] flex items-center justify-center text-[8px] text-gray-500">JM</div>
</div>
</div>
</div>
</div>
<!-- 3. Screen Effects -->
<!-- Scan Line -->
<div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent via-indigo-500/5 to-transparent h-[15%] w-full" style="animation: scan-line 6s linear infinite;"></div>
<!-- Vignette -->
<div class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,transparent_50%,rgba(0,0,0,0.4)_100%)]"></div>
</div>
<!-- 4. Floating Elements (The "Creative Animation" Part) -->
<!-- Center: Command Palette (Animated Entrance) -->
<div class="absolute top-[12%] left-[50%] -translate-x-1/2 w-[480px] bg-[#0A0A0A]/90 backdrop-blur-xl border border-white/10 rounded-xl shadow-[0_30px_80px_-20px_rgba(0,0,0,1)] flex flex-col overflow-hidden" style="transform: translateZ(80px); animation: fade-up-stagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards opacity-0;">
<div class="p-3 border-b border-white/5 flex items-center gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-500"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<span class="text-sm text-gray-400 font-light">Search issues, projects, and views...</span>
<div class="ml-auto flex gap-1 opacity-60">
<span class="px-1.5 py-0.5 rounded bg-white/10 text-[10px] text-gray-500 font-mono">⌘</span>
<span class="px-1.5 py-0.5 rounded bg-white/10 text-[10px] text-gray-500 font-mono">K</span>
</div>
</div>
<div class="p-1.5">
<div class="px-3 py-2 rounded-lg bg-indigo-500/20 border border-indigo-500/20 flex items-center justify-between group cursor-pointer">
<div class="flex items-center gap-3">
<span class="w-5 h-5 rounded bg-indigo-500 flex items-center justify-center text-white text-[10px]"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg></span>
<span class="text-sm text-white">Create new issue</span>
</div>
<span class="text-[10px] text-indigo-300 font-mono opacity-0 group-hover:opacity-100 transition-opacity">↵</span>
</div>
</div>
</div>
<!-- Bottom Right: AI Insight (Floating Tilted) -->
<div class="absolute bottom-[18%] right-[4%] w-[260px] bg-[#111]/95 backdrop-blur-md border border-white/10 rounded-lg p-4 shadow-2xl" style="transform: translateZ(40px) rotateY(-10deg); animation: float-delayed 6s ease-in-out infinite;">
<div class="flex items-center gap-2 mb-3">
<div class="w-4 h-4 rounded bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white text-[8px] font-bold shadow-lg">AI</div>
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Insight</span>
<div class="ml-auto w-1.5 h-1.5 rounded-full bg-purple-500 animate-pulse"></div>
</div>
<p class="text-[12px] text-gray-300 leading-relaxed">
High error rate detected in <span class="text-white font-mono bg-white/10 px-1 py-0.5 rounded border border-white/5">auth-service</span>.
</p>
<div class="mt-3 pt-3 border-t border-white/5">
<div class="text-[10px] text-gray-500 mb-2">Suggested Action</div>
<div class="flex gap-2">
<button class="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded py-1.5 text-[11px] text-white transition-colors">View Logs</button>
<button class="flex-1 bg-purple-500/20 hover:bg-purple-500/30 border border-purple-500/30 rounded py-1.5 text-[11px] text-purple-200 transition-colors">Rollback</button>
</div>
</div>
</div>
<!-- Top Right: Deployment Status (Floating) -->
<div class="absolute top-[22%] right-[-4%] w-[190px] bg-[#0A0A0A] border border-white/10 rounded-lg p-3 shadow-[0_20px_50px_rgba(0,0,0,0.8)] flex items-center gap-3" style="transform: translateZ(30px); animation: float-slow 7s ease-in-out infinite;">
<div class="relative w-9 h-9 flex items-center justify-center">
<svg class="animate-spin text-gray-800 absolute inset-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-opacity="1"></circle><path d="M12 2a10 10 0 0 1 10 10" stroke="#4DAF73"></path></svg>
<span class="text-[9px] font-mono text-[#4DAF73] font-bold">82%</span>
</div>
<div>
<div class="text-[12px] text-white font-medium">Deploying</div>
<div class="text-[10px] text-gray-500 font-mono">prod-v2.4.1</div>
</div>
</div>
<!-- Live Cursor -->
<div class="absolute top-[65%] left-[32%] pointer-events-none drop-shadow-2xl z-50" style="transform: translateZ(100px); animation: float-slow 5s ease-in-out infinite alternate;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#E2B340" stroke="black" stroke-width="1.5"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path></svg>
<div class="absolute top-5 left-3 bg-[#E2B340] text-black text-[10px] font-bold px-1.5 py-0.5 rounded shadow-sm whitespace-nowrap">Sarah (Product)</div>
</div>
</div>
</div></main>
<!-- UPDATED: CLIENTS SECTION (2 Rows, Opposing Animations) -->
<!-- CLIENTS SECTION -->
<div class="clients-section overflow-hidden z-10 bg-[#000000] w-full pt-24 pb-24 relative">
<!-- Header -->
<div class="clients-header text-center mb-20 px-6 reveal">
<h2 class="text-3xl md:text-4xl font-semibold text-white tracking-tight mb-4">Powering the world’s best product teams.</h2>
<p class="text-lg md:text-xl text-[#8A8F98] font-normal leading-relaxed">From next-gen startups to established enterprises.</p>
</div>
<!-- Top Row (Right) -->
<div class="ticker-row w-full overflow-hidden flex mb-16 relative reveal delay-100" style="mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);">
<div class="track track-right flex items-center gap-24 w-max">
<!-- Set 1 -->
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-semibold text-white font-sans tracking-tight">OpenAI</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<div class="w-8 h-8 bg-white rounded-[6px] flex items-center justify-center text-black font-bold text-lg leading-none">$</div>
<span class="text-2xl font-semibold text-white tracking-tight">Cash App</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-3xl font-medium text-white font-sans tracking-tight">scale</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-semibold text-white tracking-tight lowercase">ramp</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-white"><path d="M2 18h6c0-3 2 18z"></path></svg>
</div>
<!-- Set 2 -->
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-semibold text-white font-sans tracking-tight">OpenAI</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<div class="w-8 h-8 bg-white rounded-[6px] flex items-center justify-center text-black font-bold text-lg leading-none">$</div>
<span class="text-2xl font-semibold text-white tracking-tight">Cash App</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-3xl font-medium text-white font-sans tracking-tight">scale</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-semibold text-white tracking-tight lowercase">ramp</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-white"><path d="M2 18h6c0-5 4-9 9-9h5V6h-5C9 6 2 13 2 18z"></path></svg>
</div>
<!-- Set 3 -->
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-semibold text-white font-sans tracking-tight">OpenAI</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<div class="w-8 h-8 bg-white rounded-[6px] flex items-center justify-center text-black font-bold text-lg leading-none">$</div>
<span class="text-2xl font-semibold text-white tracking-tight">Cash App</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-3xl font-medium text-white font-sans tracking-tight">scale</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-semibold text-white tracking-tight lowercase">ramp</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-white"><path d="M2 18h6c0-5 4-9 9-9h5V6h-5C9 6 2 13 2 18z"></path></svg>
</div>
</div>
</div>
<!-- Bottom Row (Left) -->
<div class="ticker-row flex w-full overflow-hidden relative" style="mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);">
<div class="track track-left flex items-center gap-24 w-max">
<!-- Set 1 -->
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg viewBox="0 0 24 24" fill="white" class="w-6 h-6"><path d="M12 1L24 22H0L12 1Z"></path></svg>
<span class="text-2xl font-bold text-white tracking-tight">Vercel</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-bold text-white tracking-tight font-sans">coinbase</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-8 h-8 text-white"><path d="M12 2l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z" fill="white"></path></svg>
<span class="text-2xl font-bold text-white tracking-widest uppercase">BOOM</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg width="24" height="24" viewBox="0 0 24 24" fill="white" class="w-6 h-6"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.2L19.5 8 12 11.8 4.5 8 12 4.2zM4 9.3l7 3.5v7.4l-7-3.5V9.3zm9 10.9v-7.4l7-3.5v7.4l-7 3.5z"></path></svg>
<span class="text-2xl font-bold text-white tracking-tight uppercase">CURSOR</span>
</div>
<!-- Set 2 -->
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg viewBox="0 0 24 24" fill="white" class="w-6 h-6"><path d="M12 1L24 22H0L12 1Z" class=""></path></svg>
<span class="text-2xl font-bold text-white tracking-tight">Vercel</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-bold text-white tracking-tight font-sans">coinbase</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-8 h-8 text-white"><path d="M12 2l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z" fill="white"></path></svg>
<span class="text-2xl font-bold text-white tracking-widest uppercase">BOOM</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg width="24" height="24" viewBox="0 0 24 24" fill="white" class="w-6 h-6"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.2L19.5 8 12 11.8 4.5 8 12 4.2zM4 9.3l7 3.5v7.4l-7-3.5V9.3zm9 10.9v-7.4l7-3.5v7.4l-7 3.5z"></path></svg>
<span class="text-2xl font-bold text-white tracking-tight uppercase">CURSOR</span>
</div>
<!-- Set 3 -->
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg viewBox="0 0 24 24" fill="white" class="w-6 h-6"><path d="M12 1L24 22H0L12 1Z"></path></svg>
<span class="text-2xl font-bold text-white tracking-tight">Vercel</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<span class="text-2xl font-bold text-white tracking-tight font-sans">coinbase</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-8 h-8 text-white"><path d="M12 2l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z" fill="white"></path></svg>
<span class="text-2xl font-bold text-white tracking-widest uppercase">BOOM</span>
</div>
<div class="client-logo flex items-center gap-3 opacity-60 hover:opacity-100 transition-opacity duration-300 cursor-default">
<svg width="24" height="24" viewBox="0 0 24 24" fill="white" class="w-6 h-6"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.2L19.5 8 12 11.8 4.5 8 12 4.2zM4 9.3l7 3.5v7.4l-7-3.5V9.3zm9 10.9v-7.4l7-3.5v7.4l-7 3.5z"></path></svg>
<span class="text-2xl font-bold text-white tracking-tight uppercase">CURSOR</span>
</div>
</div>
</div>
</div>
<!-- FEATURES SECTION -->
<section class="features md:px-12 overflow-hidden bg-[#050505] w-full pt-24 pr-6 pb-24 pl-6 relative">
<style>
@keyframes float-layers {
0%, 100% { transform: translateY(0px) rotateX(50deg) rotateZ(-30deg) translateZ(0); }
50% { transform: translateY(-10px) rotateX(50deg) rotateZ(-30deg) translateZ(15px); }
}
@keyframes shimmer-line {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes dash-move {
0% { background-position: 0 0; }
100% { background-position: 20px 20px; }
}
.preserve-3d {
transform-style: preserve-3d;
}
</style>
<div class="max-w-[1200px] mx-auto relative z-10">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-start justify-between mb-24 gap-12">
<h2 class="text-5xl md:text-7xl font-semibold text-white tracking-tight leading-[1] max-w-xl reveal">
Made for modern
<span class="block">product teams</span>
</h2>
<div class="max-w-lg pt-2 reveal delay-100">
<p class="text-lg text-[#8A8F98] leading-relaxed mb-6 font-light">Axis is shaped by the practices and principles that distinguish world-class product teams from the rest: relentless focus, fast execution, and a commitment to the quality of craft.</p>
<a href="#" class="inline-flex items-center text-white font-medium hover:text-[#bbb] transition-colors group text-sm">
Make the switch
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1 group-hover:translate-x-1 transition-transform"><polyline points="9 18 15 12 9 6"></polyline></svg>
</a>
</div>
</div>
<!-- 3-Column Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Purpose-built -->
<div class="group relative h-[480px] rounded-[32px] bg-[#0E0F11] border border-white/5 overflow-hidden flex flex-col justify-between p-8 hover:border-white/10 transition-colors reveal delay-100">
<div class="relative w-full flex-1 flex items-center justify-center perspective-[800px] overflow-visible">
<!-- Layered Visual -->
<div class="relative w-40 h-40 preserve-3d transition-transform duration-700 group-hover:translate-y-[-10px]" style="transform: rotateX(60deg) rotateZ(-45deg) rotateY(0deg);">
<!-- Bottom Sheet -->
<div class="absolute inset-0 bg-[#1A1A1A] rounded-xl border border-white/5 shadow-2xl transition-transform duration-500 ease-out translate-z-[-20px] group-hover:translate-x-4 group-hover:translate-y-4"></div>
<!-- Middle Sheet -->
<div class="absolute inset-0 bg-[#222] rounded-xl border border-white/10 shadow-2xl transition-transform duration-500 ease-out translate-z-[0px] group-hover:translate-x-2 group-hover:translate-y-2 flex flex-col p-4 gap-2 opacity-60">
<div class="h-1.5 w-12 bg-white/20 rounded-full"></div>
<div class="h-1.5 w-full bg-white/10 rounded-full mt-2"></div>
<div class="h-1.5 w-3/4 bg-white/10 rounded-full"></div>
</div>
<!-- Top Sheet (Code) -->
<div class="absolute inset-0 bg-[#0A0A0A] rounded-xl border border-white/10 shadow-[0_20px_40px_-10px_rgba(0,0,0,0.8)] transition-transform duration-500 ease-out translate-z-[20px] group-hover:translate-z-[40px] flex flex-col p-4 overflow-hidden">
<div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
<div class="font-mono text-[7px] text-gray-500 leading-relaxed">
<span class="text-purple-400">function</span> <span class="text-blue-400">aiModelData</span>() {
<span class="text-purple-400">return</span> <span class="text-green-400"><AIModel></span>
<span class="text-blue-300">accuracy</span>=<span class="text-orange-300">0.99</span>
};
<span class="text-gray-600">// Issues</span>
<span class="text-blue-300">let</span> <span class="text-white">model</span> = ...
</div>
<!-- Sheet Labels Floating -->
<div class="absolute -right-12 top-0 text-[8px] text-white/30 rotate-90 origin-top-left">Roadmap</div>
<div class="absolute -right-12 top-8 text-[8px] text-white/30 rotate-90 origin-top-left">Projects</div>
<div class="absolute -right-12 top-16 text-[8px] text-white/30 rotate-90 origin-top-left">Issues</div>
</div>
</div>
</div>
<div class="flex items-end justify-between relative z-10 mt-auto">
<div class="max-w-[80%]">
<h3 class="text-xl font-medium text-white leading-tight">Purpose-built for product development</h3>
</div>
<div class="w-10 h-10 rounded-full bg-[#1A1A1A] border border-white/10 flex items-center justify-center text-white/50 group-hover:text-white group-hover:bg-[#222] transition-all duration-300 group-hover:scale-105 shadow-lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M12 5v14M5 12h14"></path></svg>
</div>
</div>
</div>
<!-- Card 2: Speed -->
<div class="group relative h-[480px] rounded-[32px] bg-[#0E0F11] border border-white/5 overflow-hidden flex flex-col justify-between p-8 hover:border-white/10 transition-colors reveal delay-200">
<div class="relative w-full flex-1 flex items-center justify-center overflow-hidden">
<!-- Background Grid Fading -->
<div class="absolute inset-0 opacity-[0.05]" style="background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 100% 20px;"></div>
<!-- Motion Lines -->
<div class="relative w-full h-32 flex flex-col items-center justify-center">
<div class="absolute top-0 right-[20%] font-mono text-white/40 text-lg font-medium italic tracking-tight opacity-50 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-500">50ms</div>
<div class="w-full h-full flex flex-col justify-evenly opacity-40 group-hover:opacity-80 transition-opacity duration-500 transform skew-x-[-20deg]">
<div class="h-px w-[80%] bg-gradient-to-r from-transparent via-white/30 to-transparent self-end transition-all duration-700 group-hover:w-[100%]"></div>
<div class="h-px w-[60%] bg-gradient-to-r from-transparent via-white/50 to-transparent self-end transition-all duration-500 group-hover:w-[90%] delay-75"></div>
<div class="h-px w-[90%] bg-gradient-to-r from-transparent via-white/20 to-transparent self-end transition-all duration-1000 group-hover:w-[110%] delay-100"></div>
<div class="h-px w-[50%] bg-gradient-to-r from-transparent via-white/40 to-transparent self-end transition-all duration-300 group-hover:w-[80%]"></div>
<div class="h-px w-[70%] bg-gradient-to-r from-transparent via-white/30 to-transparent self-end transition-all duration-700 group-hover:w-[95%] delay-150"></div>
</div>
<!-- Glow effect -->
<div class="absolute top-1/2 right-0 w-32 h-32 bg-white/5 blur-3xl rounded-full transform translate-x-1/2 -translate-y-1/2 group-hover:bg-white/10 transition-colors"></div>
</div>
</div>
<div class="flex items-end justify-between relative z-10 mt-auto">
<div class="max-w-[80%]">
<h3 class="text-xl font-medium text-white leading-tight">Designed to move fast</h3>
</div>
<div class="w-10 h-10 rounded-full bg-[#1A1A1A] border border-white/10 flex items-center justify-center text-white/50 group-hover:text-white group-hover:bg-[#222] transition-all duration-300 group-hover:scale-105 shadow-lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M12 5v14M5 12h14"></path></svg>
</div>
</div>
</div>
<!-- Card 3: Crafted -->
<div class="group relative h-[480px] rounded-[32px] bg-[#0E0F11] border border-white/5 overflow-hidden flex flex-col justify-between p-8 hover:border-white/10 transition-colors reveal delay-300">
<div class="relative w-full flex-1 flex items-center justify-center perspective-[800px]">
<!-- Isometric Background -->
<div class="absolute inset-0 flex items-center justify-center opacity-[0.15] group-hover:opacity-[0.25] transition-opacity duration-500 pointer-events-none" style="transform: rotateX(60deg) rotateZ(45deg) scale(2);">
<div class="w-[400px] h-[400px]" style="background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 40px 40px; border: 1px dashed rgba(255,255,255,0.3);"></div>
</div>
<!-- Floating Element -->
<div class="relative transform transition-transform duration-700 ease-out group-hover:translate-y-[-15px]" style="transform: rotateX(50deg) rotateZ(-30deg);">
<!-- Shadow -->
<div class="absolute -bottom-12 left-1/2 -translate-x-1/2 w-20 h-20 bg-black blur-xl opacity-80 transform scale-y-[0.3]"></div>
<!-- 3D Button -->
<div class="w-28 h-10 bg-[#1A1A1A] border border-white/20 rounded-md flex items-center justify-between px-3 shadow-2xl relative z-10 group-hover:border-white/40 group-hover:bg-[#222] transition-all">
<span class="w-3 h-3 border border-white/30 rounded-sm flex items-center justify-center text-[8px] text-white/50">+</span>
<span class="text-white text-xs font-medium tracking-wide">Create</span>
</div>
<!-- Guides -->
<div class="absolute top-1/2 -left-[100%] w-[300%] h-px border-t border-dashed border-white/20 -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="absolute -top-[100%] left-1/2 h-[300%] w-px border-l border-dashed border-white/20 -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<!-- Cursor -->
<div class="absolute -right-4 -bottom-4 z-20 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-4 group-hover:translate-y-0 delay-100">
<svg width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="black" stroke-width="1"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path></svg>
</div>
</div>
</div>
<div class="flex items-end justify-between relative z-10 mt-auto">
<div class="max-w-[80%]">
<h3 class="text-xl font-medium text-white leading-tight">Crafted to perfection</h3>
</div>
<div class="w-10 h-10 rounded-full bg-[#1A1A1A] border border-white/10 flex items-center justify-center text-white/50 group-hover:text-white group-hover:bg-[#222] transition-all duration-300 group-hover:scale-105 shadow-lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"></path></svg>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GRID SECTION (Self-driving & MCP) -->
<section class="grid-section w-full max-w-[1400px] mx-auto flex flex-col md:flex-row border-t border-b border-white/5 bg-[#050505] relative overflow-hidden group/section">
<style>
@keyframes subtle-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); border-color: rgba(255,255,255,0.1); }
50% { box-shadow: 0 0 20px -5px rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.2); }
}
@keyframes text-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes code-scroll {
0% { transform: translateY(0); }
100% { transform: translateY(-10%); }
}
@keyframes fade-in-up-delay {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>
<!-- Left Column: Self-driving product operations -->
<div class="grid-col flex-1 p-8 md:p-16 md:pr-12 flex flex-col gap-12 border-b md:border-b-0 md:border-r border-white/5 relative bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-white/5 via-transparent to-transparent transition-colors hover:bg-white/[0.02]">
<div class="col-text z-10">
<h3 class="text-3xl font-semibold text-white tracking-tight mb-4">Axis MCP</h3>
<p class="text-lg text-[#8A8F98] leading-relaxed max-w-md font-light">Connect Axis to your favorite tools including Cursor, Claude, ChatGPT, and more.</p>
</div>
<div class="col-visual h-[380px] w-full flex items-center justify-center relative perspective-[1000px]">
<!-- Triage Container -->
<div class="relative w-full max-w-[420px] bg-[#0F1011] rounded-xl border border-white/10 p-5 overflow-hidden shadow-2xl group/card transition-all duration-500 hover:border-white/20 hover:shadow-[0_0_40px_-10px_rgba(0,0,0,0.8)]">
<!-- Header -->
<div class="flex items-center gap-2 text-[13px] font-medium text-[#8A8F98] mb-6">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-[spin_10s_linear_infinite]"><path d="M12 2v20"></path><path d="M2 12h20"></path><path d="m4.93 4.93 14.14 14.14"></path><path d="m19.07 4.93-14.14 14.14"></path></svg>
Triage Intelligence
</div>
<!-- Background Rows (Simulating the list) -->
<div class="space-y-4 opacity-40 blur-[1px] transition-all duration-500 group-hover/card:blur-[2px] group-hover/card:opacity-30">
<div class="flex items-center gap-3 text-[13px] text-[#666]">
<span class="w-20">Suggestions</span>
<div class="flex items-center gap-2 px-2 py-1 rounded bg-white/5 border border-white/10">
<div class="w-4 h-4 rounded-full bg-gradient-to-br from-gray-500 to-gray-700"></div>
<span class="text-gray-400">nan</span>
</div>
<span class="px-2 py-1 rounded border border-dashed border-white/10 text-xs">Mobile App Refactor</span>
<div class="flex items-center gap-1.5 ml-auto">
<span class="w-1.5 h-1.5 rounded-full bg-[#E24040]"></span>
<span class="text-xs">Slack</span>
</div>
</div>
<div class="flex items-center gap-3 text-[13px] text-[#666]">
<span class="w-20">Duplicate of</span>
<div class="flex items-center gap-2 px-2 py-1 rounded bg-white/5 border border-white/10">
<div class="w-4 h-4 rounded-full bg-gradient-to-br from-gray-500 to-gray-700"></div>
<span class="text-gray-400">nan</span>
</div>
</div>
<div class="flex items-center gap-3 text-[13px] text-[#666]">
<span class="w-20">Related to</span>
<div class="h-6 w-24 bg-white/5 rounded"></div>
</div>
</div>
<!-- Floating Active Card -->
<div class="absolute bottom-4 left-4 right-4 bg-[#161719] rounded-lg border border-white/10 p-4 shadow-[0_20px_50px_-10px_rgba(0,0,0,1)] ring-1 ring-white/5 backdrop-blur-xl transform transition-all duration-500 ease-out translate-y-2 group-hover/card:translate-y-0 opacity-90 group-hover/card:opacity-100" style="animation: subtle-float 6s ease-in-out infinite;">
<div class="flex flex-col gap-3">
<div class="flex items-center justify-between">
<h4 class="text-[13px] font-medium text-white">Why this assignee was suggested</h4>
</div>
<p class="text-[12px] leading-relaxed text-[#8A8F98]">This person was the assignee on previous issues related to performance problems in the mobile app launch flow.</p>
<div class="h-px w-full bg-white/5 my-1"></div>
<div class="flex items-center justify-between">
<div class="flex flex-col gap-1.5">
<span class="text-[11px] font-medium text-[#666] uppercase tracking-wider">Alternatives</span>
<div class="flex -space-x-1.5">
<img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop" class="w-5 h-5 rounded-full ring-2 ring-[#161719] grayscale opacity-70" alt="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/48efba97-0b3f-4a79-a4e3-6d8f000e4515_320w.jpg" class="w-5 h-5 rounded-full ring-2 ring-[#161719] grayscale opacity-70 object-cover" alt="">
</div>
</div>
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-[12px] font-medium text-white transition-all hover:scale-105 active:scale-95 group/btn">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover/btn:text-[#4DAF73] transition-colors"><polyline points="20 6 9 17 4 12"></polyline></svg>
Accept suggestion
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Linear MCP -->
<div class="grid-col flex-1 p-8 md:p-16 md:pl-12 flex flex-col gap-12 relative bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/5 via-transparent to-transparent transition-colors hover:bg-white/[0.02] reveal-right delay-200">
<div class="col-text z-10">
<h3 class="text-3xl font-semibold text-white tracking-tight mb-4">Linear MCP</h3>
<p class="text-lg text-[#8A8F98] leading-relaxed max-w-md font-light">Connect Linear to your favorite tools including Cursor, Claude, ChatGPT, and more.</p>
</div>
<div class="col-visual h-[380px] w-full flex items-center justify-center relative perspective-[1000px]">
<!-- MCP Container -->
<div class="relative w-full max-w-[440px] h-[300px] bg-[#0A0B0C] rounded-xl border border-white/10 overflow-hidden shadow-2xl group/terminal">
<!-- Code Background -->
<div class="absolute inset-0 p-6 font-mono text-[11px] leading-loose text-[#555] opacity-60 select-none overflow-hidden">
<div style="animation: code-scroll 20s linear infinite;" class="">
<span class="text-[#666] block mb-2">// mcp.linear.app/sse</span>
<span class="block"><span class="text-[#d97757]">"mcpServers"</span>: {</span>
<span class="block pl-4"><span class="text-[#569CD6]">"Axis"</span>: {</span>
<span class="block pl-8"><span class="text-[#d97757]">"command"</span>: <span class="text-[#98c379]">"npx"</span>,</span>
<span class="block pl-8"><span class="text-[#d97757]">"args"</span>: [</span>
<span class="block pl-12"><span class="text-[#98c379]">-y"</span>,</span>
<span class="block pl-12"><span class="text-[#98c379]" "="">"@linear/mcp-server"</span></span>
<span class="block pl-8">],</span>
<span class="block pl-8"><span class="text-[#d97757]">"env"</span>: {</span>
<span class="block pl-12"><span class="text-[#569CD6]">"LINEAR_API_KEY"</span>: <span class="text-[#98c379]">"lin_api_..."</span></span>
<span class="block pl-8">}</span>
<span class="block pl-4">},</span>
<span class="block pl-4"><span class="text-[#569CD6]">"github"</span>: {</span>
<span class="block pl-8"><span class="text-[#d97757]">"command"</span>: <span class="text-[#98c379]">"npx"</span>,</span>
<span class="block pl-8"><span class="text-[#d97757]">"args"</span>: [<span class="text-[#98c379]" "="">"-y"</span>, <span class="text-[#98c379]" "="">"@modelcontextprotocol/server-github"</span>],</span>
<span class="block pl-8"><span class="text-[#d97757]">"env"</span>: {</span>
<span class="block pl-12"><span class="text-[#569CD6]">"GITHUB_PERSONAL_ACCESS_TOKEN"</span>: <span class="text-[#98c379]">"ghp_..."</span></span>
<span class="block pl-8">}</span>
<span class="block pl-4">}</span>
<span class="block">}</span>
</div>
</div>
<!-- Gradient Overlay for fade effect -->
<div class="absolute inset-0 bg-gradient-to-t from-[#0A0B0C] via-[#0A0B0C]/40 to-transparent pointer-events-none"></div>
<!-- Chat Card (Floating) -->
<div class="absolute bottom-6 left-6 right-6 bg-[#161719]/80 backdrop-blur-md rounded-xl border border-white/10 p-4 shadow-[0_0_30px_rgba(0,0,0,0.5)] transition-all duration-300 group-hover/terminal:border-white/20 group-hover/terminal:bg-[#161719]/90" style="animation: glow-pulse 4s infinite ease-in-out;">
<div class="flex items-center gap-2 mb-4">
<div class="w-0.5 h-4 bg-blue-500 animate-[cursor-blink_1s_step-end_infinite]"></div>
<span class="text-[14px] text-gray-300 font-light">Ask anything</span>
</div>
<div class="flex gap-2">
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 text-[11px] text-[#8A8F98] hover:text-white transition-all">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
Attach
</button>
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 text-[11px] text-[#8A8F98] hover:text-white transition-all">
<svg width="12" height="12" 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"></circle><line x1="2" x2="22" y1="12" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
Search
</button>
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 text-[11px] text-[#8A8F98] hover:text-white transition-all">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-1 1.5-2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>
Reason
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ROADMAP SECTION -->
<section class="overflow-hidden md:px-12 flex flex-col min-h-[850px] bg-[#050505] w-full pt-32 pr-6 pb-32 pl-6 relative perspective-[2000px]">
<style>
@keyframes scene-drift {
0% {
transform: rotateX(55deg) rotateZ(-15deg) rotateY(5deg) translateY(0px);
}
50% {
transform: rotateX(58deg) rotateZ(-15deg) rotateY(3deg) translateY(-30px);
}
100% {
transform: rotateX(55deg) rotateZ(-15deg) rotateY(5deg) translateY(0px);
}
}
@keyframes active-pulse {
0%,
100% {
box-shadow: 0 0 0 1px rgba(77, 175, 115, 0.3), 0 20px 50px -10px rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.1);
}
50% {
box-shadow: 0 0 0 2px rgba(77, 175, 115, 0.6), 0 20px 50px -10px rgba(77, 175, 115, 0.2);
border-color: rgba(77, 175, 115, 0.5);
}
}
@keyframes laser-scan {
0% {
opacity: 0.4;
height: 100%;
top: -100px;
}
50% {
opacity: 0.8;
height: 120%;
top: -120px;
box-shadow: 0 0 20px rgba(77, 175, 115, 0.5);
}
100% {
opacity: 0.4;
height: 100%;
top: -100px;
}
}
@keyframes signal-flow {
0% {
stroke-dashoffset: 200;
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 0;
}
}
@keyframes float-particle {
0% {
transform: translate3d(0, 0, 0);
opacity: 0;
}
20% {
opacity: 0.6;
}
100% {
transform: translate3d(0, -60px, 0);
opacity: 0;
}
}
@keyframes blink-badge {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
</style>
<!-- Content Header -->
<div class="relative z-20 max-w-4xl ml-[5%] mb-16 pointer-events-none select-none">
<div class="flex items-center gap-3 text-[#4DAF73] text-[13px] font-medium tracking-wide mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#4DAF73] opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-[#4DAF73]"></span>
</span>
<span class="uppercase tracking-wider">Project and long-term planning</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
<h2 class="text-6xl md:text-[84px] font-semibold tracking-[-0.03em] leading-[1] text-white mb-8">
Set the
<span class="text-transparent bg-clip-text bg-gradient-to-br from-white via-white to-[#666]">product direction</span>
</h2>
<p class="text-[22px] text-[#8A8F98] leading-[1.5] max-w-2xl font-light tracking-[-0.01em]">
Align your team around a unified product timeline. Plan, manage, and track all product initiatives with Axis’s
visual planning tools.
</p>
</div>
<!-- 3D Environment -->
<div class="overflow-visible select-none absolute top-0 right-0 bottom-0 left-0 perspective-[1000px]">
<!-- Animated Plane -->
<div class="w-[140%] h-[150%] mt-44 absolute top-[10%] left-[-20%]" style="transform: rotateX(55deg) rotateZ(-15deg) rotateY(5deg); transform-style: preserve-3d; animation: scene-drift 24s ease-in-out infinite">
<!-- Grid Surface -->
<div class="absolute inset-0 border-t border-white/10" style="background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 140px);">
<!-- Timeline Markers & Elements -->
<div class="relative h-full w-full">
<!-- AUG 3 -->
<div class="absolute left-[15%] top-6 text-xs font-mono text-[#555] tracking-wider">AUG 3</div>
<div class="absolute left-[15%] top-0 h-full w-px border-l border-dashed border-white/5"></div>
<!-- Tick 10 -->
<div class="absolute left-[22%] top-8 text-[10px] font-mono text-[#333]">10</div>
<div class="absolute left-[28%] top-10 h-3 w-px bg-white/5"></div>
<!-- Tick 17 -->
<div class="absolute left-[35%] top-6 text-xs font-mono text-[#555] tracking-wider">17</div>
<div class="absolute left-[35%] top-0 h-full w-px border-l border-white/5"></div>
<!-- Current Date (AUG 22) - Animated Laser -->
<div class="absolute left-[48%] w-px bg-gradient-to-b from-transparent via-[#4DAF73] to-transparent z-10" style="animation: laser-scan 4s ease-in-out infinite;"></div>
<!-- Radar Circle at current date base -->
<div class="absolute left-[48%] top-0 w-[400px] h-[400px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-[#4DAF73]/20 opacity-0 scale-0" style="animation: ping 4s cubic-bezier(0,0,0.2,1) infinite;"></div>
<div class="absolute left-[48%] top-[-25px] transform -translate-x-1/2 -rotate-x-60 z-30" style="transform-style: preserve-3d;">
<div class="bg-[#1A1C1E] ring-1 ring-[#333] px-2.5 py-1 rounded-[4px] text-[11px] font-medium text-[#ccc] shadow-2xl whitespace-nowrap flex items-center gap-1.5" style="transform: rotateX(-55deg);">
<div class="w-1.5 h-1.5 rounded-full bg-[#4DAF73] animate-pulse"></div>
AUG 22
</div>
</div>
<!-- Tick 24 -->
<div class="absolute left-[60%] top-6 text-xs font-mono text-[#555] tracking-wider">24</div>
<div class="absolute left-[60%] top-0 h-full w-px border-l border-white/5"></div>
<!-- Month SEP -->
<div class="absolute left-[75%] top-6 text-xs font-bold font-mono text-[#555] tracking-[0.2em]">SEP</div>
<div class="absolute left-[75%] top-0 h-full w-px border-l border-white/10"></div>
</div>
</div>
<!-- Floating Items Container -->
<div class="absolute inset-0" style="transform-style: preserve-3d;">
<!-- SVG Connections Layer -->
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0" style="transform: translateZ(10px);">
<defs>
<linearGradient id="flow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgba(77,175,115,0)"></stop>
<stop offset="50%" stop-color="#4DAF73"></stop>
<stop offset="100%" stop-color="rgba(77,175,115,0)"></stop>
</linearGradient>
</defs>
<!-- Path from Realtime Inference to RLHF -->
<path d="M 40% 200 Q 48% 200 55% 308" fill="none" stroke="url(#flow-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="10 10" style="animation: signal-flow 3s linear infinite; opacity: 0.6; filter: drop-shadow(0 0 5px rgba(77,175,115,0.5));">
</path>
<!-- Vertical connection to timeline -->
<line x1="48%" y1="0" x2="48%" y2="170" stroke="rgba(77,175,115,0.2)" stroke-dasharray="4 4"></line>
</svg>
<!-- Active Card: Realtime Inference -->
<div class="absolute top-[140px] left-[22%] w-[38%] h-[64px] bg-[#141518]/90 backdrop-blur-xl rounded-lg border border-white/10 flex flex-col justify-center px-5 z-20 group transition-transform duration-500 hover:translate-z-[60px]" style="transform: translateZ(40px); animation: active-pulse 4s infinite;">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<!-- Custom Diamond Icon -->
<div class="w-5 h-5 rounded-[3px] bg-[#4DAF73]/10 border border-[#4DAF73] flex items-center justify-center transform rotate-45 shadow-[0_0_10px_rgba(77,175,115,0.2)]">
<div class="w-1.5 h-1.5 bg-[#4DAF73] rounded-full shadow-[0_0_5px_#4DAF73]"></div>
</div>
<span class="text-[17px] font-medium text-white tracking-tight group-hover:text-[#4DAF73] transition-colors">Realtime inference</span>
</div>
<!-- Assignee Avatars -->
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a97a0c41-fd53-4e71-a67c-d1621d1c359f_320w.jpg" alt="User" class="w-6 h-6 rounded-full ring-2 ring-[#141518] grayscale opacity-80 group-hover:grayscale-0 transition-all object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a91c1566-41b6-46c6-9605-e4fbe4ed2f39_320w.jpg" alt="User" class="w-6 h-6 rounded-full ring-2 ring-[#141518] grayscale opacity-80 group-hover:grayscale-0 transition-all object-cover">
<div class="w-6 h-6 rounded-full ring-2 ring-[#141518] bg-[#333] flex items-center justify-center text-[9px] font-medium text-white/70">
+3</div>
</div>
</div>
<!-- Label below -->
<div class="absolute -bottom-10 left-2 text-[10px] font-mono text-white/30 uppercase tracking-[0.2em] flex items-center gap-2">
<div class="w-1 h-1 bg-white/30 rounded-full"></div> Prototype
</div>
</div>
<!-- Secondary Card: RLHF -->
<div class="absolute top-[280px] left-[55%] w-[32%] h-[56px] bg-[#0F1012]/80 backdrop-blur-md rounded-lg border border-white/5 flex items-center px-5 gap-4 z-10 shadow-lg hover:border-white/20 transition-colors" style="transform: translateZ(20px);">
<!-- Grid Icon -->
<div class="grid grid-cols-2 gap-[3px] opacity-40 rotate-12">
<div class="w-1.5 h-1.5 bg-white rounded-[1px] reveal-left"></div>
<div class="w-1.5 h-1.5 bg-white rounded-[1px]"></div>
<div class="w-1.5 h-1.5 bg-white rounded-[1px]"></div>
<div class="w-1.5 h-1.5 bg-white rounded-[1px] reveal-right delay-100"></div>
</div>
<div class="flex flex-col">
<span class="text-[15px] font-medium text-white/80 tracking-tight">RLHF fine tuning</span>
<div class="h-0.5 w-12 bg-white/10 mt-1.5 rounded-full overflow-hidden">
<div class="h-full w-2/3 bg-white/30 rounded-full"></div>
</div>
</div>
<!-- Label below -->
<div class="absolute -bottom-10 left-2 text-[10px] font-mono text-white/20 uppercase tracking-[0.2em]">Beta
</div>
</div>
<!-- Third Card: Infrastructure -->
<div class="absolute top-[80px] left-[65%] w-[28%] h-[48px] bg-[#0F1012]/60 backdrop-blur-sm rounded-lg border border-white/5 flex items-center px-4 gap-3 z-5 shadow-lg" style="transform: translateZ(10px);">
<div class="w-2 h-2 rounded-full border border-[#E2B340] flex items-center justify-center">
<div class="w-0.5 h-0.5 bg-[#E2B340] rounded-full"></div>
</div>
<span class="text-[13px] font-medium text-white/40 tracking-tight">API Gateway v2</span>
</div>
<!-- Widget: System Velocity -->
<div class="absolute bottom-[20%] right-[10%] w-[180px] p-4 bg-[#111]/80 backdrop-blur border border-white/5 rounded-lg flex flex-col gap-2 z-20" style="transform: translateZ(60px) rotateY(-10deg);">
<div class="text-[10px] uppercase tracking-wider text-white/40 font-mono">Sprint Velocity</div>
<div class="flex items-end gap-2">
<span class="text-2xl font-bold text-white">42.5</span>
<span class="text-xs text-[#4DAF73] mb-1 flex items-center">▲ 12%</span>
</div>
<!-- Mini Chart -->
<div class="flex items-end gap-1 h-6 mt-1">
<div class="w-1.5 bg-white/10 h-[40%] rounded-sm"></div>
<div class="w-1.5 bg-white/10 h-[60%] rounded-sm"></div>
<div class="w-1.5 bg-white/10 h-[30%] rounded-sm"></div>
<div class="w-1.5 bg-white/20 h-[80%] rounded-sm"></div>
<div class="w-1.5 bg-[#4DAF73] h-[100%] rounded-sm shadow-[0_0_10px_rgba(77,175,115,0.4)]"></div>
</div>
</div>
<!-- Floating Code Particles -->
<div class="absolute left-[30%] top-[40%] pointer-events-none" style="transform: translateZ(30px);">
<div class="font-mono text-[10px] text-[#4DAF73]/40 whitespace-nowrap" style="animation: float-particle 4s infinite ease-out;">git commit -m "fix: latency"</div>
</div>
<div class="absolute left-[50%] top-[60%] pointer-events-none" style="transform: translateZ(15px);">
<div class="font-mono text-[10px] text-white/20 whitespace-nowrap" style="animation: float-particle 5s 1s infinite ease-out;">deploy_prod.sh</div>
</div>
<!-- Background Elements -->
<div class="absolute top-[380px] left-[8%] w-[25%] h-[40px] bg-gradient-to-r from-white/5 to-transparent rounded border-l border-t border-white/5 opacity-20" style="transform: translateZ(5px);"></div>
</div>
</div>
</div>
</section>
<!-- PROJECT GRID SECTION -->
<!-- COLLAB SECTION -->
<section class="collab-section">
<div class="collab-container flex flex-col md:flex-row gap-12 md:gap-24 items-center w-full max-w-[1200px] mx-auto px-6 py-24">
<!-- Left Panel: Interactive Tabs -->
<div class="flex-1 max-w-md z-10 reveal-left">
<h2 class="text-4xl md:text-5xl font-semibold text-white tracking-tight leading-[1.1] mb-10 bg-gradient-to-b from-white to-white/60 bg-clip-text text-transparent">
Real-time artifacts<br>for better decisions
</h2>
<div class="flex flex-col relative border-l border-white/10" id="collab-tabs">
<!-- Tab 1 Button -->
<button onclick="
const root = this.closest('[data-element-id]');
// Reset all tabs
root.querySelectorAll('.tab-btn').forEach(el => {
el.classList.remove('text-white', 'border-[#4DAF73]', 'bg-white/5');
el.classList.add('text-[#8A8F98]', 'border-transparent');
});
// Activate this tab
this.classList.add('text-white', 'border-[#4DAF73]', 'bg-white/5');
this.classList.remove('text-[#8A8F98]', 'border-transparent');
// Switch views
root.querySelectorAll('.tab-view').forEach(el => {
el.classList.add('opacity-0', 'translate-y-8', 'pointer-events-none', 'scale-95');
});
root.querySelector('#view-docs').classList.remove('opacity-0', 'translate-y-8', 'pointer-events-none', 'scale-95');
" class="tab-btn text-left px-6 py-4 text-lg font-medium transition-all duration-300 border-l-2 -ml-[1px] text-white border-[#4DAF73] bg-white/5 rounded-r-lg group flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70 group-hover:opacity-100 transition-opacity"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
Collaborative documents
</button>
<!-- Tab 2 Button -->
<button onclick="
const root = this.closest('[data-element-id]');
// Reset all tabs
root.querySelectorAll('.tab-btn').forEach(el => {
el.classList.remove('text-white', 'border-[#4DAF73]', 'bg-white/5');
el.classList.add('text-[#8A8F98]', 'border-transparent');
});
// Activate this tab
this.classList.add('text-white', 'border-[#4DAF73]', 'bg-white/5');
this.classList.remove('text-[#8A8F98]', 'border-transparent');
// Switch views
root.querySelectorAll('.tab-view').forEach(el => {
el.classList.add('opacity-0', 'translate-y-8', 'pointer-events-none', 'scale-95');
});
root.querySelector('#view-comments').classList.remove('opacity-0', 'translate-y-8', 'pointer-events-none', 'scale-95');
" class="tab-btn text-left px-6 py-4 text-lg font-medium transition-all duration-300 border-l-2 -ml-[1px] text-[#8A8F98] border-transparent hover:text-gray-300 hover:bg-white/[0.02] rounded-r-lg group flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70 group-hover:opacity-100 transition-opacity"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Inline comments
</button>
</div>
</div>
<!-- Right Panel (Visuals) -->
<div class="flex-[1.4] w-full relative h-[460px] reveal-right delay-200 perspective-[1000px]">
<!-- View 1: Collaborative Documents -->
<div id="view-docs" class="tab-view absolute inset-0 transition-all duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] origin-bottom" style="transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);">
<div class="w-full h-full bg-[#0F1011] rounded-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col relative group">
<!-- Mac-style Header -->
<div class="h-10 border-b border-white/5 bg-[#141517] flex items-center px-4 justify-between select-none">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-[#FF5F57] shadow-sm"></div>
<div class="w-3 h-3 rounded-full bg-[#FEBC2E] shadow-sm"></div>
<div class="w-3 h-3 rounded-full bg-[#28C840] shadow-sm"></div>
</div>
<div class="text-xs text-[#666] font-medium flex items-center gap-1.5 opacity-60">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
specs_v2.md
</div>
<div class="w-12"></div>
</div>
<!-- Editor Content -->
<div class="p-8 font-sans text-[#A1A1AA] leading-relaxed text-[15px]">
<div class="text-[11px] font-bold text-[#4DAF73] mb-2 uppercase tracking-widest">Draft</div>
<h3 class="text-2xl font-semibold text-white mb-6 tracking-tight">Product Specifications 2.0</h3>
<p class="mb-4">The new sync engine should handle <span class="text-white bg-[#4DAF73]/20 px-1 rounded relative cursor-text transition-colors hover:bg-[#4DAF73]/30">offline states</span></p><div class="absolute -top-7 left-0 bg-[#4DAF73] text-[10px] text-white px-1.5 py-0.5 rounded font-bold uppercase tracking-wider shadow-lg transform transition-transform duration-300 scale-100 flex items-center gap-1">zoe <span class="w-1 h-1 bg-white rounded-full animate-pulse"></span></div> gracefully without data loss.<p></p>
<p class="mb-4 relative">
We need to ensure that the <span class="text-white">conflict resolution</span> strategy prioritizes user intent over server timestamp.
<!-- Live Cursor Simulation -->
<span class="absolute inline-block w-0.5 h-5 bg-[#5E6AD2] ml-0.5 animate-pulse align-middle" style="animation-duration: 1s;"></span>
<span class="absolute -top-7 ml-1 bg-[#5E6AD2] text-[10px] text-white px-1.5 py-0.5 rounded font-bold uppercase tracking-wider shadow-lg flex items-center gap-1">alex <span class="w-1 h-1 bg-white rounded-full animate-pulse"></span></span>
</p>
<div class="p-4 bg-[#1A1B1E] rounded-lg border border-white/5 mt-6 flex items-start gap-3">
<div class="w-1 h-10 bg-[#E2B340] rounded-full"></div>
<div>
<div class="text-xs text-[#E2B340] font-bold mb-1 uppercase tracking-wider">Note</div>
<p class="text-xs text-[#CCC]">Remember to update the WebSocket protocol to support binary frames for efficiency.</p>
</div>
</div>
</div>
</div>
</div>
<!-- View 2: Inline Comments -->
<div id="view-comments" class="tab-view absolute inset-0 transition-all duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] opacity-0 translate-y-8 pointer-events-none scale-95 origin-bottom" style="transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);">
<div class="w-full h-full bg-[#0F1011] rounded-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col relative">
<!-- Code Header -->
<div class="h-10 border-b border-white/5 bg-[#141517] flex items-center px-4 justify-between select-none">
<div class="flex gap-2 opacity-50">
<div class="w-3 h-3 rounded-full bg-white/20"></div>
<div class="w-3 h-3 rounded-full bg-white/20"></div>
<div class="w-3 h-3 rounded-full bg-white/20"></div>
</div>
<div class="text-xs text-[#666] font-mono flex items-center gap-2">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="opacity-50"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
auth_middleware.ts
</div>
<div class="w-12"></div>
</div>
<!-- Code Content -->
<div class="p-6 font-mono text-[13px] leading-loose text-[#888] overflow-hidden relative h-full bg-[#0F1011]">
<div class="flex group/line hover:bg-white/[0.02]"><span class="w-8 text-[#444] select-none text-right mr-4">1</span> <span><span class="text-[#C678DD]">export</span> <span class="text-[#C678DD]">const</span> <span class="text-[#61AFEF]">verifySession</span> = <span class="text-[#C678DD]">async</span> (req, res) => {</span></div>
<div class="flex group/line hover:bg-white/[0.02]"><span class="w-8 text-[#444] select-none text-right mr-4">2</span> <span> <span class="text-[#C678DD]">const</span> token = req.headers[<span class="text-[#98C379]">'authorization'</span>];</span></div>
<!-- Highlighted Line -->
<div class="flex relative bg-[#4DAF73]/10 -mx-6 px-6 border-l-2 border-[#4DAF73]">
<span class="w-8 text-[#444] select-none text-right mr-4">3</span> <span> <span class="text-[#C678DD]">if</span> (!token) <span class="text-[#C678DD]">throw</span> <span class="text-[#C678DD]">new</span> <span class="text-[#E5C07B]">Error</span>(<span class="text-[#98C379]">'No token provided'</span>);</span>
<!-- Floating Comment Bubble -->
<div class="absolute left-1/3 top-full mt-4 w-[280px] bg-[#1A1B1E] border border-white/10 rounded-lg shadow-[0_20px_40px_-10px_rgba(0,0,0,0.7)] p-3 z-10 animate-[float-in-up_0.4s_ease-out_forwards]">
<div class="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=64&h=64&fit=crop" class="w-8 h-8 rounded-full ring-2 ring-[#0F1011] object-cover">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-sm font-semibold text-white">Sarah</span>
<span class="text-[10px] text-[#666]">2m ago</span>
</div>
<p class="text-xs text-[#CCC] leading-relaxed">Should we return a 401 status code here instead of throwing a generic error?</p>
</div>
</div>
<div class="mt-3 flex gap-2 pt-2 border-t border-white/5">
<input type="text" placeholder="Reply..." class="flex-1 bg-transparent border-none text-xs text-white focus:outline-none placeholder-white/20">
<button class="bg-[#5E6AD2] hover:bg-[#4b55a8] text-white px-3 py-1 rounded text-xs font-medium transition-colors">Send</button>
</div>
<!-- Triangle Pointer -->
<div class="absolute -top-1.5 left-8 w-3 h-3 bg-[#1A1B1E] border-l border-t border-white/10 transform rotate-45"></div>
</div>
</div>
<div class="flex group/line hover:bg-white/[0.02]"><span class="w-8 text-[#444] select-none text-right mr-4">4</span> <span> <span class="text-[#C678DD]">const</span> session = <span class="text-[#C678DD]">await</span> db.sessions.<span class="text-[#61AFEF]">find</span>(token);</span></div>
<div class="flex group/line hover:bg-white/[0.02]"><span class="w-8 text-[#444] select-none text-right mr-4">5</span> <span> <span class="text-[#C678DD]">return</span> session;</span></div>
<div class="flex group/line hover:bg-white/[0.02]"><span class="w-8 text-[#444] select-none text-right mr-4">6</span> <span>};</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="feature-footer reveal delay-300">
<div class="ff-item"><h4>Initiatives</h4><p>Coordinate strategic product efforts.</p></div>
<div class="ff-item"><h4 class="">Cross-team projects</h4><p class="">Collaborate across departments.</p></div>
<div class="ff-item"><h4>Milestones</h4><p class="">Break projects down into phases.</p></div>
<div class="ff-item"><h4>Progress insights</h4><p class="">Track scope and velocity automatically.</p></div>
</div>
</section>
<!-- NEW: ISSUE TRACKING SECTION (ADDED HERE) -->
<section class="issue-tracking-section">
<div class="it-content reveal-left">
<div class="it-tag"><span class="dot"></span> Task tracking and sprint planning ></div>
<h2 class="">Issue tracking you’ll enjoy using</h2>
<p class="">Optimized for speed and efficiency. Create tasks in seconds, discuss issues in context, and breeze through
your
work in views tailored to you and your team.</p>
</div>
<div class="it-visual reveal-right delay-200">
<div class="it-board" style="transform: rotateX(25deg) rotateY(-15deg) rotateZ(5deg);">
<!-- Labels simulating the board columns -->
<div class="it-col-header" style="left:50px; top:120px;">High Priority
<span style="opacity:0.3; margin-left:10px">+</span>
</div>
<div class="it-col-header" style="left:420px; top:40px;">Urgent</div>
<!-- Floating Cards -->
<!-- Main Card -->
<div class="it-card card-1">
<div class="it-id">ENG-1025</div>
<div class="it-title"><span style="color:#E2B340">◐</span> Improve keyboard shortcuts</div>
<div class="it-meta">
<div class="it-chip"><svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"></path>
</svg></div>
<div class="it-chip">✨ UI Refresh</div>
</div>
</div>
<!-- Background Card -->
<div class="it-card card-2">
<div class="it-id">ENG-1018</div>
<div class="it-title">
<span style="border:1px solid #777; border-radius:50%; width:12px; height:12px"></span>
Implement AES-256 Encryption</div>
<div class="it-meta">
<div class="it-chip">! Security improvements</div>
</div>
</div>
<!-- Background Card 3 -->
<div class="it-card card-3">
<div class="it-id">ENG-1012</div>
<div class="it-title"><span style="color:#3b82f6">✔</span> Update payment gateway integration</div>
<div class="it-meta">
<div class="it-chip">PSD2 Regulation</div>
</div>
</div>
<!-- Background Card 4 -->
<div class="it-card card-4">
<div class="it-id">ENG-902</div>
<div class="it-title"><span style="color:#E2B340">◐</span> Remove duplicated Postgres indexes</div>
<div class="it-meta">
<div class="it-chip">! Mobile v1</div>
</div>
</div>
</div>
</div>
</section><section class="overflow-hidden group/section text-[#F7F8F8] bg-[#050505] w-full border-white/5 border-t border-b relative">
<div class="max-w-[1300px] mx-auto">
<!-- Top Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-white/5">
<!-- Left Column: Cycles -->
<div class="md:p-16 flex flex-col group/cycles hover:bg-white/[0.01] transition-colors duration-500 pt-8 pr-8 pb-8 pl-8 gap-x-10 gap-y-10">
<div class="max-w-md z-10">
<h3 class="text-2xl md:text-[26px] font-medium tracking-tight mb-3 text-white">Build momentum with Cycles</h3>
<p class="text-[17px] text-[#8A8F98] leading-relaxed font-normal">Create healthy routines and focus your team on what work should happen next.</p>
</div>
<!-- Visual: Advanced Cycles Graph -->
<div class="relative w-full aspect-[4/3] bg-[#0E0F11] border border-white/5 rounded-xl overflow-hidden shadow-2xl p-6 flex flex-col group-hover/cycles:border-white/10 transition-colors duration-500">
<!-- Subtle Grid Background -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,black_40%,transparent_100%)]"></div>
<!-- Header / Legend -->
<div class="relative z-10 flex items-center justify-between mb-8">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-white text-[13px] font-medium tracking-tight">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#888]"><path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9"></path></svg>
Cycle 55
</div>
<span class="flex h-1.5 w-1.5 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span>
</span>
</div>
<div class="flex items-center gap-4 text-[11px] font-medium text-[#666]">
<div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-[#444]"></div> Scope</div>
<div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-[#5E6AD2] shadow-[0_0_6px_rgba(94,106,210,0.4)]"></div> Progress</div>
</div>
</div>
<!-- Graph Area -->
<div class="relative flex-1 w-full mt-2">
<!-- Background Lines -->
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20">
<div class="w-full h-px bg-white/10"></div>
<div class="w-full h-px bg-white/10"></div>
<div class="w-full h-px bg-white/10"></div>
<div class="w-full h-px bg-white/10"></div>
</div>
<!-- SVG Chart -->
<svg class="overflow-visible w-[472px] h-[282px] absolute top-0 right-0 bottom-0 left-0" preserveAspectRatio="none" viewBox="0 0 300 120" stroke-width="2" data-icon-replaced="true" style="color: rgb(247, 248, 248); width: 472px; height: 282px">
<defs>
<linearGradient id="fillGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5E6AD2" stop-opacity="0.15"></stop>
<stop offset="100%" stop-color="#5E6AD2" stop-opacity="0"></stop>
</linearGradient>
<mask id="pathMask">
<rect x="0" y="0" width="300" height="120" fill="white">
<animate attributeName="width" from="0" to="300" dur="1.5s" fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"></animate>
</rect>
</mask>
</defs>
<!-- Scope Line (Gray) -->
<path d="M0,20 L40,20 L60,15 L120,15 L140,25 L300,25" fill="none" stroke="#444" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.5" mask="url(#pathMask)"></path>
<!-- Progress Area -->
<path d="M0,110 C40,105 80,80 120,60 C160,40 200,35 240,30" fill="url(#fillGradient)" mask="url(#pathMask)" opacity="0.8" class=""></path>
<!-- Progress Line -->
<path d="M0,110 C40,105 80,80 120,60 C160,40 200,35 240,30" fill="none" stroke="#5E6AD2" stroke-width="2.5" stroke-linecap="round" mask="url(#pathMask)"></path>
<!-- Data Points -->
<circle cx="120" cy="60" r="2.5" fill="#0E0F11" stroke="#5E6AD2" stroke-width="1.5" class="opacity-0 animate-[fade-in_0.5s_ease-out_0.8s_forwards]"></circle>
<circle cx="240" cy="30" r="3" fill="#5E6AD2" class="opacity-0 animate-[fade-in_0.5s_ease-out_1.2s_forwards] shadow-[0_0_10px_#5E6AD2]"></circle>
<!-- Current Day Line -->
<line x1="240" y1="0" x2="240" y2="120" stroke="#5E6AD2" stroke-width="1" stroke-dasharray="2 2" opacity="0.3" class=""></line>
</svg>
<!-- Floating Tooltip (HTML for sharpness) -->
<div class="absolute top-[10%] left-[80%] -translate-x-1/2 -translate-y-1/2 z-20 opacity-0 animate-[fade-in-up_0.6s_ease-out_1.4s_forwards]">
<div class="bg-[#1A1B1E]/90 backdrop-blur-md border border-white/10 p-2.5 rounded-lg shadow-xl flex flex-col gap-1 min-w-[100px]">
<div class="flex items-center justify-between gap-3">
<span class="text-[10px] text-[#888] font-medium uppercase tracking-wider">Velocity</span>
<span class="flex h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
</div>
<div class="flex items-end gap-1.5">
<span class="text-[16px] font-medium text-white tracking-tight">42 pts</span>
<span class="text-[10px] text-emerald-400 font-mono mb-0.5">▲12%</span>
</div>
</div>
<!-- Connector Line -->
<div class="w-px h-4 bg-white/20 mx-auto"></div>
<div class="w-1.5 h-1.5 bg-white/20 rounded-full mx-auto -mt-0.5"></div>
</div>
<!-- X-Axis -->
<div class="absolute -bottom-6 left-0 right-0 flex justify-between text-[10px] text-[#555] font-mono uppercase tracking-wider">
<span>Apr 22</span>
<span>Apr 29</span>
<span>May 06</span>
</div>
</div>
</div>
<style>
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
</style>
</div>
<!-- Right Column: Triage -->
<div class="md:p-16 flex flex-col group/triage hover:bg-white/[0.01] transition-colors duration-500 pt-8 pr-8 pb-8 pl-8 gap-x-10 gap-y-10">
<div class="max-w-md z-10">
<h3 class="text-2xl md:text-[26px] font-medium tracking-tight mb-3 text-white">Manage incoming work with Triage</h3>
<p class="text-lg text-[#8A8F98] leading-relaxed font-normal">Review and assign incoming bug reports, feature requests, and other unplanned work.</p>
</div>
<!-- Visual: Triage UI -->
<div class="relative w-full aspect-[4/3] bg-[#0E0F11] border border-white/5 rounded-xl overflow-hidden shadow-2xl group-hover/triage:border-white/10 transition-colors duration-500">
<!-- Window Header -->
<div class="h-10 border-b border-white/5 flex items-center px-4 bg-[#141517]">
<span class="text-[12px] font-medium text-[#888]">Triage</span>
</div>
<!-- List Content -->
<div class="p-2 space-y-1 relative">
<!-- List Item 1 (Active) -->
<div class="p-3 rounded-md bg-[#1A1C1E] border border-white/5 flex items-start gap-3 relative group/item">
<div class="mt-0.5 w-4 h-4 rounded-sm border border-white/20 flex items-center justify-center text-[8px] text-[#888] font-bold">P</div>
<div class="flex-1 min-w-0">
<div class="text-[13px] text-[#EEE] font-medium mb-1 truncate">Users report unexpected rate limiting</div>
<div class="flex items-center gap-2 text-[11px] text-[#666]">
<div class="flex items-center gap-1.5"><div class="w-3.5 h-3.5 rounded-full bg-[#333] flex items-center justify-center text-[7px] text-white">TM</div> tom</div>
<span>•</span>
<span>API Core</span>
</div>
</div>
<!-- Context Menu (Floating) -->
<div class="absolute top-[20px] left-[60px] w-[180px] bg-[#1A1B1E] border border-white/10 rounded-lg shadow-[0_20px_40px_-5px_rgba(0,0,0,0.6)] py-1 z-20 animate-in fade-in zoom-in-95 duration-200 origin-top-left">
<div class="px-2 py-1.5 flex items-center gap-2.5 hover:bg-white/5 rounded mx-1 cursor-pointer text-[#CCC] transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#888]"><path d="M20 6 9 17l-5-5"></path></svg>
<span class="text-[13px]">Accept</span>
<span class="ml-auto text-[10px] text-[#555] font-mono">E</span>
</div>
<div class="px-2 py-1.5 flex items-center gap-2.5 hover:bg-white/5 rounded mx-1 cursor-pointer text-[#CCC] transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#888]"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
<span class="text-[13px]">Mark as duplicate</span>
</div>
<div class="h-px bg-white/5 my-1 mx-1"></div>
<div class="px-2 py-1.5 flex items-center gap-2.5 hover:bg-white/5 rounded mx-1 cursor-pointer text-[#CCC] transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#888]"><circle cx="12" cy="12" r="10"></circle><path d="m4.9 4.9 14.2 14.2"></path></svg>
<span class="text-[13px]">Decline</span>
<span class="ml-auto text-[10px] text-[#555] font-mono">Cmd+D</span>
</div>
</div>
</div>
<!-- List Item 2 -->
<div class="p-3 rounded-md hover:bg-white/[0.02] flex items-start gap-3 opacity-60">
<div class="mt-0.5 w-4 h-4 rounded-sm border border-white/10 flex items-center justify-center text-[8px] text-[#555]">!</div>
<div class="flex-1 min-w-0">
<div class="text-[13px] text-[#AAA] font-medium mb-1 truncate">RangeError: Maximum call stack size exceeded</div>
<div class="flex items-center gap-2 text-[11px] text-[#555]">
<div class="flex items-center gap-1.5"><div class="w-3.5 h-3.5 rounded-full bg-[#222]"></div> romain</div>
</div>
</div>
</div>
<!-- List Item 3 -->
<div class="p-3 rounded-md hover:bg-white/[0.02] flex items-start gap-3 opacity-40">
<div class="mt-0.5 w-4 h-4 rounded-sm border border-white/10"></div>
<div class="flex-1 min-w-0">
<div class="text-[13px] text-[#AAA] font-medium mb-1 truncate">Pressing "Enter" quickly when logging in via email</div>
<div class="flex items-center gap-2 text-[11px] text-[#555]">
<div class="flex items-center gap-1.5"><div class="w-3.5 h-3.5 rounded-full bg-[#222]"></div> tuomas</div>
</div>
</div>
</div>
<!-- Cursor -->
<div class="absolute top-[130px] left-[140px] z-30 pointer-events-none drop-shadow-xl">
<svg width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="black" stroke-width="1"><path d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19138L11.7841 12.3673H5.65376Z"></path></svg>
</div>
</div>
</div>
</div>
</div>
<!-- NEW: INTEGRATIONS SECTION (FULL + READY TO PASTE) -->
<section class="integrations-section" aria-label="Workflows and integrations">
<style>
/* ---------- Integrations Section (Self-contained) ---------- */
.integrations-section {
--bg: #050505;
--panel: #0a0a0a;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.18);
--text: #f7f8f8;
--muted: #8a8f98;
padding: 120px 0;
background: var(--bg);
border-top: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
position: relative;
color: var(--text);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.integrations-section * {
box-sizing: border-box;
}
.integrations-section .int-header {
max-width: 1200px;
margin: 0 auto 60px;
padding: 0 24px;
}
.integrations-section .int-tag {
color: #a0aec0;
font-size: 13px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
letter-spacing: 0.2px;
}
.integrations-section .int-tag .dot {
width: 8px;
height: 8px;
background: #a0aec0;
border-radius: 999px;
opacity: 0.9;
}
.integrations-section .int-header h2 {
font-size: 56px;
line-height: 1.1;
font-weight: 600;
letter-spacing: -2px;
margin: 0 0 22px;
background: linear-gradient(180deg, #ffffff 0%, #aaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.integrations-section .int-header p {
font-size: 20px;
color: var(--muted);
max-width: 520px;
line-height: 1.6;
margin: 0;
}
/* Horizontal Scroll Carousel */
.integrations-section .int-scroll-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 40px;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
}
.integrations-section .int-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.integrations-section .int-track {
display: flex;
gap: 24px;
width: max-content;
padding-right: 24px;
/* left align to container edges on large screens */
padding-left: max(24px, calc(50vw - 600px));
}
.integrations-section .int-card {
min-width: 340px;
height: 480px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
scroll-snap-align: start;
outline: none;
isolation: isolate;
}
.integrations-section .int-card::before {
content: "";
position: absolute;
inset: -1px;
background: radial-gradient(600px 300px at 20% 10%, rgba(94, 106, 210, 0.14), transparent 60%);
opacity: 0;
transition: opacity 0.28s ease;
z-index: 0;
pointer-events: none;
}
.integrations-section .int-card:hover::before,
.integrations-section .int-card:focus-visible::before {
opacity: 1;
}
.integrations-section .int-card:hover,
.integrations-section .int-card:focus-visible {
border-color: var(--border-strong);
transform: translateY(-6px);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
background: #0c0c0c;
}
.integrations-section .int-visual {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.integrations-section .int-info {
position: relative;
z-index: 1;
}
.integrations-section .int-info h3 {
font-size: 18px;
color: #fff;
margin: 0 0 8px;
font-weight: 500;
letter-spacing: -0.2px;
}
.integrations-section .int-info p {
font-size: 15px;
color: #888;
line-height: 1.5;
margin: 0 0 22px;
max-width: 240px;
}
.integrations-section .int-btn {
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-left: auto;
transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
font-size: 16px;
line-height: 1;
user-select: none;
}
.integrations-section .int-card:hover .int-btn,
.integrations-section .int-card:focus-visible .int-btn {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.14);
transform: translateX(2px);
}
/* --- Entrance Animation (JS toggles .in-view) --- */
.integrations-section .int-card {
opacity: 0;
transform: translateY(18px) scale(0.985);
}
.integrations-section .int-card.in-view {
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
/* Card 1: Mobile List Animation */
.integrations-section .mobile-frame {
width: 160px;
height: 260px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 22px;
overflow: hidden;
position: relative;
background: #000;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.integrations-section .mobile-frame::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(220px 140px at 50% 0%, rgba(255, 255, 255, 0.08), transparent 55%);
pointer-events: none;
}
.integrations-section .m-header {
height: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 10px;
position: relative;
}
.integrations-section .m-header::after {
content: "";
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
width: 60px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
}
.integrations-section .m-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 10px 10px;
animation: int-scrollUp 4s linear infinite;
will-change: transform;
}
.integrations-section .m-item {
height: 24px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
width: 100%;
}
.integrations-section .m-item:nth-child(even) {
width: 78%;
opacity: 0.85;
}
.integrations-section .m-item:nth-child(3n) {
width: 92%;
opacity: 0.9;
}
@keyframes int-scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-104px);
}
}
/* Card 2: Orbit Requests (Breathing Logo) */
.integrations-section .req-logo {
width: 108px;
height: 108px;
border: 10px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
position: relative;
animation: int-breathe 3s infinite ease-in-out;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.08);
}
.integrations-section .req-logo::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.14);
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
@keyframes int-breathe {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.10);
}
50% {
box-shadow: 0 0 26px 10px rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.18);
}
}
/* Card 3: Integrations (Orbiting) */
.integrations-section .solar-sys {
position: relative;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.integrations-section .center-hub {
width: 42px;
height: 42px;
background: #fff;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #000;
z-index: 2;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
user-select: none;
}
.integrations-section .orbit-ring {
position: absolute;
width: 100%;
height: 100%;
border: 1px dashed rgba(255, 255, 255, 0.18);
border-radius: 999px;
animation: int-spin 10s linear infinite;
filter: drop-shadow(0 0 18px rgba(94, 106, 210, 0.12));
}
.integrations-section .satellite {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
transform: translate(-50%, -50%);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.integrations-section .s-1 {
top: 0%;
left: 50%;
}
.integrations-section .s-2 {
top: 50%;
left: 100%;
}
.integrations-section .s-3 {
top: 100%;
left: 50%;
}
.integrations-section .s-4 {
top: 50%;
left: 0%;
}
@keyframes int-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Card 4: Design (Floating Isometric Layers) */
.integrations-section .layer-stack {
position: relative;
width: 110px;
height: 110px;
transform: rotateX(60deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.integrations-section .layer {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(0, 0, 0, 0.45);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.integrations-section .l-bottom {
transform: translateZ(0);
opacity: 0.7;
}
.integrations-section .l-top {
transform: translateZ(44px);
border-color: rgba(255, 255, 255, 0.40);
background: rgba(255, 255, 255, 0.04);
animation: int-floatLayer 3s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.integrations-section .l-top::after {
content: "";
position: absolute;
inset: -20%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
transform: translateX(-40%);
animation: int-shimmer 2.6s infinite linear;
}
@keyframes int-floatLayer {
0%,
100% {
transform: translateZ(44px) translateY(0);
}
50% {
transform: translateZ(64px) translateY(-2px);
}
}
@keyframes int-shimmer {
0% {
transform: translateX(-55%);
opacity: 0.6;
}
100% {
transform: translateX(55%);
opacity: 0.6;
}
}
/* Card 5: API (Typing) */
.integrations-section .terminal-win {
width: 200px;
height: 130px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 11px;
line-height: 1.5;
color: rgba(77, 175, 115, 0.95);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.integrations-section .terminal-win::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 54px;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
}
.integrations-section .terminal-win .type-text {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid rgba(77, 175, 115, 0.85);
width: 0;
animation: int-typing 2.2s steps(16, end) infinite alternate;
vertical-align: bottom;
}
@keyframes int-typing {
from {
width: 0;
}
to {
width: 11.8ch;
}
/* "Connecting..." */
}
/* Responsive */
@media (max-width: 900px) {
.integrations-section {
padding: 90px 0;
}
.integrations-section .int-header h2 {
font-size: 42px;
letter-spacing: -1.4px;
}
.integrations-section .int-header p {
font-size: 18px;
}
.integrations-section .int-track {
padding-left: 24px;
}
.integrations-section .int-card {
min-width: 320px;
height: 460px;
}
}
@media (prefers-reduced-motion: reduce) {
.integrations-section .m-list,
.integrations-section .req-logo,
.integrations-section .orbit-ring,
.integrations-section .l-top,
.integrations-section .l-top::after,
.integrations-section .terminal-win .type-text {
animation: none !important;
}
.integrations-section .int-scroll-wrapper {
scroll-behavior: auto;
}
}
</style>
<div class="int-header">
<div class="int-tag"><span class="dot"></span> Workflows and integrations</div>
<h2 class="">Collaborate acrosstools and teams</h2>
<p>
Expand the capabilities of the Orbit system with a wide variety of integrations that keep everyone in your
organization
aligned and focused.
</p>
</div>
<div class="int-scroll-wrapper" role="region" aria-label="Integrations carousel" tabindex="0">
<div class="int-track">
<!-- Card 1: Mobile -->
<div class="int-card" tabindex="0" role="button" aria-label="Orbit Requests" style="transition-delay: 0ms;">
<div class="int-visual">
<div class="mobile-frame" aria-hidden="true">
<div class="m-header"></div>
<div class="m-list">
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
<div class="m-item"></div>
</div>
</div>
</div>
<div class="int-info">
<h3>Orbit Requests</h3>
<p>Turn workplace requests into actionable issues</p>
<div class="int-btn" aria-hidden="true">></div>
</div>
</div>
<!-- Card 2: Orbit Icon -->
<div class="int-card" tabindex="0" role="button" aria-label="Orbit Ecosystem (Requests)" style="transition-delay: 90ms;">
<div class="int-visual">
<div class="req-logo" aria-hidden="true"></div>
</div>
<div class="int-info">
<h3>Orbit Ecosystem</h3>
<p>100+ ways to enhance your Orbit experience</p>
<div class="int-btn" aria-hidden="true">></div>
</div>
</div>
<!-- Card 3: Integrations -->
<div class="int-card" tabindex="0" role="button" aria-label="Orbit Ecosystem (Integrations)" style="transition-delay: 180ms;">
<div class="int-visual">
<div class="solar-sys" aria-hidden="true">
<div class="orbit-ring"></div>
<div class="center-hub">X</div>
<div class="satellite s-1"></div>
<div class="satellite s-2"></div>
<div class="satellite s-3"></div>
<div class="satellite s-4"></div>
</div>
</div>
<div class="int-info">
<h3>Orbit Ecosystem</h3>
<p>100+ ways to enhance your Orbit experience</p>
<div class="int-btn" aria-hidden="true">></div>
</div>
</div>
<!-- Card 4: Design -->
<div class="int-card" tabindex="0" role="button" aria-label="Design Sync" style="transition-delay: 270ms;">
<div class="int-visual">
<div class="layer-stack" aria-hidden="true">
<div class="layer l-bottom"></div>
<div class="layer l-top"></div>
</div>
</div>
<div class="int-info">
<h3>Design Sync</h3>
<p>Bridge the gap between engineering and design</p>
<div class="int-btn" aria-hidden="true">></div>
</div>
</div>
<!-- Card 5: API -->
<div class="int-card" tabindex="0" role="button" aria-label="Orbit API" style="transition-delay: 360ms;">
<div class="int-visual">
<div class="terminal-win" aria-hidden="true">
> Orbit.api.init()
<span class="type-text">Connecting...</span>
</div>
</div>
<div class="int-info">
<h3>Orbit API</h3>
<p>Build your own add-ons with the Orbit API</p>
<div class="int-btn" aria-hidden="true">></div>
</div>
</div>
</div>
</div>
<script>
// Integrations section: entrance animation (stagger) + keyboard helpers
(function () {
const section = document.currentScript && document.currentScript.closest(".integrations-section");
if (!section) return;
const cards = Array.from(section.querySelectorAll(".int-card"));
const wrapper = section.querySelector(".int-scroll-wrapper");
// Stagger in when section enters view
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
cards.forEach((card, i) => {
// add stagger only once
if (card.classList.contains("in-view")) return;
card.style.transitionDelay = (i * 90) + "ms";
card.classList.add("in-view");
});
observer.disconnect();
});
},
{ threshold: 0.22 }
);
observer.observe(section);
// Keyboard: Enter/Space scroll card into view (nice for accessibility)
cards.forEach((card) => {
card.addEventListener("keydown", (e) => {
const key = e.key;
if (key === "Enter" || key === " ") {
e.preventDefault();
card.scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
}
});
});
// Wheel-to-horizontal scroll (trackpad/mouse) for the wrapper
if (wrapper) {
wrapper.addEventListener(
"wheel",
(e) => {
// only hijack if user is trying to scroll vertically over the carousel
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
e.preventDefault();
wrapper.scrollLeft += e.deltaY;
}
},
{ passive: false }
);
}
})();
</script>
</section>
<!-- FOUNDATIONS SECTION (copy/paste as-is into Aura) -->
<section class="foundations-section reveal">
<style>
:root{
--bg-color:#050505;
--panel-bg:#0A0A0A;
--text-main:#F7F8F8;
--text-muted:#8A8F98;
--border-color:rgba(255,255,255,0.08);
--glass-bg:rgba(20,20,22,0.6);
--accent-green:#4DAF73;
--accent-purple:#5E6AD2;
--accent-yellow:#E2B340;
}
/* Basic reset (safe inside section) */
.foundations-section *{ box-sizing:border-box; }
.foundations-section{ background:var(--bg-color); color:var(--text-main); border-top:1px solid rgba(255,255,255,0.05); }
/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.active{ opacity:1; transform:translateY(0); }
/* Layout */
.foundations-section{ padding:140px 0; display:flex; justify-content:center; }
.fnd-container{
width:100%;
max-width:1200px;
padding:0 24px;
display:flex;
gap:80px;
align-items:center;
}
.fnd-content{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.fnd-tag{
color:#888;
font-size:14px;
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:24px;
border:1px solid #333;
padding:6px 12px;
border-radius:999px;
width:max-content;
background:rgba(255,255,255,0.02);
}
.fnd-content h2{
font-size:56px;
font-weight:600;
line-height:1.05;
letter-spacing:-2px;
margin:0 0 18px;
background:linear-gradient(180deg,#fff 0%, #b0b0b0 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fnd-content p{
font-size:18px;
color:#888;
line-height:1.65;
margin:0 0 46px;
max-width:520px;
}
/* Accordion list */
.fnd-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid #222; }
.fnd-item{
padding:22px 0;
border-bottom:1px solid #222;
cursor:pointer;
user-select:none;
}
.fnd-item-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
}
.fnd-item-title{
font-size:18px;
font-weight:500;
color:#9aa0a6;
transition:color .25s ease;
}
.fnd-item-toggle{
width:26px;
height:26px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
color:#666;
border:1px solid rgba(255,255,255,0.08);
background:rgba(255,255,255,0.02);
transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
flex:0 0 auto;
font-size:16px;
line-height:1;
}
.fnd-item-desc{
font-size:15px;
color:#6f7680;
line-height:1.6;
max-width:92%;
overflow:hidden;
max-height:0;
opacity:0;
transform:translateY(-6px);
transition:max-height .35s ease, opacity .25s ease, transform .35s ease;
margin-top:0;
}
.fnd-item:hover .fnd-item-title{ color:#fff; }
.fnd-item.is-open .fnd-item-title{ color:#fff; }
.fnd-item.is-open .fnd-item-desc{
max-height:140px;
opacity:1;
transform:translateY(0);
margin-top:12px;
}
.fnd-item.is-open .fnd-item-toggle{
color:#fff;
border-color:rgba(255,255,255,0.16);
background:rgba(255,255,255,0.06);
transform:rotate(45deg);
}
/* Right visual */
.fnd-visual{
flex:1.2;
height:700px;
position:relative;
border:1px dashed #333;
border-radius:8px;
overflow:hidden;
background-color:#080808;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size:40px 40px;
box-shadow:0 40px 120px rgba(0,0,0,0.6);
}
/* Scan line */
.scan-line{
position:absolute;
top:0;
left:0;
width:100%;
height:2px;
background:rgba(255,255,255,0.22);
box-shadow:0 0 14px rgba(255,255,255,0.45);
animation:scan 4.2s linear infinite;
z-index:1;
}
@keyframes scan{
0%{ top:-2px; opacity:0; }
10%{ opacity:1; }
90%{ opacity:1; }
100%{ top:100%; opacity:0; }
}
/* Modules */
.bp-module{
position:absolute;
border:1px solid #333;
background:rgba(10,10,10,0.78);
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 20px 60px rgba(0,0,0,0.55);
transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease;
z-index:2;
}
.foundations-section:hover .bp-module{ border-color:rgba(255,255,255,0.14); background:rgba(12,12,12,0.85); }
/* Sync module */
.mod-sync{
top:54px;
right:54px;
width:170px;
height:170px;
border-radius:14px;
flex-wrap:wrap;
padding:14px;
gap:8px;
justify-content:flex-start;
align-content:flex-start;
}
.sync-dot{
width:6px;
height:6px;
background:#2a2a2a;
border-radius:50%;
box-shadow:0 0 0 rgba(0,0,0,0);
animation:dotIdle 2.2s ease-in-out infinite;
opacity:.8;
}
@keyframes dotIdle{
0%,100%{ transform:translateY(0); opacity:.65; }
50%{ transform:translateY(-1px); opacity:.95; }
}
.sync-active{
background:var(--accent-green);
box-shadow:0 0 10px rgba(77,175,115,0.55);
animation:blink 1.8s ease-in-out infinite;
opacity:1;
}
@keyframes blink{
0%,100%{ opacity:.35; }
50%{ opacity:1; }
}
/* Scale module */
.mod-scale{
top:280px;
left:70px;
width:220px;
height:160px;
border-radius:14px;
flex-direction:column;
justify-content:center;
gap:10px;
color:#bcbcbc;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.scale-num{
font-size:40px;
letter-spacing:-1px;
color:#e7e7e7;
text-shadow:0 0 18px rgba(94,106,210,0.18);
}
/* Security module */
.mod-sec{
bottom:80px;
right:90px;
width:190px;
height:190px;
border-radius:999px;
}
.sec-icon{
width:74px;
height:74px;
border-radius:20px;
border:1px solid rgba(255,255,255,0.1);
background:
radial-gradient(circle at 30% 25%, rgba(94,106,210,0.25), transparent 55%),
radial-gradient(circle at 70% 75%, rgba(77,175,115,0.18), transparent 55%),
rgba(255,255,255,0.03);
position:relative;
box-shadow:0 20px 60px rgba(0,0,0,0.55);
animation:floatSoft 5.5s ease-in-out infinite;
}
.sec-icon:before{
content:"";
position:absolute;
inset:18px 22px 26px 22px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(0,0,0,0.15);
}
.sec-icon:after{
content:"";
position:absolute;
width:22px;
height:18px;
left:50%;
top:18px;
transform:translateX(-50%);
border-radius:10px 10px 12px 12px;
border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.04);
box-shadow:0 0 0 rgba(0,0,0,0);
}
@keyframes floatSoft{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-10px); }
}
/* Subtle parallax tilt on hover */
.fnd-visual .bp-module{ transform:translateY(0); }
.foundations-section:hover .mod-sync{ transform:translateY(-6px) translateX(2px); }
.foundations-section:hover .mod-scale{ transform:translateY(6px) translateX(-2px); }
.foundations-section:hover .mod-sec{ transform:translateY(-4px); }
/* Responsive */
@media (max-width: 980px){
.fnd-container{ flex-direction:column; gap:44px; align-items:flex-start; }
.fnd-visual{ width:100%; height:520px; }
.fnd-content h2{ font-size:42px; letter-spacing:-1.5px; }
}
@media (max-width: 520px){
.foundations-section{ padding:96px 0; }
.fnd-visual{ height:460px; }
.mod-sync{ right:18px; top:18px; }
.mod-scale{ left:18px; top:220px; width:200px; }
.mod-sec{ right:22px; bottom:22px; width:160px; height:160px; }
}
</style>
<div class="fnd-container">
<div class="fnd-content">
<div class="fnd-tag">Under the hood</div>
<h2>Engineered for velocity</h2>
<p>Orbit handles the complexity so you don't have to. Built on a high-performance architecture with an obsessive focus on speed, safety, and scale.</p>
<div class="fnd-list" role="list">
<div class="fnd-item is-open">
<div class="fnd-item-header">
<div class="fnd-item-title">Orbit Sync Core</div>
<div class="fnd-item-toggle" aria-hidden="true">+</div>
</div>
<div class="fnd-item-desc">Real-time state synchronization across all clients with optimistic updates and offline support.</div>
</div>
<div class="fnd-item">
<div class="fnd-item-header">
<div class="fnd-item-title">Bank-grade Security</div>
<div class="fnd-item-toggle" aria-hidden="true">+</div>
</div>
<div class="fnd-item-desc">SOC 2 Type II compliant, SSO, SAML, and advanced admin controls to keep your work safe.</div>
</div>
<div class="fnd-item">
<div class="fnd-item-header">
<div class="fnd-item-title">Infinite Scalability</div>
<div class="fnd-item-toggle" aria-hidden="true">+</div>
</div>
<div class="fnd-item-desc">From startup to IPO, Orbit scales with your organization to support thousands of active users.</div>
</div>
</div>
</div>
<div class="fnd-visual" aria-hidden="true">
<div class="scan-line"></div>
<div class="bp-module mod-sync">
<div class="sync-dot sync-active"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
<div class="sync-dot"></div>
</div>
<div class="bp-module mod-scale">
<div style="align-self:flex-start; margin-bottom:5px;">+</div>
<div class="scale-num">5,000</div>
<div style="align-self:flex-end;">-</div>
</div>
<div class="bp-module mod-sec">
<div class="sec-icon"></div>
</div>
</div>
</div>
<script>
(function(){
// 1) Reveal on scroll (works even if Aura already has other scripts)
var section = document.currentScript && document.currentScript.closest('.foundations-section');
if (!section) section = document.querySelector('.foundations-section');
var revealTargets = [];
if (section) revealTargets.push(section);
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){
entry.target.classList.add('active');
io.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
revealTargets.forEach(function(el){ io.observe(el); });
} else {
// Fallback
revealTargets.forEach(function(el){ el.classList.add('active'); });
}
// 2) Accordion behavior
if (!section) return;
var items = Array.prototype.slice.call(section.querySelectorAll('.fnd-item'));
function closeAll(exceptEl){
items.forEach(function(it){
if (it !== exceptEl) it.classList.remove('is-open');
});
}
items.forEach(function(item){
item.addEventListener('click', function(){
var isOpen = item.classList.contains('is-open');
closeAll(item);
if (!isOpen) item.classList.add('is-open');
else item.classList.remove('is-open');
});
});
// 3) Gentle number bump animation when revealed
var num = section.querySelector('.scale-num');
if (num) {
var target = 5000;
var started = false;
function runCount(){
if (started) return;
started = true;
var start = 0;
var duration = 900;
var t0 = performance.now();
function tick(now){
var p = Math.min(1, (now - t0) / duration);
// easeOutCubic
var eased = 1 - Math.pow(1 - p, 3);
var val = Math.floor(start + (target - start) * eased);
num.textContent = val.toLocaleString();
if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
if ('IntersectionObserver' in window) {
var io2 = new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(e.isIntersecting){
runCount();
io2.disconnect();
}
});
}, { threshold: 0.3 });
io2.observe(section);
} else {
runCount();
}
}
})();
</script>
</section>
<!-- Vertical Text -->
<div class="absolute bottom-10 left-[-24px] -rotate-90 origin-bottom-left text-[8px] font-mono text-[#222] tracking-[0.3em] uppercase whitespace-nowrap group-hover:text-[#333] transition-colors">
Designed Worldwide
</div>
</div>
<!-- Bottom Border Glow -->
<div class="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
<!-- NEW CREATIVE FOOTER -->
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-12 mt-32 relative z-20">
<!-- Separator -->
<div class="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mb-24"></div>
<!-- Footer Grid -->
<div class="grid grid-cols-2 md:grid-cols-12 gap-12 mb-24">
<!-- Brand Column (Span 4) -->
<div class="col-span-2 md:col-span-4 flex flex-col items-start gap-8">
<a href="#" class="bg-center hover:opacity-100 transition-all duration-300 hover:drop-shadow-[0_0_15px_rgba(255,255,255,0.3)] opacity-80 w-[100px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/22a501b8-fdc0-4b37-85e9-0367b65fcc58_1600w.png)] bg-cover rounded relative"></a>
<p class="text-[#8A8F98] leading-relaxed max-w-xs font-light">
The modern standard for high-velocity software teams. Manage issues, projects, and product roadmaps.
</p>
<!-- Social Icons -->
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-[#8A8F98] hover:text-white hover:bg-white/5 hover:border-white/20 transition-all">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-[#8A8F98] hover:text-white hover:bg-white/5 hover:border-white/20 transition-all">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-[#8A8F98] hover:text-white hover:bg-white/5 hover:border-white/20 transition-all">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
</a>
</div>
</div>
<!-- Links Column 1 -->
<div class="col-span-1 md:col-span-2 flex flex-col gap-4">
<h4 class="font-medium text-white mb-2">Product</h4>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Features</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Roadmap</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Integrations</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Changelog</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Pricing</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Docs</a>
</div>
<!-- Links Column 2 -->
<div class="col-span-1 md:col-span-2 flex flex-col gap-4">
<h4 class="font-medium text-white mb-2">Company</h4>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">About</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Blog</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Careers</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Customers</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Brand</a>
</div>
<!-- Links Column 3 -->
<div class="col-span-1 md:col-span-2 flex flex-col gap-4">
<h4 class="font-medium text-white mb-2">Resources</h4>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Community</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Help Center</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Partners</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Status</a>
<a href="#" class="text-[#8A8F98] text-sm hover:text-white transition-all duration-200 footer-link">Terms</a>
</div>
<!-- Newsletter Widget (Span 2) -->
<div class="col-span-2 md:col-span-2 flex flex-col gap-4">
<h4 class="font-medium text-white mb-2">Subscribe</h4>
<div class="relative group">
<input type="email" placeholder="email@domain.com" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder-white/30 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-all font-mono">
<button class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-md bg-white text-black flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all hover:bg-gray-200">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
<p class="text-xs text-[#666]">Join our newsletter for the latest updates.</p>
</div>
</div>
<!-- Bottom Bar -->
<div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-white/5 text-xs text-[#666] font-mono">
<div class="flex items-center gap-6">
<span class="">© 2024 Axis Inc.</span>
<span class="hidden md:inline">San Francisco, CA</span>
</div>
<div class="flex items-center gap-6 mt-4 md:mt-0">
<div class="flex items-center gap-2 group cursor-pointer">
<div class="relative w-2 h-2">
<div class="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-75"></div>
<div class="relative w-2 h-2 bg-emerald-500 rounded-full"></div>
</div>
<span class="group-hover:text-[#888] transition-colors">All systems normal</span>
</div>
<div class="hidden md:flex items-center gap-2">
<svg width="12" height="12" 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"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
<span>UTC 14:20</span>
</div>
</div>
</div>
<!-- Large Background Text Effect -->
<div class="absolute bottom-[-100px] left-1/2 -translate-x-1/2 select-none pointer-events-none overflow-hidden w-full flex justify-center opacity-[0.03]">
<h1 class="text-[20vw] font-bold tracking-tighter text-white leading-none whitespace-nowrap" style="background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">AXIS</h1>
</div>
</div>
<!-- Script for Interactions -->
<script class="">
// Feature Cards Spotlight
const cards = document.querySelectorAll(".feature-card");
document.addEventListener("mousemove", (e) => {
cards.forEach(card => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
});
});
// Dashboard Straighten on Scroll
const dashboard = document.querySelector('.dashboard-wrapper');
window.addEventListener('scroll', () => {
if (!dashboard) return;
const scrollY = window.scrollY;
const maxScroll = 600;
const progress = Math.min(scrollY / maxScroll, 1);
const startX = 20; const startY = -8; const startZ = 5;
const currentX = startX - (startX * progress);
const currentY = startY - (startY * progress);
const currentZ = startZ - (startZ * progress);
dashboard.style.transform = `rotateX(${currentX}deg) rotateY(${currentY}deg) rotateZ(${currentZ}deg)`;
});
// AI Section Interactive Tilt
const aiWrapper = document.querySelector('.ai-demo-wrapper');
const aiMenu = document.querySelector('.ai-menu-container');
if (aiWrapper && aiMenu) {
aiWrapper.addEventListener('mousemove', (e) => {
const rect = aiWrapper.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -10;
const rotateY = ((x - centerX) / centerX) * 10;
aiMenu.style.transform = `rotateX(${20 + rotateX}deg) rotateY(${rotateY}deg) scale(0.95)`;
aiMenu.style.setProperty('--menu-x', `${x}px`);
aiMenu.style.setProperty('--menu-y', `${y}px`);
});
aiWrapper.addEventListener('mouseleave', () => {
aiMenu.style.transform = `rotateX(20deg) scale(0.95)`;
});
}
// Issue Tracking Parallax (New)
const itSection = document.querySelector('.issue-tracking-section');
const itBoard = document.querySelector('.it-board');
if(itSection && itBoard) {
itSection.addEventListener('mousemove', (e) => {
const rect = itSection.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// Calculate slight tilt based on mouse pos
const centerX = rect.width / 2;
const centerY = rect.height / 2;
// Add to base tilt: rotateX(25deg) rotateY(-15deg) rotateZ(5deg)
const tiltY = ((x - centerX) / centerX) * 5;
const tiltX = ((y - centerY) / centerY) * -5;
itBoard.style.transform = `rotateX(${25 + tiltX}deg) rotateY(${-15 + tiltY}deg) rotateZ(5deg)`;
});
itSection.addEventListener('mouseleave', () => {
itBoard.style.transform = `rotateX(25deg) rotateY(-15deg) rotateZ(5deg)`;
});
}
// Roadmap Parallax
const roadmapSection = document.querySelector('.roadmap-section');
const roadmapPlane = document.querySelector('.roadmap-plane');
if (roadmapSection && roadmapPlane) {
roadmapSection.addEventListener('mousemove', (e) => {
const rect = roadmapSection.getBoundingClientRect();
const x = e.clientX - rect.left;
const moveX = (x / rect.width) * -20;
roadmapPlane.style.transform = `rotateX(60deg) rotateZ(-20deg) scale(1.1) translateX(${moveX}px)`;
});
}
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observerOptions = {
root: null,
rootMargin: '0px 0px -10% 0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
}, observerOptions);
const elements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
elements.forEach(el => observer.observe(el));
});
</script></section>-none</body></html>