create-snapify-app 0.0.0-stage → 1.1.1

package/template/themes/preveris/src/Footer.tsx

@@ -0,0 +1,202 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useState } from 'react';
+import { ArrowRight, ArrowUp, ArrowUpRight, Mail, MapPin, Phone } from 'lucide-react';
+import type { ThemeChromeProps } from '@snapify/sdk/theme';
+import { useSnapify } from '@snapify/sdk/theme';
+import { followLink, IS_PREVIEW, useMenus, useOptions } from './site';
+import { Brand } from './Brand';
+import { cx } from './kit';
+
+const LEGAL = ['/mentions-legales/', '/politique-de-confidentialite/', '/cookies/'];
+
+function Newsletter() {
+  const [email, setEmail] = useState('');
+  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
+  const [busy, setBusy] = useState(false);
+  return (
+    <form
+      className="w-full max-w-md"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        if (IS_PREVIEW || busy) return;
+        setBusy(true);
+        setMsg(null);
+        const r = await fetch('/api/public/newsletter/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }).catch(() => null);
+        const j = await r?.json().catch(() => ({}));
+        setBusy(false);
+        if (r?.ok) {
+          setEmail('');
+          setMsg({ ok: true, text: j?.pending ? 'Vérifiez votre boîte mail pour confirmer votre inscription.' : 'Inscription enregistrée, merci !' });
+        } else setMsg({ ok: false, text: j?.error || 'Inscription impossible pour le moment.' });
+      }}
+    >
+      <label htmlFor="pv-news" className="mb-3 block text-[11px] font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55">
+        Lettre d’information
+      </label>
+      <div className="flex items-center gap-2 border-b border-white/25 pb-2 focus-within:border-white">
+        <input
+          id="pv-news"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Votre adresse e-mail"
+          className="min-w-0 flex-1 bg-transparent py-2 text-base text-white placeholder:text-white/40 focus:outline-none"
+        />
+        <button type="submit" disabled={busy} className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-(--pv-accent) text-(--pv-on-accent) transition-transform hover:scale-105 disabled:opacity-60" aria-label="S’inscrire">
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+      {msg ? <p className={cx('mt-2 text-xs', msg.ok ? 'text-[#f5f0e8]/75' : 'text-rose-300')}>{msg.text}</p> : null}
+    </form>
+  );
+}
+
+export function Footer({ navigate, openCookies }: ThemeChromeProps) {
+  const { info, site } = useSnapify();
+  const o = useOptions();
+  const { primary, footer, cta } = useMenus();
+  const go = (path: string, newTab?: boolean) => followLink(path, navigate, newTab);
+
+  const menuById = (id: string) => site.menus?.find((m) => m.id === id)?.items || [];
+  const colMenus = [
+    { id: 'footer-col-1', title: site.menus?.find((m) => m.id === 'footer-col-1')?.label || 'Navigation', links: menuById('footer-col-1') },
+    { id: 'footer-col-2', title: site.menus?.find((m) => m.id === 'footer-col-2')?.label || 'Explorer', links: menuById('footer-col-2') },
+  ].filter((c) => c.links.length);
+  const groups = colMenus.length ? [] : primary.filter((i) => i.children?.length).slice(0, 2);
+  const pages = colMenus.length
+    ? []
+    : [...primary.filter((i) => !i.children?.length && !i.highlight), ...footer.filter((i) => !LEGAL.includes(i.path) && !primary.some((p) => p.path === i.path))];
+  const legal = footer.filter((i) => LEGAL.includes(i.path));
+  const legalLinks = legal.length
+    ? legal
+    : [
+        { id: 'ml', label: 'Mentions légales', path: '/mentions-legales/' },
+        { id: 'pc', label: 'Politique de confidentialité', path: '/politique-de-confidentialite/' },
+      ];
+  const name = (site.branding.siteName || info.name).replace(/®$/, '');
+
+  return (
+    <footer className="pv-dark relative overflow-hidden bg-(--pv-ink) pb-24 text-(--pv-fg) lg:pb-0">
+      <div className="mx-auto max-w-7xl px-5 sm:px-8">
+        <div className="flex flex-col gap-10 border-b border-white/10 py-16 lg:flex-row lg:items-end lg:justify-between lg:py-20">
+          <div className="max-w-2xl space-y-6">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-(--pv-accent-text)">{info.baseline || 'Parlons de votre projet'}</div>
+            <p className="pv-display text-4xl sm:text-5xl lg:text-6xl">{info.slogan || name}</p>
+            <button type="button" onClick={() => go(cta.path)} className="pv-btn pv-btn-primary pv-btn-lg">
+              {cta.label}
+              <ArrowRight className="pv-btn-arrow h-4 w-4" />
+            </button>
+          </div>
+          {site.newsletterEnabled ? <Newsletter /> : null}
+        </div>
+
+        <div className="grid grid-cols-1 gap-12 py-14 sm:grid-cols-2 lg:grid-cols-12 lg:gap-8">
+          <div className="space-y-6 lg:col-span-4">
+            <Brand dark onClick={() => go('/')} />
+            <ul className="space-y-3 text-sm text-(--pv-fg-2)">
+              <li>
+                <a href={`tel:${info.phoneClean}`} className="inline-flex items-center gap-3 transition-colors hover:text-white">
+                  <Phone className="h-4 w-4 text-(--pv-accent-text)" />
+                  {info.phone}
+                </a>
+              </li>
+              <li>
+                <a href={`mailto:${info.contactEmail}`} className="inline-flex items-center gap-3 transition-colors hover:text-white">
+                  <Mail className="h-4 w-4 text-(--pv-accent-text)" />
+                  {info.contactEmail}
+                </a>
+              </li>
+              {info.address ? (
+                <li className="flex items-start gap-3">
+                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-(--pv-accent-text)" />
+                  {info.address}
+                </li>
+              ) : null}
+            </ul>
+          </div>
+
+          {colMenus.map((g) => (
+            <div key={g.id} className="space-y-5 lg:col-span-3">
+              <div className="text-[11px] leading-5 font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55">{g.title}</div>
+              <ul className="space-y-3">
+                {g.links.map((c) => (
+                  <li key={c.id}>
+                    <button type="button" onClick={() => go(c.path, c.openInNewTab)} className="text-left text-sm text-(--pv-fg-2) transition-colors hover:text-white">
+                      {c.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+
+          {groups.map((g) => (
+            <div key={g.id} className="space-y-5 lg:col-span-3">
+              <button type="button" onClick={() => go(g.path)} className="block text-[11px] leading-5 font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55 transition-colors hover:text-white">
+                {g.label}
+              </button>
+              <ul className="space-y-3">
+                {g.children!.map((c) => (
+                  <li key={c.id}>
+                    <button type="button" onClick={() => go(c.path, c.openInNewTab)} className="text-left text-sm text-(--pv-fg-2) transition-colors hover:text-white">
+                      {c.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+
+          {pages.length ? (
+            <div className={cx('space-y-5', groups.length >= 2 ? 'lg:col-span-2' : 'lg:col-span-3')}>
+              <div className="text-[11px] leading-5 font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55">Navigation</div>
+              <ul className="space-y-3">
+                {pages.map((p) => (
+                  <li key={p.id}>
+                    <button type="button" onClick={() => go(p.path, p.openInNewTab)} className={cx('group inline-flex items-center gap-1 text-left text-sm transition-colors hover:text-white', p.highlight ? 'text-(--pv-accent-text)' : 'text-(--pv-fg-2)')}>
+                      {p.label}
+                      {p.highlight ? <ArrowUpRight className="h-3.5 w-3.5" /> : null}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {o.footerWordmark ? (
+        <div className="pointer-events-none -mb-[0.12em] overflow-hidden text-center" aria-hidden="true">
+          <div className="pv-wordmark">{name}</div>
+        </div>
+      ) : null}
+
+      <div className="relative border-t border-white/10">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-5 py-6 text-xs text-(--pv-fg-2) sm:px-8 lg:flex-row">
+          <span>
+            © {new Date().getFullYear()} {info.legalName || name}. Tous droits réservés.
+          </span>
+          <div className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
+            {legalLinks.map((l) => (
+              <button key={l.id} type="button" onClick={() => go(l.path)} className="transition-colors hover:text-white">
+                {l.label}
+              </button>
+            ))}
+            <button type="button" onClick={openCookies} className="transition-colors hover:text-white">
+              Gérer mes cookies
+            </button>
+            <button type="button" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="ml-2 flex h-9 w-9 items-center justify-center rounded-full border border-white/15 text-white transition-colors hover:bg-white hover:text-(--pv-ink)" aria-label="Revenir en haut">
+              <ArrowUp className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/template/themes/preveris/src/Header.tsx

@@ -0,0 +1,239 @@
+/**
+ * Snapify
+ * © 2026 Hamdi Ayari — hamdi.ayari@novalabs.tn
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useEffect, useState } from 'react';
+import { ArrowRight, ArrowUpRight, ChevronDown, Mail, Minus, Phone, Plus, X } from 'lucide-react';
+import type { ThemeChromeProps } from '@snapify/sdk/theme';
+import { useSnapify } from '@snapify/sdk/theme';
+import { followLink, useMenus, useOptions, type MenuItemDto } from './site';
+import { Brand } from './Brand';
+import { cx } from './kit';
+
+export function Header({ path, navigate }: ThemeChromeProps) {
+  const { info, site } = useSnapify();
+  const o = useOptions();
+  const { primary, mobile, cta } = useMenus();
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState<string | null>(null);
+  const [drawer, setDrawer] = useState(false);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const floating = (site.floatingButtons ?? []).filter((b) => b.enabled && b.label).slice(0, 2);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 24);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  useEffect(() => {
+    setDrawer(false);
+    setOpen(null);
+  }, [path]);
+
+  useEffect(() => {
+    document.body.style.overflow = drawer ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [drawer]);
+
+  const go = (item: Pick<MenuItemDto, 'path' | 'openInNewTab'>) => {
+    setDrawer(false);
+    setOpen(null);
+    followLink(item.path, navigate, item.openInNewTab);
+  };
+  const isActive = (p: string) => (p === '/' ? path === '/' : path.startsWith(p.replace(/\/$/, '')));
+  const nav = primary.filter((i) => !i.highlight);
+
+  return (
+    <>
+      {o.topBar ? (
+        <div className="hidden bg-(--pv-ink) text-[#f7f5f2]/70 lg:block">
+          <div className="mx-auto flex h-10 max-w-7xl items-center justify-between px-8 text-xs">
+            <span className="tracking-wide">{info.slogan || info.baseline}</span>
+            <div className="flex items-center gap-6">
+              <a href={`tel:${info.phoneClean}`} className="inline-flex items-center gap-2 transition-colors hover:text-white">
+                <Phone className="h-3.5 w-3.5" />
+                {info.phone}
+              </a>
+              <a href={`mailto:${info.contactEmail}`} className="inline-flex items-center gap-2 transition-colors hover:text-white">
+                <Mail className="h-3.5 w-3.5" />
+                {info.contactEmail}
+              </a>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <header
+        className={cx(
+          'top-0 z-50 border-b transition-[background-color,border-color,box-shadow] duration-300',
+          o.stickyHeader ? 'sticky' : 'relative',
+          scrolled ? 'border-(--pv-line)/80 bg-(--pv-paper)/75 shadow-[0_16px_40px_-24px_rgba(11,18,32,0.35)] backdrop-blur-2xl' : 'border-transparent bg-(--pv-paper)/90 backdrop-blur-md'
+        )}
+      >
+        <div className="mx-auto flex h-20 max-w-7xl items-center justify-between gap-6 px-5 sm:px-8">
+          <Brand onClick={() => go({ path: '/' })} />
+
+          <nav className="hidden items-center gap-1 lg:flex" aria-label="Navigation principale">
+            {nav.map((item) =>
+              item.children?.length ? (
+                <div key={item.id} className="relative" onMouseEnter={() => setOpen(item.id)} onMouseLeave={() => setOpen(null)}>
+                  <button
+                    type="button"
+                    onClick={() => go(item)}
+                    aria-expanded={open === item.id}
+                    className={cx('flex items-center gap-1.5 rounded-full px-4 py-2 text-[0.9rem] font-medium transition-colors', isActive(item.path) ? 'text-(--pv-ink)' : 'text-(--pv-muted) hover:text-(--pv-ink)')}
+                  >
+                    {item.label}
+                    <ChevronDown className={cx('h-3.5 w-3.5 transition-transform duration-300', open === item.id && 'rotate-180')} />
+                  </button>
+                  {isActive(item.path) ? <span className="absolute inset-x-4 -bottom-[1.55rem] h-0.5 bg-(--pv-accent)" /> : null}
+                  <div className={cx('absolute left-1/2 top-full z-50 w-[38rem] -translate-x-1/2 pt-4 transition-all duration-300', open === item.id ? 'visible translate-y-0 opacity-100' : 'invisible translate-y-2 opacity-0')}>
+                    <div className="grid grid-cols-[13rem_1fr] overflow-hidden rounded-(--pv-r-lg) border border-(--pv-line) bg-(--pv-card) shadow-[0_40px_80px_-40px_rgba(0,0,0,0.35)]">
+                      <div className="pv-dark flex flex-col justify-between bg-(--pv-ink) p-6 text-(--pv-fg)">
+                        <div className="pv-display text-3xl">{item.label}</div>
+                        <button type="button" onClick={() => go(item)} className="pv-link mt-8 self-start">
+                          Tout voir
+                          <ArrowRight className="pv-btn-arrow h-4 w-4" />
+                        </button>
+                      </div>
+                      <div className="grid grid-cols-1 gap-1 p-3">
+                        {item.children.map((child) => (
+                          <button
+                            key={child.id}
+                            type="button"
+                            onClick={() => go(child)}
+                            className="group flex items-center justify-between rounded-(--pv-r) px-4 py-3 text-left text-sm font-medium text-(--pv-ink) transition-colors hover:bg-(--pv-paper)"
+                          >
+                            {child.label}
+                            <ArrowUpRight className="h-4 w-4 text-(--pv-muted) opacity-0 transition-all group-hover:translate-x-0.5 group-hover:text-(--pv-accent) group-hover:opacity-100" />
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => go(item)}
+                  className={cx('relative rounded-full px-4 py-2 text-[0.9rem] font-medium transition-colors', isActive(item.path) ? 'text-(--pv-ink)' : 'text-(--pv-muted) hover:text-(--pv-ink)')}
+                >
+                  {item.label}
+                  {isActive(item.path) ? <span className="absolute inset-x-4 -bottom-[1.55rem] h-0.5 bg-(--pv-accent)" /> : null}
+                </button>
+              )
+            )}
+          </nav>
+
+          <div className="hidden items-center gap-5 lg:flex">
+            {o.headerPhone ? (
+              <a href={`tel:${info.phoneClean}`} className="hidden items-center gap-2 text-sm font-semibold text-(--pv-ink) transition-colors hover:text-(--pv-accent) xl:inline-flex">
+                <span className="flex h-9 w-9 items-center justify-center rounded-full border border-(--pv-line)">
+                  <Phone className="h-4 w-4" />
+                </span>
+                {info.phone}
+              </a>
+            ) : null}
+            <button type="button" onClick={() => go(cta)} className="pv-btn pv-btn-primary pv-light">
+              {cta.label}
+              <ArrowRight className="pv-btn-arrow h-4 w-4" />
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => setDrawer(true)}
+            className="flex h-11 items-center gap-3 rounded-full border border-(--pv-line) pl-4 pr-1.5 text-sm font-semibold text-(--pv-ink) lg:hidden"
+            aria-label="Ouvrir le menu"
+          >
+            Menu
+            <span className="flex h-8 w-8 flex-col items-center justify-center gap-1 rounded-full bg-(--pv-ink)">
+              <span className="h-px w-3.5 bg-white" />
+              <span className="h-px w-3.5 bg-white" />
+            </span>
+          </button>
+        </div>
+      </header>
+
+      {/* Menu mobile plein écran */}
+      <div className={cx('pv-dark fixed inset-0 z-[60] flex flex-col bg-(--pv-ink) text-(--pv-fg) transition-[opacity,visibility] duration-300 lg:hidden', drawer ? 'visible opacity-100' : 'invisible opacity-0')}>
+        <div className="flex h-20 shrink-0 items-center justify-between px-5 sm:px-8">
+          <Brand dark onClick={() => go({ path: '/' })} />
+          <button type="button" onClick={() => setDrawer(false)} className="flex h-11 w-11 items-center justify-center rounded-full border border-white/20" aria-label="Fermer le menu">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <nav className="flex-1 overflow-y-auto px-5 pb-8 pt-4 sm:px-8">
+          {mobile.map((item, i) => (
+            <div key={item.id} className="border-b border-white/10" style={{ transitionDelay: `${i * 40}ms` }}>
+              <div className="flex items-center justify-between">
+                <button type="button" onClick={() => go(item)} className={cx('pv-display py-4 text-left text-[2.1rem] leading-tight', item.highlight && 'text-(--pv-accent-text)')}>
+                  {item.label}
+                </button>
+                {item.children?.length ? (
+                  <button type="button" onClick={() => setExpanded(expanded === item.id ? null : item.id)} className="flex h-10 w-10 items-center justify-center rounded-full border border-white/15" aria-label={`Sous-menu ${item.label}`}>
+                    {expanded === item.id ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+                  </button>
+                ) : null}
+              </div>
+              {item.children?.length && expanded === item.id ? (
+                <div className="space-y-1 pb-4">
+                  {item.children.map((child) => (
+                    <button key={child.id} type="button" onClick={() => go(child)} className="flex w-full items-center justify-between py-2 text-left text-sm text-(--pv-fg-2)">
+                      {child.label}
+                      <ArrowUpRight className="h-4 w-4" />
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </nav>
+        <div className="shrink-0 space-y-3 border-t border-white/10 px-5 py-6 sm:px-8">
+          <a href={`tel:${info.phoneClean}`} className="pv-btn pv-btn-outline w-full">
+            <Phone className="h-4 w-4" />
+            {info.phone}
+          </a>
+          <button type="button" onClick={() => go(cta)} className="pv-btn pv-btn-primary w-full">
+            {cta.label}
+            <ArrowRight className="pv-btn-arrow h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {o.mobileBar ? (
+        <div className="fixed inset-x-0 bottom-0 z-40 flex items-center gap-2 border-t border-(--pv-line) bg-(--pv-paper)/95 px-4 py-3 backdrop-blur-lg lg:hidden">
+          {floating.length ? (
+            floating.map((b) => (
+              <button
+                key={b.id}
+                type="button"
+                onClick={() => go({ path: b.path })}
+                className={cx('pv-btn flex-1 py-2.5! text-xs', b.style === 'primary' ? 'pv-btn-primary' : b.style === 'outline' ? 'pv-btn-outline' : 'bg-(--pv-paper-2) text-(--pv-ink)')}
+              >
+                {b.label}
+              </button>
+            ))
+          ) : (
+            <>
+              <a href={`tel:${info.phoneClean}`} className="pv-btn pv-btn-outline flex-1 py-2.5! text-xs">
+                <Phone className="h-3.5 w-3.5" />
+                Appeler
+              </a>
+              <button type="button" onClick={() => go(cta)} className="pv-btn pv-btn-primary flex-1 py-2.5! text-xs">
+                {cta.label}
+              </button>
+            </>
+          )}
+        </div>
+      ) : null}
+    </>
+  );
+}

package/template/themes/preveris/src/Layout.tsx

@@ -0,0 +1,42 @@
+/**
+ * Snapify — thème Preveris
+ * © 2026 Hamdi Ayari — hamdi.ayari@novalabs.tn
+ */
+import React, { useEffect } from 'react';
+import { useOptions } from './site';
+
+const FONTS_URL =
+  'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  const o = useOptions();
+
+  useEffect(() => {
+    if (document.getElementById('pv-fonts')) return;
+    const link = document.createElement('link');
+    link.id = 'pv-fonts';
+    link.rel = 'stylesheet';
+    link.href = FONTS_URL;
+    document.head.appendChild(link);
+    return () => link.remove();
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.add('pv-html');
+    Object.assign(root.dataset, {
+      pvPalette: o.palette || 'brand',
+      pvAccent: o.accent || 'brand',
+      pvType: o.typography || 'modern',
+      pvCorners: o.corners || 'round',
+      pvMotion: o.animations !== false ? 'on' : 'off',
+      pvGlass: o.glass !== false ? 'on' : 'off',
+    });
+    return () => {
+      root.classList.remove('pv-html');
+      for (const k of ['pvPalette', 'pvAccent', 'pvType', 'pvCorners', 'pvMotion', 'pvGlass']) delete root.dataset[k];
+    };
+  }, [o.palette, o.accent, o.typography, o.corners, o.animations, o.glass]);
+
+  return <div className="pv-root">{children}</div>;
+}

package/template/themes/preveris/src/Views.tsx

@@ -0,0 +1,71 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import type { BlogPost } from '@snapify/sdk/content';
+import { useSnapify } from '@snapify/sdk/theme';
+import { followLink, useMenus } from './site';
+import { Eyebrow, Frame } from './kit';
+
+export function Post({ post, children }: { post: BlogPost; children: React.ReactNode }) {
+  const { info } = useSnapify();
+  const date = post.publishedAt ? new Date(post.publishedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : null;
+  return (
+    <article>
+      <header className="mx-auto max-w-4xl px-5 pb-12 pt-16 text-center sm:px-8 sm:pt-24">
+        <Eyebrow className="justify-center">Journal · {info.name}</Eyebrow>
+        <h1 className="pv-display mt-6 text-5xl sm:text-6xl lg:text-7xl">{post.title}</h1>
+        {post.excerpt ? <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-(--pv-fg-2)">{post.excerpt}</p> : null}
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs uppercase tracking-[0.16em] text-(--pv-fg-2)">
+          {date ? <span>{date}</span> : null}
+          {post.author ? <span>· {post.author}</span> : null}
+          {post.tags.map((tag) => (
+            <span key={tag} className="rounded-full border border-(--pv-rule) px-2.5 py-1 normal-case tracking-normal">
+              {tag}
+            </span>
+          ))}
+        </div>
+      </header>
+      {post.coverImage ? (
+        <div className="mx-auto mb-6 max-w-6xl px-5 sm:px-8">
+          <Frame className="aspect-[21/9]">
+            <img src={post.coverImage} alt="" className="h-full w-full object-cover" />
+          </Frame>
+        </div>
+      ) : null}
+      {children}
+    </article>
+  );
+}
+
+export function NotFound({ navigate }: { navigate: (path: string) => void }) {
+  const { cta } = useMenus();
+  return (
+    <section className="relative overflow-hidden">
+      <div className="pv-decor pv-rings -bottom-[34rem] left-1/2 h-[64rem] w-[64rem] -translate-x-1/2 opacity-70" />
+      <div className="relative mx-auto flex min-h-[70vh] max-w-3xl flex-col items-center justify-center px-5 py-24 text-center">
+        <div className="pv-arch flex h-56 w-44 items-center justify-center bg-(--pv-ink) text-[#f5f0e8]">
+          <span className="pv-display text-7xl">404</span>
+        </div>
+        <h1 className="pv-display mt-10 text-5xl sm:text-6xl">
+          Cette page s’est <em className="pv-em">égarée</em>.
+        </h1>
+        <p className="mt-5 max-w-md text-lg text-(--pv-fg-2)">L’adresse demandée n’existe pas ou a été déplacée. Reprenons depuis l’entrée principale.</p>
+        <div className="mt-10 flex flex-wrap justify-center gap-3">
+          <button type="button" onClick={() => followLink('/', navigate)} className="pv-btn pv-btn-outline">
+            <ArrowLeft className="h-4 w-4" />
+            Retour à l’accueil
+          </button>
+          <button type="button" onClick={() => followLink(cta.path, navigate)} className="pv-btn pv-btn-primary">
+            {cta.label}
+            <ArrowRight className="pv-btn-arrow h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}