feat: add landing page components including hero, features, problem, and footer

- Introduced LandingHero component with logo, tagline, and action buttons.
- Created LandingFeatures component to showcase chore system benefits.
- Developed LandingProblem component explaining the importance of a structured chore system.
- Implemented LandingFooter for navigation and copyright information.
- Added LandingPage to assemble all components and manage navigation.
- Included unit tests for LandingHero component to ensure functionality.

frontend/vue-app/src/components/child/ChildView.vue

@@ -577,6 +577,35 @@ onUnmounted(() => {
             <div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
           </template>
         </ScrollingList>
+        <ScrollingList
+          title="Rewards"
+          ref="childRewardListRef"
+          :fetchBaseUrl="`/api/child/${child?.id}/reward-status`"
+          itemKey="reward_status"
+          imageField="image_id"
+          :isParentAuthenticated="false"
+          :readyItemId="readyItemId"
+          @item-ready="handleItemReady"
+          @trigger-item="triggerReward"
+          :getItemClass="
+            (item) => ({ reward: true, disabled: hasPendingRewards && !item.redeeming })
+          "
+        >
+          <template #item="{ item }: { item: RewardStatus }">
+            <div class="item-name">{{ item.name }}</div>
+            <img
+              v-if="item.image_url"
+              :src="item.image_url"
+              alt="Reward Image"
+              class="item-image"
+            />
+            <div class="item-points">
+              <span v-if="item.redeeming" class="pending">PENDING</span>
+              <span v-if="item.points_needed <= 0" class="ready">REWARD READY</span>
+              <span v-else>{{ item.points_needed }} more points</span>
+            </div>
+          </template>
+        </ScrollingList>
         <ScrollingList
           title="Kindness Acts"
           ref="childKindnessListRef"
@@ -631,35 +660,6 @@ onUnmounted(() => {
             </div>
           </template>
         </ScrollingList>
-        <ScrollingList
-          title="Rewards"
-          ref="childRewardListRef"
-          :fetchBaseUrl="`/api/child/${child?.id}/reward-status`"
-          itemKey="reward_status"
-          imageField="image_id"
-          :isParentAuthenticated="false"
-          :readyItemId="readyItemId"
-          @item-ready="handleItemReady"
-          @trigger-item="triggerReward"
-          :getItemClass="
-            (item) => ({ reward: true, disabled: hasPendingRewards && !item.redeeming })
-          "
-        >
-          <template #item="{ item }: { item: RewardStatus }">
-            <div class="item-name">{{ item.name }}</div>
-            <img
-              v-if="item.image_url"
-              :src="item.image_url"
-              alt="Reward Image"
-              class="item-image"
-            />
-            <div class="item-points">
-              <span v-if="item.redeeming" class="pending">PENDING</span>
-              <span v-if="item.points_needed <= 0" class="ready">REWARD READY</span>
-              <span v-else>{{ item.points_needed }} more points</span>
-            </div>
-          </template>
-        </ScrollingList>
       </div>
     </div>
   </div>