framexEngine-pro/app/views/index.php

<?php
$data['title'] = "Framex Engine — Build Static Sites at Lightspeed";
$data['metaDescription'] = "Framex is a lightweight PHP engine for building blazing-fast static sites. No database, no bloat, just pure performance.";
$data['bodyClass'] = "bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-slate-100";
?>

<main>
  <section class="section relative overflow-hidden">
    <div class="contain grid items-center gap-12 lg:grid-cols-[1.05fr_0.95fr]">
      <div>
        <p class="eyebrow">PHP engine plus Tailwind CSS 4</p>
        <h1 class="mt-5 max-w-4xl text-5xl font-bold text-gradient tracking-tight sm:text-6xl lg:text-7xl dark:text-white/80">
          Build static sites that feel fast before you even optimize them.
        </h1>
        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-400">
          FramexEngine keeps routing, markdown, templates, and assets simple so you can ship lightweight PHP sites with a modern design system already in place.
        </p>
        <div id="start" class="mt-8 flex flex-col gap-3 sm:flex-row">
          <a class="btn btn-primary" href="/docs">Read the docs</a>
          <a class="btn btn-secondary" href="#features">Explore features</a>
        </div>
      </div>

      <div class="card p-0">
        <div class="border-b border-slate-200 px-4 py-3 dark:border-slate-800">
          <div class="flex gap-2">
            <span class="size-3 rounded-full bg-rose-400"></span>
            <span class="size-3 rounded-full bg-amber-400"></span>
            <span class="size-3 rounded-full bg-emerald-400"></span>
          </div>
        </div>
        <div class="space-y-5 p-6">
          <div class="rounded-lg bg-slate-950 p-5 font-mono text-sm leading-7 text-slate-200 dark:bg-black">
            <p><span class="text-emerald-300">&lt;?php</span></p>
            <p><span class="text-blue-300">$data['title']</span> = <span class="text-amber-200">'Framex'</span>;</p>
            <p><span class="text-slate-500">// templates, markdown, Tailwind</span></p>
            <p><span class="text-rose-300">?&gt;</span></p>
          </div>
          <div class="grid gap-3 sm:grid-cols-2">
            <div class="bg-pre-blue rounded-lg p-4">
              <p class="text-sm font-semibold">CSS-first</p>
              <p class="mt-1 text-sm opacity-80">Tailwind v4 build flow.</p>
            </div>
            <div class="bg-pre-emerald rounded-lg p-4">
              <p class="text-sm font-semibold">Markdown</p>
              <p class="mt-1 text-sm opacity-80">Auto styled pages.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="features" class="section border-y border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/40">
    <div class="contain">
      <div class="max-w-2xl">
        <p class="eyebrow">Features</p>
        <h2 class="mt-4 text-3xl font-semibold text-slate-950 sm:text-4xl dark:text-white">A compact foundation for real projects.</h2>
      </div>
      <div class="mt-10 grid gap-5 md:grid-cols-3">
        <article class="card">
          <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Simple routing</h3>
          <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">PHP and markdown views resolve cleanly from the app views directory.</p>
        </article>
        <article class="card">
          <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Reusable UI</h3>
          <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">Sections, buttons, cards, containers, and preset backgrounds are ready to use.</p>
        </article>
        <article class="card">
          <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Dark mode</h3>
          <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">Theme preference follows the system first, then persists your manual choice.</p>
        </article>
      </div>
    </div>
  </section>

  <section id="ideas" class="section">
    <div class="contain">
      <div class="grid gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
        <div>
          <p class="eyebrow">FramexEngine ideas</p>
          <h2 class="mt-4 text-3xl font-semibold text-slate-950 sm:text-4xl dark:text-white">Start small, then grow only where the project needs it.</h2>
          <p class="mt-5 text-base leading-7 text-slate-600 dark:text-slate-400">
            Framex works well for pages that should be easy to edit, fast to ship, and simple to understand from the filesystem.
          </p>
          <div class="mt-8">
            <a class="btn btn-secondary" href="/demo">View demo pages</a>
          </div>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
          <article class="card">
            <div class="bg-pre-blue mb-5 inline-flex rounded-lg px-3 py-2 text-sm font-semibold">01</div>
            <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Documentation hub</h3>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">Use Markdown views for guides, API notes, changelogs, and internal knowledge bases.</p>
          </article>
          <article class="card">
            <div class="bg-pre-emerald mb-5 inline-flex rounded-lg px-3 py-2 text-sm font-semibold">02</div>
            <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Client landing pages</h3>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">Build fast campaign pages with shared templates, reusable cards, and Tailwind utilities.</p>
          </article>
          <article class="card">
            <div class="bg-pre-amber mb-5 inline-flex rounded-lg px-3 py-2 text-sm font-semibold">03</div>
            <h3 class="text-lg font-semibold text-slate-950 dark:text-white">API dashboards</h3>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">Use PHP views for simple data pages, status panels, metrics, and external API summaries.</p>
          </article>
          <article class="card">
            <div class="bg-pre-rose mb-5 inline-flex rounded-lg px-3 py-2 text-sm font-semibold">04</div>
            <h3 class="text-lg font-semibold text-slate-950 dark:text-white">Personal publishing</h3>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">Create a lightweight blog, portfolio, or notes site without adding a database first.</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section id="markdown" class="section">
    <div class="contain grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
      <div>
        <p class="eyebrow">Markdown pages</p>
        <h2 class="mt-4 text-3xl font-semibold text-slate-950 sm:text-4xl dark:text-white">Drop in a `.md` file and get a designed page.</h2>
        <p class="mt-5 text-base leading-7 text-slate-600 dark:text-slate-400">
          Framex already parses markdown views. The refreshed `.prose` layer now styles content, code, images, tables, and blockquotes automatically in both themes.
        </p>
      </div>
      <div class="card">
        <article class="prose">
          <h1>Markdown preview</h1>
          <p>Write normal content and let the design system handle spacing, readable line length, and theme colors.</p>
          <blockquote><p>Markdown pages should look intentional without extra template work.</p></blockquote>
          <pre><code>## Fast content
- Create a view.md file
- Publish clean HTML
- Keep styling automatic</code></pre>
        </article>
      </div>
    </div>
  </section>

  <section id="themes" class="section border-y border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/40">
    <div class="contain">
      <div class="max-w-2xl">
        <p class="eyebrow">Preset colors</p>
        <h2 class="mt-4 text-3xl font-semibold text-slate-950 sm:text-4xl dark:text-white">Four reusable light and dark background helpers.</h2>
      </div>
      <div class="mt-10 grid gap-4 md:grid-cols-4">
        <div class="bg-pre-blue rounded-lg p-5">
          <p class="font-semibold">Blue</p>
          <p class="mt-2 text-sm opacity-80">Primary calls and product highlights.</p>
        </div>
        <div class="bg-pre-emerald rounded-lg p-5">
          <p class="font-semibold">Emerald</p>
          <p class="mt-2 text-sm opacity-80">Success states and fresh sections.</p>
        </div>
        <div class="bg-pre-amber rounded-lg p-5">
          <p class="font-semibold">Amber</p>
          <p class="mt-2 text-sm opacity-80">Notes, warnings, and warm accents.</p>
        </div>
        <div class="bg-pre-rose rounded-lg p-5">
          <p class="font-semibold">Rose</p>
          <p class="mt-2 text-sm opacity-80">Promos and energetic content blocks.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="contain">
      <div class="rounded-lg bg-slate-950 px-6 py-12 text-center text-white shadow-xl shadow-slate-950/20 dark:bg-white dark:text-slate-950">
        <p class="text-sm font-semibold uppercase tracking-widest text-blue-300 dark:text-blue-600">Ready foundation</p>
        <h2 class="mx-auto mt-4 max-w-2xl text-3xl font-semibold sm:text-4xl">Start with structure, styling, and markdown already connected.</h2>
        <div class="mt-8 flex justify-center">
          <a class="btn bg-white text-slate-950 hover:bg-slate-100 dark:bg-slate-950 dark:text-white dark:hover:bg-slate-900" href="/docs">Open documentation</a>
        </div>
      </div>
    </div>
  </section>
</main>