You've already forked framexEngine-pro
87 lines
3.7 KiB
PHP
87 lines
3.7 KiB
PHP
|
<?php
|
||
|
|
$data['title'] = 'Framex Demo Pages';
|
||
|
|
$data['metaDescription'] = 'Explore modern demo pages built with Framex PHP views, Markdown views, Tailwind CSS, and reusable UI classes.';
|
||
|
|
$data['bodyClass'] = 'bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-slate-100';
|
||
|
|
|
||
|
|
$demoPages = [
|
||
|
|
[
|
||
|
|
'title' => 'Blog List',
|
||
|
|
'description' => 'A polished editorial index with featured content, filters, and responsive cards.',
|
||
|
|
'href' => '/demo/blog-list',
|
||
|
|
'label' => 'PHP view',
|
||
|
|
'color' => 'bg-pre-blue',
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'title' => 'Blog Post',
|
||
|
|
'description' => 'A long-form article layout with author metadata, hero content, and related cards.',
|
||
|
|
'href' => '/demo/blog-post',
|
||
|
|
'label' => 'PHP view',
|
||
|
|
'color' => 'bg-pre-emerald',
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'title' => 'Markdown Page',
|
||
|
|
'description' => 'A content page rendered from Markdown and automatically styled by `.prose`.',
|
||
|
|
'href' => '/demo/page',
|
||
|
|
'label' => 'MD view',
|
||
|
|
'color' => 'bg-pre-amber',
|
||
|
|
],
|
||
|
|
];
|
||
|
|
?>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<section class="section">
|
||
|
|
<div class="contain">
|
||
|
|
<div class="max-w-3xl">
|
||
|
|
<p class="eyebrow">Demo library</p>
|
||
|
|
<h1 class="mt-4 text-4xl font-bold text-gradient sm:text-6xl dark:text-white">
|
||
|
|
Modern pages built with the Framex view system.
|
||
|
|
</h1>
|
||
|
|
<p class="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-400">
|
||
|
|
These demos show how PHP views and Markdown views can share the same template, navigation, footer, light/dark mode, and reusable Tailwind classes.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-12 grid gap-5 md:grid-cols-3">
|
||
|
|
<?php foreach ($demoPages as $page): ?>
|
||
|
|
<a class="card group flex min-h-72 flex-col justify-between overflow-hidden p-0" href="<?= e($page['href']) ?>">
|
||
|
|
<div class="<?= e($page['color']) ?> p-6">
|
||
|
|
<span class="inline-flex rounded-md bg-white/70 px-3 py-1 text-xs font-semibold text-slate-700 ring-1 ring-black/5 dark:bg-black/20 dark:text-white dark:ring-white/10">
|
||
|
|
<?= e($page['label']) ?>
|
||
|
|
</span>
|
||
|
|
<h2 class="mt-8 text-2xl font-bold text-current"><?= e($page['title']) ?></h2>
|
||
|
|
</div>
|
||
|
|
<div class="p-6">
|
||
|
|
<p class="text-sm leading-6 text-slate-600 dark:text-slate-400"><?= e($page['description']) ?></p>
|
||
|
|
<div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:text-blue-500 dark:text-blue-400">
|
||
|
|
Open demo
|
||
|
|
<span aria-hidden="true">-></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="section-tight border-y border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/40">
|
||
|
|
<div class="contain grid gap-5 md:grid-cols-4">
|
||
|
|
<div class="card">
|
||
|
|
<p class="text-3xl font-semibold text-slate-950 dark:text-white">4</p>
|
||
|
|
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Demo routes</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<p class="text-3xl font-semibold text-slate-950 dark:text-white">2</p>
|
||
|
|
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">View types</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<p class="text-3xl font-semibold text-slate-950 dark:text-white">4</p>
|
||
|
|
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Preset colors</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<p class="text-3xl font-semibold text-slate-950 dark:text-white">1</p>
|
||
|
|
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Shared layout</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|