Refactor code structure for improved readability and maintainability

frontend/vue-app/src/components/landing/LandingFeatures.vue

@@ -15,10 +15,7 @@
           :class="{ 'feature-row-reverse': index % 2 !== 0 }"
         >
           <div class="feature-screenshot">
-            <div class="screenshot-placeholder">
+            <img :src="feature.screenshot" :alt="feature.screenshotLabel" class="screenshot-img" />
-              <span class="placeholder-icon">{{ feature.icon }}</span>
-              <span class="placeholder-label">{{ feature.screenshotLabel }}</span>
-            </div>
           </div>
           <div class="feature-text">
             <div class="feature-tag">{{ feature.tag }}</div>
@@ -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',
   },
 ]
 </script>
@@ -124,30 +121,14 @@ const features = [
   direction: ltr;
 }
 
-.screenshot-placeholder {
+.screenshot-img {
-  background: var(--landing-placeholder-bg);
+  width: 100%;
-  border: 1.5px solid var(--landing-placeholder-border);
+  height: auto;
+  display: block;
   border-radius: 16px;
-  aspect-ratio: 16 / 10;
+  border: 1.5px solid var(--landing-placeholder-border);
-  display: flex;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
-  flex-direction: column;
+  object-fit: cover;
-  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;
 }
 
 .feature-tag {