← All components
Hero
freeLuxury Serif Startup Hero 12
Split luxury-serif startup hero with italic-accent headline, warm accent CTAs, and a real product visual on the right.
Preview
Copy the code
paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
Styles below map 1:1 to the class names above. -->
<section class="hero_component">
<div class="hero_grid">
<div class="hero_copy">
<p class="hero_eyebrow">Seed Stage — Est. 2026</p>
<h1 class="hero_title">
<span class="hero_title_line">Capital that moves</span>
<span class="hero_title_accent">quietly — and decisively.</span>
</h1>
<p class="hero_subline">Meridian pairs founders with a small circle of operators and patient capital. No noise, no dashboards to babysit — just conviction, applied early.</p>
<div class="hero_actions">
<a class="hero_button_primary" href="#apply">Request an intro</a>
<a class="hero_button_ghost" href="#thesis">Read our thesis</a>
</div>
</div>
<div class="hero_visual">
<div class="hero_visual_glow"></div>
<img class="hero_visual_img" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-luxury-serif-startup-12-1-12.webp" alt="Founder in a warm, minimal studio setting" />
<p class="hero_visual_caption">Portfolio No. 07 — Meridian</p>
</div>
</div>
</section>
<style>
.hero_component {
position:relative;
width:100%;
background-color:#faf8f4;
padding:7rem 6vw;
overflow:hidden;
box-sizing:border-box;
font-family:Georgia,'Times New Roman',serif;
}
.hero_grid {
margin:0 auto;
max-width:1240px;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:4rem;
}
.hero_copy {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.hero_eyebrow {
margin:0 0 1.6rem 0;
font-family:Georgia,serif;
font-size:0.72rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.32em;
color:#a67c52;
}
.hero_title {
margin:0;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(2.75rem,6vw,4.75rem);
font-weight:400;
line-height:1.04;
letter-spacing:-0.01em;
color:#1c1a17;
}
.hero_title_line {
display:block;
}
.hero_title_accent {
display:block;
font-style:italic;
color:#a67c52;
}
.hero_subline {
margin:1.8rem 0 2.6rem 0;
max-width:30rem;
font-family:Georgia,serif;
font-size:1.12rem;
font-weight:400;
line-height:1.65;
color:#57514a;
}
.hero_actions {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:1rem;
}
.hero_button_primary {
display:inline-flex;
align-items:center;
background-color:#a67c52;
color:#faf8f4;
padding:0.95rem 2rem;
border-radius:999px;
font-family:Georgia,serif;
font-size:0.9rem;
letter-spacing:0.04em;
text-decoration:none;
transition:background-color 0.25s ease;
}
.hero_button_ghost {
display:inline-flex;
align-items:center;
background-color:transparent;
color:#1c1a17;
padding:0.95rem 2rem;
border:1px solid #d8cfc2;
border-radius:999px;
font-family:Georgia,serif;
font-size:0.9rem;
letter-spacing:0.04em;
text-decoration:none;
transition:border-color 0.25s ease;
}
.hero_visual {
position:relative;
}
.hero_visual_glow {
position:absolute;
top:-8%;
right:-6%;
width:62%;
height:62%;
background-color:#a67c52;
opacity:0.1;
filter:blur(70px);
border-radius:999px;
z-index:0;
}
.hero_visual_img {
position:relative;
z-index:1;
display:block;
width:100%;
height:560px;
object-fit:cover;
border-radius:6px;
}
.hero_visual_caption {
position:relative;
z-index:1;
margin:1.1rem 0 0 0;
font-family:Georgia,serif;
font-size:0.72rem;
text-transform:uppercase;
letter-spacing:0.28em;
color:#a67c52;
}
</style>One email unlocks copying across the whole library — that's the only ask.
