Firts up

app/views/demo/blog-list.php

@@ -0,0 +1,88 @@
+<?php
+$data['title'] = 'Blog List Demo - Framex';
+$data['metaDescription'] = 'A modern blog listing page demo built as a PHP view in Framex.';
+
+$posts = [
+    [
+        'title' => 'Designing fast content systems with plain PHP',
+        'category' => 'Architecture',
+        'date' => 'May 12, 2026',
+        'read' => '7 min read',
+        'description' => 'A practical look at keeping site structure simple while still giving editors polished pages.',
+        'color' => 'bg-pre-blue',
+    ],
+    [
+        'title' => 'Markdown pages that look finished by default',
+        'category' => 'Content',
+        'date' => 'May 8, 2026',
+        'read' => '5 min read',
+        'description' => 'How automatic prose styling lets documentation and articles ship without custom templates.',
+        'color' => 'bg-pre-emerald',
+    ],
+    [
+        'title' => 'A small Tailwind design system for real websites',
+        'category' => 'Design',
+        'date' => 'May 4, 2026',
+        'read' => '6 min read',
+        'description' => 'Reusable sections, cards, buttons, and preset colors keep page building consistent.',
+        'color' => 'bg-pre-amber',
+    ],
+    [
+        'title' => 'Dark mode without making every page complicated',
+        'category' => 'Frontend',
+        'date' => 'April 28, 2026',
+        'read' => '4 min read',
+        'description' => 'Persisted preferences, system fallback, and theme-aware utility classes in one flow.',
+        'color' => 'bg-pre-rose',
+    ],
+];
+?>
+
+<main>
+  <section class="section">
+    <div class="contain">
+      <div class="grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
+        <div>
+          <p class="eyebrow">Blog list demo</p>
+          <h1 class="mt-4 text-4xl font-semibold leading-tight text-slate-950 sm:text-6xl dark:text-white">
+            Editorial cards for a modern content index.
+          </h1>
+        </div>
+        <p class="text-lg leading-8 text-slate-600 dark:text-slate-400">
+          This page is a PHP view. It uses an array of posts, loops through the data, and renders a responsive grid without needing a separate component system.
+        </p>
+      </div>
+
+      <div class="mt-10 flex flex-wrap gap-3">
+        <span class="btn btn-secondary">All posts</span>
+        <span class="btn btn-ghost">Architecture</span>
+        <span class="btn btn-ghost">Content</span>
+        <span class="btn btn-ghost">Design</span>
+      </div>
+
+      <div class="mt-10 grid gap-5 md:grid-cols-2">
+        <?php foreach ($posts as $index => $post): ?>
+          <article class="card overflow-hidden p-0 <?= $index === 0 ? 'md:col-span-2' : '' ?>">
+            <div class="<?= e($post['color']) ?> p-6">
+              <div class="flex flex-wrap items-center gap-3 text-sm">
+                <span class="font-semibold"><?= e($post['category']) ?></span>
+                <span class="opacity-60">/</span>
+                <span class="opacity-80"><?= e($post['date']) ?></span>
+              </div>
+              <h2 class="mt-8 max-w-3xl text-2xl font-semibold leading-tight <?= $index === 0 ? 'sm:text-4xl' : '' ?>">
+                <?= e($post['title']) ?>
+              </h2>
+            </div>
+            <div class="p-6">
+              <p class="text-sm leading-6 text-slate-600 dark:text-slate-400"><?= e($post['description']) ?></p>
+              <div class="mt-6 flex items-center justify-between gap-4">
+                <span class="text-sm text-slate-500 dark:text-slate-400"><?= e($post['read']) ?></span>
+                <a class="btn btn-secondary" href="/demo/blog-post">Read post</a>
+              </div>
+            </div>
+          </article>
+        <?php endforeach; ?>
+      </div>
+    </div>
+  </section>
+</main>