Crypto-Jaguars/Revo-Marketplace

Implement Categories Grid with Images

Open

#127 opened on Sep 26, 2025

View on GitHub
 (4 comments) (0 reactions) (1 assignee)TypeScript (71 forks)auto 404
Frontendeasygood first issueonlydust-wave

Repository metrics

Stars
 (5 stars)
PR merge metrics
 (PR metrics pending)

Description

Task Description Create grid of 8 hexagonal categories with specific background images and unique gradients.

Deliverable Responsive grid with 8 hexagonal categories, each with thematic image and unique gradient.

Requirements

  • 8 categories with hexagonal shapes
  • Specific background images for each category
  • Unique gradients per category
  • Hover effects with scale and rotation
  • "Carbon Credits" marked as "Coming Soon"

Technical Requirements

  • Responsive grid: 2 columns mobile, 4 desktop
  • CSS clip-path for hexagons
  • Unique CSS gradients per category
  • 3D transform hover effects
  • Images with brightness/contrast filters

Content Updates Required

  • Images per category:
    • Fruits: /images/fruits/fresh-strawberries.jpg
    • Grains: /images/grains/wheat-field.jpg
    • Dairy: /images/dairy/fresh-milk.jpg
    • Plants: /images/plants/seedlings.jpg
    • Preserves: /images/preserves/honey-jars.jpg
    • Crafts: /images/crafts/handwoven-basket.jpg
    • Oils: /images/oils/olive-oil.jpg
    • Carbon Credits: /images/forest/carbon-forest.jpg

Additional Notes

  • Each category with unique gradient
  • Carbon Credits without functional link
  • 3D effects with perspective

Definition of Done

  • 8 hexagonal categories visible
  • Images load correctly
  • Hover effects on 7 active categories
  • Carbon Credits shows "Coming Soon" badge
  • Responsive grid works

Contributor guide

Research direction
Examine existing component patterns in the repository, then build the hexagonal grid using CSS clip path and responsive layout techniques.
Tech stack
typescript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSHTML
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75