321d321ba9
- 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 <noreply@anthropic.com>
1210 lines
51 KiB
HTML
1210 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Padelnomics — Directory Card Redesign Prototype</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ============================================================
|
||
DESIGN TOKENS
|
||
============================================================ */
|
||
:root {
|
||
--bg: #F5F3EF;
|
||
--card: #FFFFFF;
|
||
--card-border: #E6E2D8;
|
||
--green: #15803D;
|
||
--green-mid: #16a34a;
|
||
--green-light: #DCFCE7;
|
||
--green-dark: #0D5228;
|
||
--blue: #1D4ED8;
|
||
--blue-light: #EFF6FF;
|
||
--text-1: #111827;
|
||
--text-2: #6B7280;
|
||
--text-3: #9CA3AF;
|
||
--font: 'DM Sans', sans-serif;
|
||
--r: 16px;
|
||
--shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
|
||
--shadow-hover: 0 14px 36px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
|
||
--shadow-pro-hover:0 14px 36px rgba(21,128,61,0.13), 0 2px 8px rgba(21,128,61,0.08);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: var(--font);
|
||
background: var(--bg);
|
||
min-height: 100vh;
|
||
padding: 2.5rem 2rem 4rem;
|
||
color: var(--text-1);
|
||
}
|
||
|
||
/* ---- Page-level labels ---- */
|
||
.section-label {
|
||
font-size: 0.6875rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-3);
|
||
margin-bottom: 1.25rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1px solid #E6E2D8;
|
||
}
|
||
|
||
.section-label + .section-label { margin-top: 2.5rem; }
|
||
|
||
.dir-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 1.25rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
/* ============================================================
|
||
BASE CARD
|
||
============================================================ */
|
||
.dir-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--card-border);
|
||
border-radius: var(--r);
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: block;
|
||
position: relative;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.dir-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-hover);
|
||
}
|
||
|
||
/* ============================================================
|
||
COVER MEDIA AREA
|
||
============================================================ */
|
||
.dir-card__media {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dir-card__media img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.45s ease;
|
||
}
|
||
.dir-card:hover .dir-card__media img {
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
/* Bottom-fade gradient on every media (image or placeholder) */
|
||
.dir-card__media::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
transparent 45%,
|
||
rgba(0, 0, 0, 0.45) 100%
|
||
);
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ------ CSS Court Visualization (simulates a real court photo) ------ */
|
||
.dir-card__media--court {
|
||
background:
|
||
radial-gradient(ellipse at 50% 20%, rgba(74, 222, 128, 0.15) 0%, transparent 60%),
|
||
linear-gradient(160deg, #1a5c30 0%, #2d7a45 35%, #1e6338 65%, #143d22 100%);
|
||
}
|
||
|
||
/* Court markings layer */
|
||
.dir-card__media--court .court-lines {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
/* Net */
|
||
background-image:
|
||
/* Center net — thick */
|
||
linear-gradient(
|
||
transparent calc(49.5% - 1px),
|
||
rgba(255,255,255,0.92) calc(49.5% - 1px),
|
||
rgba(255,255,255,0.92) calc(50.5% + 1px),
|
||
transparent calc(50.5% + 1px)
|
||
),
|
||
/* Top boundary */
|
||
linear-gradient(
|
||
transparent calc(8% - 0.5px),
|
||
rgba(255,255,255,0.65) calc(8% - 0.5px),
|
||
rgba(255,255,255,0.65) calc(8% + 0.75px),
|
||
transparent calc(8% + 0.75px)
|
||
),
|
||
/* Bottom boundary */
|
||
linear-gradient(
|
||
transparent calc(92% - 0.5px),
|
||
rgba(255,255,255,0.65) calc(92% - 0.5px),
|
||
rgba(255,255,255,0.65) calc(92% + 0.75px),
|
||
transparent calc(92% + 0.75px)
|
||
),
|
||
/* Left side line */
|
||
linear-gradient(
|
||
90deg,
|
||
transparent calc(10% - 0.5px),
|
||
rgba(255,255,255,0.55) calc(10% - 0.5px),
|
||
rgba(255,255,255,0.55) calc(10% + 0.75px),
|
||
transparent calc(10% + 0.75px)
|
||
),
|
||
/* Right side line */
|
||
linear-gradient(
|
||
90deg,
|
||
transparent calc(90% - 0.5px),
|
||
rgba(255,255,255,0.55) calc(90% - 0.5px),
|
||
rgba(255,255,255,0.55) calc(90% + 0.75px),
|
||
transparent calc(90% + 0.75px)
|
||
);
|
||
}
|
||
|
||
/* Net posts — little detail */
|
||
.dir-card__media--court .court-lines::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 10%;
|
||
right: 10%;
|
||
top: calc(50% - 1.5px);
|
||
height: 3px;
|
||
background: rgba(255,255,255,0.12);
|
||
/* Net mesh pattern */
|
||
background-image: repeating-linear-gradient(
|
||
90deg,
|
||
rgba(255,255,255,0.18),
|
||
rgba(255,255,255,0.18) 3px,
|
||
transparent 3px,
|
||
transparent 8px
|
||
);
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Surface texture — subtle */
|
||
.dir-card__media--court .court-lines::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 5px,
|
||
rgba(0,0,0,0.015) 5px,
|
||
rgba(0,0,0,0.015) 6px
|
||
);
|
||
z-index: 0;
|
||
}
|
||
|
||
/* ------ CSS Placeholder (no cover image yet) ------ */
|
||
.dir-card__media--placeholder {
|
||
background: linear-gradient(135deg, #0f2218 0%, #1a3828 50%, #0d1e14 100%);
|
||
}
|
||
|
||
.dir-card__media--placeholder .ph-grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background-image:
|
||
repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 39px,
|
||
rgba(255,255,255,0.04) 39px,
|
||
rgba(255,255,255,0.04) 40px
|
||
),
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
transparent 39px,
|
||
rgba(255,255,255,0.04) 39px,
|
||
rgba(255,255,255,0.04) 40px
|
||
);
|
||
}
|
||
|
||
/* Category abbreviation in placeholder */
|
||
.dir-card__media--placeholder .ph-label {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
font-size: 1.625rem;
|
||
font-weight: 800;
|
||
color: rgba(255,255,255,0.07);
|
||
letter-spacing: -0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* ------ Free tier placeholder (grey/desaturated) ------ */
|
||
.dir-card--free .dir-card__media--placeholder {
|
||
background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #1f2937 100%);
|
||
}
|
||
|
||
/* ------ Example card media ------ */
|
||
.dir-card__media--example {
|
||
background: linear-gradient(135deg, #1e2e4a 0%, #2d4270 50%, #1a273e 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dir-card__media--example .example-icon {
|
||
text-align: center;
|
||
z-index: 3;
|
||
position: relative;
|
||
}
|
||
|
||
.dir-card__media--example .example-icon svg {
|
||
opacity: 0.25;
|
||
}
|
||
|
||
.dir-card__media--example .example-icon p {
|
||
margin-top: 6px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
color: rgba(255,255,255,0.25);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* ============================================================
|
||
OVERLAYS: Category badge + Featured + Logo avatar
|
||
============================================================ */
|
||
|
||
/* Category badge — frosted pill, top-right */
|
||
.dir-card__cat {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
z-index: 5;
|
||
font-size: 0.6375rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
text-transform: uppercase;
|
||
padding: 3.5px 9px;
|
||
border-radius: 5px;
|
||
backdrop-filter: blur(8px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(8px) saturate(180%);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dir-card__cat--manufacturer { background: rgba(219,234,254,0.92); color: #1e40af; }
|
||
.dir-card__cat--turnkey { background: rgba(220,252,231,0.92); color: #065f46; }
|
||
.dir-card__cat--turf { background: rgba(254,243,199,0.92); color: #78350f; }
|
||
.dir-card__cat--lighting { background: rgba(254,226,226,0.92); color: #991b1b; }
|
||
.dir-card__cat--software { background: rgba(237,233,254,0.92); color: #4c1d95; }
|
||
.dir-card__cat--hall_builder { background: rgba(255,237,213,0.92); color: #7c2d12; }
|
||
.dir-card__cat--consultant { background: rgba(240,253,250,0.92); color: #134e4a; }
|
||
.dir-card__cat--franchise { background: rgba(252,231,243,0.92); color: #831843; }
|
||
.dir-card__cat--example { background: rgba(219,234,254,0.85); color: #1e40af; }
|
||
|
||
/* Featured ribbon — top-left (sticky listings) */
|
||
.dir-card__featured {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
z-index: 5;
|
||
background: var(--blue);
|
||
color: white;
|
||
font-size: 0.5875rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
padding: 3.5px 9px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 8px rgba(29,78,216,0.35);
|
||
}
|
||
|
||
/* Logo avatar — straddles the media/body border.
|
||
Placed inside dir-card__body so overflow:hidden on media doesn't clip it. */
|
||
.dir-card__logo-wrap {
|
||
position: absolute;
|
||
top: -22px; /* half of logo height, so it straddles the border */
|
||
left: 14px;
|
||
z-index: 6;
|
||
}
|
||
|
||
.dir-card__logo,
|
||
.dir-card__logo-ph {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
border: 2.5px solid white;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dir-card__logo {
|
||
object-fit: contain;
|
||
background: white;
|
||
}
|
||
|
||
.dir-card__logo-ph {
|
||
background: #EFF6FF;
|
||
color: var(--blue);
|
||
font-size: 0.875rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
/* ============================================================
|
||
CARD BODY
|
||
============================================================ */
|
||
.dir-card__body {
|
||
padding: 30px 16px 16px; /* 30px top = 20px logo overhang + 10px breathing */
|
||
}
|
||
|
||
/* Name */
|
||
.dir-card__name {
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
color: var(--text-1);
|
||
line-height: 1.25;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
/* Location */
|
||
.dir-card__loc {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 0.75rem;
|
||
color: var(--text-2);
|
||
margin-top: 3px;
|
||
}
|
||
.dir-card__loc svg { flex-shrink: 0; }
|
||
|
||
/* Stats row */
|
||
.dir-card__stats {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #F1F5F9;
|
||
}
|
||
|
||
.dir-card__stat {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3.5px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
color: var(--text-2);
|
||
white-space: nowrap;
|
||
}
|
||
.dir-card__stat svg { flex-shrink: 0; color: var(--text-3); }
|
||
|
||
.dir-card__stat--verified {
|
||
color: var(--green);
|
||
}
|
||
.dir-card__stat--verified svg { color: var(--green); }
|
||
|
||
.dir-card__tier-chip {
|
||
font-size: 0.5875rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
padding: 2.5px 7px;
|
||
border-radius: 4px;
|
||
}
|
||
.dir-card__tier-chip--growth { background: #EFF6FF; color: #1e40af; }
|
||
.dir-card__tier-chip--unverified{ background: #F9FAFB; color: var(--text-3); }
|
||
|
||
/* Description */
|
||
.dir-card__desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-2);
|
||
line-height: 1.55;
|
||
margin-top: 8px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Footer / CTA row */
|
||
.dir-card__foot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid #F1F5F9;
|
||
}
|
||
|
||
.dir-card__web {
|
||
font-size: 0.75rem;
|
||
color: var(--text-3);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 170px;
|
||
}
|
||
|
||
.dir-card__action {
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.01em;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.dir-card__action--quote { color: var(--green); }
|
||
.dir-card__action--claim { color: var(--text-3); }
|
||
.dir-card__action--example { color: var(--blue); }
|
||
|
||
/* ============================================================
|
||
TIER VARIANTS
|
||
============================================================ */
|
||
|
||
/* PRO — green top line + green glow */
|
||
.dir-card--pro::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 2.5px;
|
||
background: linear-gradient(90deg, var(--green-dark), var(--green-mid));
|
||
z-index: 7;
|
||
border-radius: var(--r) var(--r) 0 0;
|
||
}
|
||
.dir-card--pro {
|
||
box-shadow: 0 1px 3px rgba(21,128,61,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
||
}
|
||
.dir-card--pro:hover {
|
||
box-shadow: var(--shadow-pro-hover);
|
||
}
|
||
|
||
/* HIGHLIGHT (pro add-on boost) */
|
||
.dir-card--highlight {
|
||
box-shadow:
|
||
0 0 0 2px rgba(21,128,61,0.2),
|
||
0 6px 24px rgba(21,128,61,0.1);
|
||
}
|
||
.dir-card--highlight:hover {
|
||
box-shadow:
|
||
0 0 0 2px rgba(21,128,61,0.3),
|
||
var(--shadow-pro-hover);
|
||
}
|
||
|
||
/* FREE */
|
||
.dir-card--free {
|
||
opacity: 0.62;
|
||
}
|
||
.dir-card--free:hover {
|
||
opacity: 0.82;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
/* EXAMPLE (dashed CTA) */
|
||
.dir-card--example {
|
||
border: 2px dashed #93C5FD;
|
||
background: #F0F7FF;
|
||
}
|
||
.dir-card--example::before { display: none; }
|
||
|
||
/* ============================================================
|
||
ANNOTATION CALLOUTS (prototype only — remove in production)
|
||
============================================================ */
|
||
.annotation {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
color: #B45309;
|
||
background: #FEF9C3;
|
||
border: 1px solid #FDE68A;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* ============================================================
|
||
COMPARISON LABEL CHIP
|
||
============================================================ */
|
||
.tier-label {
|
||
display: inline-block;
|
||
font-size: 0.625rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.07em;
|
||
text-transform: uppercase;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.tier-label--pro { background: var(--green-light); color: var(--green-dark); }
|
||
.tier-label--growth { background: var(--blue-light); color: #1e40af; }
|
||
.tier-label--basic { background: #F0FDF4; color: var(--green); border: 1px solid #BBF7D0; }
|
||
.tier-label--free { background: #F9FAFB; color: var(--text-3); border: 1px solid #E5E7EB; }
|
||
.tier-label--example { background: #EFF6FF; color: var(--blue); border: 1px dashed #93C5FD; }
|
||
|
||
/* ============================================================
|
||
PAGE HEADER
|
||
============================================================ */
|
||
.page-header {
|
||
max-width: 700px;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.page-header h1 {
|
||
font-size: 1.375rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.025em;
|
||
color: var(--text-1);
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.page-header p {
|
||
font-size: 0.875rem;
|
||
color: var(--text-2);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.design-notes {
|
||
max-width: 680px;
|
||
background: white;
|
||
border: 1px solid var(--card-border);
|
||
border-radius: 12px;
|
||
padding: 1.5rem 1.75rem;
|
||
margin-bottom: 2.5rem;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-2);
|
||
line-height: 1.65;
|
||
}
|
||
.design-notes h2 {
|
||
font-size: 0.8125rem;
|
||
font-weight: 700;
|
||
color: var(--text-1);
|
||
margin-bottom: 0.75rem;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.design-notes ul { padding-left: 1.1rem; }
|
||
.design-notes li { margin-bottom: 0.3rem; }
|
||
.design-notes li strong { color: var(--text-1); }
|
||
|
||
.token-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 0.75rem;
|
||
}
|
||
.token-swatch {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 0.6875rem;
|
||
color: var(--text-2);
|
||
}
|
||
.token-swatch span {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 4px;
|
||
border: 1px solid rgba(0,0,0,0.08);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-header">
|
||
<h1>Directory Card Redesign — Prototype</h1>
|
||
<p>Zillow-inspired: image-first cards with logo avatar, frosted category badge, and tier-differentiated visual treatments. DM Sans throughout.</p>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
DESIGN NOTES
|
||
============================================================ -->
|
||
<div class="design-notes">
|
||
<h2>Key design decisions</h2>
|
||
<ul>
|
||
<li><strong>Image-first layout (16:9)</strong> — cover photo leads, same principle as Zillow/Airbnb. Court/project photos communicate credibility at a glance.</li>
|
||
<li><strong>Logo avatar straddles media/body</strong> — 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.</li>
|
||
<li><strong>Frosted category badge</strong> — backdrop-blur pill overlaid top-right of image, using category color system from current design.</li>
|
||
<li><strong>CSS court visualization</strong> — for the placeholder state (no cover photo, pro tier): dark green background + white court line grid. Better than generic grey gradient; contextually communicates padel.</li>
|
||
<li><strong>4-tier visual ladder</strong>: 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).</li>
|
||
<li><strong>Stats row</strong>: Pro = Verified + projects + years + area; Growth = Growth chip + limited stats; Basic = Verified chip only; Free = Unverified chip.</li>
|
||
<li><strong>Color shift</strong>: 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.</li>
|
||
</ul>
|
||
|
||
<h2 style="margin-top:1.25rem">Color palette</h2>
|
||
<div class="token-row">
|
||
<div class="token-swatch"><span style="background:#F5F3EF"></span>#F5F3EF — Page bg</div>
|
||
<div class="token-swatch"><span style="background:#15803D"></span>#15803D — Primary green (CTAs)</div>
|
||
<div class="token-swatch"><span style="background:#0D5228"></span>#0D5228 — Green dark (pro border)</div>
|
||
<div class="token-swatch"><span style="background:#1D4ED8"></span>#1D4ED8 — Blue (Featured badge)</div>
|
||
<div class="token-swatch"><span style="background:#111827"></span>#111827 — Text primary</div>
|
||
<div class="token-swatch"><span style="background:#6B7280"></span>#6B7280 — Text secondary</div>
|
||
<div class="token-swatch"><span style="background:#E6E2D8"></span>#E6E2D8 — Card border</div>
|
||
</div>
|
||
|
||
<h2 style="margin-top:1.25rem">Database change needed</h2>
|
||
<ul>
|
||
<li>Add <code>cover_image TEXT</code> column to suppliers table (migration 0013)</li>
|
||
<li>Add upload endpoint in supplier dashboard (same pattern as logo_file, saves to <code>static/uploads/covers/</code>)</li>
|
||
<li>Template falls back to CSS court placeholder (pro) or dark-green grid placeholder (growth/basic) when null — no broken cards</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
PRO TIER — with CSS court visualization (simulating real photo)
|
||
============================================================ -->
|
||
<p class="section-label">Pro tier — with cover image (CSS court mock)</p>
|
||
<div class="tier-label tier-label--pro">Pro · Sticky · Highlight</div>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<!-- PRO + STICKY + HIGHLIGHT -->
|
||
<a href="#" class="dir-card dir-card--pro dir-card--sticky dir-card--highlight">
|
||
<div class="dir-card__media dir-card__media--court">
|
||
<div class="court-lines"></div>
|
||
<div class="dir-card__featured">Featured</div>
|
||
<div class="dir-card__cat dir-card__cat--manufacturer">Manufacturer</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#DBEAFE;color:#1e40af;">W</div>
|
||
</div>
|
||
<h3 class="dir-card__name">World Padel Courts GmbH</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Munich, Germany
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
Verified
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||
48 projects
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
12 yrs
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
||
DACH + Benelux
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Full turnkey padel court construction with 200+ installations across Central Europe. DIN-certified steel structures, premium surface options.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web">worldpadelcourts.de</span>
|
||
<span class="dir-card__action dir-card__action--quote">Request Quote →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- PRO — plain (no featured badge) -->
|
||
<a href="#" class="dir-card dir-card--pro">
|
||
<div class="dir-card__media dir-card__media--court">
|
||
<div class="court-lines"></div>
|
||
<div class="dir-card__cat dir-card__cat--turnkey">Turnkey</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#D1FAE5;color:#065f46;">A</div>
|
||
</div>
|
||
<h3 class="dir-card__name">Arenas Court Systems</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Madrid, Spain
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
Verified
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||
120 projects
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
18 yrs
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Spain's leading turnkey padel constructor. Panoramic glass, steel, and indoor hall solutions. Works with clubs, hotels, and municipal facilities.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web">arenascourts.es</span>
|
||
<span class="dir-card__action dir-card__action--quote">Request Quote →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
PRO TIER — no cover image (CSS placeholder)
|
||
============================================================ -->
|
||
<p class="section-label">Pro tier — no cover image yet (CSS placeholder)</p>
|
||
<div class="tier-label tier-label--pro">Pro · No cover_image uploaded</div>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<a href="#" class="dir-card dir-card--pro">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Turf</div>
|
||
<div class="dir-card__cat dir-card__cat--turf">Turf</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#FEF3C7;color:#78350f;">T</div>
|
||
</div>
|
||
<h3 class="dir-card__name">TennisGrass Nordic AB</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Stockholm, Sweden
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
Verified
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||
31 projects
|
||
</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
6 yrs
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Specialist padel and indoor tennis surfaces. ITF-level turf products, 10-year warranty on all Scandinavian installations.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web">tennisgrass.se</span>
|
||
<span class="dir-card__action dir-card__action--quote">Request Quote →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Prompt to upload — could appear in supplier dashboard -->
|
||
<div style="display:flex;align-items:center;justify-content:center;background:#F9FAFB;border:1.5px dashed #D1D5DB;border-radius:16px;padding:2rem;text-align:center;">
|
||
<div>
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="1.5" style="margin:0 auto 10px"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||
<p style="font-size:0.8125rem;font-weight:600;color:#374151;margin-bottom:4px">Add a cover photo</p>
|
||
<p style="font-size:0.75rem;color:#9CA3AF;line-height:1.5">Show your courts or projects.<br>Appears in directory search results.</p>
|
||
<a href="#" style="display:inline-block;margin-top:10px;font-size:0.75rem;font-weight:700;color:#15803D;text-decoration:none">Upload photo →</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
GROWTH TIER
|
||
============================================================ -->
|
||
<p class="section-label">Growth tier</p>
|
||
<div class="tier-label tier-label--growth">Growth · No verified badge · Limited stats</div>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<a href="#" class="dir-card dir-card--growth">
|
||
<div class="dir-card__media dir-card__media--placeholder" style="background:linear-gradient(135deg,#1a1e3e 0%,#2a3270 50%,#151830 100%)">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Software</div>
|
||
<div class="dir-card__cat dir-card__cat--software">Software</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#EDE9FE;color:#4c1d95;">P</div>
|
||
</div>
|
||
<h3 class="dir-card__name">PadelOS Systems</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Barcelona, Spain
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--growth">Growth</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
3 yrs
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Court management software with booking, billing, and membership tools for padel clubs. 200+ venues in Iberia.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web"></span>
|
||
<span class="dir-card__action dir-card__action--quote">Request Quote →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#" class="dir-card dir-card--growth">
|
||
<div class="dir-card__media dir-card__media--placeholder" style="background:linear-gradient(135deg,#1e1414 0%,#4a1a1a 50%,#1a0f0f 100%)">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Lighting</div>
|
||
<div class="dir-card__cat dir-card__cat--lighting">Lighting</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#FEE2E2;color:#991b1b;">L</div>
|
||
</div>
|
||
<h3 class="dir-card__name">LuxSport LED Solutions</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Amsterdam, Netherlands
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--growth">Growth</span>
|
||
<span class="dir-card__stat">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||
22 projects
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Sport-grade LED lighting for padel and tennis courts. EN 12193 compliant. Energy-saving controls and dimming included.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web">luxsport.nl</span>
|
||
<span class="dir-card__action dir-card__action--quote">Request Quote →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
BASIC TIER
|
||
============================================================ -->
|
||
<p class="section-label">Basic tier (€39/mo) — verified presence, no lead routing</p>
|
||
<div class="tier-label tier-label--basic">Basic · Full opacity · Verified ✓ · "View Listing →"</div>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<a href="#" class="dir-card">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Turn</div>
|
||
<div class="dir-card__cat dir-card__cat--turnkey">Turnkey</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#D1FAE5;color:#065f46;">K</div>
|
||
</div>
|
||
<h3 class="dir-card__name">Kortbouw Nederland BV</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Rotterdam, Netherlands
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
Verified
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Specialist padel court builder serving the Benelux market. Indoor and outdoor installations, panoramic and classic models.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web">kortbouw.nl</span>
|
||
<span class="dir-card__action dir-card__action--claim">View Listing →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#" class="dir-card">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Cons</div>
|
||
<div class="dir-card__cat dir-card__cat--consultant">Consultant</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#CCFBF1;color:#134e4a;">R</div>
|
||
</div>
|
||
<h3 class="dir-card__name">Racquet Advisory Group</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
London, United Kingdom
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
Verified
|
||
</span>
|
||
</div>
|
||
<p class="dir-card__desc">Independent consulting for padel club operators and venue developers. Feasibility, supplier selection, and planning guidance.</p>
|
||
<div class="dir-card__foot">
|
||
<span class="dir-card__web">racquetadvisory.co.uk</span>
|
||
<span class="dir-card__action dir-card__action--claim">View Listing →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
FREE / UNCLAIMED TIER
|
||
============================================================ -->
|
||
<p class="section-label">Free / Unclaimed tier</p>
|
||
<div class="tier-label tier-label--free">Free · Muted · Claim prompt</div>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<a href="#" class="dir-card dir-card--free">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Mfr</div>
|
||
<div class="dir-card__cat dir-card__cat--manufacturer">Manufacturer</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph">I</div>
|
||
</div>
|
||
<h3 class="dir-card__name">Innopark Structures Ltd</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Warsaw, Poland
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--unverified">Unverified</span>
|
||
</div>
|
||
<div class="dir-card__foot">
|
||
<span></span>
|
||
<span class="dir-card__action dir-card__action--claim">Is this yours? →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#" class="dir-card dir-card--free">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Hall</div>
|
||
<div class="dir-card__cat dir-card__cat--hall_builder">Hall Builder</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph" style="background:#FFEDD5;color:#7c2d12;">S</div>
|
||
</div>
|
||
<h3 class="dir-card__name">Sportshall Construct SRL</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Bucharest, Romania
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--unverified">Unverified</span>
|
||
</div>
|
||
<div class="dir-card__foot">
|
||
<span></span>
|
||
<span class="dir-card__action dir-card__action--claim">Is this yours? →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
EXAMPLE / CTA CARD
|
||
============================================================ -->
|
||
<p class="section-label">Example card (shown on first page, no filters active)</p>
|
||
<div class="tier-label tier-label--example">Example · CTA to get listed</div>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<a href="#" class="dir-card dir-card--example">
|
||
<div class="dir-card__media dir-card__media--example">
|
||
<div class="ph-grid"></div>
|
||
<div class="example-icon">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||
<p>Your project photo</p>
|
||
</div>
|
||
<div class="dir-card__featured" style="background:#3B82F6;">Example</div>
|
||
<div class="dir-card__cat dir-card__cat--example">Your Category</div>
|
||
<div class="dir-card__logo-wrap">
|
||
<div class="dir-card__logo-ph">?</div>
|
||
</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<h3 class="dir-card__name">Your Company Name</h3>
|
||
<p class="dir-card__loc">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Your City, Country
|
||
</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
Verified
|
||
</span>
|
||
<span class="dir-card__stat">12 projects</span>
|
||
<span class="dir-card__stat">8 yrs</span>
|
||
<span class="dir-card__stat">Europe-wide</span>
|
||
</div>
|
||
<p class="dir-card__desc">Verified listings include cover photo, project stats, and a direct quote button — placed above unverified suppliers in search results.</p>
|
||
<div class="dir-card__foot">
|
||
<span></span>
|
||
<span class="dir-card__action dir-card__action--example">Get listed →</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ============================================================
|
||
MIXED GRID (realistic page view)
|
||
============================================================ -->
|
||
<p class="section-label">Realistic mixed grid — how a page looks</p>
|
||
|
||
<div class="dir-grid">
|
||
|
||
<!-- Example -->
|
||
<a href="#" class="dir-card dir-card--example">
|
||
<div class="dir-card__media dir-card__media--example">
|
||
<div class="ph-grid"></div>
|
||
<div class="example-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||
<p>Your photo here</p>
|
||
</div>
|
||
<div class="dir-card__featured" style="background:#3B82F6;">Example</div>
|
||
<div class="dir-card__cat dir-card__cat--example">Your Category</div>
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph">?</div></div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<h3 class="dir-card__name">Your Company Name</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>Your City, Country</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Verified</span>
|
||
<span class="dir-card__stat">12 projects · 8 yrs</span>
|
||
</div>
|
||
<div class="dir-card__foot"><span></span><span class="dir-card__action dir-card__action--example">Get listed →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Pro sticky -->
|
||
<a href="#" class="dir-card dir-card--pro dir-card--highlight">
|
||
<div class="dir-card__media dir-card__media--court">
|
||
<div class="court-lines"></div>
|
||
<div class="dir-card__featured">Featured</div>
|
||
<div class="dir-card__cat dir-card__cat--turnkey">Turnkey</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph" style="background:#D1FAE5;color:#065f46;">A</div></div>
|
||
<h3 class="dir-card__name">Arenas Court Systems</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>Madrid, Spain</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Verified</span>
|
||
<span class="dir-card__stat">120 projects</span>
|
||
<span class="dir-card__stat">18 yrs</span>
|
||
</div>
|
||
<p class="dir-card__desc">Spain's leading turnkey padel constructor. Glass, steel, and indoor hall solutions for clubs, hotels, and municipalities.</p>
|
||
<div class="dir-card__foot"><span class="dir-card__web">arenascourts.es</span><span class="dir-card__action dir-card__action--quote">Request Quote →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Pro plain -->
|
||
<a href="#" class="dir-card dir-card--pro">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Mfr</div>
|
||
<div class="dir-card__cat dir-card__cat--manufacturer">Manufacturer</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph" style="background:#DBEAFE;color:#1e40af;">W</div></div>
|
||
<h3 class="dir-card__name">World Padel Courts GmbH</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>Munich, Germany</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Verified</span>
|
||
<span class="dir-card__stat">48 projects</span>
|
||
<span class="dir-card__stat">12 yrs</span>
|
||
<span class="dir-card__stat">DACH</span>
|
||
</div>
|
||
<p class="dir-card__desc">Full turnkey construction. DIN-certified steel structures, premium surfaces. 200+ installations across Central Europe.</p>
|
||
<div class="dir-card__foot"><span class="dir-card__web">worldpadelcourts.de</span><span class="dir-card__action dir-card__action--quote">Request Quote →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Growth -->
|
||
<a href="#" class="dir-card dir-card--growth">
|
||
<div class="dir-card__media dir-card__media--placeholder" style="background:linear-gradient(135deg,#1a1e3e 0%,#2a3270 50%,#151830 100%)">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Software</div>
|
||
<div class="dir-card__cat dir-card__cat--software">Software</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph" style="background:#EDE9FE;color:#4c1d95;">P</div></div>
|
||
<h3 class="dir-card__name">PadelOS Systems</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>Barcelona, Spain</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--growth">Growth</span>
|
||
<span class="dir-card__stat">3 yrs</span>
|
||
</div>
|
||
<p class="dir-card__desc">Court management: booking, billing, memberships. 200+ venues across Iberia.</p>
|
||
<div class="dir-card__foot"><span></span><span class="dir-card__action dir-card__action--quote">Request Quote →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Basic -->
|
||
<a href="#" class="dir-card">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Cons</div>
|
||
<div class="dir-card__cat dir-card__cat--consultant">Consultant</div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph" style="background:#CCFBF1;color:#134e4a;">R</div></div>
|
||
<h3 class="dir-card__name">Racquet Advisory Group</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>London, United Kingdom</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__stat dir-card__stat--verified"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Verified</span>
|
||
</div>
|
||
<p class="dir-card__desc">Independent consulting for padel club operators. Feasibility, supplier selection, planning.</p>
|
||
<div class="dir-card__foot"><span class="dir-card__web">racquetadvisory.co.uk</span><span class="dir-card__action dir-card__action--claim">View Listing →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Free -->
|
||
<a href="#" class="dir-card dir-card--free">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Mfr</div>
|
||
<div class="dir-card__cat dir-card__cat--manufacturer">Manufacturer</div>
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph">I</div></div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<h3 class="dir-card__name">Innopark Structures Ltd</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>Warsaw, Poland</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--unverified">Unverified</span>
|
||
</div>
|
||
<div class="dir-card__foot"><span></span><span class="dir-card__action dir-card__action--claim">Is this yours? →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Free 2 -->
|
||
<a href="#" class="dir-card dir-card--free">
|
||
<div class="dir-card__media dir-card__media--placeholder">
|
||
<div class="ph-grid"></div>
|
||
<div class="ph-label">Hall</div>
|
||
<div class="dir-card__cat dir-card__cat--hall_builder">Hall Builder</div>
|
||
<div class="dir-card__logo-wrap"><div class="dir-card__logo-ph" style="background:#FFEDD5;color:#7c2d12;">S</div></div>
|
||
</div>
|
||
<div class="dir-card__body">
|
||
<h3 class="dir-card__name">Sportshall Construct SRL</h3>
|
||
<p class="dir-card__loc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>Bucharest, Romania</p>
|
||
<div class="dir-card__stats">
|
||
<span class="dir-card__tier-chip dir-card__tier-chip--unverified">Unverified</span>
|
||
</div>
|
||
<div class="dir-card__foot"><span></span><span class="dir-card__action dir-card__action--claim">Is this yours? →</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|