Split SaaS hero with bold gradient headline, two CTAs, social-proof logo strip and a tilted browser mockup preview floating to the right. Built for landings.
1<section class="saas-stage min-h-screen px-4 sm:px-8 py-12 sm:py-16 relative overflow-hidden flex items-center">
2 <span class="saas-orb orb-a"></span>
3 <span class="saas-orb orb-b"></span>
4 <span class="saas-grid"></span>
5
6 <div class="relative w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-center">
7 <div class="lg:col-span-6">
8 <span class="saas-pill inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-5">
9 <span class="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse"></span>
10 Now in public beta · join 8,200+ builders
11 </span>
12 <h1 class="text-white font-bold leading-[1.05] tracking-tight mb-5" style="font-size:clamp(2.25rem,5.5vw,4rem)">
13 Your design system, <span class="saas-grad">in one shared workspace</span>.
14 </h1>
15 <p class="text-base sm:text-lg leading-relaxed text-slate-300/85 mb-7 max-w-lg">
16 Atlas keeps your components, tokens, and Figma source in lockstep. Ship to staging the second a designer hits save.
17 </p>
18 <div class="flex flex-wrap items-center gap-3 mb-8">
19 <a href="#" class="saas-primary inline-flex items-center gap-2 px-6 py-3.5 rounded-xl font-semibold text-[14px] text-white">
20 Start free
21 <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
22 </a>
23 <a href="#" class="saas-ghost inline-flex items-center gap-2 px-5 py-3.5 rounded-xl font-semibold text-[14px] text-white">
24 <svg class="w-4 h-4" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg>
25 Watch 2-min demo
26 </a>
27 </div>
28 <p class="text-[10.5px] uppercase tracking-[0.18em] font-bold text-slate-500 mb-3">Powering teams at</p>
29 <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-slate-400/85 font-bold text-sm tracking-tight">
30 <span>vercel</span><span class="opacity-30">·</span>
31 <span>linear</span><span class="opacity-30">·</span>
32 <span>stripe</span><span class="opacity-30">·</span>
33 <span>figma</span><span class="opacity-30">·</span>
34 <span>retool</span>
35 </div>
36 </div>
37
38 <div class="lg:col-span-6 relative">
39 <div class="saas-browser relative rounded-2xl overflow-hidden">
40 <div class="saas-browser-chrome flex items-center gap-2 px-3 py-2.5">
41 <span class="flex items-center gap-1.5">
42 <span class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></span>
43 <span class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e]"></span>
44 <span class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></span>
45 </span>
46 <span class="saas-url ml-2 flex-1 px-2 py-1 rounded text-[11px] font-mono">atlas.app/projects/design-system</span>
47 </div>
48 <div class="saas-browser-body p-4">
49 <div class="flex items-center justify-between mb-3">
50 <p class="text-white font-bold text-sm">Design System</p>
51 <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-300 border border-emerald-500/35">● Live</span>
52 </div>
53 <div class="grid grid-cols-3 gap-2">
54 <div class="saas-tile">
55 <span class="saas-tile-dot" style="background:#22d3ee"></span>
56 <p class="text-[11px] text-slate-200/85 font-medium">Buttons</p>
57 <p class="text-[9.5px] text-slate-500">24 tokens</p>
58 </div>
59 <div class="saas-tile">
60 <span class="saas-tile-dot" style="background:#f472b6"></span>
61 <p class="text-[11px] text-slate-200/85 font-medium">Colors</p>
62 <p class="text-[9.5px] text-slate-500">48 swatches</p>
63 </div>
64 <div class="saas-tile">
65 <span class="saas-tile-dot" style="background:#fbbf24"></span>
66 <p class="text-[11px] text-slate-200/85 font-medium">Typography</p>
67 <p class="text-[9.5px] text-slate-500">12 styles</p>
68 </div>
69 <div class="saas-tile saas-tile-wide col-span-2">
70 <p class="text-[10px] uppercase tracking-[0.14em] font-bold text-slate-400 mb-1.5">Today's commits</p>
71 <div class="flex items-end gap-1 h-10">
72 <span class="saas-bar" style="height:35%"></span>
73 <span class="saas-bar" style="height:55%"></span>
74 <span class="saas-bar" style="height:40%"></span>
75 <span class="saas-bar" style="height:80%"></span>
76 <span class="saas-bar" style="height:60%"></span>
77 <span class="saas-bar" style="height:95%;background:linear-gradient(180deg,#22d3ee,#a855f7)"></span>
78 <span class="saas-bar" style="height:70%"></span>
79 </div>
80 </div>
81 <div class="saas-tile">
82 <span class="saas-tile-dot" style="background:#a855f7"></span>
83 <p class="text-[11px] text-slate-200/85 font-medium">Spacing</p>
84 <p class="text-[9.5px] text-slate-500">8 scales</p>
85 </div>
86 </div>
87 </div>
88 </div>
89 <span class="saas-glow"></span>
90 </div>
91 </div>
92</section>
Bold newsletter section with an aurora gradient background, floating particle field and an inline email form that lifts on focus.
Cyberpunk-flavoured hero with animated grid, scanline pass, rotating geometry, glitched gradient headline and a glowing neon primary CTA.
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(1)
Really beautiful design. Clean and impressive implementation!
Sign in to join the conversation.