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.
546
Snippets
2629.8k
Views
86.3k
Downloads
Trending now
Trending Bootstrap snippets from the classic library.
Card Grid Layout
Comments(1)
Really beautiful design. Clean and impressive implementation!
Sign in to join the conversation.