create-snapify-app 0.0.0-stage → 1.1.0

package/template/apps/developers/src/App.tsx

@@ -0,0 +1,643 @@
+/**
+ * Snapify Developers — portail de documentation (developers.snapify.tn)
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Link, Navigate, NavLink, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
+import {
+  ArrowRight,
+  ArrowUpRight,
+  BookOpen,
+  Boxes,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  FileCode2,
+  LayoutTemplate,
+  Menu,
+  PackageCheck,
+  Puzzle,
+  Search,
+  ShieldCheck,
+  Store,
+  X,
+} from 'lucide-react';
+import { SnapifyMark } from '../../shared/Logo';
+import { API_VERSION, PAGES, SECTIONS, type DocPage } from './pages';
+import { Code, COMMUNITY_URL, CONTACT_EMAIL, MARKETPLACE_URL, SITE_URL } from './ui';
+
+const docPath = (p: DocPage) => `/docs/${p.slug}`;
+const norm = (s: string) =>
+  s
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+
+/* ------------------------------------------------------------------ En-tête */
+
+function Brand() {
+  return (
+    <Link to="/" className="flex shrink-0 items-center gap-2.5">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-navy">
+        <SnapifyMark className="h-6 w-6" />
+      </span>
+      <span className="text-[15px] font-semibold tracking-tight text-navy">Snapify</span>
+      <span className="rounded-md bg-teal-50 px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-brand-dark ring-1 ring-teal-100">
+        Developers
+      </span>
+    </Link>
+  );
+}
+
+const TOP_LINKS = [
+  { to: '/docs/introduction', label: 'Documentation', match: (p: string) => p.startsWith('/docs/') && !p.startsWith('/docs/themes') && !p.startsWith('/docs/publier') && !p.startsWith('/docs/reference') },
+  { to: '/docs/themes/creer-un-theme', label: 'Thèmes', match: (p: string) => p.startsWith('/docs/themes') },
+  { to: '/docs/reference/permissions', label: 'Référence', match: (p: string) => p.startsWith('/docs/reference') },
+  { to: '/docs/publier', label: 'Publier', match: (p: string) => p.startsWith('/docs/publier') },
+];
+
+function Header({ onSearch, onMenu, menuOpen }: { onSearch: () => void; onMenu: () => void; menuOpen: boolean }) {
+  const { pathname } = useLocation();
+  return (
+    <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/90 backdrop-blur">
+      <div className="mx-auto flex h-16 max-w-[1440px] items-center gap-4 px-4 sm:px-6">
+        <button
+          type="button"
+          onClick={onMenu}
+          className="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 hover:bg-slate-100 lg:hidden"
+          aria-label={menuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
+        >
+          {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </button>
+        <Brand />
+        <nav className="ml-4 hidden items-center gap-1 lg:flex">
+          {TOP_LINKS.map((l) => (
+            <Link
+              key={l.to}
+              to={l.to}
+              className={`rounded-md px-3 py-2 text-sm font-medium transition ${l.match(pathname) ? 'text-navy' : 'text-slate-500 hover:text-navy'}`}
+            >
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+        <div className="ml-auto flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onSearch}
+            className="hidden h-9 w-60 items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 text-sm text-slate-400 transition hover:border-slate-300 md:flex"
+          >
+            <Search className="h-4 w-4" />
+            Rechercher…
+            <kbd className="ml-auto rounded border border-slate-200 bg-white px-1.5 font-sans text-[11px] text-slate-400">Ctrl K</kbd>
+          </button>
+          <button
+            type="button"
+            onClick={onSearch}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 hover:bg-slate-100 md:hidden"
+            aria-label="Rechercher"
+          >
+            <Search className="h-5 w-5" />
+          </button>
+          <a
+            href={MARKETPLACE_URL}
+            className="hidden items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-slate-500 hover:text-navy xl:inline-flex"
+          >
+            Marketplace <ArrowUpRight className="h-3.5 w-3.5" />
+          </a>
+          <a
+            href={`${MARKETPLACE_URL}/developer`}
+            className="hidden h-9 items-center rounded-lg bg-navy px-3.5 text-sm font-semibold text-white transition hover:bg-navy-2 sm:inline-flex"
+          >
+            Espace vendeur
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+/* ------------------------------------------------------------------ Navigation latérale */
+
+function SideNav({ onNavigate }: { onNavigate?: () => void }) {
+  return (
+    <nav className="space-y-7 text-sm">
+      {SECTIONS.map((section) => (
+        <div key={section}>
+          <div className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">{section}</div>
+          <ul className="space-y-0.5">
+            {PAGES.filter((p) => p.section === section).map((p) => (
+              <li key={p.slug}>
+                <NavLink
+                  to={docPath(p)}
+                  onClick={onNavigate}
+                  className={({ isActive }) =>
+                    `block rounded-md px-3 py-1.5 transition ${isActive ? 'bg-teal-50 font-medium text-brand-dark' : 'text-slate-600 hover:bg-slate-50 hover:text-navy'}`
+                  }
+                >
+                  {p.title}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+      <div className="border-t border-slate-100 pt-5">
+        <ul className="space-y-0.5">
+          {[
+            [MARKETPLACE_URL, 'Marketplace'],
+            [COMMUNITY_URL, 'Community'],
+            [SITE_URL, 'snapify.tn'],
+          ].map(([href, label]) => (
+            <li key={href}>
+              <a href={href} className="flex items-center gap-1 rounded-md px-3 py-1.5 text-slate-500 hover:bg-slate-50 hover:text-navy">
+                {label} <ArrowUpRight className="h-3.5 w-3.5" />
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+}
+
+function MobileNav({ open, onClose }: { open: boolean; onClose: () => void }) {
+  return (
+    <div className={`fixed inset-0 top-16 z-30 lg:hidden ${open ? '' : 'pointer-events-none'}`} aria-hidden={!open}>
+      <div className={`absolute inset-0 bg-navy/30 transition-opacity ${open ? 'opacity-100' : 'opacity-0'}`} onClick={onClose} />
+      <div
+        className={`absolute inset-y-0 left-0 w-[86%] max-w-xs overflow-y-auto border-r border-slate-200 bg-white px-3 py-6 shadow-xl transition-transform ${open ? 'translate-x-0' : '-translate-x-full'}`}
+      >
+        <SideNav onNavigate={onClose} />
+        <a
+          href={`${MARKETPLACE_URL}/developer`}
+          className="mx-3 mt-6 flex h-10 items-center justify-center rounded-lg bg-navy text-sm font-semibold text-white"
+        >
+          Espace vendeur
+        </a>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ Recherche */
+
+function SearchDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [q, setQ] = useState('');
+  const [active, setActive] = useState(0);
+  const navigate = useNavigate();
+  const input = useRef<HTMLInputElement>(null);
+
+  const results = useMemo(() => {
+    const terms = norm(q).split(/\s+/).filter(Boolean);
+    if (!terms.length) return PAGES;
+    return PAGES.filter((p) => {
+      const hay = norm(`${p.title} ${p.section} ${p.description} ${p.keywords || ''} ${p.slug}`);
+      return terms.every((t) => hay.includes(t));
+    });
+  }, [q]);
+
+  useEffect(() => {
+    if (!open) return;
+    setQ('');
+    setActive(0);
+    window.setTimeout(() => input.current?.focus(), 20);
+  }, [open]);
+  useEffect(() => setActive(0), [q]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+  const go = (p: DocPage) => {
+    navigate(docPath(p));
+    onClose();
+  };
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-navy/40 px-4 pt-[12vh] backdrop-blur-sm"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Rechercher dans la documentation"
+        className="w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-slate-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 border-b border-slate-100 px-4">
+          <Search className="h-5 w-5 text-slate-400" aria-hidden />
+          <input
+            ref={input}
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            aria-autocomplete="list"
+            aria-controls="dv-search-results"
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') onClose();
+              if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setActive((a) => Math.min(a + 1, results.length - 1));
+              }
+              if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setActive((a) => Math.max(a - 1, 0));
+              }
+              if (e.key === 'Enter' && results[active]) go(results[active]);
+            }}
+            placeholder="Manifeste, widgets, permissions, thème…"
+            className="h-14 flex-1 bg-transparent text-[15px] text-navy outline-none placeholder:text-slate-400"
+          />
+          <kbd className="rounded border border-slate-200 px-1.5 text-[11px] text-slate-400">Échap</kbd>
+        </div>
+        <ul id="dv-search-results" role="listbox" className="max-h-[55vh] overflow-y-auto p-2">
+          {results.map((p, i) => (
+            <li key={p.slug}>
+              <button
+                type="button"
+                onMouseEnter={() => setActive(i)}
+                onClick={() => go(p)}
+                className={`flex w-full items-start gap-3 rounded-lg px-3 py-2.5 text-left ${i === active ? 'bg-teal-50' : ''}`}
+              >
+                <FileCode2 className={`mt-0.5 h-4 w-4 shrink-0 ${i === active ? 'text-brand-dark' : 'text-slate-400'}`} />
+                <span className="min-w-0">
+                  <span className="block text-sm font-medium text-navy">
+                    <span className="text-slate-400">{p.section} › </span>
+                    {p.title}
+                  </span>
+                  <span className="block truncate text-[13px] text-slate-500">{p.description}</span>
+                </span>
+              </button>
+            </li>
+          ))}
+          {!results.length && <li className="px-3 py-8 text-center text-sm text-slate-500">Aucun résultat pour « {q} ».</li>}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ Page de documentation */
+
+function Toc({ deps }: { deps: string }) {
+  const [items, setItems] = useState<{ id: string; text: string; level: number }[]>([]);
+  const [active, setActive] = useState('');
+  useEffect(() => {
+    const heads = Array.from(document.querySelectorAll<HTMLElement>('article .dv-prose h2, article .dv-prose h3'));
+    setItems(heads.map((h) => ({ id: h.id, text: h.textContent || '', level: h.tagName === 'H3' ? 3 : 2 })));
+    const obs = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible[0]) setActive(visible[0].target.id);
+      },
+      { rootMargin: '-80px 0px -70% 0px' }
+    );
+    heads.forEach((h) => obs.observe(h));
+    return () => obs.disconnect();
+  }, [deps]);
+  if (items.length < 2) return null;
+  return (
+    <div className="text-sm">
+      <div className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Sur cette page</div>
+      <ul className="space-y-1.5 border-l border-slate-200">
+        {items.map((it) => (
+          <li key={it.id}>
+            <a
+              href={`#${it.id}`}
+              onClick={(e) => {
+                e.preventDefault();
+                document.getElementById(it.id)?.scrollIntoView({ behavior: 'smooth' });
+                history.replaceState(null, '', `#${it.id}`);
+              }}
+              className={`-ml-px block border-l py-0.5 transition ${it.level === 3 ? 'pl-6' : 'pl-4'} ${active === it.id ? 'border-brand font-medium text-brand-dark' : 'border-transparent text-slate-500 hover:text-navy'}`}
+            >
+              {it.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function DocView() {
+  const params = useParams();
+  const slug = params['*'] || '';
+  const index = PAGES.findIndex((p) => p.slug === slug.replace(/\/$/, ''));
+  const page = PAGES[index];
+  const { hash } = useLocation();
+
+  useEffect(() => {
+    if (!page) return;
+    document.title = `${page.title} — Snapify Developers`;
+    if (hash) window.setTimeout(() => document.getElementById(hash.slice(1))?.scrollIntoView(), 50);
+    else window.scrollTo(0, 0);
+  }, [page, hash]);
+
+  if (!page) return <Navigate to="/docs/introduction" replace />;
+  const prev = PAGES[index - 1];
+  const next = PAGES[index + 1];
+  const Body = page.Body;
+
+  return (
+    <div className="mx-auto flex max-w-[1440px] gap-10 px-4 sm:px-6">
+      <aside className="sticky top-16 hidden h-[calc(100vh-4rem)] w-60 shrink-0 overflow-y-auto py-8 pr-2 lg:block">
+        <SideNav />
+      </aside>
+      <article className="min-w-0 flex-1 py-10 lg:py-12">
+        <div className="mx-auto max-w-3xl">
+          <div className="text-sm font-semibold text-brand-dark">{page.section}</div>
+          <h1 className="mt-2 text-3xl font-bold tracking-tight text-navy sm:text-[2.15rem]">{page.title}</h1>
+          <p className="mt-3 text-lg leading-relaxed text-slate-500">{page.description}</p>
+          <div className="dv-prose mt-8">
+            <Body />
+          </div>
+          <div className="mt-14 grid gap-3 border-t border-slate-200 pt-8 sm:grid-cols-2">
+            {prev ? (
+              <Link to={docPath(prev)} className="group rounded-xl border border-slate-200 p-4 transition hover:border-brand">
+                <div className="flex items-center gap-1 text-xs text-slate-400">
+                  <ChevronLeft className="h-3.5 w-3.5" /> Précédent
+                </div>
+                <div className="mt-1 font-semibold text-navy group-hover:text-brand-dark">{prev.title}</div>
+              </Link>
+            ) : (
+              <span />
+            )}
+            {next && (
+              <Link to={docPath(next)} className="group rounded-xl border border-slate-200 p-4 text-right transition hover:border-brand">
+                <div className="flex items-center justify-end gap-1 text-xs text-slate-400">
+                  Suivant <ChevronRight className="h-3.5 w-3.5" />
+                </div>
+                <div className="mt-1 font-semibold text-navy group-hover:text-brand-dark">{next.title}</div>
+              </Link>
+            )}
+          </div>
+        </div>
+      </article>
+      <aside className="sticky top-16 hidden h-[calc(100vh-4rem)] w-56 shrink-0 overflow-y-auto py-12 xl:block">
+        <Toc deps={page.slug} />
+      </aside>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ Accueil */
+
+const HERO_CODE = `import { definePublicModule } from '@snapify/sdk';
+
+function Bubble({ settings, api }) {
+  return (
+    <button onClick={() => api.post('/hello')}>
+      {settings.label}
+    </button>
+  );
+}
+
+export default definePublicModule({
+  slots: { floating: Bubble },
+});`;
+
+function Card({ to, icon, title, children }: { to: string; icon: ReactNode; title: string; children: ReactNode }) {
+  return (
+    <Link to={to} className="group flex flex-col rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-0.5 hover:border-brand hover:shadow-lg hover:shadow-teal-900/5">
+      <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-teal-50 text-brand-dark ring-1 ring-teal-100">{icon}</span>
+      <span className="mt-5 text-lg font-semibold text-navy">{title}</span>
+      <span className="mt-2 flex-1 text-[15px] leading-relaxed text-slate-500">{children}</span>
+      <span className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-brand-dark">
+        Lire le guide <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
+      </span>
+    </Link>
+  );
+}
+
+function Home() {
+  useEffect(() => {
+    document.title = 'Snapify Developers — Créer des modules et des thèmes';
+  }, []);
+  return (
+    <>
+      <section className="dv-grid-bg relative overflow-hidden bg-navy">
+        <div className="pointer-events-none absolute -top-40 right-[-10%] h-[520px] w-[520px] rounded-full bg-brand/20 blur-3xl" />
+        <div className="relative mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:px-6 lg:grid-cols-[1.1fr_1fr] lg:py-24">
+          <div>
+            <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium text-teal-200">
+              <span className="h-1.5 w-1.5 rounded-full bg-brand" /> SDK Snapify · API {API_VERSION}
+            </span>
+            <h1 className="mt-6 text-4xl font-extrabold leading-[1.08] tracking-tight text-white sm:text-5xl lg:text-[3.4rem]">
+              Construisez pour
+              <br />
+              <span className="text-brand">le CMS tunisien.</span>
+            </h1>
+            <p className="mt-5 max-w-xl text-lg leading-relaxed text-slate-300">
+              Créez des modules et des thèmes en React et TypeScript, puis vendez-les à tous les sites Snapify depuis la marketplace.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <Link to="/docs/demarrage-rapide" className="inline-flex h-11 items-center gap-2 rounded-lg bg-brand px-5 text-sm font-semibold text-navy transition hover:bg-teal-300">
+                Créer mon premier module <ArrowRight className="h-4 w-4" />
+              </Link>
+              <Link to="/docs/kit-developpeur" className="inline-flex h-11 items-center gap-2 rounded-lg border border-white/20 px-5 text-sm font-semibold text-white transition hover:bg-white/10">
+                <Download className="h-4 w-4" /> Installer le kit
+              </Link>
+            </div>
+            <div className="mt-6 flex flex-col items-start gap-4">
+              <div className="inline-flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 font-mono text-sm text-slate-200">
+                <span className="select-none text-brand">$</span> npm create snapify@latest
+              </div>
+              <Link to="/docs/introduction" className="inline-flex items-center gap-2 text-sm font-medium text-slate-300 transition hover:text-white">
+                <BookOpen className="h-4 w-4" /> Lire la documentation
+              </Link>
+            </div>
+          </div>
+          <div className="min-w-0 lg:pl-6">
+            <Code lang="tsx" title="src/public.tsx">
+              {HERO_CODE}
+            </Code>
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-20">
+        <h2 className="text-2xl font-bold tracking-tight text-navy sm:text-3xl">Par où commencer ?</h2>
+        <p className="mt-2 text-slate-500">Des guides pas à pas, du premier composant jusqu’à la publication.</p>
+        <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          <Card to="/docs/demarrage-rapide" icon={<Puzzle className="h-5 w-5" />} title="Modules">
+            Widgets, pages, API serveur, base de données et pages d’administration.
+          </Card>
+          <Card to="/docs/themes/creer-un-theme" icon={<LayoutTemplate className="h-5 w-5" />} title="Thèmes">
+            En-tête, pied de page et rendu des 26 blocs de l’éditeur, avec options personnalisables.
+          </Card>
+          <Card to="/docs/paquets" icon={<PackageCheck className="h-5 w-5" />} title="Paquets">
+            Construire un paquet, le vérifier, comprendre la signature et les licences.
+          </Card>
+          <Card to="/docs/publier" icon={<Store className="h-5 w-5" />} title="Marketplace">
+            Devenir développeur, publier, mettre à jour et suivre vos ventes.
+          </Card>
+        </div>
+      </section>
+
+      <section className="border-y border-slate-200 bg-slate-50">
+        <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-20">
+          <h2 className="text-2xl font-bold tracking-tight text-navy sm:text-3xl">Du code à la marketplace</h2>
+          <div className="mt-10 grid gap-8 md:grid-cols-4">
+            {[
+              { icon: <FileCode2 className="h-5 w-5" />, t: 'Développer', d: <><code className="font-mono text-[13px]">npm create snapify</code> prépare le projet : un manifeste, des composants React, du TypeScript côté serveur.</> },
+              { icon: <Boxes className="h-5 w-5" />, t: 'Empaqueter', d: <><code className="font-mono text-[13px]">npm run build</code> produit le <code className="font-mono text-[13px]">.snapmod</code> et rejoue l’analyse de la marketplace.</> },
+              { icon: <ShieldCheck className="h-5 w-5" />, t: 'Revue et signature', d: 'NOVALABS relit votre code puis signe la version validée.' },
+              { icon: <Store className="h-5 w-5" />, t: 'Publier', d: 'Vos clients l’installent en un clic depuis leur administration.' },
+            ].map((s, i) => (
+              <div key={s.t}>
+                <div className="flex items-center gap-3">
+                  <span className="flex h-10 w-10 items-center justify-center rounded-full bg-navy text-white">{s.icon}</span>
+                  <span className="text-xs font-semibold text-slate-400">ÉTAPE {i + 1}</span>
+                </div>
+                <div className="mt-4 font-semibold text-navy">{s.t}</div>
+                <div className="mt-1 text-[15px] leading-relaxed text-slate-500">{s.d}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-20">
+        <div className="grid items-center gap-10 lg:grid-cols-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight text-navy sm:text-3xl">Un contexte serveur sûr</h2>
+            <p className="mt-3 text-[15px] leading-relaxed text-slate-500">
+              Votre module déclare ce dont il a besoin ; le site lui donne exactement cela. Routes HTTP, collections, e-mails, appels vers une API
+              externe : chaque capacité est liée à une permission affichée au client avant l’installation.
+            </p>
+            <div className="mt-6 flex flex-wrap gap-2">
+              {['http:routes', 'database', 'storage', 'files', 'mail:send', 'admin:routes', 'net:api.exemple.tn'].map((p) => (
+                <span key={p} className="rounded-md bg-slate-100 px-2 py-1 font-mono text-xs text-slate-600">
+                  {p}
+                </span>
+              ))}
+            </div>
+            <Link to="/docs/modules/serveur" className="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-brand-dark hover:underline">
+              Découvrir l’API serveur <ArrowRight className="h-4 w-4" />
+            </Link>
+          </div>
+          <div className="min-w-0">
+            <Code lang="ts" title="src/server.ts">{`ctx.http.post('/inscription', async (req) => {
+  const email = String(req.body?.email || '').trim();
+  if (!email.includes('@')) throw ctx.error(422, 'E-mail invalide');
+
+  const list = ctx.db.collection('inscrits');
+  await list.insert({ email });
+
+  const { html } = ctx.mail.render({ title: 'Bienvenue', intro: 'Merci !' });
+  await ctx.mail.send({ to: email, subject: 'Bienvenue', html });
+  return { ok: true };
+});`}</Code>
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl px-4 pb-20 sm:px-6">
+        <div className="flex flex-col items-start justify-between gap-6 rounded-2xl bg-navy p-8 sm:flex-row sm:items-center sm:p-10">
+          <div>
+            <h2 className="text-2xl font-bold text-white">Prêt à publier ?</h2>
+            <p className="mt-2 max-w-xl text-slate-300">Ouvrez votre espace développeur sur la marketplace et proposez votre première extension.</p>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <a href={`${MARKETPLACE_URL}/developer`} className="inline-flex h-11 items-center rounded-lg bg-brand px-5 text-sm font-semibold text-navy hover:bg-teal-300">
+              Devenir développeur
+            </a>
+            <Link to="/docs/publier" className="inline-flex h-11 items-center rounded-lg border border-white/20 px-5 text-sm font-semibold text-white hover:bg-white/10">
+              Comment ça marche
+            </Link>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------ Pied de page */
+
+function Footer() {
+  return (
+    <footer className="border-t border-slate-200 bg-white">
+      <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-4 py-8 text-sm text-slate-500 sm:px-6 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-2">
+          <span className="flex h-7 w-7 items-center justify-center rounded-md bg-navy">
+            <SnapifyMark className="h-5 w-5" />
+          </span>
+          © {new Date().getFullYear()} NOVALABS WEB DESIGN — Tunisie
+        </div>
+        <div className="flex flex-wrap gap-x-5 gap-y-2">
+          <a href={MARKETPLACE_URL} className="hover:text-navy">
+            Marketplace
+          </a>
+          <a href={COMMUNITY_URL} className="hover:text-navy">
+            Community
+          </a>
+          <a href={SITE_URL} className="hover:text-navy">
+            snapify.tn
+          </a>
+          <a href="https://snapify.fr" className="hover:text-navy">
+            snapify.fr
+          </a>
+          <a href="https://novalabs.tn" className="hover:text-navy" rel="noopener noreferrer">
+            NOVALABS
+          </a>
+          <a href={`mailto:${CONTACT_EMAIL}`} className="hover:text-navy">
+            {CONTACT_EMAIL}
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+/* ------------------------------------------------------------------ Application */
+
+export function App() {
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { pathname } = useLocation();
+
+  useEffect(() => setMenuOpen(false), [pathname]);
+  useEffect(() => {
+    document.body.style.overflow = menuOpen ? 'hidden' : '';
+  }, [menuOpen]);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header onSearch={() => setSearchOpen(true)} onMenu={() => setMenuOpen((o) => !o)} menuOpen={menuOpen} />
+      <MobileNav open={menuOpen} onClose={() => setMenuOpen(false)} />
+      <main className="flex-1">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/docs" element={<Navigate to="/docs/introduction" replace />} />
+          <Route path="/docs/*" element={<DocView />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </main>
+      <Footer />
+      <SearchDialog open={searchOpen} onClose={() => setSearchOpen(false)} />
+    </div>
+  );
+}

package/template/apps/developers/src/main.tsx

@@ -0,0 +1,17 @@
+/**
+ * Snapify Developers
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);