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/lib/components/FamDone.svelte
+1 -1
View File
@@ -24,7 +24,7 @@
color: inherit; color: inherit;
} }
.fam-done-check { .fam-done-check {
font-size: x-small; font-size: 0.6em;
vertical-align: super; vertical-align: super;
position: relative; position: relative;
display: inline-block; display: inline-block;
frontend/src/lib/components/Footer.svelte
+16 -3
View File
@@ -7,15 +7,15 @@
let { sidebar = false } = $props(); let { sidebar = false } = $props();
</script> </script>
<footer class="bg-slate-100 text-[#4c1d95]"> <footer class="bg-slate-100 text-[#4c1d95] border-t border-[#4338ca]">
<div class="footer-inner px-8 py-16" class:sidebar> <div class="footer-inner px-8 py-16" class:sidebar>
<div class="flex items-center justify-between gap-2"> <div class="footer-row flex items-center justify-between gap-2">
<span class="footer-star">✦</span> <span class="footer-star">✦</span>
<span class="footer-copy" <span class="footer-copy"
>&copy; {new Date().getFullYear()} >&copy; {new Date().getFullYear()}
<span class="footer-text font-bold text-xl"><FamDone /></span> All rights reserved.</span <span class="footer-text font-bold text-xl"><FamDone /></span> All rights reserved.</span
> >
<aside class="text-text-200 text-wash-300 flex flex-col justify-end text-right text-sm"> <aside class="footer-aside text-text-200 text-wash-300 flex flex-col justify-end text-right text-sm">
<span>Built by humans</span> <span>Built by humans</span>
<a href="https://threejjjs.xyz"> <a href="https://threejjjs.xyz">
<h5 class="m-0 text-right font-tertiary text-xl md:text-3xl"> <h5 class="m-0 text-right font-tertiary text-xl md:text-3xl">
@@ -45,18 +45,31 @@
line-height: 1; line-height: 1;
color: #4c1d95; color: #4c1d95;
flex-shrink: 0; flex-shrink: 0;
position: absolute;
left: 2rem;
} }
.footer-copy { .footer-copy {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 0 1rem; padding: 0 1rem;
} }
.footer-row {
position: relative;
}
.footer-aside {
position: absolute;
right: 2rem;
}
@media (max-width: 639px) { @media (max-width: 639px) {
.footer-star { .footer-star {
font-size: 1.75rem; font-size: 1.75rem;
left: 1rem;
} }
.footer-copy { .footer-copy {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.footer-aside {
right: 1rem;
}
} }
</style> </style>
frontend/src/lib/components/TopNav.svelte
+1 -1
View File
@@ -39,7 +39,7 @@
.topnav { .topnav {
position: fixed; position: fixed;
top: 0; left: 220px; right: 0; top: 0; left: 220px; right: 0;
height: 48px; height: 52px;
background: #fff; background: #fff;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
display: flex; display: flex;
frontend/src/routes/+page.svelte
+219 -54
View File
@@ -36,8 +36,19 @@
{/if} {/if}
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="hero-inner"> <div class="hero-content">
<div class="hero-copy"> <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> <span class="pill">For busy families</span>
<h1>Chores done. <span class="accent">Allowance earned.</span></h1> <h1>Chores done. <span class="accent">Allowance earned.</span></h1>
<p class="lede"> <p class="lede">
@@ -71,11 +82,38 @@
</p> </p>
</div> </div>
</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> </section>
<!-- EXPLAINER --> <!-- EXPLAINER -->
<section class="explainer"> <!-- <section class="explainer">
<h2>How it works</h2>
<div class="steps"> <div class="steps">
<article class="step"> <article class="step">
<span class="step-num">1</span> <span class="step-num">1</span>
@@ -102,54 +140,62 @@
</p> </p>
</article> </article>
</div> </div>
</section> </section> -->
<!-- FEATURES --> <!-- FEATURES -->
<section class="features"> <section class="features">
<h2>Everything a family needs</h2> <div class="features-inner">
<div class="feature-grid"> <h2>Everything a family needs</h2>
<article class="feature"> <div class="feature-grid">
<h3>Chore board</h3> <article class="feature">
<p>Reusable chore templates and a simple assignment grid. Build once, reuse every week.</p> <h3>Chore board</h3>
</article> <p>
<article class="feature"> Reusable chore templates and a simple assignment grid. Build once, reuse every week.
<h3>Live progress</h3> </p>
<p> </article>
Realtime sync across the whole family — see points and progress update the moment a chore <article class="feature">
is done. <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> </p>
</article> </div>
<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> </section>
</main> </main>
@@ -221,10 +267,120 @@
/* HERO */ /* HERO */
.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%); background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
padding: 4.5rem 1.5rem; padding: 4.5rem 1.5rem;
} }
.hero-inner { .intro-inner {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
@@ -370,11 +526,18 @@
} }
/* EXPLAINER */ /* EXPLAINER */
.explainer, .explainer {
.features {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
padding: 4rem 1.5rem; padding: 4rem 1.5rem;
padding-top: 6em;
}
.features {
padding: 4rem 1.5rem;
}
.features-inner {
max-width: 1100px;
margin: 0 auto;
} }
.explainer h2, .explainer h2,
.features h2 { .features h2 {
@@ -418,8 +581,10 @@
/* FEATURES */ /* FEATURES */
.features { .features {
background: #f5f6fa; background: linear-gradient(170deg, #8fb6ee 0%, #dfe9fb 45%, #f5f6fa 100%);
border-radius: 0; }
.features h2 {
color: #4338ca;
} }
.feature-grid { .feature-grid {
display: grid; display: grid;
@@ -467,7 +632,7 @@
/* RESPONSIVE */ /* RESPONSIVE */
@media (max-width: 860px) { @media (max-width: 860px) {
.hero-inner { .intro-inner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.steps, .steps,
frontend/src/routes/[fam]/+layout.svelte
+1 -1
View File
@@ -270,7 +270,7 @@
} }
.app-main { .app-main {
margin-left: 220px; margin-left: 220px;
margin-top: 48px; margin-top: 52px;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
flex: 1; flex: 1;
transition: margin-left 0.2s; transition: margin-left 0.2s;