JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add some sugar to homepage

Browse Source
This commit is contained in:
JCEEE
2026-09-03 12:16:50 +01:00
parent ed31a6e25d
commit b13de60b52
5 changed files with 238 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+219 -54
View File
@@ -36,8 +36,19 @@
{/if}
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<div class="hero-copy">
<div class="hero-content">
<span class="hero-kicker">The family chore app</span>
<h1 class="hero-title"><FamDone /></h1>
<p class="hero-sub">Every chore checked. Every allowance earned — on autopilot.</p>
<div class="hero-actions">
<a class="hero-cta" href="/signup">Create my family</a>
<a class="hero-cta-ghost" href="/pricing">See pricing</a>
</div>
</div>
</section>
<section class="intro">
<div class="intro-inner">
<div class="intro-copy">
<span class="pill">For busy families</span>
<h1>Chores done. <span class="accent">Allowance earned.</span></h1>
<p class="lede">
@@ -71,11 +82,38 @@
</p>
</div>
</div>
<div class="explainer">
<div class="steps">
<article class="step">
<span class="step-num">1</span>
<h3>Create your family</h3>
<p>
Set up chores and how much each one is worth. Your kids join in seconds with an invite
code.
</p>
</article>
<article class="step">
<span class="step-num">2</span>
<h3>Kids do the work</h3>
<p>
They see today's chores as a simple card board and tick them off as they go — points are
added instantly.
</p>
</article>
<article class="step">
<span class="step-num">3</span>
<h3>Allowance pays out</h3>
<p>
Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep
it fun.
</p>
</article>
</div>
</div>
</section>
<!-- EXPLAINER -->
<section class="explainer">
<h2>How it works</h2>
<!-- <section class="explainer">
<div class="steps">
<article class="step">
<span class="step-num">1</span>
@@ -102,54 +140,62 @@
</p>
</article>
</div>
</section>
</section> -->
<!-- FEATURES -->
<section class="features">
<h2>Everything a family needs</h2>
<div class="feature-grid">
<article class="feature">
<h3>Chore board</h3>
<p>Reusable chore templates and a simple assignment grid. Build once, reuse every week.</p>
</article>
<article class="feature">
<h3>Live progress</h3>
<p>
Realtime sync across the whole family — see points and progress update the moment a chore
is done.
<div class="features-inner">
<h2>Everything a family needs</h2>
<div class="feature-grid">
<article class="feature">
<h3>Chore board</h3>
<p>
Reusable chore templates and a simple assignment grid. Build once, reuse every week.
</p>
</article>
<article class="feature">
<h3>Live progress</h3>
<p>
Realtime sync across the whole family — see points and progress update the moment a
chore is done.
</p>
</article>
<article class="feature">
<h3>Automatic allowance</h3>
<p>
Points convert to money using your family's own rules. No mental maths, no arguments.
</p>
</article>
<article class="feature">
<h3>Rewards &amp; bonuses</h3>
<p>
Kids can spend points on rewards, and you can run a monthly bonus for the top earner.
</p>
</article>
<article class="feature">
<h3>Kid-friendly</h3>
<p>
A simple, colourful interface kids love — big buttons, clear feedback, their own space.
</p>
</article>
<article class="feature">
<h3>Private by design</h3>
<p>
Everything is scoped to your family. Kids join with an invite code and stay in your
family.
</p>
</article>
</div>
<div class="cta">
<p>Ready to make chores painless?</p>
<a class="cta-btn" href="/signup">Create your family</a>
<p class="card-alt">
<a
class="hover:underline self-center items-center justify-center flex gap-2"
href="/pricing">or see pricing {@html chevronRightIcon}</a
>
</p>
</article>
<article class="feature">
<h3>Automatic allowance</h3>
<p>Points convert to money using your family's own rules. No mental maths, no arguments.</p>
</article>
<article class="feature">
<h3>Rewards &amp; bonuses</h3>
<p>Kids can spend points on rewards, and you can run a monthly bonus for the top earner.</p>
</article>
<article class="feature">
<h3>Kid-friendly</h3>
<p>
A simple, colourful interface kids love — big buttons, clear feedback, their own space.
</p>
</article>
<article class="feature">
<h3>Private by design</h3>
<p>
Everything is scoped to your family. Kids join with an invite code and stay in your
family.
</p>
</article>
</div>
<div class="cta">
<p>Ready to make chores painless?</p>
<a class="cta-btn" href="/signup">Create your family</a>
<p class="card-alt">
<a
class="hover:underline self-center items-center justify-center flex gap-2"
href="/pricing">or see pricing {@html chevronRightIcon}</a
>
</p>
</div>
</div>
</section>
</main>
@@ -221,10 +267,120 @@
/* HERO */
.hero {
position: relative;
overflow: hidden;
background: #1e1b4b;
color: #eef2ff;
padding: 6rem 1.5rem;
text-align: center;
}
.hero::before,
.hero::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(60px);
z-index: 0;
}
.hero::before {
width: 480px;
height: 480px;
top: -180px;
left: -120px;
background: rgba(67, 56, 202, 0.55);
}
.hero::after {
width: 420px;
height: 420px;
bottom: -160px;
right: -120px;
background: rgba(245, 158, 11, 0.25);
}
.hero-content {
position: relative;
z-index: 1;
max-width: 48rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-kicker {
display: inline-block;
background: rgba(224, 231, 255, 0.12);
border: 1px solid rgba(224, 231, 255, 0.25);
color: #c7d2fe;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.4rem 0.95rem;
border-radius: 999px;
}
.hero-title {
margin: 0;
font-size: clamp(3rem, 8vw, 5.5rem);
line-height: 1;
font-weight: 800;
letter-spacing: -0.02em;
}
.hero-sub {
margin: 0;
max-width: 34rem;
font-size: 1.2rem;
line-height: 1.6;
color: #c7d2fe;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 0.75rem;
}
.hero-cta {
display: inline-block;
background: #f59e0b;
color: #1e1b4b;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
padding: 0.8rem 1.75rem;
border-radius: 999px;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
transition:
transform 0.15s,
box-shadow 0.15s;
}
.hero-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(245, 158, 11, 0.45);
}
.hero-cta-ghost {
display: inline-block;
color: #eef2ff;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
padding: 0.8rem 1.5rem;
border-radius: 999px;
border: 1px solid rgba(224, 231, 255, 0.35);
transition:
background 0.15s,
border-color 0.15s;
}
.hero-cta-ghost:hover {
background: rgba(224, 231, 255, 0.1);
border-color: rgba(224, 231, 255, 0.6);
}
/* INTRO (was the original hero) */
.intro {
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
padding: 4.5rem 1.5rem;
}
.hero-inner {
.intro-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
@@ -370,11 +526,18 @@
}
/* EXPLAINER */
.explainer,
.features {
.explainer {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 1.5rem;
padding-top: 6em;
}
.features {
padding: 4rem 1.5rem;
}
.features-inner {
max-width: 1100px;
margin: 0 auto;
}
.explainer h2,
.features h2 {
@@ -418,8 +581,10 @@
/* FEATURES */
.features {
background: #f5f6fa;
border-radius: 0;
background: linear-gradient(170deg, #8fb6ee 0%, #dfe9fb 45%, #f5f6fa 100%);
}
.features h2 {
color: #4338ca;
}
.feature-grid {
display: grid;
@@ -467,7 +632,7 @@
/* RESPONSIVE */
@media (max-width: 860px) {
.hero-inner {
.intro-inner {
grid-template-columns: 1fr;
}
.steps,
frontend/src/routes/[fam]/+layout.svelte
+1 -1
View File
@@ -270,7 +270,7 @@
}
.app-main {
margin-left: 220px;
margin-top: 48px;
margin-top: 52px;
padding: 1.5rem 2rem;
flex: 1;
transition: margin-left 0.2s;