Implement Savings Goals Stats Cards (Figma)

[Baskarayelu]

Description

Implement the three Savings Goals stats cards from the Figma design. Total Goals (4), Total Target ($48,000), Total Saved ($26,500)—each with label, large value, and red-orange icon in top right.

Design reference (Figma): RemitWise Design

Design Requirements

Layout (three cards, horizontal)

• Total Goals: Dark grey card. "Total Goals" (light grey). "4" (large bold white). Red-orange target icon (top right).
• Total Target: Dark grey card. "Total Target" (light grey). "$48,000" (large bold white). Red-orange $ icon (top right).
• Total Saved: Dark grey card. "Total Saved" (light grey). "$26,500" (large bold white). Red-orange trend/arrow icon (top right).

Visual Design

• Dark rounded cards; white values; light grey labels; red-orange icons.

Technical Requirements

• Next.js App Router
• TypeScript
• Tailwind CSS
• Data from API or placeholders; responsive grid

Acceptance Criteria

• Three cards: Total Goals 4, Total Target $48,000, Total Saved $26,500
• Icons in top right of each card (target, $, trend)
• Dark theme matches design
• Responsive layout

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[SimpleX-T]

@SimpleX-T has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi,

I want to resolve this issue for you. I am a frontend developer with keen eyes for high-quality design implementation. Kindly assign this issue to me, and you stand to gain a conflict-free PR.

Looking forward to contributing

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SimpleX-T to this issue.

[Emmyt24]

@Emmyt24 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi team, I’d like to work on this issue.

I’m a Frontend Developer who thrives at the intersection of UI polish + product usability, and I’ve shipped responsive components/pages using Next.js/React + Tailwind (including interactions, animations, and pixel-accurate Figma builds).

What I’ll deliver

Savings Goals stats cards implemented to match the Figma/spec (Total Goals: 4, Total Target: $48,000, Total Saved: $26,500)

Dark, rounded card styling with light-grey labels, bold white values, and red-orange icons in the top-right (target, $, trend)

Responsive layout (3-up on desktop, stacked/grid on mobile) using Next.js App Router + TypeScript + Tailwind, with API wiring or placeholders

Approach

Review the Figma styles (spacing, typography, radii, colors) and follow existing component patterns in the repo

Build a reusable StatsCard component and compose the 3-card layout with responsive Tailwind grid

QA across breakpoints and open a PR with screenshots/video (and notes on data wiring if placeholders are used)

If assigned, I’ll start immediately and share progress updates in the PR.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Emmyt24 to this issue.

[jerrybarry]

@jerrybarry has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, my name is Jerry. I’m a full-stack developer with 3+ years of experience building successful products.

I can confidently handle this issue.
Here is my portfolio and projects I have handled:
https://www.tafscraper.com/
https://app.tinnitaid.com/
http://www.tafhub.com/

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jerrybarry to this issue.

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I can deliver this in 1 hour. I will build the three Savings Goals stats cards to match the Figma design and submit a PR that solves this issue with the intended result.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Chucks1093 to this issue.

[OluwapelumiElisha]

@OluwapelumiElisha has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I can solve this very fast.

I’m a Frontend Developer experienced in building responsive stats cards and dashboard components using Next.js (App Router), TypeScript, and Tailwind CSS, especially for fintech interfaces.

I’ve reviewed Issue #92 – Implement Savings Goals Stats Cards, and the requirements are very clear.

What I’ll implement:

Three horizontal stats cards:

Total Goals (4) with red-orange target icon top-right

Total Target ($48,000) with red-orange $ icon top-right

Total Saved ($26,500) with red-orange trend/arrow icon top-right

Dark grey rounded cards with white values, light grey labels, and red-orange icons

Fully responsive layout for different screen sizes

Data can be API-driven or placeholder values, cleanly typed

I focus on clear hierarchy, readability, and pixel-perfect alignment with the Figma design. This is something I can implement and deliver quickly, fully functional and visually accurate.

I can start immediately and push a clean PR as soon as possible.

Best regards,
Elisha

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluwapelumiElisha to this issue.

[anumukul]

@anumukul has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d like to take this issue and can deliver a fix within 24 hours.
I’ve worked on similar projects before and have relevant experience, so I should be able to handle this efficiently.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @anumukul to this issue.

[drips-wave]

Congratulations, @Emmyt24! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Emmyt24: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊