Feature [Template]: Donate Details Template

[hcavanaugh]

Research Needed

• Capability to pull donate grid constant data into NextJS dynamic routing (...[slug].js)

Components to make for the page:

• Hero Section
• 2-up facts section
• Image gallery
• donation CTA
• donation buttons

Design: See this Figma file.

Code:

• Create the src/app/donate/[slug].tsx page. This will set the route for the donation grid items on /donate/ that have a 'More Info' link. This is vital to allow these pages to route correctly in NextJS! See the docs for more information on dynamic routing Research needed to see if current data constants can be pulled in for this
• Strapi integration should be considered for this template. If that is not doable now, a new data-set constant ts file in src/data/ can be made.
• Put page-content-specific components in src/components/donate/ or in another components folder if they're potentially reusable on other pages.

Notes:

• Since we're making a new page with a significantly different design than the old one, there shouldn't need to be too much code reuse. Let's prioritize using Radix UI components (check both their Theme and Primitives docs). It's ok to sprinkle in some tailwind in order to go above and beyond what we get out of the box with Radix, but don't feel like you need to be pixel-perfect when following the designs.
• Note the mobile responsive designs in Figma as well. Page should be mobile responsive!