AsterionWP2026/wp-content/themes/asterion-bricks/templates/page-insights-hub.php

<?php
/**
 * Template Name: Insights Hub
 *
 * /insights/ — blog hub. Lists native `post` items as blog cards.
 *
 * @package AsterionBricks
 */
defined('ABSPATH') || exit;

get_header();
$home_url = home_url('/');
?>

<section class="av-hero" aria-labelledby="insights-headline">
  <div class="av-hero__media" aria-hidden="true">
    <div style="width:100%;height:100%;background:
        radial-gradient(ellipse at 60% 40%, rgba(201,164,90,0.12), transparent 60%),
        linear-gradient(135deg, #081427 0%, #0B1F3A 70%, #13294B 100%);"></div>
  </div>
  <div class="av-container">
    <div class="av-hero__inner">
      <p class="av-hero__eyebrow"><?php esc_html_e('Insights', 'asterion-bricks'); ?></p>
      <h1 id="insights-headline" class="av-hero__headline">Notes from the front of immersive training.</h1>
      <p class="av-hero__sub">
        Doctrine. Training science. Instructor stories. AAR data. Comparisons of VR vs live training. Found something useful? It probably came from a customer conversation. We publish what we learn.
      </p>
    </div>
  </div>
</section>

<section class="av-section" data-av-reveal>
  <div class="av-container">
    <?php
    // Categories filter chips (placeholders — wired to native `category` taxonomy if used).
    $categories = ['Doctrine', 'Technology', 'Case Studies', 'Industry News', "Founder's Notes"];
    ?>
    <div style="display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-10);">
      <?php foreach ($categories as $cat) : ?>
        <span class="av-btn av-btn--ghost av-btn--sm" style="border:1px solid var(--color-border-default);"><?php echo esc_html($cat); ?></span>
      <?php endforeach; ?>
    </div>

    <?php $posts = get_posts(['numberposts' => 12, 'post_status' => 'publish']); ?>
    <?php if (! empty($posts)) : ?>
      <div class="av-grid-3">
        <?php foreach ($posts as $post) : setup_postdata($post); ?>
          <article class="av-card av-card--blog">
            <a href="<?php the_permalink(); ?>" class="av-card__media" aria-hidden="true" tabindex="-1" style="background:linear-gradient(135deg,#CCD3DC,#E5E9EE);"></a>
            <div class="av-card__body">
              <span class="av-card__eyebrow"><?php echo esc_html(get_the_date('M j, Y')); ?></span>
              <h2 class="av-card__title"><a href="<?php the_permalink(); ?>" style="color:inherit;text-decoration:none;"><?php the_title(); ?></a></h2>
              <p class="av-card__excerpt"><?php echo esc_html(wp_trim_words(get_the_excerpt(), 22)); ?></p>
              <div class="av-card__cta"><a href="<?php the_permalink(); ?>" class="av-link av-link--with-arrow"><?php esc_html_e('Read more', 'asterion-bricks'); ?></a></div>
            </div>
          </article>
        <?php endforeach; wp_reset_postdata(); ?>
      </div>
    <?php else : ?>
      <p style="color:var(--color-text-muted);max-width:64ch;">
        <?php esc_html_e('Editorial blog launches with the site go-live. The 12-month content calendar is in the Strategy & Content brief, section B.4. New articles will appear here as soon as they ship.', 'asterion-bricks'); ?>
      </p>
    <?php endif; ?>
  </div>
</section>

<section class="av-section av-section--dark" data-av-reveal>
  <div class="av-container">
    <div style="display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:center;" class="av-newsletter-row">
      <div>
        <span class="av-eyebrow av-eyebrow--gold"><?php esc_html_e('Newsletter', 'asterion-bricks'); ?></span>
        <h2 style="font-family:var(--font-display);font-size:var(--text-h1);line-height:var(--leading-h1);color:var(--color-text-on-dark);margin:var(--space-3) 0;">Subscribe — one article per month.</h2>
        <p style="color:var(--color-text-on-dark-muted);max-width:60ch;">
          Insights from the front of immersive training. One email per month. No spam. Unsubscribe in one click.
        </p>
      </div>
      <form method="post" action="#" style="display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-start;" aria-label="<?php esc_attr_e('Newsletter signup', 'asterion-bricks'); ?>">
        <label for="av-insights-newsletter" class="av-sr-only"><?php esc_html_e('Your email', 'asterion-bricks'); ?></label>
        <input type="email" id="av-insights-newsletter" name="email" class="av-input" placeholder="<?php esc_attr_e('your@email.com', 'asterion-bricks'); ?>" required style="flex:1;min-width:200px;">
        <button type="submit" class="av-btn av-btn--primary av-btn--md"><?php esc_html_e('Subscribe', 'asterion-bricks'); ?></button>
      </form>
    </div>
    <style>@media (min-width: 768px) { .av-newsletter-row { grid-template-columns: 2fr 1.5fr !important; } }</style>
  </div>
</section>

<?php get_footer(); ?>