Standardized Button + Header Components

[sristii]

📝 Task Description

Build a standardized button component & header component based on the Figma.

These components will be reused throughout the site! Please populate each page with the headers (there just won't be a navbar yet since that's someone else's ticket, so may get tedious navigating thru pages)

Be sure to push & pull from the dev branch

✅ Acceptance Criteria

• Is the button component reusable across different pages, accepting props for text, routing, and button color?
• Is the header component reusable across different pages, accepting props for page title, and description?
• Does the button navigate to the correct page on click?
• Is there a proper hover effect for the button?
• Is the styling for both components aligned with the design in Figma?

🔍 Subtask Breakdown

• Button Component:

  • Takes in text (string) and route (string) as props.
  • Navigate to the correct page on click.
  • Add support for additional props like styling (white/blue button) or icons if needed.

• Header Component:

  • Takes in title (string) and description (string) as props.
  • Properly styled according to Figma.

Also, if you know of a better way to tackle this, DO IT UR WAY PLS, whatever is most intuitive to you

💫 Recommended Approach

Start by building and styling the button component → move on to the header component → maybe make/populate pages with headers (and buttons if needed according to the design)

Make sure to utilize Dev Mode & Preview Mode in Figma to ensure your implementation matches the design. Making universal components helps make it possible for consistency across the app (++ points for abstraction yay!!)

✨ Resources ✨

• Tailwind Button's
• Components in React