app landing-page dark bold pricing comparison press bold
App Landing Bold
Bold dark-themed app landing page with gradient accents, before/after comparison, pricing tiers, and press logos.
bold Responsive
Live Preview
Sections
navbarheroapp-screenshotfeaturescomparisonpricingpress-logosctafooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nexus — The Future of Team Communication</title>
<meta name="description" content="Nexus is the bold new way teams communicate, collaborate, and create together." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
/* ── Brand tokens ────────────────────────────────────────── */
:root {
--ws-color-surface: #020617;
--ws-color-surface-alt: #0f172a;
--ws-color-surface-muted: #1e293b;
--ws-color-text: #f8fafc;
--ws-color-text-soft: #cbd5e1;
--ws-color-text-muted: #94a3b8;
--ws-color-text-faint: #64748b;
--ws-color-text-inverse: #0f172a;
--ws-color-border: rgba(255,255,255,0.05);
--ws-color-primary: #f97316;
--ws-color-primary-hover: #ea6a0c;
--ws-color-primary-soft: rgba(249,115,22,0.1);
--ws-color-primary-text: #ffffff;
}
/* ── Snippet: interactions/hover-lift ────────────────────── */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.3);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-slate-950 text-white antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-slate-950/80 backdrop-blur-lg border-b border-white/5" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2 text-xl font-bold" aria-label="Nexus home">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="url(#g1)" />
<path d="M10 22V10l6 12 6-12v12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<defs><linearGradient id="g1" x1="0" y1="0" x2="32" y2="32"><stop stop-color="#F97316"/><stop offset="1" stop-color="#EC4899"/></linearGradient></defs>
</svg>
Nexus
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-400">
<a href="#features" class="hover:text-white transition-colors">Features</a>
<a href="#comparison" class="hover:text-white transition-colors">Compare</a>
<a href="#pricing" class="hover:text-white transition-colors">Pricing</a>
<a href="#press" class="hover:text-white transition-colors">Press</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="#" class="text-sm font-medium text-slate-400 hover:text-white transition-colors">Sign in</a>
<a href="#" class="text-sm font-semibold px-5 py-2.5 rounded-full bg-gradient-to-r from-orange-500 to-pink-500 text-white hover:from-orange-600 hover:to-pink-600 transition shadow-lg shadow-orange-500/25">Get Started</a>
</div>
<button class="md:hidden p-2 rounded-lg hover:bg-white/5" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-orange-500/10 via-transparent to-transparent"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-36 relative z-10">
<div class="text-center max-w-4xl mx-auto mb-16">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-sm font-medium text-slate-300 mb-8">
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
Now available on all platforms
</div>
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-black leading-[1.1] tracking-tight mb-6">
Communication<br />
<span class="bg-gradient-to-r from-orange-400 to-pink-400 bg-clip-text text-transparent">reimagined</span>
</h1>
<p class="text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
Nexus brings your entire team together with real-time messaging, voice channels, and AI-powered workflows — all in one lightning-fast app.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="px-8 py-4 rounded-full bg-gradient-to-r from-orange-500 to-pink-500 text-white font-bold text-lg hover:from-orange-600 hover:to-pink-600 transition shadow-xl shadow-orange-500/25">
Start Free Trial
</a>
<a href="#" class="px-8 py-4 rounded-full border border-white/20 text-white font-semibold hover:bg-white/5 transition flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
Watch Demo
</a>
</div>
</div>
<!-- App Screenshots -->
<div class="relative max-w-5xl mx-auto">
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl border border-white/10 shadow-2xl overflow-hidden p-1">
<div class="bg-slate-900 rounded-xl p-4 sm:p-8">
<div class="flex items-center gap-2 mb-6">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-amber-500"></div>
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
<div class="ml-4 flex-1 h-6 bg-slate-800 rounded-lg"></div>
</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-3 space-y-3">
<div class="h-8 bg-slate-800 rounded-lg w-full"></div>
<div class="h-6 bg-slate-800/50 rounded-lg w-4/5"></div>
<div class="h-6 bg-orange-500/20 rounded-lg w-full border border-orange-500/30"></div>
<div class="h-6 bg-slate-800/50 rounded-lg w-3/4"></div>
<div class="h-6 bg-slate-800/50 rounded-lg w-full"></div>
<div class="h-6 bg-slate-800/50 rounded-lg w-2/3"></div>
</div>
<div class="col-span-6 space-y-3">
<div class="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
<div class="w-8 h-8 rounded-full bg-orange-500/30 shrink-0"></div>
<div class="space-y-1 flex-1">
<div class="h-3 bg-slate-700 rounded w-24"></div>
<div class="h-4 bg-slate-800 rounded w-full"></div>
</div>
</div>
<div class="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
<div class="w-8 h-8 rounded-full bg-pink-500/30 shrink-0"></div>
<div class="space-y-1 flex-1">
<div class="h-3 bg-slate-700 rounded w-20"></div>
<div class="h-4 bg-slate-800 rounded w-3/4"></div>
</div>
</div>
<div class="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
<div class="w-8 h-8 rounded-full bg-emerald-500/30 shrink-0"></div>
<div class="space-y-1 flex-1">
<div class="h-3 bg-slate-700 rounded w-28"></div>
<div class="h-4 bg-slate-800 rounded w-5/6"></div>
<div class="h-4 bg-slate-800 rounded w-1/2"></div>
</div>
</div>
<div class="h-10 bg-slate-800 rounded-lg flex items-center px-3">
<div class="h-4 bg-slate-700 rounded w-48"></div>
</div>
</div>
<div class="col-span-3 space-y-3">
<div class="h-8 bg-slate-800 rounded-lg w-full"></div>
<div class="p-3 bg-slate-800/50 rounded-lg space-y-2">
<div class="w-12 h-12 rounded-full bg-orange-500/20 mx-auto"></div>
<div class="h-3 bg-slate-700 rounded w-2/3 mx-auto"></div>
<div class="h-3 bg-slate-800 rounded w-4/5 mx-auto"></div>
</div>
<div class="h-6 bg-slate-800/50 rounded-lg w-full"></div>
<div class="h-6 bg-slate-800/50 rounded-lg w-full"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="ws-features py-20 sm:py-28 border-t border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-orange-400 uppercase tracking-wider mb-3">Features</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Built for modern teams</h2>
<p class="text-lg text-slate-400">Every feature is designed to reduce friction and help your team move faster.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="hover-lift p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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-lg font-semibold mb-2">Lightning Fast</h3>
<p class="text-slate-400 leading-relaxed">Messages delivered in under 50ms. Optimistic UI that never keeps you waiting.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors">
<div class="w-12 h-12 rounded-xl bg-pink-500/10 text-pink-400 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" /></svg>
</div>
<h3 class="text-lg font-semibold mb-2">AI Workflows</h3>
<p class="text-slate-400 leading-relaxed">Automate repetitive tasks with AI. Summarize threads, translate messages, create action items.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-500/10 text-violet-400 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" /></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Voice Channels</h3>
<p class="text-slate-400 leading-relaxed">Crystal-clear voice with spatial audio. Drop in and out of conversations naturally.</p>
</div>
</div>
</div>
</section>
<!-- Before/After Comparison -->
<section id="comparison" class="ws-comparison py-20 sm:py-28 border-t border-white/5">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-orange-400 uppercase tracking-wider mb-3">Compare</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Before and after Nexus</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Before -->
<div class="p-8 rounded-2xl bg-white/5 border border-white/10">
<div class="flex items-center gap-2 mb-6">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<span class="text-sm font-semibold text-red-400">Before Nexus</span>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3 text-slate-400">
<svg class="w-5 h-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
<span>Switching between 5+ communication tools daily</span>
</li>
<li class="flex items-start gap-3 text-slate-400">
<svg class="w-5 h-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
<span>Important messages lost in endless threads</span>
</li>
<li class="flex items-start gap-3 text-slate-400">
<svg class="w-5 h-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
<span>Manual status updates and meeting notes</span>
</li>
<li class="flex items-start gap-3 text-slate-400">
<svg class="w-5 h-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
<span>Slow, clunky desktop app eating 2GB RAM</span>
</li>
<li class="flex items-start gap-3 text-slate-400">
<svg class="w-5 h-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
<span>$45/user/month for enterprise features</span>
</li>
</ul>
</div>
<!-- After -->
<div class="p-8 rounded-2xl bg-gradient-to-br from-orange-500/10 to-pink-500/10 border border-orange-500/20">
<div class="flex items-center gap-2 mb-6">
<div class="w-3 h-3 rounded-full bg-emerald-400"></div>
<span class="text-sm font-semibold text-emerald-400">After Nexus</span>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3 text-slate-300">
<svg class="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
<span>One unified platform for everything</span>
</li>
<li class="flex items-start gap-3 text-slate-300">
<svg class="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
<span>AI-generated summaries of every conversation</span>
</li>
<li class="flex items-start gap-3 text-slate-300">
<svg class="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
<span>Automatic action items and follow-ups</span>
</li>
<li class="flex items-start gap-3 text-slate-300">
<svg class="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
<span>Lightweight native app, under 150MB RAM</span>
</li>
<li class="flex items-start gap-3 text-slate-300">
<svg class="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
<span>$12/user/month with all features included</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="ws-pricing py-20 sm:py-28 border-t border-white/5">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-orange-400 uppercase tracking-wider mb-3">Pricing</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Simple, transparent pricing</h2>
<p class="text-lg text-slate-400">No hidden fees. No per-feature charges. Just one plan that scales.</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="p-8 rounded-2xl bg-white/5 border border-white/10">
<h3 class="text-lg font-semibold mb-2">Free</h3>
<p class="text-slate-400 text-sm mb-6">For small teams getting started</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-slate-400">/month</span>
</div>
<ul class="space-y-3 mb-8 text-sm text-slate-400">
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Up to 10 members</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> 5GB file storage</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> 90-day message history</li>
</ul>
<a href="#" class="block text-center py-3 rounded-xl border border-white/20 text-white font-semibold hover:bg-white/5 transition">Get Started</a>
</div>
<div class="p-8 rounded-2xl bg-gradient-to-br from-orange-500/10 to-pink-500/10 border border-orange-500/30 relative">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-gradient-to-r from-orange-500 to-pink-500 text-xs font-bold">Most Popular</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-slate-400 text-sm mb-6">For growing teams that need more</p>
<div class="mb-6">
<span class="text-4xl font-bold">$12</span>
<span class="text-slate-400">/user/month</span>
</div>
<ul class="space-y-3 mb-8 text-sm text-slate-300">
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Unlimited members</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> 100GB file storage</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Unlimited history</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> AI workflows</li>
</ul>
<a href="#" class="block text-center py-3 rounded-xl bg-gradient-to-r from-orange-500 to-pink-500 text-white font-bold hover:from-orange-600 hover:to-pink-600 transition shadow-lg shadow-orange-500/25">Start Free Trial</a>
</div>
<div class="p-8 rounded-2xl bg-white/5 border border-white/10">
<h3 class="text-lg font-semibold mb-2">Enterprise</h3>
<p class="text-slate-400 text-sm mb-6">For large organizations</p>
<div class="mb-6">
<span class="text-4xl font-bold">Custom</span>
</div>
<ul class="space-y-3 mb-8 text-sm text-slate-400">
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Everything in Pro</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> SSO & SAML</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> 99.99% SLA</li>
<li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Dedicated support</li>
</ul>
<a href="#" class="block text-center py-3 rounded-xl border border-white/20 text-white font-semibold hover:bg-white/5 transition">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- Press Logos -->
<section id="press" class="ws-logo-cloud py-20 border-t border-white/5">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-10">Featured in</p>
<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6 text-2xl font-bold text-slate-600">
<span>TechCrunch</span>
<span>The Verge</span>
<span>Wired</span>
<span>Forbes</span>
<span>ProductHunt</span>
</div>
</div>
</section>
<!-- CTA -->
<section class="ws-cta py-20 sm:py-28 border-t border-white/5">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl sm:text-5xl font-bold mb-6">Ready to switch<br />to <span class="bg-gradient-to-r from-orange-400 to-pink-400 bg-clip-text text-transparent">Nexus</span>?</h2>
<p class="text-lg text-slate-400 max-w-xl mx-auto mb-10">Join 10,000+ teams who already made the move. Free migration from Slack, Teams, and Discord included.</p>
<a href="#" class="inline-flex px-10 py-4 rounded-full bg-gradient-to-r from-orange-500 to-pink-500 text-white font-bold text-lg hover:from-orange-600 hover:to-pink-600 transition shadow-xl shadow-orange-500/25">
Start Your Free Trial
</a>
<p class="mt-4 text-sm text-slate-500">No credit card required. Cancel anytime.</p>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-white/5 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<div>
<div class="flex items-center gap-2 text-lg font-bold mb-4">
<svg class="w-7 h-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="url(#g2)" />
<path d="M10 22V10l6 12 6-12v12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<defs><linearGradient id="g2" x1="0" y1="0" x2="32" y2="32"><stop stop-color="#F97316"/><stop offset="1" stop-color="#EC4899"/></linearGradient></defs>
</svg>
Nexus
</div>
<p class="text-sm text-slate-500">The future of team communication.</p>
</div>
<div>
<h4 class="text-sm font-semibold mb-4">Product</h4>
<ul class="space-y-2 text-sm text-slate-500">
<li><a href="#" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
<li><a href="#" class="hover:text-white transition-colors">Security</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold mb-4">Company</h4>
<ul class="space-y-2 text-sm text-slate-500">
<li><a href="#" class="hover:text-white transition-colors">About</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</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>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-slate-500">
<li><a href="#" class="hover:text-white transition-colors">Privacy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
<li><a href="#" class="hover:text-white transition-colors">DPA</a></li>
</ul>
</div>
</div>
<div class="border-t border-white/5 pt-8 text-center text-sm text-slate-600">
<p>© 2026 Nexus Inc. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
Bold, dark-themed app landing page for team communication tools. Features a large hero with a CSS app screenshot mockup, before/after comparison section, 3-tier pricing, press logos bar, and a strong conversion CTA. Uses orange-to-pink gradient accents throughout.