diff --git a/frontend/vue-app/public/images/feature00.png b/frontend/vue-app/public/images/feature00.png
new file mode 100644
index 0000000..709bc99
Binary files /dev/null and b/frontend/vue-app/public/images/feature00.png differ
diff --git a/frontend/vue-app/public/images/feature01.png b/frontend/vue-app/public/images/feature01.png
new file mode 100644
index 0000000..3cd884e
Binary files /dev/null and b/frontend/vue-app/public/images/feature01.png differ
diff --git a/frontend/vue-app/public/images/feature02.png b/frontend/vue-app/public/images/feature02.png
new file mode 100644
index 0000000..57b9a71
Binary files /dev/null and b/frontend/vue-app/public/images/feature02.png differ
diff --git a/frontend/vue-app/public/images/feature03.png b/frontend/vue-app/public/images/feature03.png
new file mode 100644
index 0000000..3a77798
Binary files /dev/null and b/frontend/vue-app/public/images/feature03.png differ
diff --git a/frontend/vue-app/src/components/landing/LandingFeatures.vue b/frontend/vue-app/src/components/landing/LandingFeatures.vue
index 720cbdb..9debb03 100644
--- a/frontend/vue-app/src/components/landing/LandingFeatures.vue
+++ b/frontend/vue-app/src/components/landing/LandingFeatures.vue
@@ -15,10 +15,7 @@
:class="{ 'feature-row-reverse': index % 2 !== 0 }"
>
{{ feature.tag }}
@@ -35,31 +32,31 @@
const features = [
{
tag: 'Points & Chores',
- icon: '⭐',
title: 'Chores Worth Collecting',
body: 'Create chores with fully customizable point values. Kids earn points for every task they complete, turning daily responsibilities into something genuinely satisfying to collect.',
screenshotLabel: 'Chore Dashboard',
+ screenshot: '/images/feature00.png',
},
{
tag: 'Rewards',
- icon: '🎁',
title: 'Goals Kids Actually Care About',
body: "Set up custom rewards that mean something to your child — screen time, a special outing, a toy they've been wanting. Saving up points teaches patience and goal-setting.",
screenshotLabel: 'Reward Store',
+ screenshot: '/images/feature01.png',
},
{
tag: 'Child View',
- icon: '👧',
title: 'Kids Stay in the Loop',
body: 'A simple, beautiful child interface shows exactly which chores need to be done today and which rewards are within reach — no confusion, no excuses.',
screenshotLabel: 'Child Dashboard',
+ screenshot: '/images/feature02.png',
},
{
tag: 'Parent Controls',
- icon: '🔒',
title: 'Powerful Parental Controls',
body: "Hidden behind a PIN, the parent panel lets you add chores, adjust rewards, review history, and manage everything — without interrupting your child's flow.",
screenshotLabel: 'Parent Panel',
+ screenshot: '/images/feature03.png',
},
]
@@ -124,30 +121,14 @@ const features = [
direction: ltr;
}
-.screenshot-placeholder {
- background: var(--landing-placeholder-bg);
- border: 1.5px solid var(--landing-placeholder-border);
+.screenshot-img {
+ width: 100%;
+ height: auto;
+ display: block;
border-radius: 16px;
- aspect-ratio: 16 / 10;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 0.75rem;
- backdrop-filter: blur(6px);
- -webkit-backdrop-filter: blur(6px);
-}
-
-.placeholder-icon {
- font-size: 2.8rem;
- line-height: 1;
-}
-
-.placeholder-label {
- font-size: 0.85rem;
- color: var(--landing-hero-subtext);
- font-weight: 500;
- letter-spacing: 0.04em;
+ border: 1.5px solid var(--landing-placeholder-border);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+ object-fit: cover;
}
.feature-tag {