joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: home page CTA as proper button with confirmation state

Browse source
This commit is contained in:
Jonathan 2026-04-19 20:46:43 +02:00
parent bc8e08d022
commit a0931ea527
1 changed files with 67 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/pages/index.astro
View file

@ -138,17 +138,22 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
<section class="join-section" id="join-section">
{alreadyJoined ? (
<div class="join-confirmed">
<h2 class="join-confirmed-title">Welcome to Project Bifrost.</h2>
<h2 class="join-confirmed-title">
Welcome to <em>Project Bifrost.</em>
</h2>
<p class="body-lg join-confirmed-body">
We will be in touch shortly to arrange the next step.
</p>
</div>
) : (
<div class="join-cta" id="join-cta">
<button class="join-btn" id="join-btn" type="button">
I want to join Project Bifrost.
<div id="join-cta">
<h2 class="cta-headline">
Ready to help <em>build this?</em>
</h2>
<button class="cta-btn" id="join-btn" type="button">
I want to join Project Bifrost
</button>
<p class="join-hint body-sm">
<p class="cta-hint body-sm">
We will follow up personally to discuss the right level of involvement for your organisation.
</p>
</div>
@ -167,12 +172,14 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
try {
const res = await fetch('/api/join', { method: 'POST' });
if (res.ok) {
const section = document.getElementById('join-cta');
if (section) {
section.innerHTML = `
const cta = document.getElementById('join-cta');
if (cta) {
cta.innerHTML = `
<div class="join-confirmed">
<h2 class="join-confirmed-title">Welcome to Project Bifrost.</h2>
<p class="join-confirmed-body body-lg">
<h2 class="join-confirmed-title">
Welcome to <em>Project Bifrost.</em>
</h2>
<p class="body-lg join-confirmed-body">
We will be in touch shortly to arrange the next step.
</p>
</div>
@ -180,11 +187,11 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
}
} else {
btn.removeAttribute('disabled');
btn.textContent = 'I want to join Project Bifrost.';
btn.textContent = 'I want to join Project Bifrost';
}
} catch {
btn.removeAttribute('disabled');
btn.textContent = 'I want to join Project Bifrost.';
btn.textContent = 'I want to join Project Bifrost';
}
});
}
@ -470,57 +477,80 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
.join-section {
margin-top: var(--space-24);
padding-bottom: var(--space-16);
}
/* CTA pre-click state */
#join-cta {
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: 44rem;
}
.join-cta {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.join-btn {
display: inline-block;
background: none;
border: none;
cursor: pointer;
.cta-headline {
font-family: var(--font-serif);
font-size: var(--text-headline-lg);
font-weight: 700;
font-style: italic;
font-size: var(--text-display-md);
font-weight: 400;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
color: var(--secondary);
padding: 0;
text-align: left;
transition: color var(--duration-fast) var(--ease-standard);
color: var(--on-surface);
margin: 0;
}
.join-btn:hover { color: var(--secondary-dim); }
.join-btn:disabled { opacity: 0.6; cursor: default; }
.join-hint {
.cta-headline em {
font-weight: 700;
font-style: italic;
}
.cta-btn {
display: inline-block;
align-self: flex-start;
background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
color: var(--on-secondary);
border: none;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-8);
font-family: var(--font-sans);
font-size: var(--text-body-lg);
font-weight: 600;
letter-spacing: var(--tracking-snug);
cursor: pointer;
transition: opacity var(--duration-fast) var(--ease-standard);
}
.cta-btn:hover { opacity: 0.92; }
.cta-btn:active { opacity: 0.82; }
.cta-btn:disabled { opacity: 0.55; cursor: default; }
.cta-hint {
color: var(--on-surface-muted);
margin: 0;
max-width: 36rem;
line-height: var(--leading-relaxed);
}
/* Confirmed state — server-rendered or injected by JS */
.join-confirmed {
display: flex;
flex-direction: column;
gap: var(--space-4);
gap: var(--space-5);
max-width: 44rem;
}
.join-confirmed-title {
font-family: var(--font-serif);
font-size: var(--text-headline-lg);
font-weight: 700;
font-style: italic;
font-size: var(--text-display-md);
font-weight: 400;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
color: var(--on-surface);
margin: 0;
}
.join-confirmed-title em {
font-weight: 700;
font-style: italic;
}
.join-confirmed-body {
color: var(--on-surface-variant);
margin: 0;