mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-10-25 21:22:57 +00:00
28 lines
2.2 KiB
HTML
28 lines
2.2 KiB
HTML
{{/* Opt-in preview for Blowfish's built-in homepage layouts. */}}
|
|
{{ $layouts := slice "landing" "background" "hero" "profile" "page" "card" }}
|
|
<section data-layout-switcher>
|
|
<div class="mb-8 rounded-3xl border border-primary-200 bg-primary-50/70 p-5 shadow-sm dark:border-primary-900/70 dark:bg-primary-950/30 sm:p-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p class="text-sm font-bold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-400">Theme playground</p>
|
|
<h2 class="mt-1 text-2xl font-black tracking-tight text-neutral-950 dark:text-white">Try a homepage layout</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-300">Same content, six built-in Blowfish layouts. Pick one to preview it in place.</p>
|
|
</div>
|
|
<a class="text-sm font-bold text-primary-600 underline decoration-primary-300 underline-offset-4 hover:text-primary-500 dark:text-primary-400" href="{{ `docs/homepage-layout/` | relLangURL }}">Layout documentation</a>
|
|
</div>
|
|
<div class="mt-5 flex flex-wrap gap-2" role="tablist" aria-label="Homepage layouts">
|
|
{{ range $index, $layout := $layouts }}
|
|
<button type="button" class="rounded-full border border-neutral-300 bg-white px-4 py-2 text-sm font-bold text-neutral-700 shadow-sm transition hover:border-primary-400 hover:text-primary-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:text-primary-400 {{ if eq $index 0 }}border-primary-600 bg-primary-600 text-white hover:bg-primary-500 hover:text-white dark:border-primary-500 dark:bg-primary-500{{ end }}" data-layout-switcher-button="{{ $layout }}" role="tab" aria-selected="{{ cond (eq $index 0) `true` `false` }}">{{ $layout | title }}</button>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-3xl border border-neutral-200 bg-neutral/40 p-4 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/30 sm:p-8">
|
|
{{ range $index, $layout := $layouts }}
|
|
<div data-layout-switcher-panel="{{ $layout }}" role="tabpanel"{{ if ne $index 0 }} hidden{{ end }}>
|
|
{{ partial (printf "home/%s.html" $layout) $ }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|