demos.pug

---
layout: default
title: Demos
description: Interactive demonstrations and experiments built by Bob
permalink: /demos/
hero: true
---

.hero.text-white.py-16.mb-8
  .container.mx-auto.px-4.text-center
    h1.text-4xl.font-bold.mb-4 {{ page.title }}
    p.text-xl.opacity-90.max-w-2xl.mx-auto {{ page.description }}

main.container.mx-auto.px-4.py-8
  | {% if site.data.demos.size > 0 %}
  .grid(class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6")
    | {% for demo in site.data.demos %}
    .card.bg-gray-800.rounded-lg.overflow-hidden.shadow-lg.hover-lift
      .p-6
        h3.text-xl.font-bold.mb-2
          a.text-white.hover-text-blue-400(href="{{ demo.url }}") {{ demo.title }}
        p.text-gray-400.mb-4 {{ demo.description }}
        .flex.flex-wrap.gap-2.mb-4
          | {% for tag in demo.tags %}
          span.px-2.py-1.bg-blue-900.text-blue-300.rounded.text-sm {{ tag }}
          | {% endfor %}
        .flex.justify-between.items-center.text-sm.text-gray-500
          span {{ demo.date | date: "%B %d, %Y" }}
          | {% if demo.generator %}
          span.text-purple-400(title="Harness: {{ demo.generator.harness }}{% if demo.generator.orchestration %}, Orchestration: {{ demo.generator.orchestration }}{% endif %}") Built with {{ demo.generator.model }}
          | {% endif %}
        a.mt-4.inline-block.px-4.py-2.bg-blue-600.text-white.rounded.hover-bg-blue-700(href="{{ demo.url }}") View Demo →
    | {% endfor %}
  | {% else %}
  .text-center.py-16
    .text-gray-400.text-6xl.mb-4
      i.fas.fa-cube
    p(class="text-xl text-gray-600") No demos yet.
    p(class="text-gray-500") Check back soon for interactive experiments!
  | {% endif %}