create-snapify-app 0.0.0-stage → 1.1.0

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

@@ -0,0 +1,210 @@
+/**
+ * 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 { ArrowUp, Banknote, Headphones, Landmark, Mail, MapPin, Phone, RotateCcw, ShieldCheck, Truck } from 'lucide-react';
+import { isModuleActive, useSnapify, type ThemeChromeProps } from '@snapify/sdk/theme';
+import { followLink, IS_PREVIEW, parseReassurance, shopActive, useMenus, useOptions } from './site';
+import { Brand } from './Brand';
+import { cx } from './kit';
+
+const LEGAL = ['/mentions-legales/', '/politique-de-confidentialite/', '/cookies/'];
+const REASSURANCE_ICONS = [Truck, Banknote, RotateCcw, Headphones];
+
+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"
+      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.' });
+      }}
+    >
+      <p className="mh-display text-2xl text-(--mh-on-dark)">Restez informé</p>
+      <p className="mt-2 text-sm text-(--mh-fg-2)">Nouveautés, ventes privées et codes promo : lorem ipsum dolor sit amet.</p>
+      <div className="mt-5 flex items-center gap-2 rounded-(--mh-r-btn) bg-white/8 p-1.5 ring-1 ring-white/15 focus-within:ring-white/40">
+        <label htmlFor="mh-news" className="sr-only">
+          Adresse e-mail
+        </label>
+        <input id="mh-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 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:outline-none" />
+        <button type="submit" disabled={busy} className="mh-btn mh-btn-accent shrink-0 px-4! py-2.5! text-xs disabled:opacity-60">
+          S’inscrire
+        </button>
+      </div>
+      {msg ? <p className={cx('mt-2 text-xs', msg.ok ? 'text-(--mh-on-dark)/75' : 'text-rose-300')}>{msg.text}</p> : null}
+    </form>
+  );
+}
+
+function Reassurance({ items }: { items: { title: string; text: string }[] }) {
+  if (!items.length) return null;
+  return (
+    <section className="border-t border-(--mh-line) bg-(--mh-card)">
+      <div className={cx('mx-auto grid max-w-7xl gap-6 px-5 py-10 sm:grid-cols-2 sm:px-8', items.length >= 4 ? 'lg:grid-cols-4' : items.length === 3 ? 'lg:grid-cols-3' : '')}>
+        {items.map((it, i) => {
+          const Icon = REASSURANCE_ICONS[i % REASSURANCE_ICONS.length];
+          return (
+            <div key={i} className="flex items-start gap-4">
+              <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-[16px_5px_16px_5px] bg-(--mh-paper-2) text-(--mh-accent-text)">
+                <Icon className="h-5 w-5" strokeWidth={1.8} />
+              </span>
+              <div>
+                <p className="text-sm font-bold text-(--mh-ink)">{it.title}</p>
+                {it.text ? <p className="mt-0.5 text-[13px] leading-relaxed text-(--mh-muted)">{it.text}</p> : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+export function Footer({ navigate, openCookies }: ThemeChromeProps) {
+  const { info, site } = useSnapify();
+  const o = useOptions();
+  const { primary, footer } = useMenus();
+  const go = (path: string, newTab?: boolean) => followLink(path, navigate, newTab);
+  const shop = shopActive();
+
+  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') },
+    { id: 'footer-col-3', title: site.menus?.find((m) => m.id === 'footer-col-3')?.label || 'Infos', links: menuById('footer-col-3') },
+  ].filter((c) => c.links.length);
+  const groups = primary.filter((i) => i.children?.length).slice(0, 2);
+  const pages = [...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 shopLinks = shop
+    ? [
+        { id: 's-all', label: 'Tous les produits', path: '/boutique/' },
+        { id: 's-sale', label: 'Promotions', path: '/boutique/?promo=1' },
+        ...(isModuleActive('novalabs.customers') ? [{ id: 's-account', label: 'Mon compte', path: '/compte/' }] : []),
+        ...(isModuleActive('novalabs.checkout') ? [{ id: 's-track', label: 'Suivre ma commande', path: '/commande/suivi/' }] : []),
+      ]
+    : [];
+  const name = (site.branding.siteName || info.name).replace(/®$/, '');
+  const columns = (
+    colMenus.length
+      ? colMenus
+      : [
+          ...(shopLinks.length ? [{ id: 'shop', title: 'Boutique', links: shopLinks }] : []),
+          ...groups.map((g) => ({ id: g.id, title: g.label, links: g.children! })),
+          ...(pages.length ? [{ id: 'nav', title: 'Informations', links: pages }] : []),
+        ]
+  ).slice(0, 3);
+
+  return (
+    <>
+      {o.reassurance ? <Reassurance items={parseReassurance(o.reassuranceItems)} /> : null}
+      <footer className="mh-dark relative bg-(--mh-ink) pb-24 text-(--mh-fg) lg:pb-0">
+        <div className="mx-auto max-w-7xl px-5 sm:px-8">
+          <div className="grid grid-cols-1 gap-12 py-16 sm:grid-cols-2 lg:grid-cols-12 lg:gap-10">
+            <div className="space-y-6 lg:col-span-4">
+              <Brand dark onClick={() => go('/')} />
+              {info.slogan ? <p className="max-w-sm text-sm leading-relaxed text-(--mh-fg-2)">{info.slogan}</p> : null}
+              <ul className="space-y-3 text-sm text-(--mh-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-(--mh-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-(--mh-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-(--mh-accent-text)" />
+                    {info.address}
+                  </li>
+                ) : null}
+              </ul>
+            </div>
+
+            {columns.map((c) => (
+              <div key={c.id} className="space-y-5 lg:col-span-2">
+                <p className="text-[12px] font-bold uppercase tracking-[0.16em] text-(--mh-on-dark)/55">{c.title}</p>
+                <ul className="space-y-3">
+                  {c.links.map((l) => (
+                    <li key={l.id}>
+                      <button type="button" onClick={() => go(l.path, 'openInNewTab' in l ? !!l.openInNewTab : undefined)} className="text-left text-sm text-(--mh-fg-2) transition-colors hover:text-white">
+                        {l.label}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+
+            {site.newsletterEnabled ? (
+              <div className={cx('sm:col-span-2', columns.length >= 3 ? 'lg:col-span-12 lg:max-w-md' : 'lg:col-span-4')}>
+                <Newsletter />
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="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-(--mh-fg-2) sm:px-8 lg:flex-row">
+            <span>
+              © {new Date().getFullYear()} {info.legalName || name}. Tous droits réservés.
+            </span>
+            {o.paymentBadges && shop ? (
+              <div className="flex flex-wrap items-center justify-center gap-2">
+                {[
+                  { icon: Banknote, label: 'Paiement à la livraison' },
+                  { icon: Landmark, label: 'Virement bancaire' },
+                  { icon: ShieldCheck, label: 'Commande sécurisée' },
+                ].map(({ icon: Icon, label }) => (
+                  <span key={label} className="inline-flex items-center gap-1.5 rounded-full border border-white/15 px-3 py-1.5 text-[11px] font-medium text-(--mh-on-dark)/80">
+                    <Icon className="h-3.5 w-3.5" />
+                    {label}
+                  </span>
+                ))}
+              </div>
+            ) : null}
+            <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="flex h-9 w-9 items-center justify-center rounded-full border border-white/15 text-white transition-colors hover:bg-white hover:text-(--mh-ink)" aria-label="Revenir en haut">
+                <ArrowUp className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+}

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

@@ -0,0 +1,291 @@
+/**
+ * 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, { useEffect, useRef, useState } from 'react';
+import { ArrowRight, ChevronDown, Heart, Home, Menu, Minus, Phone, Plus, Search, ShoppingBag, Store, UserRound, X } from 'lucide-react';
+import { hasModuleSlot, isModuleActive, ModuleSlot, useSnapify, type ThemeChromeProps } from '@snapify/sdk/theme';
+import { cart, useCart, useWishlist } from '@snapify/sdk/commerce';
+import { followLink, shopActive, useMenus, useOptions, type MenuItemDto } from './site';
+import { Brand } from './Brand';
+import { cx } from './kit';
+
+const SHOP_PATH = '/boutique/';
+
+function SearchBox({ navigate, autoFocus, onDone, className }: { navigate: (p: string) => void; autoFocus?: boolean; onDone?: () => void; className?: string }) {
+  const { path } = useSnapify();
+  const [q, setQ] = useState('');
+  useEffect(() => {
+    setQ(path.startsWith(SHOP_PATH) ? new URLSearchParams(window.location.search).get('q') ?? '' : '');
+  }, [path]);
+  return (
+    <form
+      role="search"
+      className={cx('relative', className)}
+      onSubmit={(e) => {
+        e.preventDefault();
+        const term = q.trim();
+        navigate(term ? `${SHOP_PATH}?q=${encodeURIComponent(term)}` : SHOP_PATH);
+        onDone?.();
+      }}
+    >
+      <Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-(--mh-muted)" />
+      <input type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher un produit…" aria-label="Rechercher un produit" autoFocus={autoFocus} maxLength={100} className="mh-search" />
+    </form>
+  );
+}
+
+function MobileBar({ navigate, path }: { navigate: (p: string) => void; path: string }) {
+  const { count } = useCart();
+  const wish = useWishlist();
+  const accounts = isModuleActive('novalabs.customers');
+  const cartOn = isModuleActive('novalabs.cart');
+  const items = [
+    { id: 'home', label: 'Accueil', icon: Home, active: path === '/', onClick: () => followLink('/', navigate) },
+    { id: 'shop', label: 'Boutique', icon: Store, active: path.startsWith(SHOP_PATH) || path.startsWith('/produit/'), onClick: () => followLink(SHOP_PATH, navigate) },
+    ...(accounts
+      ? [
+          { id: 'wish', label: 'Favoris', icon: Heart, badge: wish.length, active: path === '/compte/favoris/', onClick: () => followLink('/compte/favoris/', navigate) },
+          { id: 'account', label: 'Compte', icon: UserRound, active: path.startsWith('/compte/') && path !== '/compte/favoris/', onClick: () => followLink('/compte/', navigate) },
+        ]
+      : []),
+    ...(cartOn ? [{ id: 'cart', label: 'Panier', icon: ShoppingBag, badge: count, active: path === '/panier/', onClick: () => cart.open() }] : []),
+  ];
+  return (
+    <nav aria-label="Navigation boutique" className="fixed inset-x-0 bottom-0 z-40 border-t border-(--mh-line) bg-(--mh-card) pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_30px_-20px_rgba(0,0,0,0.25)] lg:hidden">
+      <div className="mx-auto flex max-w-lg items-stretch">
+        {items.map((it) => (
+          <button key={it.id} type="button" onClick={it.onClick} aria-current={it.active ? 'page' : undefined} className={cx('relative flex flex-1 flex-col items-center gap-1 py-2.5 text-[11px] font-semibold transition-colors', it.active ? 'text-(--mh-accent-text)' : 'text-(--mh-muted)')}>
+            <span className="relative">
+              <it.icon className="h-5 w-5" strokeWidth={1.8} />
+              {'badge' in it && it.badge ? <span className="absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-(--mh-accent) px-1 text-[10px] font-bold leading-none text-(--mh-on-accent)">{it.badge > 99 ? '99+' : it.badge}</span> : null}
+            </span>
+            {it.label}
+          </button>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+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 [searchOpen, setSearchOpen] = useState(false);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const closeTimer = useRef<number | undefined>(undefined);
+  const shop = shopActive();
+  const actions = hasModuleSlot('header-actions');
+  const floating = (site.floatingButtons ?? []).filter((b) => b.enabled && b.label).slice(0, 2);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  useEffect(() => {
+    setDrawer(false);
+    setOpen(null);
+    setSearchOpen(false);
+  }, [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 hover = (id: string | null) => {
+    window.clearTimeout(closeTimer.current);
+    if (id) setOpen(id);
+    else closeTimer.current = window.setTimeout(() => setOpen(null), 120);
+  };
+  const announcement = o.announcement && o.announcementText.trim();
+
+  return (
+    <>
+      {announcement ? (
+        <div className="bg-(--mh-ink) text-(--mh-on-dark)">
+          <div className="mx-auto flex h-9 max-w-7xl items-center justify-center gap-6 px-4 text-center text-[12px] font-medium sm:px-6 lg:justify-between lg:px-8">
+            <span className="hidden w-48 lg:block" />
+            {o.announcementLink ? (
+              <button type="button" onClick={() => go({ path: o.announcementLink })} className="truncate underline-offset-4 hover:underline">
+                {o.announcementText}
+              </button>
+            ) : (
+              <span className="truncate">{o.announcementText}</span>
+            )}
+            <a href={`tel:${info.phoneClean}`} className="hidden w-48 items-center justify-end gap-2 text-(--mh-on-dark)/75 transition-colors hover:text-(--mh-on-dark) lg:flex">
+              <Phone className="h-3.5 w-3.5" />
+              {info.phone}
+            </a>
+          </div>
+        </div>
+      ) : null}
+
+      <header className={cx('top-0 z-50 border-b bg-(--mh-card) transition-shadow duration-300', o.stickyHeader ? 'sticky' : 'relative', scrolled ? 'border-(--mh-line) shadow-[0_12px_30px_-24px_rgba(0,0,0,0.35)]' : 'border-(--mh-line)/70')}>
+        <div className="mx-auto flex h-[72px] max-w-7xl items-center gap-3 px-4 sm:gap-6 sm:px-6 lg:px-8">
+          <button type="button" onClick={() => setDrawer(true)} className="-ml-2 flex h-10 w-10 items-center justify-center rounded-full text-(--mh-ink) hover:bg-(--mh-paper-2) lg:hidden" aria-label="Ouvrir le menu">
+            <Menu className="h-[22px] w-[22px]" strokeWidth={1.8} />
+          </button>
+          <Brand compact onClick={() => go({ path: '/' })} />
+
+          {shop && o.headerSearch ? <SearchBox navigate={navigate} className="mx-auto hidden w-full max-w-xl md:block" /> : <div className="flex-1" />}
+
+          <div className="ml-auto flex items-center gap-1 text-(--mh-ink) md:ml-0">
+            {shop && o.headerSearch ? (
+              <button type="button" onClick={() => setSearchOpen((s) => !s)} className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-black/5 md:hidden" aria-label="Rechercher" aria-expanded={searchOpen}>
+                {searchOpen ? <X className="h-5 w-5" /> : <Search className="h-[21px] w-[21px]" strokeWidth={1.8} />}
+              </button>
+            ) : null}
+            {actions ? (
+              <ModuleSlot name="header-actions" />
+            ) : (
+              <button type="button" onClick={() => go(cta)} className="mh-btn mh-btn-primary hidden py-2.5! sm:inline-flex">
+                {cta.label}
+                <ArrowRight className="mh-btn-arrow h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {searchOpen ? (
+          <div className="border-t border-(--mh-line) px-4 py-3 md:hidden">
+            <SearchBox navigate={navigate} autoFocus onDone={() => setSearchOpen(false)} />
+          </div>
+        ) : null}
+
+        <nav className="hidden border-t border-(--mh-line)/70 lg:block" aria-label="Navigation principale">
+          <div className="mx-auto flex h-12 max-w-7xl items-center gap-1 px-6 lg:px-8">
+            {primary.map((item) =>
+              item.children?.length ? (
+                <div key={item.id} className="relative h-full" onMouseEnter={() => hover(item.id)} onMouseLeave={() => hover(null)}>
+                  <button type="button" onClick={() => go(item)} aria-expanded={open === item.id} className={cx('relative flex h-full items-center gap-1.5 px-3.5 text-[0.875rem] font-semibold transition-colors', isActive(item.path) ? 'text-(--mh-ink)' : 'text-(--mh-text) hover:text-(--mh-accent-text)')}>
+                    {item.label}
+                    <ChevronDown className={cx('h-3.5 w-3.5 transition-transform duration-200', open === item.id && 'rotate-180')} />
+                    {isActive(item.path) ? <span className="absolute inset-x-3.5 bottom-0 h-0.5 rounded-full bg-(--mh-accent)" /> : null}
+                  </button>
+                  <div className={cx('absolute left-0 top-full z-50 min-w-[16rem] pt-2 transition-all duration-200', open === item.id ? 'visible translate-y-0 opacity-100' : 'invisible -translate-y-1 opacity-0')}>
+                    <div className="overflow-hidden rounded-(--mh-r-lg) border border-(--mh-line) bg-(--mh-card) p-2 shadow-[0_30px_60px_-30px_rgba(0,0,0,0.35)]">
+                      {item.children.map((child) => (
+                        <button key={child.id} type="button" onClick={() => go(child)} className="flex w-full items-center rounded-(--mh-r) px-3.5 py-2.5 text-left text-sm font-medium text-(--mh-ink) transition-colors hover:bg-(--mh-paper-2)">
+                          {child.label}
+                        </button>
+                      ))}
+                      <button type="button" onClick={() => go(item)} className="mt-1 flex w-full items-center gap-2 rounded-(--mh-r) border-t border-(--mh-line) px-3.5 pb-2 pt-3 text-left text-[13px] font-semibold text-(--mh-accent-text)">
+                        Tout voir <ArrowRight className="h-3.5 w-3.5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <button key={item.id} type="button" onClick={() => go(item)} className={cx('relative flex h-full items-center px-3.5 text-[0.875rem] font-semibold transition-colors', item.highlight ? 'text-(--mh-accent-text)' : isActive(item.path) ? 'text-(--mh-ink)' : 'text-(--mh-text) hover:text-(--mh-accent-text)')}>
+                  {item.label}
+                  {isActive(item.path) ? <span className="absolute inset-x-3.5 bottom-0 h-0.5 rounded-full bg-(--mh-accent)" /> : null}
+                </button>
+              )
+            )}
+            <a href={`tel:${info.phoneClean}`} className="ml-auto hidden items-center gap-2 text-[13px] font-semibold text-(--mh-text) transition-colors hover:text-(--mh-accent-text) xl:inline-flex">
+              <Phone className="h-4 w-4" />
+              {info.phone}
+            </a>
+          </div>
+        </nav>
+      </header>
+
+      {/* Menu mobile : panneau latéral */}
+      <div className={cx('fixed inset-0 z-[60] lg:hidden', drawer ? 'visible' : 'invisible')} aria-hidden={!drawer}>
+        <div className={cx('absolute inset-0 bg-black/40 transition-opacity duration-300', drawer ? 'opacity-100' : 'opacity-0')} onClick={() => setDrawer(false)} />
+        <aside className={cx('absolute inset-y-0 left-0 flex w-[88%] max-w-sm flex-col bg-(--mh-card) shadow-2xl transition-transform duration-300 ease-out', drawer ? 'translate-x-0' : '-translate-x-full')}>
+          <div className="flex h-[72px] shrink-0 items-center justify-between border-b border-(--mh-line) px-5">
+            <Brand onClick={() => go({ path: '/' })} />
+            <button type="button" onClick={() => setDrawer(false)} className="flex h-10 w-10 items-center justify-center rounded-full text-(--mh-ink) hover:bg-(--mh-paper-2)" aria-label="Fermer le menu">
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+          {shop && o.headerSearch ? (
+            <div className="border-b border-(--mh-line) p-4">
+              <SearchBox navigate={navigate} onDone={() => setDrawer(false)} />
+            </div>
+          ) : null}
+          <nav className="flex-1 overflow-y-auto px-5 py-3">
+            {mobile.map((item) => (
+              <div key={item.id} className="border-b border-(--mh-line)/70">
+                <div className="flex items-center justify-between">
+                  <button type="button" onClick={() => go(item)} className={cx('flex-1 py-3.5 text-left text-[15px] font-semibold', item.highlight ? 'text-(--mh-accent-text)' : isActive(item.path) ? 'text-(--mh-ink)' : 'text-(--mh-text)')}>
+                    {item.label}
+                  </button>
+                  {item.children?.length ? (
+                    <button type="button" onClick={() => setExpanded(expanded === item.id ? null : item.id)} className="flex h-9 w-9 items-center justify-center rounded-full text-(--mh-muted) hover:bg-(--mh-paper-2)" aria-label={`Sous-menu ${item.label}`} aria-expanded={expanded === item.id}>
+                      {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-0.5 pb-3 pl-3">
+                    {item.children.map((child) => (
+                      <button key={child.id} type="button" onClick={() => go(child)} className="block w-full py-2 text-left text-sm text-(--mh-muted) hover:text-(--mh-ink)">
+                        {child.label}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </nav>
+          <div className="shrink-0 space-y-2 border-t border-(--mh-line) p-5">
+            <a href={`tel:${info.phoneClean}`} className="mh-btn mh-btn-outline w-full">
+              <Phone className="h-4 w-4" />
+              {info.phone}
+            </a>
+            <button type="button" onClick={() => go(cta)} className="mh-btn mh-btn-primary w-full">
+              {cta.label}
+              <ArrowRight className="mh-btn-arrow h-4 w-4" />
+            </button>
+          </div>
+        </aside>
+      </div>
+
+      {o.mobileBar ? (
+        shop ? (
+          <MobileBar navigate={navigate} path={path} />
+        ) : (
+          <div className="fixed inset-x-0 bottom-0 z-40 flex items-center gap-2 border-t border-(--mh-line) bg-(--mh-card) px-4 py-3 lg:hidden">
+            {floating.length ? (
+              floating.map((b) => (
+                <button key={b.id} type="button" onClick={() => go({ path: b.path })} className={cx('mh-btn flex-1 py-2.5! text-xs', b.style === 'primary' ? 'mh-btn-primary' : b.style === 'outline' ? 'mh-btn-outline' : 'bg-(--mh-paper-2) text-(--mh-ink)')}>
+                  {b.label}
+                </button>
+              ))
+            ) : (
+              <>
+                <a href={`tel:${info.phoneClean}`} className="mh-btn mh-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="mh-btn mh-btn-primary flex-1 py-2.5! text-xs">
+                  {cta.label}
+                </button>
+              </>
+            )}
+          </div>
+        )
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,44 @@
+/**
+ * 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, { useEffect } from 'react';
+import { useOptions } from './site';
+
+const FONTS_URL = 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap';
+const DATA_KEYS = ['mhPalette', 'mhAccent', 'mhType', 'mhCorners', 'mhMotion'] as const;
+
+/** Applique les options du thème (attributs data-mh-* lus par la feuille de style) et charge les polices. */
+export function Layout({ children }: { children: React.ReactNode }) {
+  const o = useOptions();
+
+  useEffect(() => {
+    if (document.getElementById('mh-fonts')) return;
+    const link = document.createElement('link');
+    link.id = 'mh-fonts';
+    link.rel = 'stylesheet';
+    link.href = FONTS_URL;
+    document.head.appendChild(link);
+    return () => link.remove();
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.add('mh-html');
+    Object.assign(root.dataset, {
+      mhPalette: o.palette,
+      mhAccent: o.accent,
+      mhType: o.typography,
+      mhCorners: o.corners,
+      mhMotion: o.animations ? 'on' : 'off',
+    });
+    return () => {
+      root.classList.remove('mh-html');
+      for (const k of DATA_KEYS) delete root.dataset[k];
+    };
+  }, [o.palette, o.accent, o.typography, o.corners, o.animations]);
+
+  return <div className="mh-root">{children}</div>;
+}

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

@@ -0,0 +1,79 @@
+/**
+ * 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, Search } from 'lucide-react';
+import type { BlogPost } from '@snapify/sdk/content';
+import { useSnapify } from '@snapify/sdk/theme';
+import { followLink, shopActive, useMenus } from './site';
+import { 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-10 pt-14 text-center sm:px-8 sm:pt-20">
+        <span className="inline-flex rounded-full bg-(--mh-paper-2) px-3.5 py-1.5 text-[11px] font-bold uppercase tracking-[0.16em] text-(--mh-accent-text)">Le journal · {info.name}</span>
+        <h1 className="mh-display mt-6 text-4xl sm:text-5xl lg:text-6xl">{post.title}</h1>
+        {post.excerpt ? <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-(--mh-fg-2)">{post.excerpt}</p> : null}
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-[13px] text-(--mh-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-(--mh-rule) px-2.5 py-1">
+              {tag}
+            </span>
+          ))}
+        </div>
+      </header>
+      {post.coverImage ? (
+        <div className="mx-auto mb-6 max-w-6xl px-5 sm:px-8">
+          <Frame shaped 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();
+  const shop = shopActive();
+  return (
+    <section className="relative overflow-hidden">
+      <div className="mh-decor mh-waves -bottom-[30rem] left-1/2 h-[60rem] w-[60rem] -translate-x-1/2 opacity-60" />
+      <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="mh-shape flex h-40 w-56 items-center justify-center bg-(--mh-ink) text-(--mh-on-dark)">
+          <span className="mh-display text-7xl">404</span>
+        </div>
+        <h1 className="mh-display mt-10 text-4xl sm:text-5xl">
+          Cette page a pris le <span className="mh-em">large</span>.
+        </h1>
+        <p className="mt-5 max-w-md text-lg text-(--mh-fg-2)">L’adresse demandée n’existe pas ou a été déplacée. {shop ? 'Retrouvez tous nos produits dans la boutique.' : 'Reprenons depuis l’accueil.'}</p>
+        <div className="mt-10 flex flex-wrap justify-center gap-3">
+          <button type="button" onClick={() => followLink('/', navigate)} className="mh-btn mh-btn-outline">
+            <ArrowLeft className="h-4 w-4" />
+            Retour à l’accueil
+          </button>
+          {shop ? (
+            <button type="button" onClick={() => followLink('/boutique/', navigate)} className="mh-btn mh-btn-primary">
+              <Search className="h-4 w-4" />
+              Voir la boutique
+            </button>
+          ) : (
+            <button type="button" onClick={() => followLink(cta.path, navigate)} className="mh-btn mh-btn-primary">
+              {cta.label}
+              <ArrowRight className="mh-btn-arrow h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}