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:
175
web/src/padelnomics/public/templates/market_score.html
Normal file
175
web/src/padelnomics/public/templates/market_score.html
Normal 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">👥</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">💶</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">📈</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">🔍</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 %}
|
||||
Reference in New Issue
Block a user