Free Section
Split Hero with App Mockup
A modern split landing hero with animated announcement pill, high-converting value copy, dual CTAs, and a floating perspective app preview card.
Colours in this gradient
#030712#3b82f6#8b5cf6#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="s-hero-sec">
<div class="s-hero-container">
<div class="s-hero-text">
<div class="s-badge">✦ Version 3.0 Released · Sub-millisecond compute</div>
<h1>Intelligent Edge Storage for <b>AI Native Apps</b></h1>
<p>Store, query, and synchronize vector embeddings and structured JSON records across 35 edge regions with automated multi-master replication.</p>
<div class="s-hero-ctas">
<a href="#" class="sh-btn-primary">Start Building Free →</a>
<a href="#" class="sh-btn-secondary">Read Documentation</a>
</div>
<div class="s-proof">
<span>Trusted by 10,000+ teams</span>
<div class="sp-logos">
<span>ACME</span><span>◈ VECT</span><span>▲ HYPER</span>
</div>
</div>
</div>
<div class="s-hero-mockup">
<div class="mockup-frame">
<div class="mf-bar">
<div class="mf-dots"><span></span><span></span><span></span></div>
<div class="mf-title">api-cluster-prod-us-east</div>
</div>
<div class="mf-body">
<div class="mf-metric-row">
<div class="mf-stat"><small>THROUGHPUT</small><b>48.2k req/s</b></div>
<div class="mf-stat"><small>LATENCY P99</small><b>1.4 ms</b></div>
</div>
<div class="mf-code-preview">
<span class="m-comment">// Instant edge replication</span><br/>
<span class="m-kw">await</span> db.vectors.<span class="m-fn">upsert</span>({<br/>
id: <span class="m-str">"emb_8941"</span>,<br/>
values: [0.041, -0.198, 0.884],<br/>
namespace: <span class="m-str">"production"</span><br/>
});
</div>
</div>
</div>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a modern SaaS split hero landing page section with an interactive perspective app mockup in HTML and CSS. Requirements: - Split two-column grid layout (left: announcement pill, headline, dual CTAs; right: 3D perspective mockup). - 3D perspective mockup card with perspective(1000px) rotateY(-8deg) that straightens on hover. - Mockup includes terminal header dots, live telemetry metrics, and syntax highlighted SDK code. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid with 1.15fr and 0.85fr column split.
- 2
Apply 3D transform on the right mockup card with smooth hover transition.
- 3
Add responsive breakpoint to stack vertically on mobile screens.
Customisation tips
- Use background radial gradients in the section corner to softly backlight the mockup.