create-snapify-app 0.0.0-stage → 1.1.1

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

@@ -0,0 +1,598 @@
+/**
+ * Snapify Landing — présentation CMS + commande 699 DT (français)
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
+import {
+  ArrowRight,
+  Check,
+  Menu,
+  ShieldAlert,
+  Sparkles,
+  Wand2,
+  X,
+  Zap,
+} from 'lucide-react';
+import { SnapifyMark } from '../../shared/Logo';
+import { INTL_PRICE, isTunisia, t, tIntl, type Copy } from './copy';
+import { OrderPage } from './OrderPage';
+import {
+  AgenceWebTunisiePage,
+  AlternativeShopifyPage,
+  AlternativeSquarespacePage,
+  AlternativeWixPage,
+  AlternativeWordpressPage,
+  BoutiqueEnLigneFrancePage,
+  BoutiqueEnLigneTunisiePage,
+  CreateurSiteWebPage,
+  CreationSiteWebFrancePage,
+  CreationSiteWebLyonPage,
+  CreationSiteWebMarseillePage,
+  CreationSiteWebParisPage,
+  CreationSiteWebSfaxPage,
+  CreationSiteWebSoussePage,
+  CreationSiteWebTunisPage,
+  CreationSiteWebTunisiePage,
+  PressePage,
+  SeoFrancePage,
+  SeoTunisiePage,
+  SiteVitrineFrancePage,
+  SiteVitrineTunisiePage,
+} from './SeoPages';
+import { ConditionsFrancePage, ConditionsTunisiePage } from './LegalPages';
+import type { DemoInfo } from './types';
+
+declare global {
+  interface Window {
+    __SNAPIFY_COUNTRY__?: string;
+  }
+}
+
+const MARKETPLACE = 'https://marketplace.snapify.tn';
+const COMMUNITY = 'https://community.snapify.tn';
+
+function NavLinks({ copy }: { copy: Copy }) {
+  return (
+    <>
+      <a href="/#why">{copy.nav.why}</a>
+      <a href="/#ai">{copy.nav.ai}</a>
+      <a href="/#migrate">{copy.nav.migrate}</a>
+      <a href="/#pricing">{copy.nav.pricing}</a>
+      <a href={MARKETPLACE} target="_blank" rel="noreferrer">
+        {copy.nav.marketplace}
+      </a>
+      <a href={COMMUNITY} target="_blank" rel="noreferrer">
+        {copy.nav.community}
+      </a>
+    </>
+  );
+}
+
+function Shell({ children, copy, intl }: { children: React.ReactNode; copy: Copy; intl: boolean }) {
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+  useEffect(() => setOpen(false), [location.pathname, location.hash]);
+
+  return (
+    <div>
+      <header className="lp-top">
+        <div className="lp-wrap lp-top-inner">
+          <Link to="/" className="lp-logo">
+            <div className="lp-logo-mark">
+              <SnapifyMark className="h-5 w-5" accent="#00a89d" frame="#fff" />
+            </div>
+            <span>Snapify</span>
+          </Link>
+          <nav className="lp-nav">
+            <NavLinks copy={copy} />
+          </nav>
+          <div className="lp-actions">
+            <a href="/espace-client" className="lp-btn lp-btn-ghost lp-btn-sm">
+              {copy.nav.client}
+            </a>
+            <Link to="/commander" className="lp-btn lp-btn-sm">
+              {copy.nav.order}
+            </Link>
+            <button
+              type="button"
+              className="lp-burger"
+              aria-label={open ? 'Fermer le menu' : 'Ouvrir le menu'}
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+            >
+              {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </button>
+          </div>
+        </div>
+        {open && (
+          <nav className="lp-mobile-nav lp-wrap" onClick={() => setOpen(false)}>
+            <NavLinks copy={copy} />
+            <a href="/espace-client">{copy.nav.client}</a>
+            <Link to="/commander">{copy.nav.order}</Link>
+          </nav>
+        )}
+      </header>
+      {children}
+      <footer className="lp-footer">
+        <div className="lp-wrap flex flex-wrap items-end justify-between gap-4">
+          <div>
+            <strong>Snapify</strong>
+            <div className="mt-1">{copy.footer.tag}</div>
+            <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-sm">
+              <Link to="/seo-tunisie" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                CMS Tunisie
+              </Link>
+              <Link to="/seo-france" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                CMS France
+              </Link>
+              <Link to="/alternative-wordpress" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Alternative WordPress
+              </Link>
+              <Link to="/creation-site-web-france" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Création site web France
+              </Link>
+              <Link to="/alternative-wix" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Alternative Wix
+              </Link>
+              <Link to="/creation-site-web-paris" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Site web Paris
+              </Link>
+              <Link to="/creation-site-web-tunisie" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Création site web Tunisie
+              </Link>
+              <Link to="/creation-site-web-tunis" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Site web Tunis
+              </Link>
+              <Link to="/agence-web-tunisie" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Vs agences web
+              </Link>
+              <Link to="/boutique-en-ligne-tunisie" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Boutique en ligne TN
+              </Link>
+              <Link to="/presse" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Presse
+              </Link>
+              <Link to="/conditions-utilisation" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                CGU
+              </Link>
+              <Link to={intl ? '/conditions-utilisation-tunisie' : '/conditions-utilisation-france'} style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                {intl ? 'CGU Tunisie' : 'CGU France'}
+              </Link>
+              <a href="/espace-client" style={{ color: 'var(--color-teal-dark)', fontWeight: 600 }}>
+                Espace client
+              </a>
+            </div>
+          </div>
+          <div>{copy.footer.contact}</div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function Home({ demo, copy, intl }: { demo: DemoInfo | null; copy: Copy; intl: boolean }) {
+  const [themeId, setThemeId] = useState(copy.screens.themes[0]?.id || 'mahdia');
+  const activeTheme = useMemo(
+    () => copy.screens.themes.find((x) => x.id === themeId) || copy.screens.themes[0],
+    [copy.screens.themes, themeId]
+  );
+  const painIcons = [ShieldAlert, Zap, Sparkles];
+
+  return (
+    <>
+      <section className="lp-hero">
+        <div className="lp-wrap lp-hero-grid">
+          <div className="lp-hero-copy lp-rise">
+            <p className="lp-kicker">{copy.hero.badge}</p>
+            <p className="brand-mark">{copy.hero.brand}</p>
+            <h1>{copy.hero.title}</h1>
+            <p className="lead">{copy.hero.sub}</p>
+            <div className="lp-cta-row">
+              <a href="/demo/" className="lp-btn">
+                {copy.hero.ctaDemo} <ArrowRight className="h-4 w-4" />
+              </a>
+              <Link to="/commander" className="lp-btn lp-btn-dark">
+                {copy.hero.ctaOrder}
+              </Link>
+            </div>
+          </div>
+          <div className="lp-hero-visual lp-rise-2">
+            <img
+              src="/landing/hero-ai-cms.jpg"
+              alt="Snapify — assistant IA qui génère un site, éditeur visuel et publication"
+              width={1280}
+              height={720}
+            />
+          </div>
+        </div>
+      </section>
+
+      <div className="lp-wrap">
+        <div className="lp-trust lp-rise-3">
+          {copy.trust.map((x) => (
+            <article key={x.t}>
+              <strong>{x.t}</strong>
+              <span>{x.d}</span>
+            </article>
+          ))}
+        </div>
+      </div>
+
+      <section className="lp-section" id="why">
+        <div className="lp-wrap">
+          <h2>{copy.pain.title}</h2>
+          <p className="sub">{copy.pain.sub}</p>
+          <div className="lp-pain">
+            {copy.pain.items.map((item, i) => {
+              const Icon = painIcons[i] || ShieldAlert;
+              return (
+                <article key={item.t} className="lp-pain-item">
+                  <div className="lp-pain-icon">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <h3>{item.t}</h3>
+                  <p>{item.d}</p>
+                </article>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section className="lp-section lp-ai" id="ai">
+        <div className="lp-wrap">
+          <div className="lp-ai-head">
+            <Wand2 className="h-6 w-6" style={{ color: 'var(--color-teal)' }} />
+            <div>
+              <h2>{copy.ai.title}</h2>
+              <p className="sub">{copy.ai.sub}</p>
+            </div>
+          </div>
+          <ol className="lp-steps">
+            {copy.ai.steps.map((s) => (
+              <li key={s.n}>
+                <span className="lp-step-num">{s.n}</span>
+                <div>
+                  <strong>{s.t}</strong>
+                  <p>{s.d}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+          <a href="/demo/administrator/login" className="lp-btn" style={{ marginTop: '1.75rem' }}>
+            {copy.ai.cta} <ArrowRight className="h-4 w-4" />
+          </a>
+        </div>
+      </section>
+
+      <section className="lp-migrate" id="migrate">
+        <div className="lp-wrap lp-migrate-inner">
+          <div>
+            <h2>{copy.migrate.title}</h2>
+            <p>{copy.migrate.sub}</p>
+            <Link to="/commander" className="lp-btn">
+              {copy.migrate.cta} <ArrowRight className="h-4 w-4" />
+            </Link>
+          </div>
+          <ul>
+            {copy.migrate.points.map((line) => (
+              <li key={line}>
+                <Check className="h-4 w-4" />
+                {line}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="lp-section lp-themes-section" id="screens">
+        <div className="lp-wrap">
+          <div className="lp-themes-head">
+            <div>
+              <h2>{copy.screens.title}</h2>
+              <p className="sub">{copy.screens.sub}</p>
+            </div>
+            <div className="lp-theme-tabs" role="tablist" aria-label="Thèmes">
+              {copy.screens.themes.map((th) => (
+                <button
+                  key={th.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={th.id === activeTheme.id}
+                  className={th.id === activeTheme.id ? 'is-on' : undefined}
+                  onClick={() => setThemeId(th.id)}
+                >
+                  <span className="lp-theme-tab-label">{th.label}</span>
+                  <span className="lp-theme-tab-tag">{th.tag}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="lp-theme-stage">
+            <div className="lp-theme-frame">
+              <div className="lp-theme-chrome" aria-hidden>
+                <span /><span /><span />
+              </div>
+              <img key={activeTheme.src} src={activeTheme.src} alt={`Thème ${activeTheme.label}`} />
+            </div>
+            <div className="lp-theme-meta">
+              <p className="lp-theme-meta-tag">{activeTheme.tag}</p>
+              <h3>{activeTheme.label}</h3>
+              <p>{activeTheme.desc}</p>
+              <a href="/demo/" className="lp-btn">
+                Voir en démo <ArrowRight className="h-4 w-4" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="lp-section lp-features" id="features">
+        <div className="lp-wrap">
+          <h2>{copy.features.title}</h2>
+          <p className="sub">{copy.features.sub}</p>
+          <div className="lp-feat-grid">
+            {copy.features.items.map((f) => (
+              <article key={f.t} className="lp-feat">
+                <h3>{f.t}</h3>
+                <p>{f.d}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="lp-section" id="ecosystem">
+        <div className="lp-wrap">
+          <h2>{copy.ecosystem.title}</h2>
+          <p className="sub">{copy.ecosystem.sub}</p>
+          <div className="lp-eco">
+            <a href={MARKETPLACE} target="_blank" rel="noreferrer">
+              <h3>{copy.ecosystem.marketTitle}</h3>
+              <p>{copy.ecosystem.marketDesc}</p>
+              <span>{copy.ecosystem.marketCta} →</span>
+            </a>
+            <a className="alt" href={COMMUNITY} target="_blank" rel="noreferrer">
+              <h3>{copy.ecosystem.comTitle}</h3>
+              <p>{copy.ecosystem.comDesc}</p>
+              <span>{copy.ecosystem.comCta} →</span>
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <section className="lp-section lp-pricing" id="pricing">
+        <div className="lp-wrap">
+          <h2>{copy.pricing.title}</h2>
+          <p className="sub">{copy.pricing.desc}</p>
+          <div className="lp-price-box">
+            <div>
+              <div className="lp-price-num">
+                {intl ? INTL_PRICE : demo?.priceLabel || copy.pricing.price} <small>{copy.pricing.period}</small>
+              </div>
+              <ul>
+                {copy.pricing.includes.map((line) => (
+                  <li key={line}>
+                    <Check className="mr-2 inline h-4 w-4 text-[#00a89d]" />
+                    {line}
+                  </li>
+                ))}
+              </ul>
+              <p style={{ marginTop: 12, fontSize: 13, opacity: 0.65 }}>{copy.pricing.note}</p>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12 }}>
+              <Link to="/commander" className="lp-btn" style={{ width: '100%' }}>
+                {copy.pricing.cta}
+              </Link>
+              <a href="/demo/" className="lp-btn lp-btn-ghost" style={{ width: '100%' }}>
+                {copy.demo.site}
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="lp-section" id="demo">
+        <div className="lp-wrap">
+          <h2>{copy.demo.title}</h2>
+          <p className="sub">{copy.demo.sub}</p>
+          <div className="lp-demo-panel">
+            <div>
+              <p style={{ marginTop: 0, opacity: 0.8, lineHeight: 1.55 }}>{copy.demo.reset}</p>
+              <div className="lp-cta-row">
+                <a href="/demo/" className="lp-btn">
+                  {copy.demo.site}
+                </a>
+                <a href="/administrator/login" className="lp-btn lp-btn-ghost lp-btn-on-dark">
+                  {copy.demo.admin}
+                </a>
+              </div>
+            </div>
+            {demo && (
+              <dl className="lp-creds">
+                <dt>{copy.demo.creds}</dt>
+                <dt>{copy.demo.email}</dt>
+                <dd>{demo.email}</dd>
+                <dt>{copy.demo.password}</dt>
+                <dd>{demo.password}</dd>
+              </dl>
+            )}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function ResultPage({ ok, copy }: { ok: boolean; copy: Copy }) {
+  return (
+    <div className="lp-section">
+      <div className="lp-wrap" style={{ maxWidth: 520, textAlign: 'center' }}>
+        <h2>{ok ? '✓' : '✕'}</h2>
+        <p className="sub" style={{ marginInline: 'auto' }}>
+          {ok ? copy.order.success : copy.order.fail}
+        </p>
+        <div className="lp-cta-row" style={{ justifyContent: 'center', marginTop: 24 }}>
+          <Link to="/" className="lp-btn">
+            Snapify
+          </Link>
+          {!ok && (
+            <Link to="/commander" className="lp-btn lp-btn-ghost">
+              {copy.nav.order}
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function applySeoHead(seo: {
+  title?: string;
+  description?: string;
+  keywords?: string[];
+  canonical?: string;
+  robots?: string;
+  ogImage?: string;
+  jsonLd?: object[];
+  hreflang?: { lang: string; href: string }[];
+}) {
+  if (seo.title) document.title = seo.title;
+  const setMeta = (sel: string, attr: string, val: string) => {
+    let el = document.querySelector(sel) as HTMLMetaElement | null;
+    if (!el) {
+      el = document.createElement('meta');
+      if (sel.includes('property=')) el.setAttribute('property', sel.match(/property="([^"]+)"/)![1]);
+      else el.setAttribute('name', sel.match(/name="([^"]+)"/)![1]);
+      document.head.appendChild(el);
+    }
+    el.setAttribute(attr, val);
+  };
+  if (seo.description) {
+    setMeta('meta[name="description"]', 'content', seo.description);
+    setMeta('meta[property="og:description"]', 'content', seo.description);
+  }
+  if (seo.title) setMeta('meta[property="og:title"]', 'content', seo.title);
+  if (seo.keywords?.length) setMeta('meta[name="keywords"]', 'content', seo.keywords.join(', '));
+  if (seo.robots) setMeta('meta[name="robots"]', 'content', seo.robots);
+  if (seo.ogImage) {
+    const abs = seo.ogImage.startsWith('http') ? seo.ogImage : seo.ogImage;
+    setMeta('meta[property="og:image"]', 'content', abs);
+  }
+  let link = document.querySelector('link[rel="canonical"]') as HTMLLinkElement | null;
+  if (!link) {
+    link = document.createElement('link');
+    link.rel = 'canonical';
+    document.head.appendChild(link);
+  }
+  if (seo.canonical) link.href = seo.canonical;
+  document.querySelectorAll('link[data-sa-hreflang]').forEach((n) => n.remove());
+  for (const h of seo.hreflang || []) {
+    const l = document.createElement('link');
+    l.rel = 'alternate';
+    l.hreflang = h.lang;
+    l.href = h.href;
+    l.dataset.saHreflang = '1';
+    document.head.appendChild(l);
+  }
+  document.querySelectorAll('script[data-sa-jsonld]').forEach((n) => n.remove());
+  for (const block of seo.jsonLd || []) {
+    const s = document.createElement('script');
+    s.type = 'application/ld+json';
+    s.dataset.saJsonld = '1';
+    s.textContent = JSON.stringify(block);
+    document.head.appendChild(s);
+  }
+}
+
+export function App() {
+  const [demo, setDemo] = useState<DemoInfo | null>(null);
+  const [country, setCountry] = useState(() => (typeof window === 'undefined' ? '' : window.__SNAPIFY_COUNTRY__ || ''));
+  const [params] = useSearchParams();
+  const intl = !isTunisia(country);
+  const copy = intl ? tIntl : t;
+
+  useEffect(() => {
+    fetch('/api/platform/geo')
+      .then((r) => r.json())
+      .then((g: { country?: string | null }) => setCountry(g.country || ''))
+      .catch(() => setCountry(window.__SNAPIFY_COUNTRY__ || ''));
+  }, []);
+
+  useEffect(() => {
+    fetch('/api/platform/landing')
+      .then((r) => r.json())
+      .then(setDemo)
+      .catch(() => undefined);
+  }, []);
+
+  const location = useLocation();
+
+  useEffect(() => {
+    const path = location.pathname || '/';
+    fetch(`/api/superadmin/seo-public?path=${encodeURIComponent(path)}`)
+      .then((r) => r.json())
+      .then((seo) => applySeoHead(seo))
+      .catch(() => {
+        // Fallback si API indisponible
+        if (intl) {
+          applySeoHead({
+            title: 'Snapify — CMS moderne sans PHP | Alternative WordPress · 99 €/an',
+            description:
+              'CMS Node pour la France : IA, édition visuelle, migration WordPress. Installation 48 h — 99 €/an.',
+            keywords: ['CMS France', 'alternative WordPress', 'CMS sans PHP', 'site web IA'],
+            canonical: `https://snapify.fr${path}`,
+          });
+        }
+      });
+    void fetch('/api/superadmin/track', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: path + location.search, ref: document.referrer }),
+    }).catch(() => undefined);
+  }, [intl, location.pathname, location.search]);
+
+  useEffect(() => {
+    const paymentId = params.get('payment_id');
+    if (paymentId?.startsWith('mock_')) {
+      void fetch(`/api/platform/flouci/mock-complete?payment_id=${encodeURIComponent(paymentId)}`).catch(() => undefined);
+    }
+  }, [params]);
+
+  return (
+    <Shell copy={copy} intl={intl}>
+      <Routes>
+        <Route path="/" element={<Home demo={demo} copy={copy} intl={intl} />} />
+        <Route path="/commander" element={<OrderPage demo={demo} copy={copy} intl={intl} />} />
+        <Route path="/commander/success" element={<ResultPage ok copy={copy} />} />
+        <Route path="/commander/fail" element={<ResultPage ok={false} copy={copy} />} />
+        <Route path="/seo-tunisie" element={<SeoTunisiePage />} />
+        <Route path="/seo-france" element={<SeoFrancePage />} />
+        <Route path="/alternative-wordpress" element={<AlternativeWordpressPage intl={intl} />} />
+        <Route path="/presse" element={<PressePage intl={intl} />} />
+        <Route path="/creation-site-web-france" element={<CreationSiteWebFrancePage />} />
+        <Route path="/alternative-wix" element={<AlternativeWixPage />} />
+        <Route path="/alternative-shopify" element={<AlternativeShopifyPage />} />
+        <Route path="/alternative-squarespace" element={<AlternativeSquarespacePage />} />
+        <Route path="/boutique-en-ligne-france" element={<BoutiqueEnLigneFrancePage />} />
+        <Route path="/site-vitrine-france" element={<SiteVitrineFrancePage />} />
+        <Route path="/creation-site-web-paris" element={<CreationSiteWebParisPage />} />
+        <Route path="/creation-site-web-lyon" element={<CreationSiteWebLyonPage />} />
+        <Route path="/creation-site-web-marseille" element={<CreationSiteWebMarseillePage />} />
+        <Route path="/createur-site-web" element={<CreateurSiteWebPage />} />
+        <Route path="/creation-site-web-tunisie" element={<CreationSiteWebTunisiePage />} />
+        <Route path="/creation-site-web-tunis" element={<CreationSiteWebTunisPage />} />
+        <Route path="/creation-site-web-sfax" element={<CreationSiteWebSfaxPage />} />
+        <Route path="/creation-site-web-sousse" element={<CreationSiteWebSoussePage />} />
+        <Route path="/boutique-en-ligne-tunisie" element={<BoutiqueEnLigneTunisiePage />} />
+        <Route path="/site-vitrine-tunisie" element={<SiteVitrineTunisiePage />} />
+        <Route path="/agence-web-tunisie" element={<AgenceWebTunisiePage />} />
+        <Route path="/conditions-utilisation" element={intl ? <ConditionsFrancePage /> : <ConditionsTunisiePage />} />
+        <Route path="/conditions-utilisation-france" element={<ConditionsFrancePage />} />
+        <Route path="/conditions-utilisation-tunisie" element={<ConditionsTunisiePage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Shell>
+  );
+}