Crypto-Jaguars/Revo-Marketplace

Implement Marketplace Hero

Open

#125 opened on Sep 26, 2025

View on GitHub
 (5 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 marketplace hero section with title, description, and main search bar.

Deliverable Hero with "Agricultural Marketplace" title, motivational description, and main search.

Requirements

  • Large bilingual title
  • Description "Fresh products, directly from farm to table"
  • Centered main search bar
  • Green gradient background with translucent overlay

Technical Requirements

  • Titles with font-black and large sizes
  • Centered search input with icons
  • Radial green gradient background
  • Translucent background image

Content Updates Required

  • Texts according to translations object
  • Placeholder: "Search by product, producer or location"
  • Background: /images/farm-background.png with opacity 0.5
  • Overlaid green gradient

Additional Notes

  • Clear visual hierarchy
  • Search as prominent element
  • Background visible but not intrusive

Definition of Done

  • Title and description visible
  • Main search functional
  • Translucent background displays correctly
  • Bilingual texts update
  • Responsive on mobile and desktop

Image:

Contributor guide

Research direction
First, explore the project's component structure and routing to understand where to add the hero section. Look at existing components for patterns (e.g., how Tailwind classes are used). Then create a new Hero component with the specified gradient background and search bar. Use the translations object for bilingual text. Ensure responsive design using Tailwind's breakpoints.
Tech stack
typescriptreacttailwindcss
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
GitTypeScriptReactTailwind CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75