[Frontend] NetworkStats Component

[aguilar1x]

🎯 Objective

Build the NetworkStats section to display a headline, description, and four statistic cards with icons, reflecting real-time marketplace metrics.

---

🏗 Component Structure

src/features/common/landing/components/network-stats/
  network-stats.tsx
  index.ts

Integration:

• Place on the landing page as its own section.

---

🗂 Requirements

1) NetworkStats Component

Header Area (centered):

• Pill label: “Real-Time Network Stats” (badge style).

• Title: Powering the Future of Commerce

  • “Future” uses purple→blue gradient per design.

• Description:
  Our blockchain-powered marketplace is processing thousands of transactions daily, creating a new standard for transparent and secure e-commerce.

Stats Grid (4 cards):

1. Total Transactions — value: 1,547,892 — icon: card inside a blue gradient square.
2. NFTs Minted — value: 89,456 — icon: palette inside a pink→purple gradient square.
3. Active Users — value: 32,589 — icon: users inside a green gradient square.
4. Total Volume — value: $2,847M — icon: money bag inside an orange gradient square.

Card Style:

• Dark panel with subtle starry noise background, rounded-2xl–rounded-3xl.
• Internal padding consistent across cards; value large/bold, label secondary.
• Icon container is a rounded square with gradient background, centered left/top per design.

Layout & Responsiveness:

• Desktop: 4-column grid.
• Tablet: 2 columns.
• Mobile: 1 column.
• Even spacing (gap-8) and section max width (max-w-7xl) centered.

Accessibility:

• Section aria-labelledby pointing to the title.
• Each card uses semantic markup; numbers are readable by screen readers.
• Focus states visible if cards become interactive later.

---

🎨 Design & Tokens

• Title gradient matches Figma (purple→blue).
• Card titles (numbers): text-4xl/font-extrabold on desktop; scale down on mobile.
• Labels: text-sm–text-base, muted/light gray.
• Icon squares use the specified gradients; icons are decorative (aria-hidden="true").
• Use Tailwind tokens/utilities; keep spacing consistent with other landing sections.

---

✅ Acceptance Criteria

• Matches the provided design at ≥95% (typography, gradients, spacing, radii).
• Responsive across 360 / 768 / 1024 / 1280.
• No TypeScript or console warnings.
• Renders as a standalone section on the landing page.

🎯 Reference

[DanielCotoJ]

Hi team! 👋

I’d like to take on the NetworkStats section. I have solid experience matching Figma designs ≥95% using React + Tailwind, including gradients, radii, and responsive layouts.

Plan:

• Create component in src/features/common/landing/components/network-stats/.
• Add badge, gradient headline (“Future” purple→blue), description.
• Build responsive stats grid (1/2/4 cols) with icon gradients, large values, and labels.
• Apply starry noise background, consistent padding/radii, and Tailwind tokens.
• Ensure accessibility (aria-labelledby, decorative icons hidden), responsive at 360/768/1024/1280, no TS/console warnings.

Can start immediately and deliver within a day. 🚀

[laryhills]

Hello

✅ Plan: I’ll create a NetworkStats component under src/features/common/landing/components/network-stats/ with a fully responsive layout. The section will feature the pill label, gradient-highlighted “Future” in the title, and description text, followed by a four-card stats grid styled per the design specs. Each card will have a gradient icon background, bold value text, and a secondary label, all wrapped in a dark panel with a subtle starry noise background. I’ll ensure accessibility with proper aria-labelledby linking, semantic HTML for numbers, and visible focus states. Static values will be used initially, but the structure will allow easy replacement with live metrics later.

📌 Why Me: I’ve built multiple responsive, sections and can deliver pixel-perfect UI matching the design system while keeping the code modular for future real-time integration.

[diegoselva7x]

assing me

[devJaja]

Hello, I am a smart contract developer with expertise in Solidity, Cairo, TypeScript, and JavaScript. I am passionate about building secure and scalable blockchain solutions, and I would love the opportunity to contribute my skills toward solving this issue