108 lines
3.8 KiB
JavaScript
108 lines
3.8 KiB
JavaScript
// Mission whisper — three sentences, one CTA. Sits between Audience and
|
|
// Closing. Intentionally small, intentionally separate from the product pitch.
|
|
|
|
function Mission() {
|
|
return (
|
|
<section className="section mission">
|
|
<style>{`
|
|
.mission {
|
|
padding-block: clamp(70px, 10vh, 120px);
|
|
position: relative;
|
|
}
|
|
.mission-card {
|
|
position: relative;
|
|
max-width: 820px; margin: 0 auto;
|
|
padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
|
|
border-radius: 24px;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.74 0.175 35 / 0.10), transparent 70%),
|
|
linear-gradient(180deg, oklch(0.19 0.009 60 / 0.65), oklch(0.16 0.008 60 / 0.5));
|
|
border: 1px solid var(--hairline);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
.mission-card::before {
|
|
content: "";
|
|
position: absolute; top: 0; left: 0; right: 0; height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
|
opacity: .7;
|
|
}
|
|
.mission-eye {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px; letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
}
|
|
.mission-eye::before, .mission-eye::after {
|
|
content: ""; width: 24px; height: 1px;
|
|
background: oklch(0.74 0.175 35 / 0.4);
|
|
}
|
|
.mission-title {
|
|
margin-top: 18px;
|
|
font-size: clamp(28px, 3.6vw, 44px);
|
|
font-weight: 500;
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.08;
|
|
text-wrap: balance;
|
|
}
|
|
.mission-title em {
|
|
font-style: normal;
|
|
background: linear-gradient(180deg, var(--accent), oklch(0.62 0.18 18));
|
|
-webkit-background-clip: text; background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.mission-body {
|
|
margin-top: 22px;
|
|
font-size: clamp(15px, 1.55vw, 18px);
|
|
color: var(--fg-dim);
|
|
line-height: 1.6;
|
|
max-width: 580px; margin-inline: auto;
|
|
text-wrap: balance;
|
|
}
|
|
.mission-body b {
|
|
color: var(--fg);
|
|
font-weight: 500;
|
|
}
|
|
.mission-cta {
|
|
margin-top: 28px;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 10px 16px;
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--accent);
|
|
border: 1px solid oklch(0.74 0.175 35 / 0.4);
|
|
background: oklch(0.74 0.175 35 / 0.08);
|
|
transition: background .15s, transform .12s, border-color .15s;
|
|
}
|
|
.mission-cta:hover {
|
|
background: oklch(0.74 0.175 35 / 0.16);
|
|
border-color: oklch(0.74 0.175 35 / 0.6);
|
|
transform: translateY(-1px);
|
|
}
|
|
`}</style>
|
|
|
|
<div className="wrap">
|
|
<div className="mission-card">
|
|
<div className="mission-eye">Why Vibn exists</div>
|
|
<h2 className="mission-title">
|
|
This is bigger than software.
|
|
<br/>It's <em>the golden age of small business.</em>
|
|
</h2>
|
|
<p className="mission-body">
|
|
For twenty years, small business got the leftovers — generic tools, monthly rent,
|
|
software built for someone else. <b>AI changes the math.</b> The custom system a business
|
|
needs to actually thrive is finally something they can have, own, and afford.
|
|
</p>
|
|
<a href="#" className="mission-cta">
|
|
Read our mission <Arrow size={12} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { Mission });
|