add some sugar to homepage
This commit is contained in:
JCEEE
@@ -24,7 +24,7 @@
|
||||
color: inherit;
|
||||
}
|
||||
.fam-done-check {
|
||||
font-size: x-small;
|
||||
font-size: 0.6em;
|
||||
vertical-align: super;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@@ -7,15 +7,15 @@
|
||||
let { sidebar = false } = $props();
|
||||
</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="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-copy"
|
||||
>© {new Date().getFullYear()}
|
||||
<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>
|
||||
<a href="https://threejjjs.xyz">
|
||||
<h5 class="m-0 text-right font-tertiary text-xl md:text-3xl">
|
||||
@@ -45,18 +45,31 @@
|
||||
line-height: 1;
|
||||
color: #4c1d95;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
}
|
||||
.footer-copy {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.footer-row {
|
||||
position: relative;
|
||||
}
|
||||
.footer-aside {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.footer-star {
|
||||
font-size: 1.75rem;
|
||||
left: 1rem;
|
||||
}
|
||||
.footer-copy {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.footer-aside {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
.topnav {
|
||||
position: fixed;
|
||||
top: 0; left: 220px; right: 0;
|
||||
height: 48px;
|
||||
height: 52px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
|
||||
@@ -36,8 +36,19 @@
|
||||
{/if}
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-copy">
|
||||
<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>
|
||||
<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>
|
||||
<h1>Chores done. <span class="accent">Allowance earned.</span></h1>
|
||||
<p class="lede">
|
||||
@@ -71,11 +82,38 @@
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<!-- EXPLAINER -->
|
||||
<section class="explainer">
|
||||
<h2>How it works</h2>
|
||||
<!-- <section class="explainer">
|
||||
<div class="steps">
|
||||
<article class="step">
|
||||
<span class="step-num">1</span>
|
||||
@@ -102,30 +140,37 @@
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section class="features">
|
||||
<div class="features-inner">
|
||||
<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>
|
||||
<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.
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -151,6 +196,7 @@
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -221,10 +267,120 @@
|
||||
|
||||
/* 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%);
|
||||
padding: 4.5rem 1.5rem;
|
||||
}
|
||||
.hero-inner {
|
||||
.intro-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
@@ -370,11 +526,18 @@
|
||||
}
|
||||
|
||||
/* EXPLAINER */
|
||||
.explainer,
|
||||
.features {
|
||||
.explainer {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 1.5rem;
|
||||
padding-top: 6em;
|
||||
}
|
||||
.features {
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
.features-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.explainer h2,
|
||||
.features h2 {
|
||||
@@ -418,8 +581,10 @@
|
||||
|
||||
/* FEATURES */
|
||||
.features {
|
||||
background: #f5f6fa;
|
||||
border-radius: 0;
|
||||
background: linear-gradient(170deg, #8fb6ee 0%, #dfe9fb 45%, #f5f6fa 100%);
|
||||
}
|
||||
.features h2 {
|
||||
color: #4338ca;
|
||||
}
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
@@ -467,7 +632,7 @@
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 860px) {
|
||||
.hero-inner {
|
||||
.intro-inner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.steps,
|
||||
|
||||
@@ -270,7 +270,7 @@
|
||||
}
|
||||
.app-main {
|
||||
margin-left: 220px;
|
||||
margin-top: 48px;
|
||||
margin-top: 52px;
|
||||
padding: 1.5rem 2rem;
|
||||
flex: 1;
|
||||
transition: margin-left 0.2s;
|
||||
|
||||
Reference in New Issue
Block a user