create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/modules/ModuleHost.tsx

@@ -0,0 +1,197 @@
+/**
+ * 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.
+ */
+/**
+ * Chargement des modules sur le site : React est partagé avec les bundles des modules
+ * (globalThis.__SNAPIFY_RUNTIME__), chaque élément est isolé par une barrière d'erreur.
+ * Un module peut fournir des éléments d'emplacement (bulle flottante, icônes d'en-tête),
+ * des pages pour ses adresses (`routes`) et des widgets pour le bloc « Module ».
+ */
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { createModuleApi, matchesPaths, type ModuleSlot, type PublicModule, type PublicModuleProps } from '../../sdk/index';
+import { useSiteInfo, useSiteConfig, type PublicModuleDescriptor } from '../context/SiteConfigContext';
+import { IS_PREVIEW } from '../preview';
+import { ThemeContext } from '../runtime';
+
+const loaded = new Map<string, Promise<PublicModule | null>>();
+
+function loadModule(d: PublicModuleDescriptor): Promise<PublicModule | null> {
+  let p = loaded.get(d.script);
+  if (!p) {
+    if (d.style && !document.querySelector(`link[data-snapify-module="${d.id}"]`)) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = d.style;
+      link.dataset.snapifyModule = d.id;
+      document.head.appendChild(link);
+    }
+    p = import(/* @vite-ignore */ d.script)
+      .then((m: { default?: PublicModule }) => (m.default && typeof m.default === 'object' ? m.default : null))
+      .catch((e) => {
+        console.error(`[modules] chargement impossible : ${d.id}`, e);
+        return null;
+      });
+    loaded.set(d.script, p);
+  }
+  return p;
+}
+
+function useModule(descriptor: PublicModuleDescriptor | undefined): PublicModule | null | undefined {
+  const [mod, setMod] = useState<PublicModule | null | undefined>(undefined);
+  useEffect(() => {
+    if (!descriptor) return;
+    let alive = true;
+    setMod(undefined);
+    void loadModule(descriptor).then((m) => alive && setMod(m));
+    return () => {
+      alive = false;
+    };
+  }, [descriptor]);
+  return descriptor ? mod : null;
+}
+
+class ModuleBoundary extends React.Component<{ id: string; fallback?: React.ReactNode; children: React.ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error: unknown) {
+    console.error(`[modules] ${this.props.id} a rencontré une erreur`, error);
+  }
+  render() {
+    return this.state.failed ? (this.props.fallback ?? null) : this.props.children;
+  }
+}
+
+function useBaseProps(descriptor: PublicModuleDescriptor, path: string, navigate: (p: string) => void): PublicModuleProps {
+  const info = useSiteInfo();
+  const api = useMemo(() => createModuleApi(descriptor.id), [descriptor.id]);
+  return {
+    settings: descriptor.settings,
+    site: { name: info.name, legalName: info.legalName, phone: info.phone, phoneClean: info.phoneClean, email: info.contactEmail, slaHours: info.slaHours, address: info.address },
+    path,
+    isPreview: IS_PREVIEW,
+    navigate,
+    api,
+    module: { id: descriptor.id, version: descriptor.version },
+  };
+}
+
+function Scope({ id, children }: { id: string; children: React.ReactNode }) {
+  return (
+    <div data-snapify-scope={id} style={{ display: 'contents' }}>
+      {children}
+    </div>
+  );
+}
+
+function ModuleWidget({ descriptor, slot, path, navigate }: { descriptor: PublicModuleDescriptor; slot: ModuleSlot; path: string; navigate: (p: string) => void }) {
+  const mod = useModule(descriptor);
+  const props = useBaseProps(descriptor, path, navigate);
+  const Component = mod?.slots?.[slot];
+  if (!Component) return null;
+  return (
+    <ModuleBoundary id={descriptor.id}>
+      <Scope id={descriptor.id}>
+        <Component {...props} />
+      </Scope>
+    </ModuleBoundary>
+  );
+}
+
+/** Affiche les modules actifs déclarant l'emplacement `name`. */
+export function ModuleSlotHost({ name, path, navigate }: { name: ModuleSlot; path: string; navigate: (p: string) => void }) {
+  const cfg = useSiteConfig();
+  const modules = (cfg?.modules ?? []).filter((m) => m.slots.includes(name));
+  return (
+    <>
+      {modules.map((m) => (
+        <ModuleWidget key={`${m.id}@${m.version}`} descriptor={m} slot={name} path={path} navigate={navigate} />
+      ))}
+    </>
+  );
+}
+
+/** Emplacement placé par le thème (`<ModuleSlot name="header-actions" />`) : adresse et navigation viennent du contexte du thème. */
+function ThemeSlot({ name }: { name: ModuleSlot }) {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) return null;
+  return <ModuleSlotHost name={name} path={ctx.path} navigate={ctx.navigate} />;
+}
+
+/** Publie pour les thèmes et les modules la liste des modules actifs et l'emplacement d'en-tête. */
+export function useModuleRuntime() {
+  const cfg = useSiteConfig();
+  const modules = cfg?.modules;
+  useMemo(() => {
+    const rt = globalThis.__SNAPIFY_RUNTIME__;
+    if (!rt) return;
+    rt.ModuleSlot = ThemeSlot;
+    rt.activeModules = (modules ?? []).map((m) => m.id);
+    rt.slotModules = { 'header-actions': (modules ?? []).filter((m) => m.slots.includes('header-actions')).map((m) => m.id) };
+  }, [modules]);
+}
+
+/** Module qui prend en charge cette adresse (routes déclarées dans son manifeste). */
+export function useModuleRoute(path: string): PublicModuleDescriptor | undefined {
+  const cfg = useSiteConfig();
+  return useMemo(() => (cfg?.modules ?? []).find((m) => m.routes?.length && matchesPaths(m.routes, path)), [cfg?.modules, path]);
+}
+
+export function ModulePageHost({
+  descriptor,
+  path,
+  search,
+  navigate,
+  onMeta,
+  notFound,
+}: {
+  descriptor: PublicModuleDescriptor;
+  path: string;
+  search: string;
+  navigate: (p: string) => void;
+  onMeta: (meta: { title?: string; description?: string }) => void;
+  notFound: React.ReactNode;
+}) {
+  const mod = useModule(descriptor);
+  const props = useBaseProps(descriptor, path, navigate);
+  if (mod === undefined) return <div className="min-h-[60vh]" aria-busy="true" />;
+  const Page = mod?.page;
+  if (!Page) return <>{notFound}</>;
+  return (
+    <ModuleBoundary id={descriptor.id} fallback={notFound}>
+      <Scope id={descriptor.id}>
+        <Page {...props} search={search} setMeta={onMeta} />
+      </Scope>
+    </ModuleBoundary>
+  );
+}
+
+/** Bloc « Module » : widget d'un module actif, avec ses options. */
+export function ModuleWidgetBlock({ moduleId, widget, options }: { moduleId: string; widget: string; options: Record<string, unknown> }) {
+  const cfg = useSiteConfig();
+  const ctx = useContext(ThemeContext);
+  const descriptor = (cfg?.modules ?? []).find((m) => m.id === moduleId);
+  const mod = useModule(descriptor && descriptor.widgets?.includes(widget) ? descriptor : undefined);
+  const props = useBaseProps(descriptor ?? { id: moduleId, version: '', slots: [], routes: [], widgets: [], script: '', settings: {} }, ctx?.path ?? '/', ctx?.navigate ?? (() => undefined));
+  const Widget = mod?.widgets?.[widget];
+  if (!descriptor || !descriptor.widgets?.includes(widget)) {
+    return IS_PREVIEW ? <PreviewNotice>Ce widget provient d’un module inactif ou désinstallé : il n’est pas affiché sur le site.</PreviewNotice> : null;
+  }
+  if (mod === undefined) return <div className="min-h-[200px]" aria-busy="true" />;
+  if (!Widget) return null;
+  return (
+    <ModuleBoundary id={descriptor.id} fallback={IS_PREVIEW ? <PreviewNotice>Le widget ne peut pas s’afficher.</PreviewNotice> : null}>
+      <Scope id={descriptor.id}>
+        <Widget {...props} widget={widget} options={options} />
+      </Scope>
+    </ModuleBoundary>
+  );
+}
+
+function PreviewNotice({ children }: { children: React.ReactNode }) {
+  return <div className="mx-auto my-6 max-w-3xl rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">{children}</div>;
+}

package/template/src/preview.ts

@@ -0,0 +1,63 @@
+/**
+ * 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 { useEffect, useState } from 'react';
+import type { BlogPost, CmsPage } from '../server/cms/types';
+import type { SiteConfigPayload } from '../sdk/content';
+import type { PublicThemeDescriptor } from '../server/modules/types';
+
+/**
+ * Mode aperçu : le site est chargé dans une iframe du backoffice (`?cms-preview=1`).
+ * Le backoffice envoie la page et/ou la configuration en cours d'édition par postMessage ;
+ * rien n'est enregistré, et seuls les messages de la même origine sont acceptés.
+ */
+export const IS_PREVIEW =
+  typeof window !== 'undefined' && window.parent !== window && new URLSearchParams(window.location.search).has('cms-preview');
+
+export interface PreviewMessage {
+  type: 'snapify:preview';
+  page?: CmsPage | null;
+  /** Article en cours d’édition (aperçu /blog/:slug/). */
+  post?: BlogPost | null;
+  site?: Partial<SiteConfigPayload>;
+  /** Thème à prévisualiser (installé, pas forcément actif) et options en cours de réglage. */
+  theme?: { descriptor: PublicThemeDescriptor; settings?: Record<string, unknown> } | null;
+  selectedBlockId?: string | null;
+  scrollToBlockId?: string | null;
+  /** Incrémenté à chaque demande de défilement, même vers le même bloc. */
+  scrollNonce?: number;
+}
+
+type Listener = (msg: PreviewMessage) => void;
+const listeners = new Set<Listener>();
+let last: PreviewMessage | null = null;
+
+if (IS_PREVIEW) {
+  window.addEventListener('message', (e: MessageEvent) => {
+    if (e.origin !== window.location.origin) return;
+    const msg = e.data as PreviewMessage;
+    if (msg?.type !== 'snapify:preview') return;
+    last = { ...last, ...msg };
+    listeners.forEach((l) => l(last!));
+  });
+  window.parent.postMessage({ type: 'snapify:preview-ready' }, window.location.origin);
+}
+
+export function usePreviewState(): PreviewMessage | null {
+  const [state, setState] = useState<PreviewMessage | null>(last);
+  useEffect(() => {
+    if (!IS_PREVIEW) return;
+    listeners.add(setState);
+    return () => {
+      listeners.delete(setState);
+    };
+  }, []);
+  return state;
+}
+
+export function notifyEditor(message: { type: 'snapify:block-click'; id: string } | { type: 'snapify:height'; height: number }) {
+  if (IS_PREVIEW) window.parent.postMessage(message, window.location.origin);
+}

package/template/src/runtime.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+/**
+ * Exécution partagée avec les bundles des modules et des thèmes : ils n'embarquent pas React
+ * et lisent le contexte du thème depuis globalThis.__SNAPIFY_RUNTIME__.
+ */
+import React, { createContext } from 'react';
+import * as jsxRuntime from 'react/jsx-runtime';
+import * as ReactDOM from 'react-dom';
+import { SNAPIFY_MODULE_API_VERSION, type ModuleSlot } from '../sdk/index';
+import type { ThemeRuntimeValue } from '../sdk/theme';
+import { IS_PREVIEW } from './preview';
+
+export interface SnapifyRuntime {
+  React: typeof React;
+  jsxRuntime: typeof jsxRuntime;
+  ReactDOM: typeof ReactDOM;
+  apiVersion: string;
+  ThemeContext: React.Context<ThemeRuntimeValue | null>;
+  isPreview: boolean;
+  /** Emplacement de modules placé par le thème (`<ModuleSlot name="header-actions" />`). */
+  ModuleSlot?: React.ComponentType<{ name: ModuleSlot }>;
+  activeModules?: string[];
+  slotModules?: Partial<Record<ModuleSlot, string[]>>;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __SNAPIFY_RUNTIME__: SnapifyRuntime | undefined;
+}
+
+export const ThemeContext = createContext<ThemeRuntimeValue | null>(null);
+
+globalThis.__SNAPIFY_RUNTIME__ = { React, jsxRuntime, ReactDOM, apiVersion: SNAPIFY_MODULE_API_VERSION, ThemeContext, isPreview: IS_PREVIEW };

package/template/src/themes/ThemeHost.tsx

@@ -0,0 +1,168 @@
+/**
+ * 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.
+ */
+/**
+ * Chargement du thème actif (ou du thème prévisualisé dans l'administration) : feuille de style,
+ * bundle et contexte fourni aux composants du thème. Si le thème ne peut pas être chargé,
+ * un rendu minimal garde le site lisible.
+ */
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import type { ThemeDefinition, ThemeRuntimeValue } from '../../sdk/theme';
+import type { SiteConfigPayload } from '../../sdk/content';
+import { useSiteInfo, useSiteConfig, useSiteConfigLoaded, useTokens, type PublicThemeDescriptor } from '../context/SiteConfigContext';
+import { IS_PREVIEW, usePreviewState } from '../preview';
+import { ThemeContext } from '../runtime';
+import { FALLBACK_THEME } from './fallback';
+
+/** Thème actif au moment où le HTML a été servi : prioritaire sur la configuration, qui peut être en cache. */
+const HTML_THEME: PublicThemeDescriptor | null = (() => {
+  try {
+    const raw = document.getElementById('snapify-theme')?.textContent;
+    return raw ? (JSON.parse(raw) as PublicThemeDescriptor) : null;
+  } catch {
+    return null;
+  }
+})();
+
+const loaded = new Map<string, Promise<ThemeDefinition | null>>();
+
+function loadScript(d: PublicThemeDescriptor): Promise<ThemeDefinition | null> {
+  let p = loaded.get(d.script);
+  if (!p) {
+    p = import(/* @vite-ignore */ d.script)
+      .then((m: { default?: ThemeDefinition }) => {
+        const t = m.default;
+        return t && typeof t.Header === 'function' && typeof t.Footer === 'function' && typeof t.blocks === 'object' ? t : null;
+      })
+      .catch((e) => {
+        console.error(`[thèmes] chargement impossible : ${d.id}`, e);
+        return null;
+      });
+    loaded.set(d.script, p);
+  }
+  return p;
+}
+
+/** Une seule feuille de thème à la fois ; le serveur l'insère déjà dans le HTML pour le thème actif. */
+function applyStylesheet(href: string | undefined): Promise<void> {
+  let link = document.querySelector<HTMLLinkElement>('link[data-snapify-theme]');
+  if (!href) {
+    link?.remove();
+    return Promise.resolve();
+  }
+  if (link && link.getAttribute('href') === href) return Promise.resolve();
+  if (!link) {
+    link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.dataset.snapifyTheme = '';
+    document.head.appendChild(link);
+  }
+  const el = link;
+  return new Promise((resolve) => {
+    const done = () => resolve();
+    el.addEventListener('load', done, { once: true });
+    el.addEventListener('error', done, { once: true });
+    setTimeout(done, 3000);
+    el.href = href;
+  });
+}
+
+const EMPTY_CONFIG: SiteConfigPayload = {
+  general: { legalName: '', baseline: '', slogan: '', phone: '', phoneClean: '', contactEmail: '', slaHours: '', address: '' },
+  branding: { siteName: '', tagline: '', logoUrl: '', colors: {} },
+  menus: [],
+  widgetAreas: [],
+  settings: { cookieBannerEnabled: true, analyticsEnabled: true, maintenance: { enabled: false, title: '', message: '' } },
+  redirects: [],
+};
+
+interface ActiveTheme {
+  theme: ThemeDefinition;
+  /** Change avec le thème : sert de clé pour réinitialiser les barrières d'erreur. */
+  key: string;
+  /** Faux pendant le chargement initial du thème. */
+  ready: boolean;
+}
+
+const ActiveThemeContext = createContext<ActiveTheme>({ theme: FALLBACK_THEME, key: 'fallback', ready: false });
+
+export const useActiveTheme = () => useContext(ActiveThemeContext);
+
+export function ThemeProvider({
+  path,
+  navigate,
+  openCookies,
+  children,
+}: {
+  path: string;
+  navigate: (path: string) => void;
+  openCookies: () => void;
+  children: React.ReactNode;
+}) {
+  const cfg = useSiteConfig();
+  const configLoaded = useSiteConfigLoaded();
+  const preview = usePreviewState();
+  const info = useSiteInfo();
+  const tokens = useTokens();
+
+  const override = IS_PREVIEW ? preview?.theme : undefined;
+  // Config live prioritaire (changement de thème sans recharger le HTML injecté)
+  const descriptor = override
+    ? override.descriptor
+    : configLoaded && cfg?.theme
+      ? cfg.theme
+      : (HTML_THEME ?? cfg?.theme ?? null);
+  const settings = useMemo(
+    () => ({ ...(descriptor?.settings ?? {}), ...(override?.settings ?? {}) }),
+    [descriptor?.settings, override?.settings]
+  );
+
+  const [state, setState] = useState<{ script: string | null; theme: ThemeDefinition } | null>(null);
+
+  useEffect(() => {
+    if (!configLoaded) return;
+    if (!descriptor) {
+      void applyStylesheet(undefined);
+      setState({ script: null, theme: FALLBACK_THEME });
+      return;
+    }
+    let alive = true;
+    void Promise.all([loadScript(descriptor), applyStylesheet(descriptor.style)]).then(([theme]) => {
+      if (alive) setState({ script: descriptor.script, theme: theme ?? FALLBACK_THEME });
+    });
+    return () => {
+      alive = false;
+    };
+  }, [configLoaded, descriptor?.script, descriptor?.style]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const runtime = useMemo<ThemeRuntimeValue>(
+    () => ({ site: cfg ?? EMPTY_CONFIG, info, tokens, settings, path, navigate, openCookies, isPreview: IS_PREVIEW }),
+    [cfg, info, tokens, settings, path, navigate, openCookies]
+  );
+  const active = useMemo<ActiveTheme>(() => ({ theme: state?.theme ?? FALLBACK_THEME, key: state?.script ?? 'fallback', ready: !!state }),
+    [state]
+  );
+
+  return (
+    <ThemeContext.Provider value={runtime}>
+      <ActiveThemeContext.Provider value={active}>{children}</ActiveThemeContext.Provider>
+    </ThemeContext.Provider>
+  );
+}
+
+/** Isole une erreur d'un composant du thème pour ne pas faire tomber tout le site. */
+export class ThemeBoundary extends React.Component<{ part: string; fallback?: React.ReactNode; children: React.ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error: unknown) {
+    console.error(`[thèmes] ${this.props.part} :`, error);
+  }
+  render() {
+    return this.state.failed ? (this.props.fallback ?? null) : this.props.children;
+  }
+}

package/template/src/themes/fallback.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.
+ */
+/** Rendu de secours, sans thème : navigation et textes uniquement. */
+import React, { useContext } from 'react';
+import type { BlockProps, ThemeChromeProps, ThemeDefinition } from '../../sdk/theme';
+import { ThemeContext } from '../runtime';
+
+function Header({ navigate }: ThemeChromeProps) {
+  const ctx = useContext(ThemeContext);
+  const items = ctx?.site.menus.find((m) => m.id === 'primary')?.items ?? ctx?.site.menus[0]?.items ?? [];
+  return (
+    <header className="border-b border-slate-200 bg-white">
+      <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-6 px-4 py-4">
+        <button type="button" className="text-lg font-semibold" onClick={() => navigate('/')}>
+          {ctx?.info.name || 'Accueil'}
+        </button>
+        <nav className="flex flex-wrap gap-4 text-sm">
+          {items.map((item) => (
+            <button key={item.id} type="button" className="hover:underline" onClick={() => navigate(item.path)}>
+              {item.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+function Footer({ navigate, openCookies }: ThemeChromeProps) {
+  const ctx = useContext(ThemeContext);
+  return (
+    <footer className="border-t border-slate-200 bg-white">
+      <div className="mx-auto flex max-w-5xl flex-wrap gap-4 px-4 py-6 text-sm text-slate-500">
+        <span>© {new Date().getFullYear()} {ctx?.info.legalName || ctx?.info.name}</span>
+        <button type="button" className="hover:underline" onClick={() => navigate('/mentions-legales/')}>
+          Mentions légales
+        </button>
+        <button type="button" className="hover:underline" onClick={openCookies}>
+          Cookies
+        </button>
+      </div>
+    </footer>
+  );
+}
+
+export const FALLBACK_THEME: ThemeDefinition = {
+  Header,
+  Footer,
+  blocks: {
+    hero: ({ d }: BlockProps<'hero'>) => (
+      <section className="mx-auto max-w-5xl px-4 py-12">
+        <h1 className="text-3xl font-bold">{d.title}</h1>
+        {d.subtitle ? <p className="mt-3 text-slate-600">{d.subtitle}</p> : null}
+      </section>
+    ),
+    pageHeader: ({ d }: BlockProps<'pageHeader'>) => (
+      <section className="mx-auto max-w-5xl px-4 py-10">
+        <h1 className="text-3xl font-bold">{d.title}</h1>
+      </section>
+    ),
+    richText: ({ d }: BlockProps<'richText'>) => (
+      <section className="mx-auto max-w-3xl px-4 py-6">
+        <div dangerouslySetInnerHTML={{ __html: d.html }} />
+      </section>
+    ),
+  },
+};

package/template/src/types.ts

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+export type ExpertiseSlug = 
+  | 'froid'
+  | 'recuperation-de-chaleur'
+  | 'chauffage-traitement-air'
+  | 'gtb-gtc'
+  | 'isolation-technique'
+  | 'reglementation-cee';
+
+export type SecteurSlug =
+  | 'industrie'
+  | 'tertiaire'
+  | 'residentiel-collectif';
+
+export interface CeeSheet {
+  id: string;
+  name: string;
+  codeTertiaire: string;
+  codeIndustrie: string;
+  description: string;
+  typicalSavings: string;
+  coverageEstimate: string;
+}
+
+export interface ExpertiseItem {
+  slug: ExpertiseSlug;
+  title: string;
+  shortDesc: string;
+  heroTitle: string;
+  metaDesc: string;
+  iconName: string;
+  solutions: {
+    title: string;
+    description: string;
+    ceeFiches: string;
+  }[];
+  ceeList: string[];
+}
+
+export interface SecteurItem {
+  slug: SecteurSlug;
+  title: string;
+  shortDesc: string;
+  heroTitle: string;
+  metaDesc: string;
+  image: string;
+  enjeux: string[];
+  solutions: {
+    title: string;
+    slug: ExpertiseSlug;
+  }[];
+  typicalEquipments: string[];
+}
+
+export interface RealisationItem {
+  id: string;
+  slug: string;
+  client: string;
+  location: string;
+  department: string;
+  sector: 'Industrie' | 'Tertiaire' | 'Résidentiel collectif';
+  solution: string;
+  shortDescription: string;
+  problem: string;
+  solutionDetail: string;
+  results: string[];
+  image: string;
+  ceeSheet?: string;
+  metrics: {
+    label: string;
+    value: string;
+    sublabel?: string;
+  }[];
+}
+
+export interface ContactFormData {
+  vousEtes: string;
+  entreprise: string;
+  nomPrenom: string;
+  fonction: string;
+  email: string;
+  telephone: string;
+  typologieSite: string;
+  natureBesoin: string;
+  localisationSite: string;
+  message: string;
+  commentConnu: string;
+  rgpdAccepted: boolean;
+}