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/router/__tests__/authGuard.spec.ts

@@ -94,20 +94,20 @@ describe('router auth guard', () => {
     expect(path).toBe('/auth/login')
   })
 
-  // ── Unauthenticated users are redirected to /auth from protected routes ───
+  // ── Unauthenticated users are redirected to / from protected routes ────────
 
-  it('redirects unauthenticated user from /parent to /auth', async () => {
+  it('redirects unauthenticated user from /parent to /', async () => {
     isUserLoggedInMock.value = false
 
     const path = await navigate('/parent')
-    expect(path).toBe('/auth')
+    expect(path).toBe('/')
   })
 
-  it('redirects unauthenticated user from /child to /auth', async () => {
+  it('redirects unauthenticated user from /child to /', async () => {
     isUserLoggedInMock.value = false
 
     const path = await navigate('/child')
-    expect(path).toBe('/auth')
+    expect(path).toBe('/')
   })
 
   // ── Authenticated users are routed to the correct section ─────────────────
@@ -152,4 +152,29 @@ describe('router auth guard', () => {
     const path = await navigate('/parent/pin-setup')
     expect(path).toBe('/parent/pin-setup')
   })
+
+  // ── Landing page (/) ────────────────────────────────────────────────────────
+
+  it('allows unauthenticated user to access / (landing page)', async () => {
+    isUserLoggedInMock.value = false
+
+    const path = await navigate('/')
+    expect(path).toBe('/')
+  })
+
+  it('redirects logged-in child user from / to /child', async () => {
+    isUserLoggedInMock.value = true
+    isParentAuthenticatedMock.value = false
+
+    const path = await navigate('/')
+    expect(path).toBe('/child')
+  })
+
+  it('redirects logged-in parent user from / to /parent', async () => {
+    isUserLoggedInMock.value = true
+    isParentAuthenticatedMock.value = true
+
+    const path = await navigate('/')
+    expect(path).toBe('/parent')
+  })
 })

frontend/vue-app/src/router/index.ts

@@ -32,6 +32,7 @@ import {
   enforceParentExpiry,
 } from '../stores/auth'
 import ParentPinSetup from '@/components/auth/ParentPinSetup.vue'
+import LandingPage from '@/components/landing/LandingPage.vue'
 
 const routes = [
   {
@@ -235,7 +236,9 @@ const routes = [
   },
   {
     path: '/',
-    redirect: '/child',
+    name: 'LandingPage',
+    component: LandingPage,
+    meta: { isPublic: true },
   },
 ]
 
@@ -260,8 +263,8 @@ router.beforeEach(async (to, from, next) => {
     })
   }
 
-  // If already logged in and trying to access /auth, redirect to appropriate view
-  if (to.path.startsWith('/auth') && isUserLoggedIn.value) {
+  // If already logged in and trying to access /auth or landing, redirect to appropriate view
+  if ((to.path.startsWith('/auth') || to.path === '/') && isUserLoggedIn.value) {
     if (isParentAuthenticated.value) {
       return next('/parent')
     } else {
@@ -269,14 +272,14 @@ router.beforeEach(async (to, from, next) => {
     }
   }
 
-  // Always allow /auth and /parent/pin-setup
-  if (to.path.startsWith('/auth') || to.name === 'ParentPinSetup') {
+  // Always allow /auth, landing page, and /parent/pin-setup
+  if (to.path.startsWith('/auth') || to.path === '/' || to.name === 'ParentPinSetup') {
     return next()
   }
 
-  // If not logged in, redirect to /auth
+  // If not logged in, redirect to landing page
   if (!isUserLoggedIn.value) {
-    return next('/auth')
+    return next('/')
   }
 
   // If parent-authenticated, allow all /parent routes