j.foucher
773f137eb7
Scaffolds all components needed for the home and ships a working
front-page implementation covering the 9-section wireframe.
Components (assets/css/components.css)
- 13 sections per Design Handoff section 3:
buttons, links, forms, cards (5 variants), stat callouts, header,
nav, mega menu, drawer, footer, hero, logo strip, eyebrow,
section title/lead, conversion banner, scroll reveal.
- All token-driven, prefixed `av-`, BEM-light. Mobile-first with
768/1024/1280 breakpoints. Respects prefers-reduced-motion.
Global templates
- header.php: sticky header (60px mobile / 72px desktop), 5-item
nav, language switcher, primary CTA, mobile drawer with hamburger
toggle. Skip link first focusable element.
- footer.php: 5-column dark footer (Solutions, Industries, Why
Asterion, Why Asterion, Newsletter), bottom strip with legal
links + social.
- index.php: archive/search/blog fallback rendering posts in
card-blog layout.
- front-page.php: full home with 9 sections, EN copy lifted
verbatim from PDF Strategie D.1:
1. Hero "Your Last Mistake Should Be in VR." + 2 CTAs
2. Trust bar (placeholder logos + 4 inline metrics)
3. Solutions: MY / FLEX / ACADEMY (3 cards)
4. Industries: Police / SF / Military / Firefighters (2x2)
5. Feature heroes: UWeD, Instructor Cockpit, AAR (alternating)
6. Featured case study with 3 stat callouts
7. Testimonials (3 quote cards)
8. Latest insights (queries `post`; placeholder when empty)
9. Conversion banner (Demo / T&E / Quote)
Verified: HTTP 200 on http://localhost:10004/, 73 KB HTML, 418 ms.
Outstanding (deferred)
- Hero video master + photographs (see MISSING-ASSETS.md)
- Mega menu content (links currently flat to section index)
- Form posts (newsletter currently no-op POST)
- Bricks license activation (manual, requires user key)
- WPML setup wizard (manual, requires user key)
- Lighthouse + axe full audit (visual env required)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
115 lines
5.1 KiB
PHP
115 lines
5.1 KiB
PHP
<?php
|
||
/**
|
||
* Asterion Bricks — Global header
|
||
*
|
||
* Sticky header per Design Handoff section 3.5 :
|
||
* - 60px on mobile, 72px on desktop
|
||
* - Logo left, main nav center (desktop), CTA + lang switch right
|
||
* - Hamburger drawer on mobile
|
||
*
|
||
* @package AsterionBricks
|
||
*/
|
||
defined('ABSPATH') || exit;
|
||
?>
|
||
<!doctype html>
|
||
<html <?php language_attributes(); ?>>
|
||
<head>
|
||
<meta charset="<?php bloginfo('charset'); ?>">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#0B1F3A">
|
||
<link rel="profile" href="https://gmpg.org/xfn/11">
|
||
<?php wp_head(); ?>
|
||
</head>
|
||
<body <?php body_class(); ?>>
|
||
<?php wp_body_open(); ?>
|
||
|
||
<a class="av-skip-link" href="#main"><?php esc_html_e('Skip to main content', 'asterion-bricks'); ?></a>
|
||
|
||
<header class="av-header" role="banner">
|
||
<div class="av-container av-header__inner">
|
||
|
||
<a href="<?php echo esc_url(home_url('/')); ?>" class="av-header__logo" aria-label="Asterion VR — home">
|
||
ASTERION VR
|
||
</a>
|
||
|
||
<nav class="av-nav" aria-label="<?php esc_attr_e('Primary', 'asterion-bricks'); ?>">
|
||
<ul class="av-nav__list" style="display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0;">
|
||
<li class="av-nav__item">
|
||
<a href="<?php echo esc_url(home_url('/solutions/')); ?>" class="av-nav__link" aria-haspopup="true" aria-expanded="false">
|
||
<?php esc_html_e('Solutions', 'asterion-bricks'); ?>
|
||
</a>
|
||
</li>
|
||
<li class="av-nav__item">
|
||
<a href="<?php echo esc_url(home_url('/industries/')); ?>" class="av-nav__link" aria-haspopup="true" aria-expanded="false">
|
||
<?php esc_html_e('Industries', 'asterion-bricks'); ?>
|
||
</a>
|
||
</li>
|
||
<li class="av-nav__item">
|
||
<a href="<?php echo esc_url(home_url('/technology/')); ?>" class="av-nav__link" aria-haspopup="true" aria-expanded="false">
|
||
<?php esc_html_e('Technology', 'asterion-bricks'); ?>
|
||
</a>
|
||
</li>
|
||
<li class="av-nav__item">
|
||
<a href="<?php echo esc_url(home_url('/why-asterion/')); ?>" class="av-nav__link">
|
||
<?php esc_html_e('Why Asterion', 'asterion-bricks'); ?>
|
||
</a>
|
||
</li>
|
||
<li class="av-nav__item">
|
||
<a href="<?php echo esc_url(home_url('/insights/')); ?>" class="av-nav__link">
|
||
<?php esc_html_e('Insights', 'asterion-bricks'); ?>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="av-header__right">
|
||
<div class="av-lang-switch" aria-label="<?php esc_attr_e('Language', 'asterion-bricks'); ?>">
|
||
<span class="av-lang-switch__current">EN</span>
|
||
<span aria-hidden="true">·</span>
|
||
<a href="#" class="av-lang-switch__other" aria-label="<?php esc_attr_e('Switch to French', 'asterion-bricks'); ?>">FR</a>
|
||
</div>
|
||
|
||
<a href="<?php echo esc_url(home_url('/request-demo/')); ?>" class="av-btn av-btn--primary av-btn--md">
|
||
<?php esc_html_e('Request a Demo', 'asterion-bricks'); ?>
|
||
</a>
|
||
|
||
<button type="button" class="av-drawer-toggle" aria-controls="av-drawer" aria-expanded="false" aria-label="<?php esc_attr_e('Open menu', 'asterion-bricks'); ?>">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<aside id="av-drawer" class="av-drawer" aria-hidden="true">
|
||
<button type="button" class="av-drawer__close" aria-label="<?php esc_attr_e('Close menu', 'asterion-bricks'); ?>">×</button>
|
||
<nav class="av-drawer__nav" aria-label="<?php esc_attr_e('Mobile primary', 'asterion-bricks'); ?>">
|
||
<div class="av-drawer__group">
|
||
<a href="<?php echo esc_url(home_url('/solutions/')); ?>" class="av-drawer__group-title"><?php esc_html_e('Solutions', 'asterion-bricks'); ?></a>
|
||
</div>
|
||
<div class="av-drawer__group">
|
||
<a href="<?php echo esc_url(home_url('/industries/')); ?>" class="av-drawer__group-title"><?php esc_html_e('Industries', 'asterion-bricks'); ?></a>
|
||
</div>
|
||
<div class="av-drawer__group">
|
||
<a href="<?php echo esc_url(home_url('/technology/')); ?>" class="av-drawer__group-title"><?php esc_html_e('Technology', 'asterion-bricks'); ?></a>
|
||
</div>
|
||
<div class="av-drawer__group">
|
||
<a href="<?php echo esc_url(home_url('/why-asterion/')); ?>" class="av-drawer__group-title"><?php esc_html_e('Why Asterion', 'asterion-bricks'); ?></a>
|
||
</div>
|
||
<div class="av-drawer__group">
|
||
<a href="<?php echo esc_url(home_url('/insights/')); ?>" class="av-drawer__group-title"><?php esc_html_e('Insights', 'asterion-bricks'); ?></a>
|
||
</div>
|
||
</nav>
|
||
<div class="av-drawer__cta-area">
|
||
<a href="<?php echo esc_url(home_url('/request-demo/')); ?>" class="av-btn av-btn--primary av-btn--lg" style="width:100%;">
|
||
<?php esc_html_e('Request a Demo', 'asterion-bricks'); ?>
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<main id="main" class="av-main">
|