Mobile Landing Page Redesign

[vindema]

Description

Link to Ticket
The mobile home screen now fetches the guardian's profile, registrations, and children to surface curated sections: a personalized greeting, a debounced search bar, upcoming registered classes, a "Discover Weekly" banner, trending events, per-child recommendations, and an "Explore by Category" grid.

How Has This Been Tested?

• Launched the app on iOS simulator with a logged-in guardian account that has children and registrations
  sections render correctly
• Tested with a guardian that has no registrations (confirmed "Your Upcoming Classes" section is hidden)
• Verified the search bar renders and debounces input (filter logic is wired but not yet applied to results )
• Verified category grid falls back to default categories when no event categories are available
• Confirmed navigation to event detail page works from DiscoverBanner, TrendingCard, and UpcomingClassCard

Checklist

General

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas

Backend Changes (if applicable)

• I have written unit tests for my code
• I have written integration tests where appropriate
• New and existing unit tests pass locally with my changes
• I have run make api-validate and make api-gen to keep the openAPI spec up to date
• I have tested error handling and edge cases
• Database migrations are included (if applicable)

Frontend Changes (if applicable)

• I have tested in multiple browsers (Chrome, Firefox, Safari)
• Mobile responsive design verified (if applicable)
• I have run make generate-api to keep the API hooks up to date
• For mobile features: Tested on both iOS and Android devices
• For mobile features: Screenshots from both iOS and Android included below
• No console errors or warnings
• Loading states and error states handled

Mobile Screenshots (if applicable)

iOS

Android

[adescoteaux1]

Mostly styling stuff, looks good overall!

Can we move all style={{}} sections to classname for the static fields

This is a bit of a nit but can you try to match the figma as close as possible for things like padding, font size, corner radius, etc. You should be able to click into compontents to see all this information, let me know if not!

[vindema]

Mostly styling stuff, looks good overall!

Can we move all style={{}} sections to classname for the static fields

This is a bit of a nit but can you try to match the figma as close as possible for things like padding, font size, corner radius, etc. You should be able to click into compontents to see all this information, let me know if not!

I genuinely did not know figma had this. That's awesome. Will clean up the styling soon!

[adescoteaux1]

Mostly styling stuff, looks good overall!
Can we move all style={{}} sections to classname for the static fields
This is a bit of a nit but can you try to match the figma as close as possible for things like padding, font size, corner radius, etc. You should be able to click into compontents to see all this information, let me know if not!

I genuinely did not know figma had this. That's awesome. Will clean up the styling soon!

its possible you have view permissions only and cant click into compontents, lmk if so and ill give you edit perms

[vindema]

Mostly styling stuff, looks good overall!
Can we move all style={{}} sections to classname for the static fields
This is a bit of a nit but can you try to match the figma as close as possible for things like padding, font size, corner radius, etc. You should be able to click into compontents to see all this information, let me know if not!

I genuinely did not know figma had this. That's awesome. Will clean up the styling soon!

its possible you have view permissions only and cant click into compontents, lmk if so and ill give you edit perms

I checked earlier, and I do have permissions to see the specific styling values! Thank you tho!