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.icon }} - {{ feature.screenshotLabel }} -
+
{{ 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 {