feat(template): create Market Score methodology page

Subtask 3/6: Standalone informational page extending base.html.
Sections: hero, what it measures (4-card grid), score bands,
data sources, limitations, CTAs, FAQ with details/summary.
JSON-LD: WebPage + BreadcrumbList + FAQPage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-24 10:12:03 +01:00
parent 33aa705ef9
commit 39fe025e5b

View File

@@ -0,0 +1,175 @@
{% extends "base.html" %}
{% block title %}{{ t.mscore_page_title }}{% endblock %}
{% block head %}
<meta name="description" content="{{ t.mscore_meta_desc }}">
<meta property="og:title" content="{{ t.mscore_page_title }}">
<meta property="og:description" content="{{ t.mscore_og_desc }}">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"name": "{{ t.mscore_page_title }}",
"description": "{{ t.mscore_meta_desc }}",
"url": "{{ config.BASE_URL }}/{{ lang }}/market-score",
"inLanguage": "{{ lang }}",
"isPartOf": {
"@type": "WebSite",
"name": "Padelnomics",
"url": "{{ config.BASE_URL }}"
}
},
{
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "{{ config.BASE_URL }}/{{ lang }}"},
{"@type": "ListItem", "position": 2, "name": "Market Score", "item": "{{ config.BASE_URL }}/{{ lang }}/market-score"}
]
},
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "{{ t.mscore_faq_q1 }}",
"acceptedAnswer": {"@type": "Answer", "text": "{{ t.mscore_faq_a1 }}"}
},
{
"@type": "Question",
"name": "{{ t.mscore_faq_q2 }}",
"acceptedAnswer": {"@type": "Answer", "text": "{{ t.mscore_faq_a2 }}"}
},
{
"@type": "Question",
"name": "{{ t.mscore_faq_q3 }}",
"acceptedAnswer": {"@type": "Answer", "text": "{{ t.mscore_faq_a3 }}"}
},
{
"@type": "Question",
"name": "{{ t.mscore_faq_q4 }}",
"acceptedAnswer": {"@type": "Answer", "text": "{{ t.mscore_faq_a4 }}"}
},
{
"@type": "Question",
"name": "{{ t.mscore_faq_q5 }}",
"acceptedAnswer": {"@type": "Answer", "text": "{{ t.mscore_faq_a5 }}"}
}
]
}
]
}
</script>
{% endblock %}
{% block content %}
<main class="container-page py-12">
<div class="max-w-3xl mx-auto">
<!-- Hero -->
<header class="text-center mb-12">
<h1 class="text-3xl mb-2">
<span style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#0F172A;letter-spacing:-0.02em">padelnomics</span>
Market Score
</h1>
<p class="text-lg text-slate">{{ t.mscore_subtitle }}</p>
</header>
<!-- What It Measures -->
<section class="mb-10">
<h2 class="text-xl mb-4">{{ t.mscore_what_h2 }}</h2>
<p class="text-slate-dark leading-relaxed mb-6">{{ t.mscore_what_intro }}</p>
<div class="grid-2">
<div class="card">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f465;</div>
<h3 class="font-semibold text-navy mb-1">{{ t.mscore_cat_demo_h3 }}</h3>
<p class="text-sm text-slate-dark">{{ t.mscore_cat_demo_p }}</p>
</div>
<div class="card">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f4b6;</div>
<h3 class="font-semibold text-navy mb-1">{{ t.mscore_cat_econ_h3 }}</h3>
<p class="text-sm text-slate-dark">{{ t.mscore_cat_econ_p }}</p>
</div>
<div class="card">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f4c8;</div>
<h3 class="font-semibold text-navy mb-1">{{ t.mscore_cat_demand_h3 }}</h3>
<p class="text-sm text-slate-dark">{{ t.mscore_cat_demand_p }}</p>
</div>
<div class="card">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f50d;</div>
<h3 class="font-semibold text-navy mb-1">{{ t.mscore_cat_data_h3 }}</h3>
<p class="text-sm text-slate-dark">{{ t.mscore_cat_data_p }}</p>
</div>
</div>
</section>
<!-- How To Read the Score -->
<section class="card mb-8">
<h2 class="text-xl mb-4">{{ t.mscore_read_h2 }}</h2>
<div class="space-y-4">
<div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#16A34A;flex-shrink:0"></span>
<span class="font-semibold text-navy">{{ t.mscore_band_high_label }}</span>
</div>
<p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.mscore_band_high_p }}</p>
</div>
<div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#D97706;flex-shrink:0"></span>
<span class="font-semibold text-navy">{{ t.mscore_band_mid_label }}</span>
</div>
<p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.mscore_band_mid_p }}</p>
</div>
<div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#64748B;flex-shrink:0"></span>
<span class="font-semibold text-navy">{{ t.mscore_band_low_label }}</span>
</div>
<p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.mscore_band_low_p }}</p>
</div>
</div>
<p class="text-sm text-slate mt-4" style="border-left:3px solid #E2E8F0;padding-left:0.75rem">{{ t.mscore_read_note }}</p>
</section>
<!-- Data Sources -->
<section class="card mb-8">
<h2 class="text-xl mb-4">{{ t.mscore_sources_h2 }}</h2>
<p class="text-slate-dark leading-relaxed">{{ t.mscore_sources_p }}</p>
</section>
<!-- Limitations -->
<section class="card mb-8">
<h2 class="text-xl mb-4">{{ t.mscore_limits_h2 }}</h2>
<div class="space-y-3 text-slate-dark leading-relaxed">
<p>{{ t.mscore_limits_p1 }}</p>
<p>{{ t.mscore_limits_p2 }}</p>
<p>{{ t.mscore_limits_p3 }}</p>
</div>
</section>
<!-- CTA -->
<div class="text-center my-12">
<a href="{{ url_for('content.markets') }}" class="btn" style="margin-right:0.75rem">{{ t.mscore_cta_markets }}</a>
<a href="{{ url_for('planner.index') }}" class="btn-secondary" style="display:inline-block;padding:0.625rem 1.25rem;border-radius:6px;font-weight:600;font-size:0.875rem;text-decoration:none">{{ t.mscore_cta_planner }}</a>
</div>
<!-- FAQ -->
<section>
<h2 class="text-xl mb-4">{{ t.mscore_faq_h2 }}</h2>
<div class="space-y-4">
{% for i in range(1, 6) %}
<details style="border:1px solid #E2E8F0;border-radius:8px;padding:0.75rem 1rem">
<summary class="font-semibold text-navy" style="cursor:pointer">{{ t['mscore_faq_q' ~ i] }}</summary>
<p class="text-sm text-slate-dark mt-2">{{ t['mscore_faq_a' ~ i] }}</p>
</details>
{% endfor %}
</div>
</section>
</div>
</main>
{% endblock %}