feat/create-user-dashboard-and-coupons-pages-with-components

[KevinMB0220]

➡️ Title

feat/create-user-dashboard-and-coupons-pages-with-components

---

📘 Description

Create the User Dashboard and Coupons pages for TreeByte, rendering all sections as independent reusable components.
The dashboard must show the user’s points, active projects, footprint, available coupons, and achievements.
When the user clicks “Show all coupons”, it should navigate to the full Coupons page displaying all available coupons in a grid format.
The structure and styles must strictly follow the provided Figma designs:

• User Dashboard Design
• Coupons Page Design

---

✅ Acceptance Criteria

User Dashboard (user-dashboard)

• Create the user-dashboard page that imports and renders all sections in order:
  • header-section
  • user-summary-section (points, active projects)
  • footprint-section
  • projects-section
  • achievements-section
  • coupons-preview-section (5 coupons max + “Show all coupons” link)
  • latest-tokens-section
  • footer-section
• Clicking “Show all coupons” must navigate to the full coupons-page.

Coupons Page (coupons-page)

• Display all available coupons in a responsive grid format.
• Include filters: region, categories, and sort by (as shown in the design).
• Must show the user’s total available points at the top.
• Include the shared footer-section.

---

⚠ Technical Notes

• Components must be independent and reusable, placed in @/components/dashboard/ and @/components/coupons/.
• Use alias imports with @, no relative paths.
• Folder and file naming strictly in kebab-case.
• Must support dark and light mode using Tailwind’s class strategy.
• Colors and styles must use Tailwind variables (hsl or oklch).
• Page files must be placed in:
  • @/pages/user-dashboard
  • @/pages/coupons-page

[JosueBrenes]

Hi, I'm Josué Brenes and I'll be working on this issue.
I'm a Dojo Coding member. ⛩️

I estimate this will take 1 days to complete.

To implement the User Dashboard and Coupons Page, I would start by creating all the required sections as independent reusable components inside @/components/dashboard/ and @/components/coupons/, following strict kebab-case naming conventions. Using alias imports (@), the user-dashboard page will render each section in order: header-section, user-summary-section, footprint-section, projects-section, achievements-section, coupons-preview-section, latest-tokens-section, and footer-section. The “Show all coupons” link in the coupons-preview-section will navigate to the coupons-page using Next.js routing. All components will adhere to the Figma designs with Tailwind CSS utilities and support dark/light mode using Tailwind’s class strategy with hsl() or oklch() variables.

On the coupons-page, I would display all available coupons in a responsive grid format and implement filter options for region, category, and sorting (as per design). The page will also show the user's total available points at the top, ensuring visual consistency with the dashboard. Reusability and maintainability will be emphasized by isolating filter logic and coupon display into se