Skip to content

Surface the loop in the hero and tighten the landing page #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lladawn merged 2 commits into from
Jun 27, 2026
Merged

Surface the loop in the hero and tighten the landing page #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4115b08
Surface the loop in the hero and tighten the landing page
lladawn Jun 27, 2026
d814a25
Merge remote-tracking branch 'origin/main' into dev
lladawn Jun 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 14 additions & 33 deletions src/components/HomeView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,10 @@ const familiarScenarios = [
},
];

const loopSteps = [
{
label: "01",
title: "catch the thought in Slack",
copy: "Use /mumbl or the message shortcut when the context appears. One rough line is enough.",
},
{
label: "02",
title: "shape it when it is ready",
copy: "Turn the useful parts into something worth sharing once the reasoning is clear enough.",
},
{
label: "03",
title: "publish the context",
copy: "Share it as a team read. The team gets the why, not just the shipped thing.",
},
const heroFlow = [
{ label: "01", title: "catch it with /mumbl", hint: "one rough line in Slack" },
{ label: "02", title: "shape the useful part", hint: "when the reasoning is clear" },
{ label: "03", title: "publish a team read", hint: "the team gets the why" },
];

const memoryLayers = [
Expand Down Expand Up @@ -179,6 +167,15 @@ export default function HomeView() {
sharing as a team read. It is your team's internal record: about the people behind the work,
not just the product they ship.
</p>
<ol className="hero-mechanic" aria-label="how mumbl works">
{heroFlow.map((step) => (
<li key={step.label}>
<span>{step.label}</span>
<strong>{step.title}</strong>
<small>{step.hint}</small>
</li>
))}
</ol>
<div className="hero-actions">
<a
className="slack-install-button"
Expand All @@ -202,7 +199,7 @@ export default function HomeView() {
talk it through
</a>
</div>
<p className="slack-beta-copy">no channel history. mumbl only saves what you explicitly send it.</p>
<p className="slack-beta-copy">mumbl only saves what you explicitly send it.</p>
<div className="landing-proof-strip" aria-label="mumbl promises">
<span>private by default</span>
<span>shared by choice</span>
Expand All @@ -229,22 +226,6 @@ export default function HomeView() {
</div>
</section>

<section className="landing-section landing-dump" aria-labelledby="dump-heading">
<div className="landing-section-head">
<p className="eyebrow">what mumbl does</p>
<h2 id="dump-heading">save engineering context before it turns into archaeology.</h2>
</div>
<div className="dump-layer-grid">
{loopSteps.map((layer) => (
<article className="dump-layer-card" key={layer.label}>
<span>{layer.label}</span>
<h3>{layer.title}</h3>
<p>{layer.copy}</p>
</article>
))}
</div>
</section>

<section className="landing-section familiar-section" aria-labelledby="familiar-heading">
<div className="landing-section-head">
<p className="eyebrow">sounds familiar?</p>
Expand Down
126 changes: 75 additions & 51 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,10 @@ button.account-control {
border-bottom: 1px solid var(--ink);
}

.direct-landing-hero::before {
display: none;
}

.landing-hero::before {
content: "";
position: absolute;
Expand Down Expand Up @@ -445,8 +449,8 @@ button.account-control {
.direct-landing-hero h1 {
max-width: 980px;
color: var(--ink);
font-size: clamp(3rem, 6.6vw, 7.2rem);
line-height: 0.9;
font-size: clamp(2.8rem, 5vw, 5.4rem);
line-height: 0.92;
}

.eyebrow {
Expand Down Expand Up @@ -597,6 +601,67 @@ h1 {
color: var(--muted);
}

.hero-mechanic {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
max-width: 760px;
margin: 22px 0 4px;
padding: 0;
list-style: none;
}

.hero-mechanic li {
position: relative;
display: grid;
gap: 3px;
padding: 12px 14px;
border: 1px solid var(--ink);
border-radius: var(--radius);
background: var(--panel);
box-shadow: 3px 3px 0 var(--ink);
}

.hero-mechanic li span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 900;
}

.hero-mechanic li strong {
font-size: 0.98rem;
font-weight: 800;
line-height: 1.12;
}

.hero-mechanic li small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.3;
}

.hero-mechanic li:not(:last-child)::after {
content: "→";
position: absolute;
right: -13px;
top: 50%;
z-index: 2;
transform: translateY(-50%);
color: var(--ink);
font-size: 0.9rem;
font-weight: 900;
}

@media (max-width: 640px) {
.hero-mechanic {
grid-template-columns: 1fr;
}

.hero-mechanic li:not(:last-child)::after {
content: none;
}
}

.waitlist-form {
display: grid;
gap: 10px;
Expand Down Expand Up @@ -737,10 +802,18 @@ h1 {
gap: 24px;
}

.direct-landing-hero {
grid-template-columns: minmax(0, 980px);
}

.landing-hero h1 {
font-size: clamp(2.8rem, 4.5vw, 4rem);
}

.direct-landing-hero h1 {
font-size: clamp(2.8rem, 5vw, 5.4rem);
}

.team-space-demo {
width: 100%;
}
Expand Down Expand Up @@ -1903,59 +1976,13 @@ h1 {
text-transform: lowercase;
}

.dump-layer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.dump-layer-card,
.landing-cta {
border: 1px solid var(--ink);
border-radius: var(--radius);
background: var(--panel);
box-shadow: 4px 4px 0 var(--ink);
}

.dump-layer-card {
display: grid;
align-content: start;
gap: 10px;
min-height: 280px;
padding: 20px;
}

.dump-layer-card:nth-child(1) {
background: var(--violet);
}

.dump-layer-card:nth-child(2) {
background: #fff8e4;
}

.dump-layer-card:nth-child(3) {
background: var(--blue);
}

.dump-layer-card span {
color: var(--muted);
font-size: 0.76rem;
font-weight: 900;
text-transform: lowercase;
}

.dump-layer-card h3 {
margin-bottom: 0;
font-size: clamp(1.35rem, 2.4vw, 2rem);
line-height: 1.02;
}

.dump-layer-card p {
margin-bottom: 0;
color: rgba(22, 20, 18, 0.72);
line-height: 1.46;
}

.adoption-strip {
display: grid;
gap: 18px;
Expand Down Expand Up @@ -4832,7 +4859,6 @@ select:focus {
display: none;
}

.dump-layer-grid,
.adoption-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
Expand All @@ -4845,7 +4871,6 @@ select:focus {
grid-template-columns: 1fr;
}

.dump-layer-card,
.adoption-step {
min-height: 240px;
}
Expand Down Expand Up @@ -5009,7 +5034,6 @@ select:focus {
.vibe-grid,
.type-grid,
.signal-grid,
.dump-layer-grid,
.adoption-steps,
.share-link-row,
.feed-actions,
Expand Down
Loading