saas glass glassmorphism dark app chat macos gradient blobs pricing testimonials dark
SaaS Glass Landing
Dark glassmorphic SaaS app landing with animated gradient blobs, glass cards, chat mockup, and pricing.
dark Responsive Animated
Live Preview
Sections
navbarherologosfeaturesstatstestimonialspricingctafooter
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nebula — Modern Chat for Focused Teams</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--blob-duration: 14s;
}
/* ── Gradient blobs ── */
.blob {
position: absolute;
border-radius: 9999px;
filter: blur(80px);
pointer-events: none;
}
.blob-a {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(124,58,237,0.55), transparent 70%);
top: -200px; left: -100px;
animation: float-a var(--blob-duration) ease-in-out infinite;
}
.blob-b {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(219,39,119,0.45), transparent 70%);
top: 100px; right: -80px;
animation: float-b calc(var(--blob-duration) * 1.3) ease-in-out infinite;
}
.blob-c {
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%);
bottom: -80px; left: 40%;
animation: float-a calc(var(--blob-duration) * 0.85) ease-in-out infinite reverse;
}
@keyframes float-a {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(50px, -70px) scale(1.08); }
66% { transform: translate(-40px, 40px) scale(0.96); }
}
@keyframes float-b {
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-60px, 50px) scale(1.06); }
75% { transform: translate(30px, -30px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
.blob { animation: none; }
}
/* ── Glass ── */
.glass {
background: rgba(255,255,255,0.055);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.1);
}
.glass-strong {
background: rgba(255,255,255,0.09);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(255,255,255,0.14);
}
/* ── Gradient text ── */
.grad-text {
background: linear-gradient(135deg, #c4b5fd 0%, #f472b6 45%, #fb923c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.grad-text-blue {
background: linear-gradient(135deg, #818cf8, #60a5fa);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Glow button ── */
.btn-glow {
background: linear-gradient(135deg, #7c3aed, #db2777);
box-shadow: 0 0 28px rgba(124,58,237,0.5), 0 0 8px rgba(219,39,119,0.3);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-glow:hover {
box-shadow: 0 0 40px rgba(124,58,237,0.7), 0 0 16px rgba(219,39,119,0.5);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.btn-glow { transition: none; }
.btn-glow:hover { transform: none; }
}
/* ── App mockup ── */
.mockup-wrap {
perspective: 1200px;
}
.mockup-inner {
transform: rotateX(8deg) rotateY(-4deg);
transition: transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
.mockup-inner { transform: none; }
}
/* ── Feature card hover ── */
.feat-card {
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.feat-card:hover {
background: rgba(255,255,255,0.09);
border-color: rgba(255,255,255,0.18);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.feat-card { transition: none; }
.feat-card:hover { transform: none; }
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
</style>
</head>
<body class="bg-[#06061a] text-white antialiased overflow-x-hidden">
<!-- Navigation -->
<header class="fixed top-0 inset-x-0 z-50 flex justify-center px-4 pt-4">
<nav class="glass rounded-2xl w-full max-w-5xl px-5 h-12 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-md bg-gradient-to-br from-violet-500 to-pink-500 flex items-center justify-center" aria-hidden="true">
<svg class="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"/><path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"/></svg>
</div>
<span class="text-sm font-semibold text-white">Nebula</span>
</div>
<ul class="hidden md:flex items-center gap-6 text-sm text-white/60">
<li><a href="#features" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#love" class="hover:text-white transition-colors">Customers</a></li>
<li><a href="#security" class="hover:text-white transition-colors">Security</a></li>
<li><a href="#pricing" class="hover:text-white transition-colors">Pricing</a></li>
</ul>
<div class="flex items-center gap-2.5">
<a href="#" class="hidden md:block text-sm text-white/60 hover:text-white transition-colors">Log in</a>
<a href="#" class="text-xs font-medium bg-white text-[#06061a] px-3.5 py-1.5 rounded-lg hover:bg-white/90 transition-colors">Download</a>
</div>
</nav>
</header>
<!-- Hero -->
<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16 px-4">
<!-- Background blobs -->
<div class="blob blob-a" aria-hidden="true"></div>
<div class="blob blob-b" aria-hidden="true"></div>
<div class="blob blob-c" aria-hidden="true"></div>
<!-- Badge -->
<div class="relative z-10 glass rounded-full px-3.5 py-1 text-xs text-white/70 flex items-center gap-2 mb-8">
<span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" aria-hidden="true"></span>
Now available on macOS — <span class="text-violet-300 font-medium">Download free</span>
</div>
<!-- Heading -->
<div class="relative z-10 text-center max-w-3xl">
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold leading-[1.06] tracking-tight mb-6">
The modern chat app<br>for <span class="grad-text">focused teams</span>
</h1>
<p class="text-lg text-white/55 max-w-xl mx-auto mb-10 leading-relaxed">
End-to-end encrypted channels, threaded conversations, and zero-distraction focus modes — built natively for macOS.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-3">
<a href="#" class="btn-glow text-sm font-semibold text-white px-6 py-3 rounded-xl">
Download for macOS
</a>
<a href="#features" class="glass text-sm text-white/70 px-6 py-3 rounded-xl hover:bg-white/10 transition-colors">
See how it works
</a>
</div>
<p class="text-xs text-white/30 mt-4">Free forever · No credit card · macOS 13+</p>
</div>
<!-- App Mockup -->
<div class="relative z-10 w-full max-w-4xl mt-16 mockup-wrap" role="img" aria-label="Nebula app interface preview">
<div class="mockup-inner">
<div class="glass-strong rounded-2xl overflow-hidden shadow-[0_40px_120px_rgba(0,0,0,0.6)]">
<!-- Title bar -->
<div class="bg-white/5 border-b border-white/10 px-4 h-9 flex items-center gap-2">
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-red-400/80" aria-hidden="true"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-400/80" aria-hidden="true"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-400/80" aria-hidden="true"></div>
</div>
<div class="flex-1 flex justify-center">
<div class="glass rounded px-3 py-0.5 text-[10px] text-white/40 w-36 text-center">Nebula</div>
</div>
</div>
<div class="flex h-80">
<!-- Sidebar -->
<aside class="w-52 border-r border-white/8 bg-white/3 flex flex-col flex-shrink-0 p-3 gap-1" aria-hidden="true">
<div class="text-[9px] font-semibold text-white/30 uppercase tracking-widest px-2 mb-1">Channels</div>
<div class="flex items-center gap-2 px-2 py-1 rounded-lg bg-violet-500/20 border border-violet-500/30">
<span class="text-[10px] text-violet-300">#</span>
<span class="text-[10px] text-white/80 truncate">product-launch</span>
<span class="ml-auto w-4 h-4 rounded-full bg-violet-500/60 flex items-center justify-center text-[8px] text-white">3</span>
</div>
<div class="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-white/5">
<span class="text-[10px] text-white/30">#</span>
<span class="text-[10px] text-white/50 truncate">growth-team</span>
</div>
<div class="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-white/5">
<span class="text-[10px] text-white/30">#</span>
<span class="text-[10px] text-white/50 truncate">design-feedback</span>
</div>
<div class="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-white/5">
<span class="text-[10px] text-white/30">#</span>
<span class="text-[10px] text-white/50 truncate">engineering</span>
</div>
<div class="text-[9px] font-semibold text-white/30 uppercase tracking-widest px-2 mb-1 mt-3">Direct</div>
<div class="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-white/5">
<div class="w-4 h-4 rounded-full bg-gradient-to-br from-pink-400 to-violet-500 flex-shrink-0"></div>
<span class="text-[10px] text-white/50 truncate">Sarah Kim</span>
<span class="ml-auto w-1.5 h-1.5 rounded-full bg-green-400"></span>
</div>
<div class="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-white/5">
<div class="w-4 h-4 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 flex-shrink-0"></div>
<span class="text-[10px] text-white/50 truncate">Marcus Lee</span>
<span class="ml-auto w-1.5 h-1.5 rounded-full bg-white/20"></span>
</div>
</aside>
<!-- Chat area -->
<main class="flex-1 flex flex-col" aria-hidden="true">
<!-- Channel header -->
<div class="border-b border-white/8 px-4 h-10 flex items-center gap-2">
<span class="text-sm text-white/50">#</span>
<span class="text-sm font-medium text-white/80">product-launch</span>
<span class="ml-auto text-[9px] text-white/30">12 members</span>
</div>
<!-- Messages -->
<div class="flex-1 p-4 space-y-4 overflow-hidden">
<div class="flex items-start gap-2.5">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex-shrink-0 mt-0.5"></div>
<div>
<div class="flex items-baseline gap-2 mb-1">
<span class="text-[10px] font-semibold text-white/80">Jordan Park</span>
<span class="text-[9px] text-white/25">10:42 AM</span>
</div>
<div class="glass rounded-xl px-3 py-2 text-[10px] text-white/70 leading-relaxed max-w-xs">
The new onboarding flow is live! Conversion up 24% vs last week 🚀
</div>
</div>
</div>
<div class="flex items-start gap-2.5">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-pink-400 to-violet-500 flex-shrink-0 mt-0.5"></div>
<div>
<div class="flex items-baseline gap-2 mb-1">
<span class="text-[10px] font-semibold text-white/80">Sarah Kim</span>
<span class="text-[9px] text-white/25">10:45 AM</span>
</div>
<div class="glass rounded-xl px-3 py-2 text-[10px] text-white/70 leading-relaxed max-w-xs">
Amazing! Can we thread the full breakdown here? 📊
</div>
</div>
</div>
<div class="flex items-start gap-2.5 justify-end">
<div class="text-right">
<div class="flex items-baseline gap-2 mb-1 justify-end">
<span class="text-[9px] text-white/25">10:47 AM</span>
<span class="text-[10px] font-semibold text-white/80">You</span>
</div>
<div class="rounded-xl px-3 py-2 text-[10px] leading-relaxed max-w-xs" style="background:linear-gradient(135deg,rgba(124,58,237,0.6),rgba(219,39,119,0.5));border:1px solid rgba(255,255,255,0.1);">
On it — full report in the thread 👇
</div>
</div>
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-violet-400 to-indigo-500 flex-shrink-0 mt-0.5"></div>
</div>
</div>
<!-- Input -->
<div class="border-t border-white/8 px-4 py-2">
<div class="glass rounded-xl px-3 py-2 flex items-center gap-2">
<span class="text-[10px] text-white/25 flex-1">Message #product-launch...</span>
<svg class="w-3 h-3 text-white/25" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"/></svg>
</div>
</div>
</main>
</div>
</div>
</div>
<!-- Floating badges -->
<div class="absolute -top-4 -right-4 glass rounded-xl px-3 py-2 text-[11px] font-medium flex items-center gap-2 shadow-lg" aria-hidden="true">
<svg class="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<span class="text-white/80">End-to-end encrypted</span>
</div>
<div class="absolute -bottom-4 -left-4 glass rounded-xl px-3 py-2 text-[11px] font-medium flex items-center gap-2 shadow-lg" aria-hidden="true">
<span class="text-yellow-400">⚡</span>
<span class="text-white/80"><100ms delivery</span>
</div>
</div>
</section>
<!-- Logos strip -->
<section class="relative z-10 border-y border-white/8 py-8 overflow-hidden" aria-label="Trusted by teams at">
<p class="text-center text-xs font-medium text-white/30 uppercase tracking-widest mb-6">Trusted by teams at</p>
<div class="flex items-center justify-center gap-10 flex-wrap px-8">
<span class="text-sm font-semibold text-white/20 tracking-tight">Vercel</span>
<span class="text-sm font-semibold text-white/20 tracking-tight">Linear</span>
<span class="text-sm font-semibold text-white/20 tracking-tight">Raycast</span>
<span class="text-sm font-semibold text-white/20 tracking-tight">Loom</span>
<span class="text-sm font-semibold text-white/20 tracking-tight">Retool</span>
<span class="text-sm font-semibold text-white/20 tracking-tight">Figma</span>
</div>
</section>
<!-- Features -->
<section id="features" class="relative py-28 px-4 overflow-hidden">
<!-- Subtle blob for this section -->
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="blob" style="width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,0.3),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:none;"></div>
</div>
<div class="relative z-10 max-w-5xl mx-auto">
<div class="text-center mb-16">
<p class="text-xs font-semibold text-violet-400 uppercase tracking-widest mb-3">Features</p>
<h2 class="text-4xl font-bold leading-tight mb-4">
Everything your team needs.<br><span class="grad-text-blue">Nothing you don't.</span>
</h2>
<p class="text-white/50 max-w-md mx-auto">Built for teams that care about focus, privacy, and actually getting things done.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Feature 01 -->
<div class="feat-card glass rounded-2xl p-6">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500/30 to-purple-600/20 border border-violet-500/30 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
</div>
<h3 class="text-sm font-semibold text-white mb-2">End-to-End Encryption</h3>
<p class="text-sm text-white/50 leading-relaxed">AES-256 encryption on every message. Your conversations stay yours — we can't read them.</p>
</div>
<!-- Feature 02 -->
<div class="feat-card glass rounded-2xl p-6">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-500/30 to-rose-600/20 border border-pink-500/30 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
</div>
<h3 class="text-sm font-semibold text-white mb-2">Channels & Threads</h3>
<p class="text-sm text-white/50 leading-relaxed">Organized channels with threaded replies. Keep context without losing momentum.</p>
</div>
<!-- Feature 03 -->
<div class="feat-card glass rounded-2xl p-6">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/30 to-cyan-600/20 border border-blue-500/30 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"/></svg>
</div>
<h3 class="text-sm font-semibold text-white mb-2">File & Media Sharing</h3>
<p class="text-sm text-white/50 leading-relaxed">Drop any file type — images, docs, code. Previews inline, search always finds them.</p>
</div>
<!-- Feature 04 -->
<div class="feat-card glass rounded-2xl p-6">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/30 to-orange-600/20 border border-amber-500/30 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"/></svg>
</div>
<h3 class="text-sm font-semibold text-white mb-2">Focus Profiles</h3>
<p class="text-sm text-white/50 leading-relaxed">Mute channels, snooze DMs, enter deep work mode. Notifications on your terms.</p>
</div>
<!-- Feature 05 -->
<div class="feat-card glass rounded-2xl p-6">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500/30 to-teal-600/20 border border-emerald-500/30 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</div>
<h3 class="text-sm font-semibold text-white mb-2">Apple Silicon Native</h3>
<p class="text-sm text-white/50 leading-relaxed">Compiled for M-series chips. Instant launch, zero battery drain, buttery smooth scrolling.</p>
</div>
<!-- Feature 06 -->
<div class="feat-card glass rounded-2xl p-6">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500/30 to-violet-600/20 border border-indigo-500/30 flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.007H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
</div>
<h3 class="text-sm font-semibold text-white mb-2">Cross-Device Sync</h3>
<p class="text-sm text-white/50 leading-relaxed">Pick up exactly where you left off across Mac, iPhone, and iPad. State is instant.</p>
</div>
</div>
</div>
</section>
<!-- Stats -->
<section id="security" class="border-y border-white/8 py-16 px-4">
<div class="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-3xl font-bold grad-text tabular-nums"><100ms</div>
<div class="text-xs text-white/40 mt-1.5">Message delivery</div>
</div>
<div>
<div class="text-3xl font-bold grad-text-blue">AES-256</div>
<div class="text-xs text-white/40 mt-1.5">Encryption standard</div>
</div>
<div>
<div class="text-3xl font-bold" style="background:linear-gradient(135deg,#34d399,#06b6d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;">99.99%</div>
<div class="text-xs text-white/40 mt-1.5">Uptime SLA</div>
</div>
<div>
<div class="text-3xl font-bold" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;">0 ms</div>
<div class="text-xs text-white/40 mt-1.5">Cold start time</div>
</div>
</div>
</section>
<!-- Wall of Love -->
<section id="love" class="py-28 px-4 overflow-hidden">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-16">
<p class="text-xs font-semibold text-pink-400 uppercase tracking-widest mb-3">Wall of love</p>
<h2 class="text-4xl font-bold leading-tight">
Teams that switched<br>never looked <span class="grad-text">back</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="glass rounded-2xl p-5">
<div class="flex mb-3">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-sm text-white/65 leading-relaxed mb-4">"We cut our Slack noise by 80% on day one. The focus profiles are a game changer for async work."</p>
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-violet-400 to-pink-500 flex-shrink-0"></div>
<div>
<div class="text-xs font-semibold text-white/80">Maya Chen</div>
<div class="text-[10px] text-white/35">Head of Product, Relay</div>
</div>
</div>
</div>
<div class="glass rounded-2xl p-5">
<div class="flex mb-3">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-sm text-white/65 leading-relaxed mb-4">"Encryption was the dealbreaker for us. Knowing our client conversations are truly private is invaluable."</p>
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 flex-shrink-0"></div>
<div>
<div class="text-xs font-semibold text-white/80">Tom Reeves</div>
<div class="text-[10px] text-white/35">CTO, Archform</div>
</div>
</div>
</div>
<div class="glass rounded-2xl p-5">
<div class="flex mb-3">
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-sm text-white/65 leading-relaxed mb-4">"Finally a chat app that respects macOS. Native feel, no Electron jank, and the performance is absurd."</p>
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 flex-shrink-0"></div>
<div>
<div class="text-xs font-semibold text-white/80">Priya Nair</div>
<div class="text-[10px] text-white/35">Eng Lead, Mosaic</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="border-t border-white/8 py-28 px-4 overflow-hidden relative">
<div class="blob" style="width:400px;height:400px;background:radial-gradient(circle,rgba(219,39,119,0.25),transparent 70%);bottom:-100px;right:10%;position:absolute;animation:none;" aria-hidden="true"></div>
<div class="relative z-10 max-w-4xl mx-auto">
<div class="text-center mb-14">
<p class="text-xs font-semibold text-pink-400 uppercase tracking-widest mb-3">Pricing</p>
<h2 class="text-4xl font-bold leading-tight mb-3">Simple, <span class="grad-text">honest</span> pricing</h2>
<p class="text-white/50">No per-seat traps. Pay for the workspace, not the headcount.</p>
</div>
<div class="grid md:grid-cols-3 gap-4 items-start">
<!-- Free -->
<div class="glass rounded-2xl p-6">
<div class="text-xs font-semibold text-white/40 uppercase tracking-widest mb-3">Free</div>
<div class="text-4xl font-bold text-white mb-1">$0</div>
<div class="text-xs text-white/35 mb-6">Forever free · up to 5 members</div>
<ul class="space-y-2.5 mb-6">
<li class="flex items-center gap-2 text-sm text-white/55">
<svg class="w-3.5 h-3.5 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
10 channels
</li>
<li class="flex items-center gap-2 text-sm text-white/55">
<svg class="w-3.5 h-3.5 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
1 GB file storage
</li>
<li class="flex items-center gap-2 text-sm text-white/55">
<svg class="w-3.5 h-3.5 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
E2E encryption
</li>
</ul>
<a href="#" class="block text-center text-sm glass rounded-xl py-2.5 text-white/70 hover:bg-white/10 transition-colors">Get started free</a>
</div>
<!-- Pro — highlighted -->
<div class="glass-strong rounded-2xl p-6 relative" style="border-color:rgba(124,58,237,0.4);">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-violet-600 to-pink-600 text-white text-[10px] font-semibold px-3 py-1 rounded-full">Most popular</div>
<div class="text-xs font-semibold text-violet-400 uppercase tracking-widest mb-3">Pro</div>
<div class="text-4xl font-bold text-white mb-1">$12<span class="text-xl font-normal text-white/40">/mo</span></div>
<div class="text-xs text-white/35 mb-6">Up to 25 members</div>
<ul class="space-y-2.5 mb-6">
<li class="flex items-center gap-2 text-sm text-white/75">
<svg class="w-3.5 h-3.5 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Unlimited channels
</li>
<li class="flex items-center gap-2 text-sm text-white/75">
<svg class="w-3.5 h-3.5 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
50 GB storage
</li>
<li class="flex items-center gap-2 text-sm text-white/75">
<svg class="w-3.5 h-3.5 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Focus profiles + analytics
</li>
<li class="flex items-center gap-2 text-sm text-white/75">
<svg class="w-3.5 h-3.5 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Priority support
</li>
</ul>
<a href="#" class="block text-center text-sm btn-glow rounded-xl py-2.5 font-semibold">Start free trial</a>
</div>
<!-- Enterprise -->
<div class="glass rounded-2xl p-6">
<div class="text-xs font-semibold text-white/40 uppercase tracking-widest mb-3">Enterprise</div>
<div class="text-4xl font-bold text-white mb-1">Custom</div>
<div class="text-xs text-white/35 mb-6">Unlimited members + SSO</div>
<ul class="space-y-2.5 mb-6">
<li class="flex items-center gap-2 text-sm text-white/55">
<svg class="w-3.5 h-3.5 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
SSO / SAML 2.0
</li>
<li class="flex items-center gap-2 text-sm text-white/55">
<svg class="w-3.5 h-3.5 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Audit logs + compliance
</li>
<li class="flex items-center gap-2 text-sm text-white/55">
<svg class="w-3.5 h-3.5 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Dedicated success manager
</li>
</ul>
<a href="mailto:sales@nebula.app" class="block text-center text-sm glass rounded-xl py-2.5 text-white/70 hover:bg-white/10 transition-colors">Talk to sales</a>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="border-t border-white/8 py-28 px-4">
<div class="max-w-2xl mx-auto text-center">
<div class="glass-strong rounded-3xl p-10" style="border-color:rgba(124,58,237,0.25);">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-violet-500 to-pink-500 flex items-center justify-center mx-auto mb-6">
<svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"/><path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"/></svg>
</div>
<h2 class="text-3xl font-bold leading-tight mb-3">
Your team deserves<br><span class="grad-text">better than Slack</span>
</h2>
<p class="text-white/50 mb-8">Download Nebula free and see the difference in five minutes.</p>
<a href="#" class="inline-flex items-center gap-2.5 btn-glow text-sm font-semibold text-white px-8 py-3.5 rounded-xl">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 814 1000" aria-hidden="true"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-47.4-148.2-112.7C189.5 653 127 533.9 127 420.2c0-192.9 125.4-294.9 248.4-294.9 67-57.2 164-85 248.4-85 63.9 0 164 38.4 213.6 38.4-53.9 2.3-141 43.2-141 151.6 0 86.4 78.1 134.2 90.2 142.9z"/></svg>
Download for macOS
</a>
<p class="text-xs text-white/25 mt-4">macOS 13 Ventura or later · Apple Silicon & Intel</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/8 py-10 px-4">
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-10">
<div class="col-span-2 md:col-span-1">
<div class="flex items-center gap-2 mb-3">
<div class="w-6 h-6 rounded-md bg-gradient-to-br from-violet-500 to-pink-500 flex items-center justify-center" aria-hidden="true">
<svg class="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"/><path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"/></svg>
</div>
<span class="text-sm font-semibold">Nebula</span>
</div>
<p class="text-xs text-white/35 leading-relaxed">Modern chat for macOS. Private by design.</p>
</div>
<div>
<h4 class="text-xs font-semibold text-white/50 uppercase tracking-widest mb-3">Product</h4>
<ul class="space-y-2 text-xs text-white/35">
<li><a href="#" class="hover:text-white/70 transition-colors">Features</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Changelog</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Roadmap</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Download</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-semibold text-white/50 uppercase tracking-widest mb-3">Resources</h4>
<ul class="space-y-2 text-xs text-white/35">
<li><a href="#" class="hover:text-white/70 transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">API Reference</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Status</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-semibold text-white/50 uppercase tracking-widest mb-3">Support</h4>
<ul class="space-y-2 text-xs text-white/35">
<li><a href="#" class="hover:text-white/70 transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Community</a></li>
<li><a href="mailto:support@nebula.app" class="hover:text-white/70 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-semibold text-white/50 uppercase tracking-widest mb-3">Company</h4>
<ul class="space-y-2 text-xs text-white/35">
<li><a href="#" class="hover:text-white/70 transition-colors">About</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Blog</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-white/70 transition-colors">Privacy</a></li>
</ul>
</div>
</div>
<div class="border-t border-white/8 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
<p class="text-xs text-white/25">© 2026 Nebula. All rights reserved.</p>
<div class="flex items-center gap-4">
<a href="#" class="text-white/30 hover:text-white/70 transition-colors" aria-label="X / Twitter">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.736-8.856L1.957 2.25H8.2l4.252 5.627L18.244 2.25z"/></svg>
</a>
<a href="#" class="text-white/30 hover:text-white/70 transition-colors" aria-label="GitHub">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</body>
</html>
Dark glassmorphic SaaS landing page. Deep #06061a background with three animated gradient blobs (violet, pink, indigo). Floating glass nav pill, full-height hero with perspective-tilted chat app mockup, 6 glass feature cards, stats strip, 3-column testimonials, 3-tier pricing (with glowing Pro tier), and a glass CTA card. Zero JavaScript.