chore: commit pending changes — logo, base template, scratch designs, changelog
- favicon.svg: pending logo tweaks - base.html: pending template changes - CHANGELOG.md: add waitlist mode and logo redesign entries missed in prior commits - scratch/: add design prototype HTML/JSX files, remove old markdown notes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
709
scratch/design_supplier_basic.html
Normal file
709
scratch/design_supplier_basic.html
Normal file
@@ -0,0 +1,709 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
PADELNOMICS — Basic Listing Tier: Supplier Detail Page Prototype
|
||||
================================================================
|
||||
Design prototype — adapt field names and URLs to Jinja2 / actual routes.
|
||||
Dummy data: "CourtCraft GmbH", fictional manufacturer based in Munich.
|
||||
================================================================
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CourtCraft GmbH — Padel Court Manufacturer · padelnomics</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--navy: #0F172A;
|
||||
--navy-2: #1E293B;
|
||||
--slate: #64748B;
|
||||
--slate-2: #94A3B8;
|
||||
--slate-3: #CBD5E1;
|
||||
--border: #E2E8F0;
|
||||
--bg: #F8FAFC;
|
||||
--bg-2: #F1F5F9;
|
||||
--white: #FFFFFF;
|
||||
--blue: #1D4ED8;
|
||||
--blue-2: #1E40AF;
|
||||
--blue-bg: #EFF6FF;
|
||||
--green: #16A34A;
|
||||
--green-bg:#DCFCE7;
|
||||
--font-display: 'Bricolage Grotesque', sans-serif;
|
||||
--font-body: 'DM Sans', sans-serif;
|
||||
--radius-sm: 8px;
|
||||
--radius: 14px;
|
||||
--radius-lg: 20px;
|
||||
--shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
|
||||
--shadow: 0 4px 16px rgba(15,23,42,0.07), 0 1px 4px rgba(15,23,42,0.04);
|
||||
--shadow-lg: 0 12px 40px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.05);
|
||||
}
|
||||
|
||||
html { font-size: 16px; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--navy);
|
||||
background: var(--bg);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: var(--blue); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Navbar (glass) ─────────────────────────────────── */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
background: rgba(255,255,255,0.85);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 2rem;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 60px;
|
||||
}
|
||||
.nav-logo {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: 1.125rem; color: var(--navy); letter-spacing: -0.02em;
|
||||
}
|
||||
.nav-logo svg { flex-shrink: 0; }
|
||||
.nav-back {
|
||||
font-size: 0.8125rem; color: var(--slate); display: flex;
|
||||
align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.nav-back:hover { background: var(--bg-2); color: var(--navy); text-decoration: none; }
|
||||
|
||||
/* ── Page wrapper ───────────────────────────────────── */
|
||||
.page { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }
|
||||
|
||||
/* ── Hero ───────────────────────────────────────────── */
|
||||
.hero {
|
||||
position: relative; overflow: hidden;
|
||||
background: var(--navy);
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 3rem 2rem 2.5rem;
|
||||
}
|
||||
/* Padel court grid — CSS-only geometric background */
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Centre service line */
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute; left: 50%; top: 0; bottom: 0;
|
||||
width: 1px; background: rgba(255,255,255,0.06);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-inner {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 1120px; margin: 0 auto;
|
||||
display: flex; align-items: flex-start;
|
||||
justify-content: space-between; gap: 2rem;
|
||||
}
|
||||
.hero-left { flex: 1; }
|
||||
|
||||
/* Logo + name row */
|
||||
.hero-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
|
||||
.hero-logo {
|
||||
width: 72px; height: 72px; border-radius: 14px; object-fit: cover;
|
||||
background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.15);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: 1.75rem; color: rgba(255,255,255,0.5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hero-title-group { min-width: 0; }
|
||||
.hero-badges { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
|
||||
.hero-badge {
|
||||
font-size: 0.625rem; font-weight: 700; padding: 3px 9px;
|
||||
border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase;
|
||||
}
|
||||
.hero-badge--category {
|
||||
background: rgba(29,78,216,0.5); color: #93C5FD;
|
||||
border: 1px solid rgba(147,197,253,0.3);
|
||||
}
|
||||
.hero-badge--verified {
|
||||
background: rgba(22,163,74,0.4); color: #86EFAC;
|
||||
border: 1px solid rgba(134,239,172,0.3);
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.hero-badge--verified svg { width: 10px; height: 10px; }
|
||||
.hero-name {
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: clamp(1.75rem, 4vw, 2.75rem);
|
||||
color: #fff; line-height: 1.1; letter-spacing: -0.025em;
|
||||
}
|
||||
.hero-meta {
|
||||
margin-top: 6px; font-size: 0.875rem; color: rgba(255,255,255,0.5);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.hero-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.25); }
|
||||
.hero-tagline {
|
||||
margin-top: 1.25rem; font-size: 1rem; color: rgba(255,255,255,0.7);
|
||||
max-width: 520px; line-height: 1.6;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Hero actions */
|
||||
.hero-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; padding-top: 4px; }
|
||||
.btn-hero-primary {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 10px 20px; border-radius: 10px; font-size: 0.875rem; font-weight: 600;
|
||||
font-family: var(--font-body); background: #fff; color: var(--navy);
|
||||
border: none; cursor: pointer; white-space: nowrap;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.2); transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-hero-primary:hover { background: var(--blue-bg); color: var(--blue); text-decoration: none; }
|
||||
.btn-hero-secondary {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 9px 18px; border-radius: 10px; font-size: 0.8125rem; font-weight: 500;
|
||||
font-family: var(--font-body); cursor: pointer; white-space: nowrap;
|
||||
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
|
||||
border: 1px solid rgba(255,255,255,0.15); transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-hero-secondary:hover { background: rgba(255,255,255,0.14); color: #fff; text-decoration: none; }
|
||||
.btn-hero-secondary svg { width: 15px; height: 15px; flex-shrink: 0; }
|
||||
|
||||
/* ── Body grid ──────────────────────────────────────── */
|
||||
.body-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 1.75rem;
|
||||
align-items: start;
|
||||
}
|
||||
.body-main > * + * { margin-top: 1.5rem; }
|
||||
.body-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
|
||||
|
||||
/* ── Card ───────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--white); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em;
|
||||
text-transform: uppercase; color: var(--slate-2); margin-bottom: 1rem;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.card-title::after {
|
||||
content: ''; flex: 1; height: 1px; background: var(--border);
|
||||
}
|
||||
|
||||
/* Description card */
|
||||
.desc-body {
|
||||
font-size: 0.9375rem; color: var(--slate); line-height: 1.75;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.cat-pill {
|
||||
font-size: 0.6875rem; font-weight: 600; padding: 4px 12px;
|
||||
border-radius: 999px; background: var(--blue-bg);
|
||||
color: var(--blue); border: 1px solid #BFDBFE;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* Services list */
|
||||
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
|
||||
.service-item {
|
||||
display: flex; align-items: flex-start; gap: 8px;
|
||||
font-size: 0.875rem; color: var(--navy-2); padding: 6px 0;
|
||||
}
|
||||
.service-check {
|
||||
width: 18px; height: 18px; border-radius: 5px;
|
||||
background: var(--green-bg); color: var(--green);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; margin-top: 1px;
|
||||
}
|
||||
.service-check svg { width: 10px; height: 10px; }
|
||||
|
||||
/* Service area */
|
||||
.area-pills { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.area-pill {
|
||||
font-size: 0.75rem; font-weight: 500; padding: 4px 10px;
|
||||
border-radius: 6px; background: var(--bg-2);
|
||||
color: var(--slate); border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── Sidebar cards ──────────────────────────────────── */
|
||||
.sidebar-sticky { position: sticky; top: 80px; }
|
||||
|
||||
/* Contact card */
|
||||
.contact-avatar {
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #BFDBFE, #EFF6FF);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: 1.125rem; color: var(--blue); flex-shrink: 0;
|
||||
}
|
||||
.contact-name { font-weight: 700; font-size: 0.9375rem; color: var(--navy); }
|
||||
.contact-role { font-size: 0.75rem; color: var(--slate-2); margin-top: 1px; }
|
||||
.contact-row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 0.8125rem; color: var(--slate); padding: 4px 0;
|
||||
}
|
||||
.contact-row a { color: var(--blue); }
|
||||
.contact-row svg { width: 14px; height: 14px; color: var(--slate-2); flex-shrink: 0; }
|
||||
.contact-divider { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; }
|
||||
|
||||
/* Stats */
|
||||
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||||
.stat-box {
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 12px 14px; text-align: center;
|
||||
}
|
||||
.stat-val {
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: 1.625rem; color: var(--navy); line-height: 1;
|
||||
}
|
||||
.stat-label { font-size: 0.6875rem; color: var(--slate-2); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
|
||||
/* Social links */
|
||||
.social-row { display: flex; gap: 8px; }
|
||||
.social-btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
|
||||
border: 1px solid var(--border); color: var(--slate);
|
||||
background: var(--white); transition: all 0.15s; text-decoration: none;
|
||||
}
|
||||
.social-btn:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
|
||||
.social-btn svg { width: 14px; height: 14px; }
|
||||
|
||||
/* Verified trust note */
|
||||
.trust-note {
|
||||
background: var(--green-bg); border: 1px solid #BBF7D0;
|
||||
border-radius: 10px; padding: 10px 14px;
|
||||
display: flex; align-items: flex-start; gap: 8px;
|
||||
}
|
||||
.trust-note svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; margin-top: 1px; }
|
||||
.trust-note p { font-size: 0.75rem; color: #14532D; line-height: 1.5; }
|
||||
|
||||
/* ── Contact form ───────────────────────────────────── */
|
||||
.enquiry-section { margin-top: 2.5rem; }
|
||||
.enquiry-section .card { max-width: 720px; }
|
||||
.enquiry-intro { font-size: 0.875rem; color: var(--slate); margin-bottom: 1.25rem; line-height: 1.6; }
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
|
||||
.form-field { margin-bottom: 1rem; }
|
||||
.form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--navy-2); margin-bottom: 5px; }
|
||||
.form-label span { color: #EF4444; }
|
||||
.form-input, .form-textarea {
|
||||
width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border); font-family: var(--font-body);
|
||||
font-size: 0.875rem; color: var(--navy); background: var(--white);
|
||||
transition: border-color 0.15s, box-shadow 0.15s; outline: none;
|
||||
}
|
||||
.form-input:focus, .form-textarea:focus {
|
||||
border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,78,216,0.08);
|
||||
}
|
||||
.form-textarea { min-height: 110px; resize: vertical; }
|
||||
.form-privacy {
|
||||
font-size: 0.6875rem; color: var(--slate-2); line-height: 1.6;
|
||||
padding: 10px 12px; background: var(--bg-2); border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.form-privacy a { color: var(--slate); text-decoration: underline; }
|
||||
.btn-submit {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 11px 24px; border-radius: 10px; font-size: 0.9375rem; font-weight: 600;
|
||||
font-family: var(--font-body); background: var(--blue); color: #fff;
|
||||
border: none; cursor: pointer; transition: all 0.15s;
|
||||
box-shadow: 0 2px 10px rgba(29,78,216,0.25);
|
||||
}
|
||||
.btn-submit:hover { background: var(--blue-2); box-shadow: 0 4px 16px rgba(29,78,216,0.3); }
|
||||
.btn-submit svg { width: 16px; height: 16px; }
|
||||
|
||||
/* ── CTA strip ──────────────────────────────────────── */
|
||||
.cta-strip {
|
||||
margin: 2.5rem 0 3rem;
|
||||
background: var(--navy);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.cta-strip::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cta-strip-text { position: relative; z-index: 1; }
|
||||
.cta-strip-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
|
||||
.cta-strip-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: #fff; }
|
||||
.cta-strip-sub { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
|
||||
.cta-strip-btn {
|
||||
position: relative; z-index: 1; flex-shrink: 0;
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 10px 20px; border-radius: 10px; font-size: 0.875rem; font-weight: 600;
|
||||
font-family: var(--font-body); background: #fff; color: var(--navy);
|
||||
border: none; cursor: pointer; transition: all 0.15s; text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cta-strip-btn:hover { background: var(--blue-bg); color: var(--blue); text-decoration: none; }
|
||||
|
||||
/* ── Animations ─────────────────────────────────────── */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.hero-left { animation: fadeUp 0.45s ease both; }
|
||||
.hero-actions { animation: fadeUp 0.45s 0.1s ease both; }
|
||||
.body-main { animation: fadeUp 0.45s 0.15s ease both; }
|
||||
.body-sidebar { animation: fadeUp 0.45s 0.2s ease both; }
|
||||
|
||||
/* ── Responsive ─────────────────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.body-grid { grid-template-columns: 1fr; }
|
||||
.body-sidebar { display: contents; }
|
||||
.sidebar-sticky { position: static; }
|
||||
.service-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 2rem 1.25rem 2rem; border-radius: 0; }
|
||||
.hero-inner { flex-direction: column; }
|
||||
.hero-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
.page { padding: 0 1rem; }
|
||||
.cta-strip { flex-direction: column; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="nav">
|
||||
<a href="/" class="nav-logo">
|
||||
<svg width="26" height="26" viewBox="0 0 32 32" fill="none">
|
||||
<circle cx="14" cy="12" r="10" stroke="#0F172A" stroke-width="2.2" fill="none"/>
|
||||
<line x1="14" y1="2" x2="14" y2="22" stroke="#0F172A" stroke-width="1.2" opacity="0.35"/>
|
||||
<line x1="4" y1="12" x2="24" y2="12" stroke="#0F172A" stroke-width="1.2" opacity="0.35"/>
|
||||
<line x1="6.5" y1="4.5" x2="21.5" y2="19.5" stroke="#0F172A" stroke-width="1" opacity="0.2"/>
|
||||
<line x1="21.5" y1="4.5" x2="6.5" y2="19.5" stroke="#0F172A" stroke-width="1" opacity="0.2"/>
|
||||
<line x1="20" y1="20" x2="28" y2="30" stroke="#0F172A" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
padelnomics
|
||||
</a>
|
||||
<a href="/directory" class="nav-back">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Supplier Directory
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<div class="hero">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-left">
|
||||
<div class="hero-identity">
|
||||
<!-- {# supplier.logo_file or supplier.logo_url #} -->
|
||||
<div class="hero-logo">C</div>
|
||||
<div class="hero-title-group">
|
||||
<div class="hero-badges">
|
||||
<!-- {# category_labels.get(supplier.category, supplier.category) #} -->
|
||||
<span class="hero-badge hero-badge--category">Manufacturer</span>
|
||||
<!-- {# if supplier.is_verified or supplier.tier != 'free' #} -->
|
||||
<span class="hero-badge hero-badge--verified">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Verified
|
||||
</span>
|
||||
</div>
|
||||
<!-- {# supplier.name #} -->
|
||||
<h1 class="hero-name">CourtCraft GmbH</h1>
|
||||
<div class="hero-meta">
|
||||
<!-- {# supplier.city, country_labels.get(supplier.country_code) #} -->
|
||||
<span>Munich</span>
|
||||
<span class="hero-meta-dot"></span>
|
||||
<span>Germany</span>
|
||||
<!-- {# if supplier.years_in_business #} -->
|
||||
<span class="hero-meta-dot"></span>
|
||||
<span>Est. 2009</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- {# supplier.tagline #} -->
|
||||
<p class="hero-tagline">"Engineering courts that last a generation — precision manufacturing for professional padel."</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions">
|
||||
<!-- {# if supplier.website #} -->
|
||||
<a href="https://courtcraft.de" target="_blank" rel="noopener" class="btn-hero-primary">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
Visit Website
|
||||
</a>
|
||||
<!-- {# if supplier.contact_phone #} -->
|
||||
<a href="tel:+4989123456789" class="btn-hero-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6.29 6.29l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 18.92Z"/></svg>
|
||||
+49 89 123 456 789
|
||||
</a>
|
||||
<button type="button" class="btn-hero-secondary" onclick="navigator.share ? navigator.share({title:'CourtCraft GmbH',url:location.href}) : navigator.clipboard.writeText(location.href)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /hero -->
|
||||
|
||||
<!-- Body -->
|
||||
<div class="page">
|
||||
<div class="body-grid">
|
||||
|
||||
<!-- LEFT: main content -->
|
||||
<div class="body-main">
|
||||
|
||||
<!-- About -->
|
||||
<div class="card">
|
||||
<div class="card-title">About</div>
|
||||
<!-- {# supplier.long_description or supplier.description #} -->
|
||||
<p class="desc-body">
|
||||
CourtCraft GmbH designs and manufactures professional padel courts at our 12,000 m² production facility in Munich, Germany. Founded in 2009 by former professional players, we combine German engineering precision with deep understanding of the game's technical demands.
|
||||
</p>
|
||||
<p class="desc-body">
|
||||
Our courts are installed across 34 countries, from private clubs and hotels to national federation training centres. Every CourtCraft court ships with a 15-year structural warranty and full documentation for planning authorities. We handle logistics and installation coordination in all major European markets.
|
||||
</p>
|
||||
<div class="cat-pills">
|
||||
<!-- {# for cat in (supplier.service_categories or '').split(',') #} -->
|
||||
<span class="cat-pill">Manufacturer</span>
|
||||
<span class="cat-pill">Installer</span>
|
||||
<span class="cat-pill">Turnkey</span>
|
||||
<span class="cat-pill">Indoor</span>
|
||||
<span class="cat-pill">Outdoor</span>
|
||||
<span class="cat-pill">Panoramic</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="card">
|
||||
<div class="card-title">Services Offered</div>
|
||||
<div class="service-list">
|
||||
<!-- {# for service in services_list #} -->
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Court design & layout planning
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Manufacturing & supply
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Installation & commissioning
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Lighting systems
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Flooring & surfaces
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
After-sales & warranty
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Permitting documentation
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
Project management
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Area -->
|
||||
<div class="card">
|
||||
<div class="card-title">Service Area</div>
|
||||
<div class="area-pills">
|
||||
<!-- {# for country in (supplier.service_area or '').split(',') #} -->
|
||||
<span class="area-pill">🇩🇪 Germany</span>
|
||||
<span class="area-pill">🇦🇹 Austria</span>
|
||||
<span class="area-pill">🇨🇭 Switzerland</span>
|
||||
<span class="area-pill">🇳🇱 Netherlands</span>
|
||||
<span class="area-pill">🇧🇪 Belgium</span>
|
||||
<span class="area-pill">🇩🇰 Denmark</span>
|
||||
<span class="area-pill">🇸🇪 Sweden</span>
|
||||
<span class="area-pill">🇳🇴 Norway</span>
|
||||
<span class="area-pill">🇫🇮 Finland</span>
|
||||
<span class="area-pill">🇵🇱 Poland</span>
|
||||
<span class="area-pill">🇨🇿 Czech Republic</span>
|
||||
<span class="area-pill">🇸🇮 Slovenia</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /body-main -->
|
||||
|
||||
<!-- RIGHT: sidebar -->
|
||||
<div class="body-sidebar">
|
||||
<div class="sidebar-sticky">
|
||||
|
||||
<!-- Contact card -->
|
||||
<div class="card">
|
||||
<div class="card-title">Contact</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:1rem">
|
||||
<!-- {# supplier.contact_name #} -->
|
||||
<div class="contact-avatar">M</div>
|
||||
<div>
|
||||
<div class="contact-name">Markus Berger</div>
|
||||
<div class="contact-role">International Sales</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
||||
<!-- {# supplier.contact_email #} -->
|
||||
<a href="mailto:m.berger@courtcraft.de">m.berger@courtcraft.de</a>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6.29 6.29l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 18.92Z"/></svg>
|
||||
<!-- {# supplier.contact_phone #} -->
|
||||
<a href="tel:+4989123456789">+49 89 123 456 789</a>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
|
||||
<!-- {# supplier.website #} -->
|
||||
<a href="https://courtcraft.de" target="_blank" rel="noopener">courtcraft.de</a>
|
||||
</div>
|
||||
|
||||
<hr class="contact-divider">
|
||||
|
||||
<!-- Company stats -->
|
||||
<div class="stat-grid">
|
||||
<!-- {# if supplier.years_in_business #} -->
|
||||
<div class="stat-box">
|
||||
<div class="stat-val">16</div>
|
||||
<div class="stat-label">Years active</div>
|
||||
</div>
|
||||
<!-- {# if supplier.project_count #} -->
|
||||
<div class="stat-box">
|
||||
<div class="stat-val">340+</div>
|
||||
<div class="stat-label">Courts built</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="contact-divider">
|
||||
|
||||
<!-- Social links -->
|
||||
<div class="social-row">
|
||||
<a href="#" class="social-btn" title="LinkedIn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a href="#" class="social-btn" title="Instagram">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
|
||||
Instagram
|
||||
</a>
|
||||
<a href="#" class="social-btn" title="YouTube">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><polygon points="10 15 15 12 10 9 10 15"/></svg>
|
||||
YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trust note -->
|
||||
<div class="trust-note">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
|
||||
<p>Verified listing. Company details confirmed by padelnomics.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /sidebar-sticky -->
|
||||
</div><!-- /body-sidebar -->
|
||||
|
||||
</div><!-- /body-grid -->
|
||||
|
||||
<!-- Enquiry form -->
|
||||
<div class="enquiry-section">
|
||||
<div class="card">
|
||||
<div class="card-title">Send an Enquiry</div>
|
||||
<!-- {# action="{{ url_for('directory.supplier_enquiry', slug=supplier.slug) }}" #} -->
|
||||
<form method="post" action="/directory/courtcraft-gmbh/enquiry">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<p class="enquiry-intro">
|
||||
Questions about this supplier? Send a message via padelnomics and we'll relay it directly to CourtCraft GmbH. Your contact details will only be shared with this supplier.
|
||||
</p>
|
||||
<div class="form-row">
|
||||
<div class="form-field" style="margin-bottom:0">
|
||||
<label class="form-label" for="eq-name">Your Name <span>*</span></label>
|
||||
<input type="text" id="eq-name" name="contact_name" class="form-input" required placeholder="Maria Schmidt">
|
||||
</div>
|
||||
<div class="form-field" style="margin-bottom:0">
|
||||
<label class="form-label" for="eq-email">Email <span>*</span></label>
|
||||
<input type="email" id="eq-email" name="contact_email" class="form-input" required placeholder="maria@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="eq-msg">Message <span>*</span></label>
|
||||
<textarea id="eq-msg" name="message" class="form-textarea" required
|
||||
placeholder="Briefly describe your project — number of courts, location, timeline, and any specific requirements."></textarea>
|
||||
</div>
|
||||
<p class="form-privacy">
|
||||
Your message is relayed by padelnomics to this supplier. We do not sell your data. By submitting you agree to our
|
||||
<a href="/privacy">Privacy Policy</a> and <a href="/terms">Terms of Use</a>.
|
||||
</p>
|
||||
<button type="submit" class="btn-submit">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
Send Enquiry
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer CTA strip -->
|
||||
<!--
|
||||
{# if supplier.tier == 'basic' and supplier.claimed_by #}
|
||||
Show "Upgrade to Growth" strip
|
||||
{# elif not supplier.claimed_by #}
|
||||
Show "Claim this listing" strip
|
||||
{# endif #}
|
||||
-->
|
||||
<div class="cta-strip">
|
||||
<div class="cta-strip-text">
|
||||
<!-- Variant A: unclaimed -->
|
||||
<!-- <div class="cta-strip-label">Is this your company?</div>
|
||||
<div class="cta-strip-title">Claim this listing for free</div>
|
||||
<div class="cta-strip-sub">Take control of your profile and respond to enquiries.</div> -->
|
||||
|
||||
<!-- Variant B: claimed Basic → upsell Growth -->
|
||||
<div class="cta-strip-label">Ready to grow?</div>
|
||||
<div class="cta-strip-title">Start receiving project leads</div>
|
||||
<div class="cta-strip-sub">Upgrade to Growth — get matched with buyers actively requesting quotes in your region.</div>
|
||||
</div>
|
||||
<!-- Variant A: -->
|
||||
<!-- <a href="/suppliers/claim/courtcraft-gmbh" class="cta-strip-btn">Claim Listing →</a> -->
|
||||
<!-- Variant B: -->
|
||||
<a href="/suppliers/upgrade" class="cta-strip-btn">See Growth Plans →</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user