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

update homepage text

Browse Source
This commit is contained in:
JCEEE
2026-09-11 18:20:18 +01:00
parent 404d4221ee
commit 70a38ee95b
2 changed files with 195 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/icons.ts
+4
View File
@@ -64,3 +64,7 @@ export const xCircleIcon =
'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg>'; '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg>';
export const infoIcon = export const infoIcon =
'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>'; '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>';
export const shieldIcon =
'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 11.5 2 2 4-4"/></svg>';
export const laptopIcon =
'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9"/><path d="M4 16H2.9a1 1 0 0 0-.95 1.33l.6 1.5a1 1 0 0 0 .95.67h17a1 1 0 0 0 .95-.67l.6-1.5A1 1 0 0 0 21.1 16H20"/></svg>';
frontend/src/routes/+page.svelte
+182 -91
View File
@@ -1,7 +1,19 @@
<script lang="ts"> <script lang="ts">
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import FamDone from '$lib/components/FamDone.svelte'; import FamDone from '$lib/components/FamDone.svelte';
import { homeIcon, checkCircleIcon, chevronRightIcon } from '$lib/components/icons'; import {
homeIcon,
choresIcon,
checkCircleIcon,
chevronRightIcon,
dashboardIcon,
chatIcon,
gemIcon,
lockIcon,
coinsIcon,
shieldIcon,
laptopIcon
} from '$lib/components/icons';
import { readShortcut, shortcutTarget, type Shortcut } from '$lib/shortcut'; import { readShortcut, shortcutTarget, type Shortcut } from '$lib/shortcut';
import CheckboxGrid from '$lib/components/CheckboxGrid.svelte'; import CheckboxGrid from '$lib/components/CheckboxGrid.svelte';
@@ -40,7 +52,7 @@
<div class="hero-content"> <div class="hero-content">
<span class="hero-kicker">The family chore app</span> <span class="hero-kicker">The family chore app</span>
<h1 class="hero-title"><FamDone /></h1> <h1 class="hero-title"><FamDone /></h1>
<p class="hero-sub">Every chore checked. Every allowance earned — on autopilot.</p> <p class="hero-sub">Building <span class="text-green-400">healthy habbits</span> together!</p>
<div class="hero-actions"> <div class="hero-actions">
<a class="hero-cta" href="/signup">Create my family</a> <a class="hero-cta" href="/signup">Create my family</a>
<a class="hero-cta-ghost" href="/pricing">See pricing</a> <a class="hero-cta-ghost" href="/pricing">See pricing</a>
@@ -51,20 +63,25 @@
<div class="intro-inner"> <div class="intro-inner">
<div class="intro-copy"> <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">Get rewarded.</span></h1>
<p class="lede"> <p class="lede">
<FamDone /> turns everyday household chores into points and pocket money. Assign the chores, <FamDone /> lets you choose chores and rewards with your kids.
let your kids see their progress live, and <FamDone /> calculates the allowance automatically
— no spreadsheets, no nagging.
</p> </p>
<p class="lede">
Because life is fun, <FamDone /> makes it easy for the tricky things become part of your daily
routine.
</p>
<!-- <p> - letting them become
empowered and take ownership of the things they forget about - You might learn a thing or two too!</p> -->
<ul class="hero-ticks"> <ul class="hero-ticks">
<li><span class="tick">{@html checkCircleIcon}</span>Set up in under a minute</li> <li><span class="tick">{@html checkCircleIcon}</span>Set up in under a minute</li>
<li> <li>
<span class="tick">{@html checkCircleIcon}</span>Kids join with a simple invite code <span class="tick">{@html checkCircleIcon}</span>Kids join with their own device or
family computer
</li> </li>
<li> <li>
<span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday, <span class="tick">{@html checkCircleIcon}</span>Get a free trial and see if it's right
automatically for you
</li> </li>
</ul> </ul>
</div> </div>
@@ -73,11 +90,6 @@
<h2>Start your family</h2> <h2>Start your family</h2>
<p class="card-sub">Free to get going. Takes about a minute.</p> <p class="card-sub">Free to get going. Takes about a minute.</p>
<a class="submit" href="/signup">Create my family</a> <a class="submit" href="/signup">Create my family</a>
<p class="card-alt">
<a class="flex gap-2 self-center align-center justify-center" href="/pricing"
>See pricing {@html chevronRightIcon}</a
>
</p>
<p class="card-alt"> <p class="card-alt">
Already have a family? <a href="/login">Log in</a> Already have a family? <a href="/login">Log in</a>
</p> </p>
@@ -86,116 +98,104 @@
<div class="explainer"> <div class="explainer">
<div class="steps"> <div class="steps">
<article class="step"> <article class="step">
<div class="step-head">
<span class="step-media">
<span class="step-icon">{@html homeIcon}</span>
<span class="step-num">1</span> <span class="step-num">1</span>
</span>
<h3>Create your family</h3> <h3>Create your family</h3>
</div>
<p> <p>
Set up chores and how much each one is worth. Your kids join in seconds with an invite Set up chores and how much each one is worth. Your kids join in seconds with an invite
code. code.
</p> </p>
</article> </article>
<article class="step"> <article class="step">
<div class="step-head">
<span class="step-media">
<span class="step-icon">{@html choresIcon}</span>
<span class="step-num">2</span> <span class="step-num">2</span>
</span>
<h3>Kids do the work</h3> <h3>Kids do the work</h3>
</div>
<p> <p>
They see today's chores as a simple card board and tick them off as they go — points are They see today's chores as a simple card board and tick them off as they go — points are
added instantly. added instantly.
</p> </p>
</article> </article>
<article class="step"> <article class="step">
<div class="step-head">
<span class="step-media">
<span class="step-icon">{@html coinsIcon}</span>
<span class="step-num">3</span> <span class="step-num">3</span>
<h3>Allowance pays out</h3> </span>
<p> <h3>Payday!</h3>
Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep </div>
it fun. <p>If a kid meets their criteria - they can claim their pocket money!</p>
</p>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
<!-- EXPLAINER -->
<!-- <section 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>
</section> -->
<!-- FEATURES -->
<section class="features"> <section class="features">
<div class="features-inner"> <div class="features-inner">
<h2>Everything a family needs</h2> <h2>The BIG Idea</h2>
<div class="feature-grid"> <div class="feature-grid">
<article class="feature"> <article class="feature" style="--ic-bg:#e0e7ff; --ic-fg:#4338ca">
<div class="feature-head">
<span class="feature-icon">{@html dashboardIcon}</span>
<h3>Chore board</h3> <h3>Chore board</h3>
</div>
<p>Simple and intuitive chore board for parents to assign tasks to their kids.</p>
</article>
<article class="feature" style="--ic-bg:#ccfbf1; --ic-fg:#0d9488">
<div class="feature-head">
<span class="feature-icon">{@html chatIcon}</span>
<h3>Chat</h3>
</div>
<p> <p>
Reusable chore templates and a simple assignment grid. Build once, reuse every week. Real-time chat for parents to communicate with their kids - so you can congratulate
them!
</p> </p>
</article> </article>
<article class="feature"> <article class="feature" style="--ic-bg:#ede9fe; --ic-fg:#7c3aed">
<h3>Live progress</h3> <div class="feature-head">
<p> <span class="feature-icon">{@html shieldIcon}</span>
Realtime sync across the whole family — see points and progress update the moment a <h3>Trust!</h3>
chore is done. </div>
</p> <p>The whole experience is about exercising trust together.</p>
</article> </article>
<article class="feature"> <article class="feature" style="--ic-bg:#fef3c7; --ic-fg:#d97706">
<h3>Automatic allowance</h3> <div class="feature-head">
<p> <span class="feature-icon">{@html gemIcon}</span>
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> <h3>Rewards &amp; bonuses</h3>
</div>
<p> <p>
Kids can spend points on rewards, and you can run a monthly bonus for the top earner. As a parent you can dish out behaviour rewards or pocket money boosters - in a place
which is yours to create together.
</p> </p>
</article> </article>
<article class="feature"> <article class="feature" style="--ic-bg:#e0f2fe; --ic-fg:#0284c7">
<h3>Kid-friendly</h3> <div class="feature-head">
<p> <span class="feature-icon">{@html laptopIcon}</span>
A simple, colourful interface kids love — big buttons, clear feedback, their own space. <h3>Phone free friendly</h3>
</p> </div>
<p>You dont need a mobile or an app - just a browser.</p>
</article> </article>
<article class="feature"> <article class="feature" style="--ic-bg:#e2e8f0; --ic-fg:#475569">
<div class="feature-head">
<span class="feature-icon">{@html lockIcon}</span>
<h3>Private by design</h3> <h3>Private by design</h3>
</div>
<p> <p>
Everything is scoped to your family. Kids join with an invite code and stay in your We don't read your data, your messages, or sell anything - your family and rules is your
family. property.
</p> </p>
</article> </article>
</div> </div>
<div class="cta"> <div class="cta">
<p>Ready to make chores painless?</p> <p>Ready to get the kids involved?</p>
<a class="cta-btn" href="/signup">Create your family</a> <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>
</div> </div>
</section> </section>
@@ -555,22 +555,72 @@
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 14px; border-radius: 14px;
padding: 1.5rem; padding: 1.5rem;
transition:
transform 0.15s,
box-shadow 0.15s,
border-color 0.15s;
} }
.step-num { .step:hover {
transform: translateY(-3px);
border-color: #c7d2fe;
box-shadow: 0 12px 24px rgba(67, 56, 202, 0.1);
}
.step-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.step-media {
position: relative;
display: inline-block;
flex-shrink: 0;
}
.step-icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 2rem; width: 3rem;
height: 2rem; height: 3rem;
border-radius: 50%; border-radius: 12px;
background: #4338ca; background: linear-gradient(135deg, #4338ca, #6d28d9);
color: #fff; color: #fff;
font-weight: 700; box-shadow: 0 6px 14px rgba(67, 56, 202, 0.25);
margin-bottom: 0.75rem; }
.step-icon :global(svg) {
width: 1.5em;
height: 1.5em;
}
.step-num {
position: absolute;
top: -0.4rem;
right: -0.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background: #fbbf24;
color: #1e1b4b;
font-weight: 800;
font-size: 0.72rem;
border: 2px solid #fff;
} }
.step h3 { .step h3 {
margin: 0 0 0.5rem; margin: 0;
font-size: 1.05rem; font-size: 1.05rem;
text-align: right;
}
.step h3::after {
content: '';
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
background: #4338ca;
margin-top: 0.45rem;
} }
.step p { .step p {
margin: 0; margin: 0;
@@ -596,11 +646,52 @@
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 12px; border-radius: 12px;
padding: 1.25rem; padding: 1.25rem;
transition:
transform 0.15s,
box-shadow 0.15s,
border-color 0.15s;
}
.feature:hover {
transform: translateY(-3px);
border-color: #d1d5db;
box-shadow: 0 14px 28px rgba(67, 56, 202, 0.12);
}
.feature-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.6rem;
height: 2.6rem;
border-radius: 10px;
background: var(--ic-bg);
color: var(--ic-fg);
}
.feature-icon :global(svg) {
width: 1.35em;
height: 1.35em;
} }
.feature h3 { .feature h3 {
margin: 0 0 0.4rem; margin: 0;
font-size: 1rem; font-size: 1rem;
color: #111827; color: #111827;
text-align: right;
}
.feature h3::after {
content: '';
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
background: var(--ic-fg);
margin-top: 0.45rem;
} }
.feature p { .feature p {
margin: 0; margin: 0;