create-snapify-app 0.0.0-stage → 1.1.0

package/template/themes/sidibou/src/CeeSimulator.tsx

@@ -0,0 +1,247 @@
+/**
+ * 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 { Calculator, ArrowRight, CheckCircle2, ShieldCheck, Zap } from 'lucide-react';
+
+interface SimulatorProps {
+  onSelectSolution?: (data: { siteType: string; need: string; estimate: string }) => void;
+  onNavigateToContact?: () => void;
+}
+
+export const CeeSimulator: React.FC<SimulatorProps> = ({ onNavigateToContact }) => {
+  const [siteType, setSiteType] = useState<'tertiaire' | 'industrie' | 'residentiel'>('tertiaire');
+  const [surfaceM2, setSurfaceM2] = useState<number>(2500);
+  const [targetSolution, setTargetSolution] = useState<string>('froid');
+
+  // Realistic French CEE and energy engineering heuristics
+  const calculateEstimates = () => {
+    let kwhCumacPerUnit = 420;
+    let baseCoverage = 0.72; // 72%
+    let typicalSavingPercent = 22;
+
+    if (siteType === 'industrie') {
+      if (targetSolution === 'recup-chaleur') {
+        kwhCumacPerUnit = 850;
+        baseCoverage = 0.78;
+        typicalSavingPercent = 28;
+      } else if (targetSolution === 'froid') {
+        kwhCumacPerUnit = 680;
+        baseCoverage = 0.75;
+        typicalSavingPercent = 24;
+      } else {
+        kwhCumacPerUnit = 520;
+        baseCoverage = 0.70;
+        typicalSavingPercent = 18;
+      }
+    } else if (siteType === 'tertiaire') {
+      if (targetSolution === 'froid') {
+        kwhCumacPerUnit = 600;
+        baseCoverage = 0.76;
+        typicalSavingPercent = 25;
+      } else if (targetSolution === 'gtb') {
+        kwhCumacPerUnit = 380;
+        baseCoverage = 0.68;
+        typicalSavingPercent = 20;
+      } else if (targetSolution === 'destratification') {
+        kwhCumacPerUnit = 310;
+        baseCoverage = 0.65;
+        typicalSavingPercent = 22;
+      }
+    } else {
+      // Résidentiel collectif
+      kwhCumacPerUnit = 390;
+      baseCoverage = 0.74;
+      typicalSavingPercent = 26;
+    }
+
+    const estimatedKwhCumac = Math.round((surfaceM2 * kwhCumacPerUnit) / 1000) * 1000;
+    const estimatedSavingsPercent = typicalSavingPercent;
+    const estimatedCeeCoverage = Math.round(baseCoverage * 100);
+
+    return {
+      kwhCumac: estimatedKwhCumac.toLocaleString('fr-FR'),
+      savingsPercent: estimatedSavingsPercent,
+      ceeCoverage: estimatedCeeCoverage
+    };
+  };
+
+  const results = calculateEstimates();
+
+  return (
+    <div className="card-snapify p-6 sm:p-8 lg:p-10 shadow-sm border border-px-border">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-px-border/70">
+        <div>
+          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-px-primary-dark mb-1">
+            <Calculator className="w-4 h-4 text-px-primary" />
+            <span>Eu nibh & Euismod</span>
+          </div>
+          <h3 className="text-xl sm:text-2xl font-semibold text-px-navy">
+            Gravida duis AC & Tellus et
+          </h3>
+          <p className="text-sm text-slate-500 mt-1">
+            Risus vulputate vehicula donec lobortis risus a ELIT etiam tempor lorem ipsum dolor sit amet consectetur adipiscing.
+          </p>
+        </div>
+        <div className="inline-flex items-center gap-1.5 self-start text-xs font-medium text-slate-500 bg-px-surface px-3 py-1.5 rounded-full border border-slate-200">
+          <ShieldCheck className="w-4 h-4 text-emerald-600" />
+          <span>Elit SED do Eiusmod 2026</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 pt-8">
+        {/* Controls */}
+        <div className="lg:col-span-7 space-y-6">
+          {/* Site type */}
+          <div>
+            <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
+              1. Tempor incididunt ut labore
+            </label>
+            <div className="grid grid-cols-3 gap-2 p-1 bg-px-surface rounded-xl border border-slate-200">
+              <button
+                type="button"
+                onClick={() => setSiteType('tertiaire')}
+                className={`py-2 px-3 text-xs sm:text-sm font-medium rounded-lg transition-all ${
+                  siteType === 'tertiaire'
+                    ? 'bg-white text-px-navy shadow-sm font-semibold'
+                    : 'text-slate-600 hover:text-px-navy'
+                }`}
+              >
+                Et / Dolore
+              </button>
+              <button
+                type="button"
+                onClick={() => setSiteType('industrie')}
+                className={`py-2 px-3 text-xs sm:text-sm font-medium rounded-lg transition-all ${
+                  siteType === 'industrie'
+                    ? 'bg-white text-px-navy shadow-sm font-semibold'
+                    : 'text-slate-600 hover:text-px-navy'
+                }`}
+              >
+                Magna Aliqua
+              </button>
+              <button
+                type="button"
+                onClick={() => setSiteType('residentiel')}
+                className={`py-2 px-3 text-xs sm:text-sm font-medium rounded-lg transition-all ${
+                  siteType === 'residentiel'
+                    ? 'bg-white text-px-navy shadow-sm font-semibold'
+                    : 'text-slate-600 hover:text-px-navy'
+                }`}
+              >
+                Enim Ad
+              </button>
+            </div>
+          </div>
+
+          {/* Solution target */}
+          <div>
+            <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
+              2. Minim veniam quis
+            </label>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
+              {[
+                { id: 'froid', label: 'Nostrud & EXERCITATION Ullamco', badge: 'LABORIS-NISI-134' },
+                { id: 'recup-chaleur', label: 'Aliquip Ex', badge: 'EA-COMMODO-103' },
+                { id: 'gtb', label: 'CONSEQUAT / Duis AUTE', badge: 'IRURE-IN-116' },
+                { id: 'destratification', label: 'Reprehenderit', badge: 'VOLUPTATE-VELIT-142' },
+                { id: 'isolation', label: 'Esse & Cillum', badge: 'FUGIAT-NULLA-106' },
+                { id: 'pac', label: 'Pariatur excepteur sint (OCCAECAT)', badge: 'CUPIDATAT-NON-163' }
+              ].map((sol) => (
+                <button
+                  key={sol.id}
+                  type="button"
+                  onClick={() => setTargetSolution(sol.id)}
+                  className={`text-left p-3 rounded-xl border text-xs sm:text-sm transition-all ${
+                    targetSolution === sol.id
+                      ? 'border-px-primary bg-px-primary/5 text-px-navy font-semibold ring-1 ring-px-primary'
+                      : 'border-slate-200 bg-white hover:border-slate-300 text-slate-700'
+                  }`}
+                >
+                  <div className="truncate">{sol.label}</div>
+                  <div className="text-[10px] text-slate-400 mt-1 font-mono">{sol.badge}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Surface slider */}
+          <div>
+            <div className="flex justify-between items-center text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
+              <span>3. Proident sunt culpa qui officia</span>
+              <span className="text-px-navy font-mono text-sm lowercase font-bold">{surfaceM2.toLocaleString('fr-FR')} m²</span>
+            </div>
+            <input
+              type="range"
+              min={500}
+              max={25000}
+              step={250}
+              value={surfaceM2}
+              onChange={(e) => setSurfaceM2(Number(e.target.value))}
+              className="w-full accent-px-primary bg-slate-200 h-2 rounded-lg cursor-pointer"
+            />
+            <div className="flex justify-between text-[11px] text-slate-400 mt-1">
+              <span>500 m² (Mollit / Anim)</span>
+              <span>10 000 m² (Est / Laborum)</span>
+              <span>25 000 m² (Pretium Tincidunt)</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Results Card */}
+        <div className="lg:col-span-5 bg-gradient-to-br from-px-navy to-px-navy-2 rounded-2xl p-6 sm:p-7 text-white flex flex-col justify-between shadow-xl">
+          <div>
+            <div className="flex items-center gap-2 text-xs font-semibold text-px-primary-light uppercase tracking-wider mb-4">
+              <Zap className="w-4 h-4 text-px-primary-light" />
+              <span>Lacus nulla Gravida</span>
+            </div>
+
+            <div className="space-y-5">
+              <div className="border-b border-white/10 pb-4">
+                <div className="text-xs text-slate-300">Orci A odio nullam</div>
+                <div className="text-2xl sm:text-3xl font-bold font-mono tracking-tight text-white mt-0.5">
+                  ~ {results.kwhCumac} <span className="text-sm font-normal text-slate-400">varius turpis</span>
+                </div>
+                <div className="text-[11px] text-slate-400 mt-0.5">Et commodo pharetra est eros Snapify</div>
+              </div>
+
+              <div className="border-b border-white/10 pb-4">
+                <div className="text-xs text-slate-300">Bibendum elit nec luctus MAGNA</div>
+                <div className="text-2xl sm:text-3xl font-bold text-px-primary-light mt-0.5">
+                  Jusqu'à {results.ceeCoverage} %
+                </div>
+                <div className="text-[11px] text-slate-400 mt-0.5">Felis sollicitudin mauris integer in</div>
+              </div>
+
+              <div>
+                <div className="text-xs text-slate-300">Mauris eu nibh euismod</div>
+                <div className="text-2xl sm:text-3xl font-bold text-white mt-0.5">
+                  - {results.savingsPercent} %
+                </div>
+                <div className="text-[11px] text-slate-400 mt-0.5">Gravida duis ac tellus et</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-6 mt-6 border-t border-white/10 space-y-3">
+            <div className="flex items-center gap-2 text-xs text-slate-300">
+              <CheckCircle2 className="w-4 h-4 text-px-primary-light shrink-0" />
+              <span>Risus vulputate vehicula donec lobortis risus A</span>
+            </div>
+
+            <button
+              onClick={onNavigateToContact}
+              className="w-full btn-primary-snapify !py-3 text-center !w-full justify-center group"
+            >
+              <span>Elit etiam tempor lorem</span>
+              <ArrowRight className="w-4 h-4 btn-arrow" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,203 @@
+/**
+ * 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 { Phone, ArrowUpRight, ShieldCheck, CheckCircle } from 'lucide-react';
+import { useSiteInfo, useSiteConfig } from './site';
+import { SnapifyLogo } from './SnapifyLogo';
+import { WidgetAreaHost } from '@/src/components/cms/WidgetArea';
+
+interface FooterProps {
+  onNavigate: (path: string) => void;
+  onOpenCookies: () => void;
+}
+
+const LEGAL = ['/mentions-legales/', '/politique-de-confidentialite/', '/cookies/'];
+
+export const Footer: React.FC<FooterProps> = ({ onNavigate, onOpenCookies }) => {
+  const SITE_INFO = useSiteInfo();
+  const siteConfig = useSiteConfig();
+  const [newsEmail, setNewsEmail] = React.useState('');
+  const [newsMsg, setNewsMsg] = React.useState('');
+
+  const navigateTo = (path: string) => {
+    if (/^(https?:|mailto:|tel:)/.test(path)) {
+      window.open(path, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    onNavigate(path);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const areas = siteConfig?.widgetAreas || [];
+  const hasWidgets = ['footer-1', 'footer-2', 'footer-3', 'footer-4'].some((id) => (areas.find((a) => a.id === id)?.widgets.length || 0) > 0);
+
+  const footerMenu = siteConfig?.menus.find((m) => m.id === 'footer')?.items;
+  const col1 = siteConfig?.menus.find((m) => m.id === 'footer-col-1')?.items;
+  const col2 = siteConfig?.menus.find((m) => m.id === 'footer-col-2')?.items;
+  const col3 = siteConfig?.menus.find((m) => m.id === 'footer-col-3')?.items;
+
+  const legalLinks =
+    footerMenu?.filter((i) => LEGAL.includes(i.path)).map((i) => ({ label: i.label, path: i.path })) ||
+    [
+      { label: 'Mentions légales', path: '/mentions-legales/' },
+      { label: 'Politique de confidentialité', path: '/politique-de-confidentialite/' },
+      { label: 'Cookies', path: '/cookies/' },
+    ];
+
+  const companyLinks = footerMenu?.filter((i) => !LEGAL.includes(i.path)).map((i) => ({ label: i.label, path: i.path, highlight: !!i.highlight })) || [];
+
+  const LinkCol = ({ title, items }: { title: string; items?: { id: string; label: string; path: string; highlight?: boolean }[] }) => {
+    if (!items?.length) return null;
+    return (
+      <div className="space-y-3">
+        <div className="text-xs font-semibold uppercase tracking-wider text-slate-300">{title}</div>
+        <ul className="space-y-2 text-xs">
+          {items.map((l) => (
+            <li key={l.id || l.path}>
+              <button
+                type="button"
+                onClick={() => navigateTo(l.path)}
+                className={l.highlight ? 'flex items-center gap-1 font-semibold text-px-primary-light hover:underline' : 'text-left text-slate-400 transition-colors hover:text-white'}
+              >
+                <span>{l.label}</span>
+                {l.highlight ? <ArrowUpRight className="h-3.5 w-3.5" /> : null}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  return (
+    <footer className="border-t border-slate-800 bg-px-navy pb-24 pt-16 text-white lg:pb-12">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        {hasWidgets ? (
+          <div className="grid grid-cols-1 gap-10 border-b border-slate-800/80 pb-12 md:grid-cols-2 lg:grid-cols-4 [&_a]:text-slate-400 [&_a:hover]:text-white [&_.text-sm]:text-slate-400">
+            <WidgetAreaHost areaId="footer-1" navigate={navigateTo} className="space-y-4" />
+            <WidgetAreaHost areaId="footer-2" navigate={navigateTo} className="space-y-4" />
+            <WidgetAreaHost areaId="footer-3" navigate={navigateTo} className="space-y-4" />
+            <WidgetAreaHost areaId="footer-4" navigate={navigateTo} className="space-y-4" />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-10 border-b border-slate-800/80 pb-12 md:grid-cols-2 lg:grid-cols-12 lg:gap-8">
+            <div className="space-y-4 lg:col-span-4">
+              <div onClick={() => navigateTo('/')} className="group inline-flex cursor-pointer items-center gap-3">
+                {siteConfig?.branding.logoDarkUrl ? (
+                  <img src={siteConfig.branding.logoDarkUrl} alt={SITE_INFO.name} className="h-11 w-auto max-w-[200px] object-contain" />
+                ) : (
+                  <>
+                    <SnapifyLogo className="h-9 w-9 !border-slate-700 !bg-slate-900" />
+                    <div>
+                      <div className="flex items-center gap-1">
+                        <span className="text-xl font-bold tracking-tight text-white">{SITE_INFO.name.replace(/®$/, '')}</span>
+                        {SITE_INFO.name.endsWith('®') && <span className="text-[10px] font-bold text-slate-400">®</span>}
+                      </div>
+                      <div className="text-[11px] font-normal leading-none text-slate-400">{SITE_INFO.baseline}</div>
+                    </div>
+                  </>
+                )}
+              </div>
+              <div className="text-xs font-medium tracking-wide text-px-primary-light">{SITE_INFO.slogan}</div>
+              <p className="max-w-sm text-xs leading-relaxed text-slate-400">{SITE_INFO.baseline}</p>
+              <div className="pt-2">
+                <a
+                  href={`tel:${SITE_INFO.phoneClean}`}
+                  className="inline-flex items-center gap-2 rounded-lg border border-slate-700/60 bg-slate-900/60 px-3 py-2 text-sm font-semibold text-white transition-colors hover:text-px-primary-light"
+                >
+                  <Phone className="h-4 w-4 text-px-primary" />
+                  <span className="font-mono">{SITE_INFO.phone}</span>
+                </a>
+              </div>
+            </div>
+            <div className="lg:col-span-3">
+              <LinkCol title={col1?.[0] ? 'Navigation' : 'Liens'} items={col1?.length ? col1 : companyLinks.slice(0, Math.ceil(companyLinks.length / 2)).map((l, i) => ({ id: `c${i}`, ...l }))} />
+            </div>
+            <div className="lg:col-span-2">
+              <LinkCol title="Explorer" items={col2?.length ? col2 : companyLinks.slice(Math.ceil(companyLinks.length / 2)).map((l, i) => ({ id: `d${i}`, ...l }))} />
+            </div>
+            <div className="lg:col-span-3">
+              <LinkCol title="Contact" items={col3?.length ? col3 : companyLinks.filter((l) => l.highlight).map((l, i) => ({ id: `e${i}`, ...l }))} />
+              <div className="mt-4 border-t border-slate-800 pt-4 text-[11px] text-slate-400">
+                <div className="mb-1 font-semibold text-slate-300">{SITE_INFO.legalName || SITE_INFO.name}</div>
+                <div>{SITE_INFO.address}</div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {siteConfig?.newsletterEnabled ? (
+          <div className="border-b border-slate-800/80 py-8">
+            <div className="max-w-md">
+              <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-300">Newsletter</p>
+              <form
+                className="flex gap-2"
+                onSubmit={async (e) => {
+                  e.preventDefault();
+                  setNewsMsg('');
+                  const r = await fetch('/api/public/newsletter/subscribe', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email: newsEmail }),
+                  });
+                  const j = await r.json().catch(() => ({}));
+                  if (r.ok) {
+                    setNewsMsg(j.pending ? 'Vérifiez votre boîte mail pour confirmer.' : 'Inscription enregistrée.');
+                    setNewsEmail('');
+                  } else setNewsMsg(j.error || 'Erreur');
+                }}
+              >
+                <input
+                  type="email"
+                  required
+                  value={newsEmail}
+                  onChange={(e) => setNewsEmail(e.target.value)}
+                  placeholder="E-mail professionnel"
+                  className="flex-1 rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-xs text-white"
+                />
+                <button type="submit" className="rounded-lg bg-px-primary px-4 py-2 text-xs font-semibold text-px-navy">
+                  S&apos;inscrire
+                </button>
+              </form>
+              {newsMsg ? <p className="mt-2 text-[11px] text-px-primary-light">{newsMsg}</p> : null}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="flex flex-col items-center justify-between gap-6 pt-8 text-xs text-slate-400 lg:flex-row">
+          <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 lg:justify-start">
+            <div className="inline-flex items-center gap-1.5 rounded border border-slate-800 bg-slate-900 px-2.5 py-1 text-[11px] text-slate-300">
+              <ShieldCheck className="h-3.5 w-3.5 text-px-primary" />
+              <span>{SITE_INFO.slaHours || 'Support réactif'}</span>
+            </div>
+            <div className="inline-flex items-center gap-1.5 rounded border border-slate-800 bg-slate-900 px-2.5 py-1 text-[11px] text-slate-300">
+              <CheckCircle className="h-3.5 w-3.5 text-px-primary" />
+              <span>{SITE_INFO.address ? 'Présence locale' : 'France'}</span>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-[11px]">
+            <span>
+              © {new Date().getFullYear()} {SITE_INFO.name}
+            </span>
+            {legalLinks.map((l) => (
+              <React.Fragment key={l.path}>
+                <span aria-hidden="true">·</span>
+                <button type="button" onClick={() => navigateTo(l.path)} className="underline-offset-2 transition-colors hover:text-white hover:underline">
+                  {l.label}
+                </button>
+              </React.Fragment>
+            ))}
+            <span aria-hidden="true">·</span>
+            <button type="button" onClick={onOpenCookies} className="font-medium underline underline-offset-2 transition-colors hover:text-px-primary-light">
+              Gérer mes cookies
+            </button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};