Directory Card Redesign — Prototype

Key design decisions

• Image-first layout (16:9) — cover photo leads, same principle as Zillow/Airbnb. Court/project photos communicate credibility at a glance.
• Logo avatar straddles media/body — 44×44px rounded square with white border, positioned via body-relative absolute so it isn't clipped by media overflow:hidden. Reinforces brand without wasting body space.
• Frosted category badge — backdrop-blur pill overlaid top-right of image, using category color system from current design.
• CSS court visualization — for the placeholder state (no cover photo, pro tier): dark green background + white court line grid. Better than generic grey gradient; contextually communicates padel.
• 4-tier visual ladder: Free (62% opacity, grey placeholder, unverified chip) → Basic (full opacity, green placeholder, verified chip, description, "View Listing →") → Growth (green placeholder, growth chip + stats, "Request Quote →") → Pro (green top border, court media, full stats, green glow hover).
• Stats row: Pro = Verified + projects + years + area; Growth = Growth chip + limited stats; Basic = Verified chip only; Free = Unverified chip.
• Color shift: primary action color moves from blue (#1D4ED8) → forest green (#15803D) for quote CTAs. More contextually appropriate for sports/construction. Blue reserved for Featured/sticky badges.

Color palette

Database change needed

• Add cover_image TEXT column to suppliers table (migration 0013)
• Add upload endpoint in supplier dashboard (same pattern as logo_file, saves to static/uploads/covers/)
• Template falls back to CSS court placeholder (pro) or dark-green grid placeholder (growth/basic) when null — no broken cards