From 321d321ba90bd92d3f0df80431f1f799f09d1d8f Mon Sep 17 00:00:00 2001 From: Deeman Date: Thu, 19 Feb 2026 18:17:54 +0100 Subject: [PATCH] add image-first directory card redesign and cover image upload MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 4-tier visual ladder: Free (muted grey) → Basic (verified presence) → Growth (stats + quotes) → Pro (court media + full stats + green glow) - New card layout: 16:9 cover media, frosted category badge, logo avatar straddling media/body border (body-relative to avoid overflow:hidden clip) - Pro default: CSS court visualization placeholder; Growth/Basic: dark-green grid placeholder; Free: grey/desaturated placeholder - Cover image upload in supplier dashboard (saves to static/uploads/covers/) - Migration 0013: cover_image TEXT column on suppliers table - Updated prototype (scratch/design_directory_cards.html) with Basic tier cards, fixed logo-wrap positioning across all tiers Co-Authored-By: Claude Sonnet 4.6 --- CHANGELOG.md | 9 + .../directory/templates/directory.html | 284 +++- .../directory/templates/partials/results.html | 316 +++-- .../versions/0000_initial_schema.py | 5 +- .../versions/0013_add_cover_image.py | 8 + .../src/padelnomics/suppliers/routes.py | 15 +- .../suppliers/partials/dashboard_listing.html | 10 + scratch/design_directory_cards.html | 1209 +++++++++++++++++ 8 files changed, 1706 insertions(+), 150 deletions(-) create mode 100644 padelnomics/src/padelnomics/migrations/versions/0013_add_cover_image.py create mode 100644 scratch/design_directory_cards.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a590a0..e757320 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). ## [Unreleased] +### Changed +- Redesigned directory cards: image-first 16:9 layout with cover photos, frosted category badge, CSS court/grid placeholders, and logo avatar straddling the media/body border +- 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 2.5px top border, CSS court media, full stats, green hover glow) +- Pro card media defaults to CSS court visualization when no cover image; Growth/Basic default to dark-green grid placeholder + +### Added +- Cover image upload for suppliers in the dashboard listing form (saves to `static/uploads/covers/`, 16:9 thumbnail preview) +- Migration 0013: `cover_image TEXT` column on suppliers table + ### Added - **Basic subscription tier** — verified directory listing with contact info, services checklist, social links, and enquiry form; no lead credits - **Monthly + yearly billing** — all paid supplier tiers now offer yearly pricing with annual discount (Basic: €349/yr, Growth: €1,799/yr, Pro: €4,499/yr) diff --git a/padelnomics/src/padelnomics/directory/templates/directory.html b/padelnomics/src/padelnomics/directory/templates/directory.html index b7693b9..7a12f50 100644 --- a/padelnomics/src/padelnomics/directory/templates/directory.html +++ b/padelnomics/src/padelnomics/directory/templates/directory.html @@ -5,6 +5,22 @@ {% block head %} + + + +
+

Directory Card Redesign — Prototype

+

Zillow-inspired: image-first cards with logo avatar, frosted category badge, and tier-differentiated visual treatments. DM Sans throughout.

+
+ + +
+

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

+
+
#F5F3EF — Page bg
+
#15803D — Primary green (CTAs)
+
#0D5228 — Green dark (pro border)
+
#1D4ED8 — Blue (Featured badge)
+
#111827 — Text primary
+
#6B7280 — Text secondary
+
#E6E2D8 — Card border
+
+ +

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
    • +
+
+ + + +

Pro tier — with cover image (CSS court mock)

+
Pro · Sticky · Highlight
+ +
+ + + +
+
+
Featured
+
Manufacturer
+
+
+
+
W
+
+

World Padel Courts GmbH

+

+ + Munich, Germany +

+
+ + + Verified + + + + 48 projects + + + + 12 yrs + + + + DACH + Benelux + +
+

Full turnkey padel court construction with 200+ installations across Central Europe. DIN-certified steel structures, premium surface options.

+
+ worldpadelcourts.de + Request Quote → +
+
+ + + + +
+
+
Turnkey
+
+
+
+
A
+
+

Arenas Court Systems

+

+ + Madrid, Spain +

+
+ + + Verified + + + + 120 projects + + + + 18 yrs + +
+

Spain's leading turnkey padel constructor. Panoramic glass, steel, and indoor hall solutions. Works with clubs, hotels, and municipal facilities.

+
+ arenascourts.es + Request Quote → +
+
+ + +
+ + + +

Pro tier — no cover image yet (CSS placeholder)

+
Pro · No cover_image uploaded
+ +
+ + +
+
+
Turf
+
Turf
+
+
+
+
T
+
+

TennisGrass Nordic AB

+

+ + Stockholm, Sweden +

+
+ + + Verified + + + + 31 projects + + + + 6 yrs + +
+

Specialist padel and indoor tennis surfaces. ITF-level turf products, 10-year warranty on all Scandinavian installations.

+
+ tennisgrass.se + Request Quote → +
+
+ + + +
+
+ +

Add a cover photo

+

Show your courts or projects.
Appears in directory search results.

+ Upload photo → +
+
+ +
+ + + +

Growth tier

+
Growth · No verified badge · Limited stats
+ +
+ + +
+
+
Software
+
Software
+
+
+
+
P
+
+

PadelOS Systems

+

+ + Barcelona, Spain +

+
+ Growth + + + 3 yrs + +
+

Court management software with booking, billing, and membership tools for padel clubs. 200+ venues in Iberia.

+
+ + Request Quote → +
+
+ + + +
+
+
Lighting
+
Lighting
+
+
+
+
L
+
+

LuxSport LED Solutions

+

+ + Amsterdam, Netherlands +

+
+ Growth + + + 22 projects + +
+

Sport-grade LED lighting for padel and tennis courts. EN 12193 compliant. Energy-saving controls and dimming included.

+
+ luxsport.nl + Request Quote → +
+
+ + +
+ + + +

Basic tier (€39/mo) — verified presence, no lead routing

+
Basic · Full opacity · Verified ✓ · "View Listing →"
+ +
+ + +
+
+
Turn
+
Turnkey
+
+
+
+
K
+
+

Kortbouw Nederland BV

+

+ + Rotterdam, Netherlands +

+
+ + + Verified + +
+

Specialist padel court builder serving the Benelux market. Indoor and outdoor installations, panoramic and classic models.

+
+ kortbouw.nl + View Listing → +
+
+ + + +
+
+
Cons
+
Consultant
+
+
+
+
R
+
+

Racquet Advisory Group

+

+ + London, United Kingdom +

+
+ + + Verified + +
+

Independent consulting for padel club operators and venue developers. Feasibility, supplier selection, and planning guidance.

+
+ racquetadvisory.co.uk + View Listing → +
+
+ + +
+ + + +

Free / Unclaimed tier

+
Free · Muted · Claim prompt
+ +
+ + +
+
+
Mfr
+
Manufacturer
+
+
+
+
I
+
+

Innopark Structures Ltd

+

+ + Warsaw, Poland +

+
+ Unverified +
+
+ + Is this yours? → +
+
+ + + +
+
+
Hall
+
Hall Builder
+
+
+
+
S
+
+

Sportshall Construct SRL

+

+ + Bucharest, Romania +

+
+ Unverified +
+
+ + Is this yours? → +
+
+ + +
+ + + +

Example card (shown on first page, no filters active)

+
Example · CTA to get listed
+ +
+ + +
+
+
+ +

Your project photo

+
+
Example
+
Your Category
+
+
?
+
+
+
+

Your Company Name

+

+ + Your City, Country +

+
+ + + Verified + + 12 projects + 8 yrs + Europe-wide +
+

Verified listings include cover photo, project stats, and a direct quote button — placed above unverified suppliers in search results.

+
+ + Get listed → +
+
+ + +
+ + + +

Realistic mixed grid — how a page looks

+ +
+ + + +
+
+
+ +

Your photo here

+
+
Example
+
Your Category
+
?
+
+
+

Your Company Name

+

Your City, Country

+
+ Verified + 12 projects · 8 yrs +
+
Get listed →
+
+ + + + +
+
+
Featured
+
Turnkey
+
+
+
A
+

Arenas Court Systems

+

Madrid, Spain

+
+ Verified + 120 projects + 18 yrs +
+

Spain's leading turnkey padel constructor. Glass, steel, and indoor hall solutions for clubs, hotels, and municipalities.

+
arenascourts.esRequest Quote →
+
+ + + + +
+
+
Mfr
+
Manufacturer
+
+
+
W
+

World Padel Courts GmbH

+

Munich, Germany

+
+ Verified + 48 projects + 12 yrs + DACH +
+

Full turnkey construction. DIN-certified steel structures, premium surfaces. 200+ installations across Central Europe.

+
worldpadelcourts.deRequest Quote →
+
+ + + + +
+
+
Software
+
Software
+
+
+
P
+

PadelOS Systems

+

Barcelona, Spain

+
+ Growth + 3 yrs +
+

Court management: booking, billing, memberships. 200+ venues across Iberia.

+
Request Quote →
+
+ + + + +
+
+
Cons
+
Consultant
+
+
+
R
+

Racquet Advisory Group

+

London, United Kingdom

+
+ Verified +
+

Independent consulting for padel club operators. Feasibility, supplier selection, planning.

+
racquetadvisory.co.ukView Listing →
+
+ + + + +
+
+
Mfr
+
Manufacturer
+
I
+
+
+

Innopark Structures Ltd

+

Warsaw, Poland

+
+ Unverified +
+
Is this yours? →
+
+ + + + +
+
+
Hall
+
Hall Builder
+
S
+
+
+

Sportshall Construct SRL

+

Bucharest, Romania

+
+ Unverified +
+
Is this yours? →
+
+ + +
+ + +