JCEEE
338 lines
8.7 KiB
Svelte
338 lines
8.7 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { Footer } from '$lib/components';
|
|
import type { Action, SubmitFunction } from './$types';
|
|
|
|
let email = $state('');
|
|
let password = $state('');
|
|
let famName = $state('');
|
|
let parentName = $state('');
|
|
let error = $state('');
|
|
let submitting = $state(false);
|
|
|
|
const submit: SubmitFunction = () => {
|
|
error = '';
|
|
submitting = true;
|
|
return async ({ result, update }) => {
|
|
if (result.type === 'failure') {
|
|
error = (result.data as any)?.error || 'Something went wrong. Please try again.';
|
|
}
|
|
submitting = false;
|
|
};
|
|
};
|
|
</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">
|
|
<!-- 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>Set up in under a minute</li>
|
|
<li>Kids join with a simple invite code</li>
|
|
<li>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>
|
|
<form method="POST" action="/signup" use:enhance={submit}>
|
|
{#if error}
|
|
<p class="form-error">{error}</p>
|
|
{/if}
|
|
<label>
|
|
Family name
|
|
<input name="famName" bind:value={famName} placeholder="The Smiths" required />
|
|
</label>
|
|
<label>
|
|
Your name
|
|
<input name="parentName" bind:value={parentName} placeholder="Mum / Dad" required />
|
|
</label>
|
|
<label>
|
|
Email
|
|
<input type="email" name="email" bind:value={email} placeholder="you@email.com" required />
|
|
</label>
|
|
<label>
|
|
Password
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
bind:value={password}
|
|
placeholder="8+ characters"
|
|
minlength={8}
|
|
required
|
|
/>
|
|
</label>
|
|
<button class="submit" type="submit" disabled={submitting}>
|
|
{submitting ? 'Creating your family…' : 'Create my family'}
|
|
</button>
|
|
</form>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
.landing {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* 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: "✓";
|
|
color: #4338ca;
|
|
font-weight: 700;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* 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 {
|
|
margin-top: 0.25rem;
|
|
background: #4338ca;
|
|
color: #fff;
|
|
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; }
|
|
|
|
/* 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>
|