Premium
0
60
Synapse
Synapse is a responsive work management template for high-velocity teams, intelligent workflows, productivity tools, and collaboration SaaS products.
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Synapse | Tailwind CSS Work Management SaaS Template</title>
<meta name="description" content="Synapse is a responsive Tailwind CSS work management template for high-velocity teams, intelligent workflows, productivity tools, and collaboration SaaS products.">
<meta name="keywords" content="work management template, productivity SaaS, team collaboration platform, intelligent workspace, workflow dashboard, Tailwind CSS template">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Synapse | Tailwind CSS Work Management SaaS Template">
<meta property="og:description" content="A responsive Tailwind CSS work management template for high-velocity teams, intelligent workflows, productivity tools, and collaboration SaaS products.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Synapse template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Synapse | Tailwind CSS Work Management SaaS Template">
<meta name="twitter:description" content="A responsive Tailwind CSS work management template for high-velocity teams, intelligent workflows, productivity tools, and collaboration SaaS products.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Synapse template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#07090e',
surface: '#0f131a',
card: '#161c26',
line: '#242c3d',
muted: '#8899ac',
submuted: '#506176',
accent: '#2563eb',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
heading: ['Outfit', 'sans-serif'],
},
keyframes: {
pulseDot: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
}
},
animation: {
pulseDot: 'pulseDot 2s infinite ease-in-out',
}
}
}
}
</script>
<style>
body {
background-color: #07090e;
color: #8899ac;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4, .font-heading {
font-family: 'Outfit', sans-serif;
color: #e2e8f0;
}
.nav-link-hover { position: relative; }
.nav-link-hover::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #2563eb;
transition: width 0.3s ease;
}
.nav-link-hover:hover::after { width: 100%; }
.hero-gradient {
background: linear-gradient(135deg, #07090e 0%, #0b1020 50%, #091228 100%);
}
.card-hover-effect { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover-effect:hover { transform: translateY(-5px); }
.feature-card-img { transition: all 0.6s ease; filter: grayscale(100%) brightness(0.8); }
.feature-card:hover .feature-card-img { filter: grayscale(0%) brightness(1); transform: scale(1.05); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="antialiased">
<!-- block:start navbar -->
<nav id="header" class="fixed top-0 w-full z-50 px-6 py-4 flex justify-between items-center bg-ink/80 backdrop-blur-md border-b border-line">
<div class="flex items-center space-x-8">
<a href="#" class="text-xl font-bold tracking-tight text-white flex items-center gap-2">
<div class="w-8 h-8 bg-accent rounded-lg flex items-center justify-center">
<i class="fa-solid fa-circle-nodes text-white text-xs" aria-hidden="true"></i>
</div>
Synapse
</a>
<div class="hidden md:flex items-center space-x-2 text-xs font-medium text-muted">
<span class="w-2 h-2 bg-accent rounded-full animate-pulseDot"></span>
<span id="ticker">Synapse OS</span>
</div>
</div>
<div class="hidden lg:flex items-center space-x-8">
<a href="#product" class="text-sm font-semibold text-white nav-link-hover">Product</a>
<a href="#features" class="text-sm font-semibold text-muted nav-link-hover">Features</a>
<a href="#pricing" class="text-sm font-semibold text-muted nav-link-hover">Pricing</a>
<a href="#integrations" class="text-sm font-semibold text-muted nav-link-hover">Integrations</a>
</div>
<div class="flex items-center space-x-4">
<a href="#pricing" class="hidden sm:inline text-sm font-semibold text-muted hover:text-white transition-colors">Log in</a>
<button class="bg-accent text-white px-6 py-2.5 rounded-full text-sm font-bold hover:shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-all duration-300">Get Started</button>
<button
id="mobile-menu-button"
type="button"
class="lg:hidden w-10 h-10 flex items-center justify-center rounded-xl border border-line text-white hover:bg-surface transition-colors"
aria-label="Open navigation"
aria-expanded="false"
aria-controls="mobile-navigation"
>
<i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>
</div>
<div id="mobile-navigation" class="lg:hidden absolute top-full right-6 mt-2 w-64 p-3 bg-card border border-line rounded-2xl shadow-2xl" hidden>
<a href="#product" class="block px-4 py-3 rounded-xl text-sm font-semibold text-white hover:bg-surface transition-colors">Product</a>
<a href="#features" class="block px-4 py-3 rounded-xl text-sm font-semibold text-muted hover:bg-surface hover:text-white transition-colors">Features</a>
<a href="#pricing" class="block px-4 py-3 rounded-xl text-sm font-semibold text-muted hover:bg-surface hover:text-white transition-colors">Pricing</a>
<a href="#integrations" class="block px-4 py-3 rounded-xl text-sm font-semibold text-muted hover:bg-surface hover:text-white transition-colors">Integrations</a>
<a href="#pricing" class="block px-4 py-3 rounded-xl text-sm font-semibold text-muted hover:bg-surface hover:text-white transition-colors">Log in</a>
</div>
</nav>
<!-- block:end navbar -->
<main>
<!-- block:start hero -->
<section id="product" class="relative min-h-[900px] flex items-center pt-32 pb-20 px-6 overflow-hidden hero-gradient">
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
<div class="space-y-10 z-10">
<h1 class="text-6xl lg:text-8xl font-bold leading-[0.95] tracking-tight text-white">
From Friction<br><span class="text-accent italic font-light">to Flow:</span><br>The OS for<br>High-Velocity Teams
</h1>
<p class="text-xl text-muted max-w-lg leading-relaxed">
Synapse is the first intelligent workspace that predicts your team's needs before you do. Unified, fast, and remarkably intuitive.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-accent text-white px-10 py-5 rounded-full font-bold text-lg hover:shadow-[0_0_30px_rgba(37,99,235,0.5)] transition-all">Start Free Trial</button>
<button class="border border-line text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-surface transition-colors">Book a Demo</button>
</div>
<div class="pt-8 flex items-center space-x-6 text-[10px] font-black uppercase tracking-[0.2em] text-submuted">
<span>Efficiency +24%</span>
<div class="w-1 h-1 bg-accent rounded-full"></div>
<span>Growth +18%</span>
<div class="w-1 h-1 bg-accent rounded-full"></div>
<span>Focus +30%</span>
</div>
</div>
<div class="relative h-[700px] hidden lg:flex items-center">
<div class="absolute -inset-10 bg-accent/20 blur-[100px] rounded-full"></div>
<div
class="relative w-full [transform:perspective(1800px)_rotateY(-9deg)_rotateX(3deg)]"
role="img"
aria-label="Synapse dashboard preview showing project velocity analytics, sprint metrics, and team workload charts"
>
<div class="rounded-[2rem] bg-card/80 border border-line backdrop-blur-xl overflow-hidden shadow-[0_45px_80px_-25px_rgba(0,0,0,0.8)]">
<div class="h-14 px-5 flex items-center justify-between bg-surface/80 border-b border-line">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-line"></div>
<div class="w-3 h-3 rounded-full bg-line"></div>
<div class="w-3 h-3 rounded-full bg-line"></div>
</div>
<div class="flex items-center gap-3">
<div class="h-7 w-44 rounded-full bg-ink border border-line"></div>
<div class="w-7 h-7 rounded-full bg-accent/30 border border-accent/40"></div>
</div>
</div>
<div class="grid grid-cols-12">
<div class="col-span-3 p-5 space-y-1 border-r border-line">
<div class="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-accent/15 border border-accent/30">
<i class="fa-solid fa-chart-simple text-accent text-xs"></i>
<div class="h-2 w-14 rounded-full bg-accent/60"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2.5">
<i class="fa-solid fa-layer-group text-submuted text-xs"></i>
<div class="h-2 w-20 rounded-full bg-line"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2.5">
<i class="fa-solid fa-bolt text-submuted text-xs"></i>
<div class="h-2 w-16 rounded-full bg-line"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2.5">
<i class="fa-solid fa-users text-submuted text-xs"></i>
<div class="h-2 w-24 rounded-full bg-line"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2.5">
<i class="fa-solid fa-gear text-submuted text-xs"></i>
<div class="h-2 w-14 rounded-full bg-line"></div>
</div>
<div class="pt-4 mt-4 border-t border-line space-y-3">
<div class="h-2 w-20 rounded-full bg-line/60"></div>
<div class="h-2 w-16 rounded-full bg-line/60"></div>
</div>
</div>
<div class="col-span-9 p-5 space-y-4">
<div class="grid grid-cols-3 gap-3">
<div class="p-4 rounded-2xl bg-surface border border-line">
<p class="text-[9px] font-black uppercase tracking-[0.15em] text-submuted mb-2">Velocity</p>
<p class="text-xl font-bold text-white">+12%</p>
</div>
<div class="p-4 rounded-2xl bg-surface border border-line">
<p class="text-[9px] font-black uppercase tracking-[0.15em] text-submuted mb-2">Efficiency</p>
<p class="text-xl font-bold text-white">+24%</p>
</div>
<div class="p-4 rounded-2xl bg-accent/10 border border-accent/30">
<p class="text-[9px] font-black uppercase tracking-[0.15em] text-accent/80 mb-2">Focus</p>
<p class="text-xl font-bold text-white">+30%</p>
</div>
</div>
<div class="p-5 rounded-2xl bg-surface border border-line">
<div class="flex items-center justify-between mb-6">
<div class="h-2 w-28 rounded-full bg-line"></div>
<div class="h-2 w-12 rounded-full bg-accent/40"></div>
</div>
<div class="flex items-end gap-2 h-48">
<div class="flex-1 h-[38%] rounded-t-lg bg-accent/20"></div>
<div class="flex-1 h-[55%] rounded-t-lg bg-accent/30"></div>
<div class="flex-1 h-[44%] rounded-t-lg bg-accent/25"></div>
<div class="flex-1 h-[68%] rounded-t-lg bg-accent/40"></div>
<div class="flex-1 h-[58%] rounded-t-lg bg-accent/35"></div>
<div class="flex-1 h-[86%] rounded-t-lg bg-accent shadow-[0_0_20px_rgba(37,99,235,0.5)]"></div>
<div class="flex-1 h-[72%] rounded-t-lg bg-accent/50"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="p-4 rounded-2xl bg-surface border border-line space-y-3">
<div class="h-2 w-16 rounded-full bg-line"></div>
<div class="h-2 w-24 rounded-full bg-line/60"></div>
</div>
<div class="p-4 rounded-2xl bg-surface border border-line space-y-3">
<div class="h-2 w-20 rounded-full bg-line"></div>
<div class="h-2 w-14 rounded-full bg-line/60"></div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute -left-10 top-40 flex items-center gap-3 px-4 py-3 rounded-2xl bg-card/90 border border-line backdrop-blur-md shadow-2xl">
<div class="w-9 h-9 rounded-xl bg-accent/15 border border-accent/30 flex items-center justify-center">
<i class="fa-solid fa-arrow-trend-up text-accent text-sm"></i>
</div>
<div>
<p class="text-[9px] font-black uppercase tracking-[0.15em] text-submuted">Sprint Health</p>
<p class="text-sm font-bold text-white">On track</p>
</div>
</div>
<div class="absolute -right-4 bottom-24 flex items-center gap-3 px-4 py-3 rounded-2xl bg-card/90 border border-line backdrop-blur-md shadow-2xl">
<svg class="w-11 h-11 -rotate-90" viewBox="0 0 36 36" aria-hidden="true">
<circle cx="18" cy="18" r="15.5" fill="none" stroke="#242c3d" stroke-width="4"></circle>
<circle cx="18" cy="18" r="15.5" fill="none" stroke="#2563eb" stroke-width="4" stroke-linecap="round" stroke-dasharray="97.4" stroke-dashoffset="26.3"></circle>
</svg>
<div>
<p class="text-[9px] font-black uppercase tracking-[0.15em] text-submuted">Capacity</p>
<p class="text-sm font-bold text-white">73%</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start clients -->
<section id="logo-cloud" class="py-20 bg-ink border-y border-line">
<div class="max-w-7xl mx-auto px-6">
<p class="text-center text-xs font-black uppercase tracking-[0.3em] mb-16 text-submuted">Orchestrating growth for the world's best</p>
<div class="flex flex-wrap justify-center items-center gap-12 md:gap-20 opacity-40">
<div class="flex items-center gap-3 text-2xl font-bold text-white grayscale hover:grayscale-0 transition-all cursor-pointer">
<i class="fa-brands fa-stripe"></i> stripe
</div>
<div class="flex items-center gap-3 text-2xl font-bold text-white grayscale hover:grayscale-0 transition-all cursor-pointer">
<i class="fa-brands fa-airbnb"></i> airbnb
</div>
<div class="flex items-center gap-3 text-2xl font-bold text-white grayscale hover:grayscale-0 transition-all cursor-pointer">
<i class="fa-brands fa-spotify"></i> Spotify
</div>
<div class="flex items-center gap-3 text-2xl font-bold text-white grayscale hover:grayscale-0 transition-all cursor-pointer">
<i class="fa-brands fa-intercom"></i> Intercom
</div>
<div class="flex items-center gap-3 text-2xl font-bold text-white grayscale hover:grayscale-0 transition-all cursor-pointer">
<i class="fa-brands fa-slack"></i> slack
</div>
</div>
</div>
</section>
<!-- block:end clients -->
<!-- block:start features -->
<section id="features" class="py-32 bg-ink">
<div class="max-w-7xl mx-auto px-6">
<div class="max-w-3xl mb-24">
<span class="text-accent font-black uppercase tracking-widest text-xs mb-4 block">Core Engine</span>
<h2 class="text-5xl lg:text-7xl font-bold mb-8 tracking-tight">Smarter Ways to<br>Manage Complexity</h2>
<p class="text-xl text-muted leading-relaxed">Stop managing tools and start delivering value. Synapse provides the cognitive infrastructure for your entire organization.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-card rounded-[2rem] p-10 border border-line hover:border-accent/50 transition-all group">
<div class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-8 border border-line group-hover:bg-accent/10 transition-colors">
<i class="fa-solid fa-brain text-accent text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Intelligent Sprints</h3>
<p class="text-muted leading-relaxed">Auto-balancing workloads based on historical team velocity and individual capacity.</p>
</div>
<div class="bg-accent rounded-[2rem] p-10 border border-accent shadow-[0_20px_50px_rgba(37,99,235,0.3)] group">
<div class="w-14 h-14 bg-white/10 rounded-2xl flex items-center justify-center mb-8 border border-white/20">
<i class="fa-solid fa-mobile-screen text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4 text-white">Omni-Sync</h3>
<p class="text-white/80 leading-relaxed">True real-time collaboration across web, desktop, and mobile with zero latency.</p>
</div>
<div class="bg-card rounded-[2rem] p-10 border border-line hover:border-accent/50 transition-all group">
<div class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-8 border border-line group-hover:bg-accent/10 transition-colors">
<i class="fa-solid fa-bolt text-accent text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Focus Mode</h3>
<p class="text-muted leading-relaxed">Smart notification filtering that understands when you're in deep work territory.</p>
</div>
<div class="bg-card rounded-[2rem] p-10 border border-line hover:border-accent/50 transition-all group">
<div class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-8 border border-line group-hover:bg-accent/10 transition-colors">
<i class="fa-solid fa-sparkles text-accent text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">AI Copilot</h3>
<p class="text-muted leading-relaxed">Drafting updates, summarizing threads, and predicting blockers before they happen.</p>
</div>
</div>
</div>
</section>
<!-- block:end features -->
<!-- block:start features-2 -->
<section id="detailed-features" class="py-32 bg-surface border-y border-line">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-24 items-center mb-32">
<div class="order-2 lg:order-1">
<div class="relative">
<div class="absolute -inset-4 bg-accent/20 blur-3xl rounded-full"></div>
<div class="relative bg-card rounded-3xl border border-line p-2 overflow-hidden shadow-2xl">
<img class="w-full h-auto rounded-2xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_721f3f9da8_99cf2c7e245f29a2.png" alt="Synapse dark mode dashboard showing a multi-currency payment ledger with financial analytics charts" />
</div>
</div>
</div>
<div class="order-1 lg:order-2 space-y-8">
<h2 class="text-4xl lg:text-6xl font-bold tracking-tight">Global Operations,<br>Localized Control.</h2>
<p class="text-xl text-muted leading-relaxed">Manage teams, payments, and assets across 120 countries. Synapse handles the complexity of global infrastructure so you can focus on building.</p>
<ul class="space-y-4">
<li class="flex items-center gap-3 text-white font-medium">
<i class="fa-solid fa-circle-check text-accent"></i> Real-time currency conversion
</li>
<li class="flex items-center gap-3 text-white font-medium">
<i class="fa-solid fa-circle-check text-accent"></i> Local compliance automation
</li>
<li class="flex items-center gap-3 text-white font-medium">
<i class="fa-solid fa-circle-check text-accent"></i> Unified asset management
</li>
</ul>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-24 items-center">
<div class="space-y-8">
<h2 class="text-4xl lg:text-6xl font-bold tracking-tight">Your Workflow,<br>Your Rules.</h2>
<p class="text-xl text-muted leading-relaxed">Build custom dashboards and automated sequences without writing a single line of code. Synapse is as flexible as your imagination.</p>
<div class="grid grid-cols-2 gap-6 pt-4">
<div class="p-6 bg-card rounded-2xl border border-line">
<p class="text-white font-bold text-3xl mb-2">400+</p>
<p class="text-xs text-submuted uppercase tracking-widest font-black">Ready Widgets</p>
</div>
<div class="p-6 bg-card rounded-2xl border border-line">
<p class="text-white font-bold text-3xl mb-2">12k+</p>
<p class="text-xs text-submuted uppercase tracking-widest font-black">Automations</p>
</div>
</div>
</div>
<div class="relative">
<div class="relative bg-card rounded-3xl border border-line p-2 overflow-hidden shadow-2xl">
<img class="w-full h-auto rounded-2xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_95d95bfef7_7aac56efa3b54d8c.png" alt="Synapse drag-and-drop dashboard builder interface with configurable widgets and data visualizations" />
</div>
</div>
</div>
</div>
</section>
<!-- block:end features-2 -->
<!-- block:start integrations -->
<section id="integrations" class="py-32 bg-ink">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-4xl lg:text-6xl font-bold mb-8 tracking-tight">Works with everything you use</h2>
<p class="text-xl text-muted max-w-2xl mx-auto mb-16">Connect Synapse with your existing stack in minutes. 200+ native integrations and a robust API.</p>
<div class="grid grid-cols-3 md:grid-cols-6 gap-4">
<div class="aspect-square bg-card rounded-2xl border border-line flex items-center justify-center p-6 grayscale hover:grayscale-0 hover:border-accent transition-all cursor-pointer group">
<i class="fa-brands fa-slack text-4xl group-hover:scale-110 transition-transform"></i>
</div>
<div class="aspect-square bg-card rounded-2xl border border-line flex items-center justify-center p-6 grayscale hover:grayscale-0 hover:border-accent transition-all cursor-pointer group">
<i class="fa-brands fa-github text-4xl group-hover:scale-110 transition-transform"></i>
</div>
<div class="aspect-square bg-card rounded-2xl border border-line flex items-center justify-center p-6 grayscale hover:grayscale-0 hover:border-accent transition-all cursor-pointer group">
<i class="fa-brands fa-notion text-4xl group-hover:scale-110 transition-transform"></i>
</div>
<div class="aspect-square bg-card rounded-2xl border border-line flex items-center justify-center p-6 grayscale hover:grayscale-0 hover:border-accent transition-all cursor-pointer group">
<i class="fa-brands fa-figma text-4xl group-hover:scale-110 transition-transform"></i>
</div>
<div class="aspect-square bg-card rounded-2xl border border-line flex items-center justify-center p-6 grayscale hover:grayscale-0 hover:border-accent transition-all cursor-pointer group">
<i class="fa-brands fa-google-drive text-4xl group-hover:scale-110 transition-transform"></i>
</div>
<div class="aspect-square bg-card rounded-2xl border border-line flex items-center justify-center p-6 grayscale hover:grayscale-0 hover:border-accent transition-all cursor-pointer group">
<i class="fa-brands fa-jira text-4xl group-hover:scale-110 transition-transform"></i>
</div>
</div>
</div>
</section>
<!-- block:end integrations -->
<!-- block:start pricing -->
<section id="pricing" class="py-32 bg-ink border-t border-line">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-4xl lg:text-7xl font-bold mb-8 tracking-tight text-white">Pricing for teams of all sizes</h2>
<div class="flex items-center justify-center gap-4 mb-20">
<span id="monthly-label" class="text-muted font-bold transition-colors">Monthly</span>
<button
id="billing-toggle"
type="button"
role="switch"
aria-checked="true"
aria-labelledby="monthly-label yearly-label"
class="relative w-14 h-8 bg-accent rounded-full p-1"
>
<span class="block w-6 h-6 bg-white rounded-full translate-x-6 transition-transform duration-200"></span>
</button>
<span id="yearly-label" class="text-white font-bold transition-colors">Yearly <span class="text-accent text-xs ml-2">Save 20%</span></span>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-card rounded-[2.5rem] p-12 border border-line text-left flex flex-col justify-between hover:border-accent/30 transition-all">
<div>
<h3 class="text-2xl font-bold mb-2">Pro Plan</h3>
<p class="text-muted mb-8">Perfect for fast-moving startups.</p>
<div class="flex items-baseline gap-2 mb-8">
<span id="pro-price" class="text-6xl font-black text-white" data-monthly="299" data-yearly="239">$239</span>
<span class="text-muted">/month</span>
</div>
<ul class="space-y-4 mb-12">
<li class="flex items-center gap-3 text-muted">
<i class="fa-solid fa-check text-accent"></i> Unlimited projects & tasks
</li>
<li class="flex items-center gap-3 text-muted">
<i class="fa-solid fa-check text-accent"></i> AI-powered workflow builder
</li>
<li class="flex items-center gap-3 text-muted">
<i class="fa-solid fa-check text-accent"></i> Global team management
</li>
</ul>
</div>
<button class="w-full py-5 bg-accent text-white rounded-2xl font-bold text-lg hover:shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-all">Start 14-day Trial</button>
</div>
<div class="bg-surface rounded-[2.5rem] p-12 border border-line text-left flex flex-col justify-between hover:border-white/10 transition-all relative overflow-hidden">
<div class="absolute top-0 right-0 p-8 opacity-10">
<i class="fa-solid fa-building text-[120px]"></i>
</div>
<div>
<h3 class="text-2xl font-bold mb-2 text-white">Enterprise Plan</h3>
<p class="text-muted mb-8">Scale with confidence and security.</p>
<div class="flex items-baseline gap-2 mb-8">
<span class="text-6xl font-black text-white">Custom</span>
</div>
<ul class="space-y-4 mb-12">
<li class="flex items-center gap-3 text-muted">
<i class="fa-solid fa-check text-white"></i> Everything in Pro, unlimited
</li>
<li class="flex items-center gap-3 text-muted">
<i class="fa-solid fa-check text-white"></i> Dedicated success manager
</li>
<li class="flex items-center gap-3 text-muted">
<i class="fa-solid fa-check text-white"></i> SSO & Advanced Security
</li>
</ul>
</div>
<button class="w-full py-5 bg-white text-ink rounded-2xl font-bold text-lg hover:bg-slate-100 transition-all">Contact Sales</button>
</div>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start reviews -->
<section id="testimonials" class="py-32 bg-ink">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-4xl lg:text-6xl font-bold mb-20 text-center tracking-tight">Loved by high-velocity teams</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-card p-8 rounded-3xl border border-line">
<div class="flex text-accent gap-1 mb-6">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-lg text-white mb-8 italic">"Synapse has completely changed the way our engineering team operates. The speed and clarity are unmatched."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-12 h-12 rounded-full border border-line" alt="Maya Fernandes">
<div>
<p class="text-white font-bold">Maya Fernandes</p>
<p class="text-sm text-submuted">VP Engineering, Velo</p>
</div>
</div>
</div>
<div class="bg-card p-8 rounded-3xl border border-line">
<div class="flex text-accent gap-1 mb-6">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-lg text-white mb-8 italic">"The transition was seamless. We migrated 500+ projects in a weekend. The support is world-class."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-12 h-12 rounded-full border border-line" alt="Daniel Cooper">
<div>
<p class="text-white font-bold">Daniel Cooper</p>
<p class="text-sm text-submuted">Operations Head, Spark</p>
</div>
</div>
</div>
<div class="bg-card p-8 rounded-3xl border border-line">
<div class="flex text-accent gap-1 mb-6">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-lg text-white mb-8 italic">"Finally, a tool that gets out of the way and lets designers and devs speak the same language."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-12 h-12 rounded-full border border-line" alt="Sarah Chen">
<div>
<p class="text-white font-bold">Sarah Chen</p>
<p class="text-sm text-submuted">Lead Designer, PixelBox</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start faq -->
<section id="faq" class="py-32 bg-surface border-y border-line">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-4xl font-bold mb-16 text-center text-white">Your questions answered</h2>
<div class="space-y-4">
<details class="group bg-card rounded-2xl border border-line open:border-accent transition-all overflow-hidden">
<summary class="flex justify-between items-center p-8 cursor-pointer list-none">
<span class="text-xl font-bold text-white">Is there a limit on team size?</span>
<i class="fa-solid fa-chevron-down text-accent group-open:rotate-180 transition-transform"></i>
</summary>
<div class="px-8 pb-8 text-muted leading-relaxed">No, Synapse is built to scale from a team of 2 to an enterprise of 20,000. Our infrastructure is elastic and adjusts to your needs.</div>
</details>
<details class="group bg-card rounded-2xl border border-line open:border-accent transition-all overflow-hidden">
<summary class="flex justify-between items-center p-8 cursor-pointer list-none">
<span class="text-xl font-bold text-white">How secure is my data?</span>
<i class="fa-solid fa-chevron-down text-accent group-open:rotate-180 transition-transform"></i>
</summary>
<div class="px-8 pb-8 text-muted leading-relaxed">We use AES-256 encryption at rest and TLS 1.3 in transit. We are SOC 2 Type II, GDPR, and ISO 27001 compliant.</div>
</details>
<details class="group bg-card rounded-2xl border border-line open:border-accent transition-all overflow-hidden">
<summary class="flex justify-between items-center p-8 cursor-pointer list-none">
<span class="text-xl font-bold text-white">Can we host Synapse on-premise?</span>
<i class="fa-solid fa-chevron-down text-accent group-open:rotate-180 transition-transform"></i>
</summary>
<div class="px-8 pb-8 text-muted leading-relaxed">Yes, for Enterprise customers we offer private cloud and on-premise deployments. Contact sales for more details.</div>
</details>
</div>
</div>
</section>
<!-- block:end faq -->
<!-- block:start cta -->
<section id="cta-banner" class="py-40 bg-accent relative overflow-hidden text-center px-6">
<div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
<div class="absolute -top-1/2 -left-1/4 w-full h-full bg-white rounded-full blur-[120px]"></div>
<div class="absolute -bottom-1/2 -right-1/4 w-full h-full bg-white rounded-full blur-[120px]"></div>
</div>
<div class="max-w-7xl mx-auto relative z-10">
<h2 class="text-6xl lg:text-9xl font-black text-white mb-12 tracking-tighter">Accelerate Your<br>Delivery Velocity.</h2>
<div class="flex flex-wrap justify-center gap-6">
<button class="bg-white text-accent px-12 py-6 rounded-2xl text-xl font-bold hover:scale-105 transition-transform shadow-2xl">Start for Free</button>
<button class="bg-ink text-white px-12 py-6 rounded-2xl text-xl font-bold hover:bg-slate-900 transition-all">Schedule Demo</button>
</div>
</div>
</section>
<!-- block:end cta -->
</main>
<!-- block:start footer -->
<footer id="footer" class="bg-ink pt-32 pb-12 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 lg:grid-cols-6 gap-12 mb-32">
<div class="col-span-2 lg:col-span-2">
<a href="#" class="text-2xl font-bold text-white mb-8 block">Synapse</a>
<p class="text-muted leading-relaxed mb-8 max-w-xs">The operating system for modern high-growth teams. Plan, track, and deliver with total clarity.</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full border border-line flex items-center justify-center text-muted hover:text-accent transition-colors"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="w-10 h-10 rounded-full border border-line flex items-center justify-center text-muted hover:text-accent transition-colors"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" class="w-10 h-10 rounded-full border border-line flex items-center justify-center text-muted hover:text-accent transition-colors"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<div>
<h3 class="text-white font-bold mb-6">Platform</h3>
<ul class="space-y-4 text-sm font-medium text-muted">
<li><a href="#" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#" class="hover:text-white transition-colors">Integrations</a></li>
<li><a href="#" class="hover:text-white transition-colors">Solutions</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-6">Resources</h3>
<ul class="space-y-4 text-sm font-medium text-muted">
<li><a href="#" class="hover:text-white transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-white transition-colors">Academy</a></li>
<li><a href="#" class="hover:text-white transition-colors">API Status</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-6">Company</h3>
<ul class="space-y-4 text-sm font-medium text-muted">
<li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors">Press</a></li>
<li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-6">Legal</h3>
<ul class="space-y-4 text-sm font-medium text-muted">
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors">Cookies</a></li>
<li><a href="#" class="hover:text-white transition-colors">Security</a></li>
</ul>
</div>
</div>
<div class="pt-12 border-t border-line flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-submuted text-xs font-bold uppercase tracking-widest">© 2026 Synapse Inc. All rights reserved.</p>
<p class="text-submuted text-xs font-bold uppercase tracking-widest flex items-center gap-2">Designed with <i class="fa-solid fa-heart text-accent"></i> for teams</p>
</div>
</div>
</footer>
<!-- block:end footer -->
<script>
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileNavigation = document.getElementById('mobile-navigation');
function setMobileMenu(open) {
mobileMenuButton.setAttribute('aria-expanded', String(open));
mobileMenuButton.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
mobileNavigation.hidden = !open;
}
mobileMenuButton.addEventListener('click', () => {
setMobileMenu(mobileMenuButton.getAttribute('aria-expanded') !== 'true');
});
mobileNavigation.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => setMobileMenu(false));
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') setMobileMenu(false);
});
document.addEventListener('click', (event) => {
if (!document.getElementById('header').contains(event.target)) setMobileMenu(false);
});
window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) setMobileMenu(false);
});
const phrases = ['Synapse OS', 'Velocity +12%', 'Efficiency +24%', 'Focus +30%'];
let phraseIndex = 0;
const ticker = document.getElementById('ticker');
setInterval(() => {
phraseIndex = (phraseIndex + 1) % phrases.length;
ticker.style.opacity = '0';
setTimeout(() => {
ticker.textContent = phrases[phraseIndex];
ticker.style.opacity = '1';
}, 300);
}, 3000);
const billingToggle = document.getElementById('billing-toggle');
const billingThumb = billingToggle.querySelector('span');
const monthlyLabel = document.getElementById('monthly-label');
const yearlyLabel = document.getElementById('yearly-label');
const proPrice = document.getElementById('pro-price');
billingToggle.addEventListener('click', () => {
const yearly = billingToggle.getAttribute('aria-checked') !== 'true';
billingToggle.setAttribute('aria-checked', String(yearly));
billingThumb.classList.toggle('translate-x-6', yearly);
monthlyLabel.classList.toggle('text-white', !yearly);
monthlyLabel.classList.toggle('text-muted', yearly);
yearlyLabel.classList.toggle('text-white', yearly);
yearlyLabel.classList.toggle('text-muted', !yearly);
proPrice.textContent = `$${yearly ? proPrice.dataset.yearly : proPrice.dataset.monthly}`;
});
</script>
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access
