JCEEE
481 lines
10 KiB
Svelte
481 lines
10 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
import { homeIcon, checkCircleIcon, chevronRightIcon } from '$lib/components/icons';
|
|
import { readShortcut, shortcutTarget, type Shortcut } from '$lib/shortcut';
|
|
|
|
let shortcut = $state<(Shortcut & { target: string }) | null>(null);
|
|
|
|
onMount(() => {
|
|
const s = readShortcut();
|
|
if (s) shortcut = { ...s, target: shortcutTarget(s) };
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>FamChore — Chores done. Allowance earned.</title>
|
|
<meta
|
|
name="description"
|
|
content="Turn family chores into points and pocket money. Assign chores, kids complete them, allowances are calculated automatically."
|
|
/>
|
|
</svelte:head>
|
|
|
|
<main class="landing">
|
|
{#if shortcut}
|
|
<a class="return-chip" href={shortcut.target} title="Jump back into {shortcut.famName}">
|
|
<span class="return-icon">
|
|
{@html homeIcon}
|
|
<span class="return-dot"></span>
|
|
</span>
|
|
<span class="return-text">
|
|
<span class="return-fam">{shortcut.famName}</span>
|
|
<span class="return-sub">Jump back in {@html chevronRightIcon}</span>
|
|
</span>
|
|
</a>
|
|
{/if}
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-copy">
|
|
<span class="pill">For busy families</span>
|
|
<h1>Chores done. <span class="accent">Allowance earned.</span></h1>
|
|
<p class="lede">
|
|
FamChore turns everyday household chores into points and pocket money. Assign the chores,
|
|
let your kids see their progress live, and FamChore calculates the allowance automatically
|
|
— no spreadsheets, no nagging.
|
|
</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
|
|
</li>
|
|
<li>
|
|
<span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday,
|
|
automatically
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="signup-card">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- EXPLAINER -->
|
|
<section class="explainer">
|
|
<h2>How it works</h2>
|
|
<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">
|
|
<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 & 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>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
.landing {
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* RETURNING-USER SHORTCUT */
|
|
.return-chip {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
width: fit-content;
|
|
padding: 0.45rem 0.9rem 0.45rem 0.55rem;
|
|
background: #fff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
color: #1f2937;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
transition:
|
|
border-color 0.15s,
|
|
box-shadow 0.15s;
|
|
}
|
|
.return-chip:hover {
|
|
border-color: #c7d2fe;
|
|
box-shadow: 0 2px 10px rgba(67, 56, 202, 0.14);
|
|
}
|
|
.return-icon {
|
|
position: relative;
|
|
display: inline-flex;
|
|
color: #4338ca;
|
|
}
|
|
.return-dot {
|
|
position: absolute;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
width: 11px;
|
|
height: 11px;
|
|
background: #22c55e;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
}
|
|
.return-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.15;
|
|
}
|
|
.return-fam {
|
|
font-weight: 700;
|
|
font-size: 0.92rem;
|
|
}
|
|
.return-sub {
|
|
font-size: 0.72rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* HERO */
|
|
.hero {
|
|
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
|
|
padding: 4.5rem 1.5rem;
|
|
}
|
|
.hero-inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
}
|
|
.pill {
|
|
display: inline-block;
|
|
background: #e0e7ff;
|
|
color: #4338ca;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
padding: 0.3rem 0.7rem;
|
|
border-radius: 999px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
h1 {
|
|
font-size: 2.6rem;
|
|
line-height: 1.1;
|
|
margin: 0 0 1rem;
|
|
}
|
|
.accent {
|
|
color: #4338ca;
|
|
}
|
|
.lede {
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
color: #4b5563;
|
|
max-width: 34rem;
|
|
margin: 0 0 1.5rem;
|
|
}
|
|
.hero-ticks {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 0.6rem;
|
|
}
|
|
.hero-ticks li::before {
|
|
content: '';
|
|
}
|
|
.hero-ticks .tick {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.15rem;
|
|
height: 1.15rem;
|
|
margin-right: 0.5rem;
|
|
color: #4338ca;
|
|
}
|
|
.hero-ticks .tick :global(svg) {
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
}
|
|
|
|
/* SIGNUP CARD */
|
|
.signup-card {
|
|
background: #fff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 16px;
|
|
box-shadow: 0 12px 30px rgba(67, 56, 202, 0.08);
|
|
padding: 1.75rem;
|
|
}
|
|
.signup-card h2 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
.card-sub {
|
|
margin: 0 0 1.25rem;
|
|
color: #6b7280;
|
|
font-size: 0.9rem;
|
|
}
|
|
.signup-card form {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
.signup-card label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
}
|
|
.signup-card input {
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
}
|
|
.signup-card input:focus {
|
|
outline: none;
|
|
border-color: #4338ca;
|
|
box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
|
|
}
|
|
.form-error {
|
|
background: #fef2f2;
|
|
color: #b91c1c;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 8px;
|
|
padding: 0.6rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
margin: 0;
|
|
}
|
|
.submit {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 0.25rem;
|
|
background: #4338ca;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.submit:hover {
|
|
background: #3730a3;
|
|
}
|
|
.submit:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.card-alt {
|
|
margin: 1rem 0 0;
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
text-align: center;
|
|
}
|
|
.card-alt a {
|
|
color: #4338ca;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.card-alt a :global(svg) {
|
|
vertical-align: -0.2em;
|
|
}
|
|
|
|
/* EXPLAINER */
|
|
.explainer,
|
|
.features {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 4rem 1.5rem;
|
|
}
|
|
.explainer h2,
|
|
.features h2 {
|
|
text-align: center;
|
|
font-size: 1.9rem;
|
|
margin: 0 0 2rem;
|
|
}
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
.step {
|
|
background: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 14px;
|
|
padding: 1.5rem;
|
|
}
|
|
.step-num {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
background: #4338ca;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.step h3 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
.step p {
|
|
margin: 0;
|
|
color: #4b5563;
|
|
font-size: 0.92rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* FEATURES */
|
|
.features {
|
|
background: #f5f6fa;
|
|
border-radius: 0;
|
|
}
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.25rem;
|
|
}
|
|
.feature {
|
|
background: #fff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
}
|
|
.feature h3 {
|
|
margin: 0 0 0.4rem;
|
|
font-size: 1rem;
|
|
color: #111827;
|
|
}
|
|
.feature p {
|
|
margin: 0;
|
|
color: #4b5563;
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
}
|
|
.cta {
|
|
text-align: center;
|
|
margin-top: 2.5rem;
|
|
}
|
|
.cta p {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
margin: 0 0 1rem;
|
|
}
|
|
.cta-btn {
|
|
display: inline-block;
|
|
background: #4338ca;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
padding: 0.7rem 1.5rem;
|
|
border-radius: 8px;
|
|
}
|
|
.cta-btn:hover {
|
|
background: #3730a3;
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 860px) {
|
|
.hero-inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.steps,
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style>
|