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>';
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>';
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
+191 -100
View File
@@ -1,7 +1,19 @@
<script lang="ts">
import Footer from '$lib/components/Footer.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 CheckboxGrid from '$lib/components/CheckboxGrid.svelte';
@@ -40,7 +52,7 @@
<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>
<p class="hero-sub">Building <span class="text-green-400">healthy habbits</span> together!</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>
@@ -51,20 +63,25 @@
<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>
<h1>Chores done. <span class="accent">Get rewarded.</span></h1>
<p class="lede">
<FamDone /> turns everyday household chores into points and pocket money. Assign the chores,
let your kids see their progress live, and <FamDone /> calculates the allowance automatically
— no spreadsheets, no nagging.
<FamDone /> lets you choose chores and rewards with your kids.
</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">
<li><span class="tick">{@html checkCircleIcon}</span>Set up in under a minute</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>
<span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday,
automatically
<span class="tick">{@html checkCircleIcon}</span>Get a free trial and see if it's right
for you
</li>
</ul>
</div>
@@ -73,11 +90,6 @@
<h2>Start your family</h2>
<p class="card-sub">Free to get going. Takes about a minute.</p>
<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">
Already have a family? <a href="/login">Log in</a>
</p>
@@ -86,116 +98,104 @@
<div class="explainer">
<div class="steps">
<article class="step">
<span class="step-num">1</span>
<h3>Create your family</h3>
<div class="step-head">
<span class="step-media">
<span class="step-icon">{@html homeIcon}</span>
<span class="step-num">1</span>
</span>
<h3>Create your family</h3>
</div>
<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>
<div class="step-head">
<span class="step-media">
<span class="step-icon">{@html choresIcon}</span>
<span class="step-num">2</span>
</span>
<h3>Kids do the work</h3>
</div>
<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>
<div class="step-head">
<span class="step-media">
<span class="step-icon">{@html coinsIcon}</span>
<span class="step-num">3</span>
</span>
<h3>Payday!</h3>
</div>
<p>If a kid meets their criteria - they can claim their pocket money!</p>
</article>
</div>
</div>
</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">
<div class="features-inner">
<h2>Everything a family needs</h2>
<h2>The BIG Idea</h2>
<div class="feature-grid">
<article class="feature">
<h3>Chore board</h3>
<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>
</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>
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>
</article>
<article class="feature">
<h3>Live progress</h3>
<article class="feature" style="--ic-bg:#ede9fe; --ic-fg:#7c3aed">
<div class="feature-head">
<span class="feature-icon">{@html shieldIcon}</span>
<h3>Trust!</h3>
</div>
<p>The whole experience is about exercising trust together.</p>
</article>
<article class="feature" style="--ic-bg:#fef3c7; --ic-fg:#d97706">
<div class="feature-head">
<span class="feature-icon">{@html gemIcon}</span>
<h3>Rewards &amp; bonuses</h3>
</div>
<p>
Realtime sync across the whole family — see points and progress update the moment a
chore is done.
As a parent you can dish out behaviour rewards or pocket money boosters - in a place
which is yours to create together.
</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 class="feature" style="--ic-bg:#e0f2fe; --ic-fg:#0284c7">
<div class="feature-head">
<span class="feature-icon">{@html laptopIcon}</span>
<h3>Phone free friendly</h3>
</div>
<p>You dont need a mobile or an app - just a browser.</p>
</article>
<article class="feature">
<h3>Rewards &amp; bonuses</h3>
<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>
</div>
<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.
We don't read your data, your messages, or sell anything - your family and rules is your
property.
</p>
</article>
</div>
<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>
<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>
@@ -555,22 +555,72 @@
border: 1px solid #e5e7eb;
border-radius: 14px;
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;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #4338ca;
width: 3rem;
height: 3rem;
border-radius: 12px;
background: linear-gradient(135deg, #4338ca, #6d28d9);
color: #fff;
font-weight: 700;
margin-bottom: 0.75rem;
box-shadow: 0 6px 14px rgba(67, 56, 202, 0.25);
}
.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 {
margin: 0 0 0.5rem;
margin: 0;
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 {
margin: 0;
@@ -596,11 +646,52 @@
border: 1px solid #e5e7eb;
border-radius: 12px;
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 {
margin: 0 0 0.4rem;
margin: 0;
font-size: 1rem;
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 {
margin: 0;