j.foucher
8207c5f72b
Implements the 5 Solutions pages (1 hub + 4 tier detail) with full EN copy
from PDF Strategie & Contenu D.2-D.6.
Architecture
- inc/solutions-data.php: single PHP array keyed by slug, holds the 4 tiers
(my-proserve, proserve-flex, proserve-academy, customization). Each tier
declares its hero, sections, and optional upsell. Section schema supports
4 types: prose / cards / list / cta.
- template-parts/solution-detail.php: reusable partial that iterates the
sections of a tier and renders each per its type. Alternates light/dark
backgrounds for visual rhythm.
- templates/page-solution-detail.php: WP custom Page Template
("Template Name: Solution Detail"). Looks up the current page slug,
pulls the matching tier from solutions-data.php, and hands off to the
partial. Falls back gracefully if the slug is unknown.
- templates/page-solutions-overview.php: WP custom Page Template
("Template Name: Solutions Overview") for /solutions/. Renders the
3-tier comparison table + PROSERVE+ teaser.
Pages were seeded into the DB by a one-shot mu-plugin
(wp-content/mu-plugins/asterion-seed-solutions.php in LocalWP) that
created the parent /solutions/ page and 4 children with the right
post_parent + _wp_page_template, then self-deleted.
Verified all 5 URLs return HTTP 200:
/solutions/ 62 KB
/solutions/my-proserve/ 65 KB
/solutions/proserve-flex/ 65 KB
/solutions/proserve-academy/ 63 KB
/solutions/customization/ 62 KB
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
174 lines
9.1 KiB
PHP
174 lines
9.1 KiB
PHP
<?php
|
|
/**
|
|
* Asterion Bricks — Solution detail partial
|
|
*
|
|
* Renders one PROSERVE tier (MY / FLEX / ACADEMY / +) from data passed via
|
|
* `set_query_var('av_solution', $solution_data)` before include.
|
|
*
|
|
* Section types supported : prose | cards | list | cta
|
|
*
|
|
* @package AsterionBricks
|
|
*/
|
|
defined('ABSPATH') || exit;
|
|
|
|
$solution = get_query_var('av_solution');
|
|
if (! is_array($solution)) {
|
|
return;
|
|
}
|
|
|
|
$home_url = home_url('/');
|
|
?>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- HERO -->
|
|
<!-- ============================================================== -->
|
|
<section class="av-hero" aria-labelledby="solution-headline">
|
|
<div class="av-hero__media" aria-hidden="true">
|
|
<div style="width:100%;height:100%;background:
|
|
radial-gradient(ellipse at 70% 30%, rgba(201,164,90,0.15), transparent 60%),
|
|
linear-gradient(135deg, #081427 0%, #0B1F3A 50%, #13294B 100%);"></div>
|
|
</div>
|
|
<div class="av-container">
|
|
<div class="av-hero__inner">
|
|
<p class="av-hero__eyebrow"><?php echo esc_html($solution['eyebrow']); ?></p>
|
|
<h1 id="solution-headline" class="av-hero__headline" style="font-size:clamp(2.25rem,5vw,var(--text-display-lg));line-height:var(--leading-display-lg);">
|
|
<?php echo esc_html($solution['title']); ?>™ — <?php echo esc_html($solution['tagline']); ?>
|
|
</h1>
|
|
<p class="av-hero__sub"><?php echo esc_html($solution['hero_lead']); ?></p>
|
|
<div class="av-hero__ctas">
|
|
<?php foreach ($solution['ctas'] as $i => $cta) :
|
|
$on_dark = ($cta['variant'] === 'secondary') ? ' av-btn--on-dark' : '';
|
|
$variant = ($cta['variant'] === 'primary') ? 'av-btn--primary' : 'av-btn--secondary';
|
|
?>
|
|
<a href="<?php echo esc_url($home_url . ltrim($cta['href'], '/')); ?>" class="av-btn <?php echo esc_attr($variant); ?><?php echo esc_attr($on_dark); ?> av-btn--lg">
|
|
<?php echo esc_html($cta['label']); ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- SECTIONS -->
|
|
<!-- ============================================================== -->
|
|
<?php
|
|
foreach ($solution['sections'] as $idx => $section) :
|
|
$is_dark = ($idx % 2 === 1);
|
|
$section_class = 'av-section' . ($is_dark ? ' av-section--dark' : '');
|
|
?>
|
|
<section class="<?php echo esc_attr($section_class); ?>" data-av-reveal>
|
|
<div class="av-container">
|
|
<div class="av-section__head">
|
|
<span class="av-eyebrow<?php echo $is_dark ? ' av-eyebrow--gold' : ''; ?>"><?php echo esc_html($section['eyebrow']); ?></span>
|
|
<h2 class="av-section__title"><?php echo esc_html($section['title']); ?></h2>
|
|
<?php if (! empty($section['lead'])) : ?>
|
|
<p class="av-section__lead"><?php echo esc_html($section['lead']); ?></p>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if ($section['type'] === 'prose' && ! empty($section['body'])) : ?>
|
|
<p class="av-section__lead" style="max-width:72ch;font-size:var(--text-body-lg);">
|
|
<?php echo esc_html($section['body']); ?>
|
|
</p>
|
|
|
|
<?php elseif ($section['type'] === 'cards' && ! empty($section['items'])) : ?>
|
|
<div class="av-grid-3">
|
|
<?php foreach ($section['items'] as $card) : ?>
|
|
<article class="av-card<?php echo $is_dark ? ' is-on-dark' : ''; ?> av-card--feature">
|
|
<div class="av-card__body">
|
|
<h3 class="av-card__title" style="font-size:var(--text-h4);"><?php echo esc_html($card['title']); ?></h3>
|
|
<p class="av-card__excerpt"><?php echo esc_html($card['body']); ?></p>
|
|
</div>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<?php elseif ($section['type'] === 'list' && ! empty($section['items'])) : ?>
|
|
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:72ch;font-size:var(--text-body-lg);line-height:var(--leading-body-lg);<?php echo $is_dark ? 'color:var(--color-text-on-dark-muted);' : 'color:var(--color-text-secondary);'; ?>">
|
|
<?php foreach ($section['items'] as $item) : ?>
|
|
<li style="padding-left:var(--space-6);position:relative;">
|
|
<span aria-hidden="true" style="position:absolute;left:0;top:0.6em;width:8px;height:8px;background:var(--color-brand-gold);border-radius:50%;"></span>
|
|
<?php echo esc_html($item); ?>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
<?php if (! empty($section['cta'])) : ?>
|
|
<p style="margin-top:var(--space-8);">
|
|
<a href="<?php echo esc_url($home_url . ltrim($section['cta']['href'], '/')); ?>" class="av-link<?php echo $is_dark ? ' av-link--on-dark' : ''; ?> av-link--with-arrow">
|
|
<?php echo esc_html($section['cta']['label']); ?>
|
|
</a>
|
|
</p>
|
|
<?php endif; ?>
|
|
|
|
<?php elseif ($section['type'] === 'cta' && ! empty($section['body'])) : ?>
|
|
<p class="av-section__lead" style="max-width:72ch;margin-bottom:var(--space-6);"><?php echo esc_html($section['body']); ?></p>
|
|
<?php if (! empty($section['ctas'])) : ?>
|
|
<div style="display:flex;flex-wrap:wrap;gap:var(--space-4);">
|
|
<?php foreach ($section['ctas'] as $cta) :
|
|
$on_dark = $is_dark ? ' av-btn--on-dark' : '';
|
|
$variant = ($cta['variant'] === 'primary') ? 'av-btn--primary' : 'av-btn--secondary';
|
|
?>
|
|
<a href="<?php echo esc_url($home_url . ltrim($cta['href'], '/')); ?>" class="av-btn <?php echo esc_attr($variant); ?><?php echo esc_attr($on_dark); ?> av-btn--lg">
|
|
<?php echo esc_html($cta['label']); ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</section>
|
|
<?php endforeach; ?>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- UPSELL (when to step up to the next tier) -->
|
|
<!-- ============================================================== -->
|
|
<?php if (! empty($solution['upsell'])) : ?>
|
|
<section class="av-section" style="background-color:var(--color-bg-subtle);" data-av-reveal>
|
|
<div class="av-container">
|
|
<div class="av-section__head">
|
|
<span class="av-eyebrow"><?php esc_html_e('Comparison and upgrade', 'asterion-bricks'); ?></span>
|
|
<h2 class="av-section__title"><?php echo esc_html($solution['upsell']['title']); ?></h2>
|
|
<p class="av-section__lead"><?php echo esc_html($solution['upsell']['body']); ?></p>
|
|
</div>
|
|
<div style="display:flex;flex-wrap:wrap;gap:var(--space-4);">
|
|
<?php foreach ($solution['upsell']['links'] as $link) : ?>
|
|
<a href="<?php echo esc_url($home_url . ltrim($link['href'], '/')); ?>" class="av-btn av-btn--secondary av-btn--md">
|
|
<?php echo esc_html($link['label']); ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- CONVERSION BANNER (shared) -->
|
|
<!-- ============================================================== -->
|
|
<section class="av-conversion-banner">
|
|
<div class="av-container">
|
|
<div class="av-conversion-banner__head">
|
|
<h2 class="av-conversion-banner__title"><?php esc_html_e('Ready to get hands-on?', 'asterion-bricks'); ?></h2>
|
|
<p class="av-conversion-banner__lead"><?php esc_html_e('Three paths into the platform — pick the one that fits where you are.', 'asterion-bricks'); ?></p>
|
|
</div>
|
|
<div class="av-conversion-banner__grid">
|
|
<div class="av-conversion-banner__card">
|
|
<h3 class="av-conversion-banner__card-title"><?php esc_html_e('Request a Demo', 'asterion-bricks'); ?></h3>
|
|
<p class="av-conversion-banner__card-desc"><?php esc_html_e('A 30-minute tailored session with our team. Walk through the configuration that matches your needs.', 'asterion-bricks'); ?></p>
|
|
<a href="<?php echo esc_url($home_url . 'request-demo/'); ?>" class="av-btn av-btn--primary av-btn--md"><?php esc_html_e('Schedule a demo', 'asterion-bricks'); ?></a>
|
|
</div>
|
|
<div class="av-conversion-banner__card">
|
|
<h3 class="av-conversion-banner__card-title"><?php esc_html_e('Request a T&E Kit', 'asterion-bricks'); ?></h3>
|
|
<p class="av-conversion-banner__card-desc"><?php esc_html_e('A PROSERVE case on loan at your facility for 5 to 10 days, with on-site support from our team.', 'asterion-bricks'); ?></p>
|
|
<a href="<?php echo esc_url($home_url . 'request-te-kit/'); ?>" class="av-btn av-btn--on-dark av-btn--secondary av-btn--md"><?php esc_html_e('Request the kit', 'asterion-bricks'); ?></a>
|
|
</div>
|
|
<div class="av-conversion-banner__card">
|
|
<h3 class="av-conversion-banner__card-title"><?php esc_html_e('Request a Quote', 'asterion-bricks'); ?></h3>
|
|
<p class="av-conversion-banner__card-desc"><?php esc_html_e('A detailed quote and deployment plan within 5 working days.', 'asterion-bricks'); ?></p>
|
|
<a href="<?php echo esc_url($home_url . 'request-quote/'); ?>" class="av-btn av-btn--on-dark av-btn--secondary av-btn--md"><?php esc_html_e('Get a quote', 'asterion-bricks'); ?></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|