update landing journey: 5-stage funnel with Coming Soon badges

Explore → Plan → Finance → Build → Grow, with .grid-5 layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-16 18:30:16 +01:00
parent 7cb41d91f2
commit 02d216bc94
3 changed files with 20 additions and 9 deletions

View File

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
## [Unreleased]
### Changed
- Landing page journey section: renamed "From Idea to Operating Hall" → "Your Journey", expanded from 4 cards to 5 (Explore → Plan → Finance → Build → Grow) with "Coming Soon" badges on unreleased stages
- Added `.grid-5` CSS helper for 5-column grid layout
### Changed
- **Pico CSS → Tailwind CSS v4** — full design system migration across all templates (except planner, which keeps its own CSS)
- Standalone Tailwind CLI binary (no Node.js) with `make css-build` / `make css-watch`

View File

@@ -119,23 +119,27 @@
<!-- The Journey -->
<section class="py-12">
<h2 class="text-2xl text-center mb-8">From Idea to Operating Hall</h2>
<div class="grid-4">
<h2 class="text-2xl text-center mb-8">Your Journey</h2>
<div class="grid-5">
<div class="card border-l-4 border-l-electric">
<p class="font-semibold text-navy mb-2">&#x1F4CA; Plan</p>
<p class="text-sm text-slate-dark">Model your padel hall investment with our financial planner. CAPEX, operating costs, cash flow, returns, sensitivity analysis.</p>
<p class="font-semibold text-navy mb-2">&#x1F50D; Explore <span class="badge">Coming Soon</span></p>
<p class="text-sm text-slate-dark">Market demand analysis, whitespace mapping, location scoring. Is padel viable in your area?</p>
</div>
<div class="card border-l-4 border-l-accent">
<p class="font-semibold text-navy mb-2">&#x1F4B0; Finance</p>
<p class="text-sm text-slate-dark">Connect with banks and investors experienced in sports facility loans. Your planner data becomes your business case.</p>
<p class="font-semibold text-navy mb-2">&#x1F4CA; Plan</p>
<p class="text-sm text-slate-dark">Model your investment with our financial planner. CAPEX, operating costs, cash flow, returns, sensitivity analysis.</p>
</div>
<div class="card border-l-4 border-l-warning">
<p class="font-semibold text-navy mb-2">&#x1F3D7;&#xFE0F; Build</p>
<p class="font-semibold text-navy mb-2">&#x1F4B0; Finance <span class="badge">Coming Soon</span></p>
<p class="text-sm text-slate-dark">Connect with banks and investors experienced in sports facility loans. Your planner data becomes your business case.</p>
</div>
<div class="card border-l-4 border-l-danger">
<p class="font-semibold text-navy mb-2">&#x1F3D7;&#xFE0F; Build <span class="badge">Coming Soon</span></p>
<p class="text-sm text-slate-dark">Get quotes from verified court suppliers. Compare pricing, quality, and delivery timelines for your specific project.</p>
</div>
<div class="card border-l-4 border-l-slate">
<p class="font-semibold text-navy mb-2">&#x1F3BE; Operate</p>
<p class="text-sm text-slate-dark">Coming soon: analytics powered by real booking data, benchmarking against similar venues, optimization recommendations.</p>
<p class="font-semibold text-navy mb-2">&#x1F4C8; Grow <span class="badge">Coming Soon</span></p>
<p class="text-sm text-slate-dark">Launch playbook, performance benchmarking, operational KPIs, and expansion analytics for your venue.</p>
</div>
</div>
</section>

View File

@@ -184,6 +184,9 @@
.grid-4 {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6;
}
.grid-5 {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6;
}
/* Monospace data display */
.metric {