create-snapify-app 0.0.0-stage → 1.1.1

package/template/themes/ai-canvas/src/Header.tsx

@@ -0,0 +1,324 @@
+/**
+ * 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, useEffect } from 'react';
+import { Phone, ArrowRight, Menu, X, ChevronDown } from 'lucide-react';
+import { ModuleSlot } from '@snapify/sdk/theme';
+import { useOptions, useSiteInfo, useSiteConfig, type MenuItemDto } from './site';
+import { SnapifyLogo } from './SnapifyLogo';
+
+const FALLBACK_MENU: MenuItemDto[] = [
+  { id: 'home', label: 'Accueil', path: '/' },
+  { id: 'contact', label: 'Contact', path: '/contact/', highlight: true },
+];
+
+interface HeaderProps {
+  currentPath: string;
+  onNavigate: (path: string) => void;
+}
+
+export const Header: React.FC<HeaderProps> = ({ currentPath, onNavigate }) => {
+  const SITE_INFO = useSiteInfo();
+  const options = useOptions();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const cfg = useSiteConfig();
+  const primaryItems = cfg?.menus.find((m) => m.id === 'primary')?.items ?? FALLBACK_MENU;
+  const mobileMenu = cfg?.menus.find((m) => m.id === 'mobile')?.items;
+  const mobileItems = mobileMenu?.length ? mobileMenu : primaryItems;
+  const primaryCta: MenuItemDto = primaryItems.find((i) => i.highlight) ?? { id: 'cta', label: 'Lorem ipsum dolor', path: '/contact/' };
+  const floating = (cfg?.floatingButtons ?? []).filter((b) => b.enabled && b.label).slice(0, 2);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 15);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const navigateTo = (path: string) => {
+    onNavigate(path);
+    setMobileMenuOpen(false);
+    setOpenDropdown(null);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const follow = (item: MenuItemDto) => {
+    const external = /^(https?:|mailto:|tel:)/.test(item.path);
+    if (item.openInNewTab) {
+      window.open(item.path, '_blank', 'noopener,noreferrer');
+    } else if (external) {
+      window.location.href = item.path;
+    } else if (item.path.startsWith('#')) {
+      document.querySelector(item.path)?.scrollIntoView({ behavior: 'smooth' });
+      setMobileMenuOpen(false);
+    } else {
+      navigateTo(item.path);
+    }
+  };
+
+  const isActive = (path: string) => (path === '/' ? currentPath === '/' : currentPath.startsWith(path.replace(/\/$/, '')));
+
+  const iconFor = (_path: string) => <ArrowRight className="w-4 h-4 text-px-primary-dark" />;
+  const descFor = (_path: string): string | undefined => undefined;
+
+  return (
+    <>
+      <header
+        className={`${options.stickyHeader ? 'sticky' : 'relative'} top-0 z-50 transition-all duration-200 bg-white ${
+          isScrolled
+            ? 'shadow-sm border-b border-px-border'
+            : 'border-b border-px-border/70'
+        }`}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-20">
+            {/* Brand Logo & Baseline */}
+            <div
+              onClick={() => navigateTo('/')}
+              className="flex items-center gap-3 cursor-pointer group select-none"
+            >
+              {cfg?.branding.logoUrl ? (
+                <img src={cfg.branding.logoUrl} alt={cfg.branding.siteName || 'Snapify'} className="h-11 w-auto max-w-[200px] object-contain" />
+              ) : (
+                <>
+                  <SnapifyLogo className="w-10 h-10" />
+                  <div>
+                    <div className="flex items-center gap-1">
+                      <span className="text-xl font-bold tracking-tight text-px-navy group-hover:text-px-primary-dark transition-colors">
+                        {(cfg?.branding.siteName || 'Snapify').replace(/®$/, '')}
+                      </span>
+                      {(cfg?.branding.siteName || '').endsWith('®') && (
+                        <span className="text-[10px] font-bold text-slate-500 align-super">®</span>
+                      )}
+                    </div>
+                    <div className="text-[11px] font-normal text-slate-500 tracking-tight leading-none">
+                      {cfg?.branding.tagline || 'Lorem ipsum dolor sit amet'}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Desktop Navigation (menu principal géré dans l'administration) */}
+            <nav className="hidden lg:flex items-center space-x-1 xl:space-x-2">
+              {primaryItems.filter((i) => !i.highlight).map((item) =>
+                item.children?.length ? (
+                  <div
+                    key={item.id}
+                    className="relative"
+                    onMouseEnter={() => setOpenDropdown(item.id)}
+                    onMouseLeave={() => setOpenDropdown(null)}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => follow(item)}
+                      className={`flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium rounded-lg transition-colors ${
+                        isActive(item.path) ? 'text-px-primary-dark font-semibold' : 'text-slate-700 hover:text-px-navy'
+                      }`}
+                    >
+                      <span>{item.label}</span>
+                      <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${openDropdown === item.id ? 'rotate-180' : ''}`} />
+                    </button>
+                    {openDropdown === item.id && (
+                      <div className="absolute top-full left-0 w-80 pt-2 z-50">
+                        <div className="bg-white rounded-2xl shadow-xl border border-px-border p-2.5 space-y-1">
+                          <div
+                            onClick={() => follow(item)}
+                            className="px-3 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-px-navy cursor-pointer"
+                          >
+                            Voir tout : {item.label} →
+                          </div>
+                          {item.children.map((child) => (
+                            <div
+                              key={child.id}
+                              onClick={() => follow(child)}
+                              className="flex items-start gap-3 p-2.5 rounded-xl hover:bg-px-surface cursor-pointer transition-colors"
+                            >
+                              <div className="p-1.5 rounded-lg bg-slate-100 shrink-0 mt-0.5">{iconFor(child.path)}</div>
+                              <div>
+                                <div className="text-xs font-semibold text-px-navy leading-tight">{child.label}</div>
+                                {descFor(child.path) ? (
+                                  <div className="text-[11px] text-slate-500 line-clamp-1 mt-0.5">{descFor(child.path)}</div>
+                                ) : null}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => follow(item)}
+                    className={`px-3.5 py-2 text-sm font-medium rounded-lg transition-colors ${
+                      isActive(item.path) ? 'text-px-primary-dark font-semibold' : 'text-slate-700 hover:text-px-navy'
+                    }`}
+                  >
+                    {item.label}
+                  </button>
+                )
+              )}
+            </nav>
+
+            {/* Right Action zone (+ slots modules : panier, compte… si actifs) */}
+            <div className="hidden lg:flex items-center gap-3">
+              {options.headerPhone ? (
+              <a
+                href={`tel:${SITE_INFO.phoneClean}`}
+                className="flex items-center gap-2 text-xs xl:text-sm font-semibold text-px-navy hover:text-px-primary-dark transition-colors py-2 px-3 rounded-lg hover:bg-slate-50"
+              >
+                <Phone className="w-4 h-4 text-px-primary-dark" />
+                <span className="font-mono tracking-tight">{SITE_INFO.phone}</span>
+              </a>
+              ) : null}
+
+              <div className="flex items-center gap-1.5">
+                <ModuleSlot name="header-actions" />
+              </div>
+
+              <button
+                type="button"
+                onClick={() => follow(primaryCta)}
+                className="btn-primary-snapify text-xs xl:text-sm !py-2.5 !px-5"
+              >
+                <span>{primaryCta.label}</span>
+                <ArrowRight className="w-4 h-4 btn-arrow" />
+              </button>
+            </div>
+
+            {/* Mobile Hamburger Button */}
+            <div className="flex items-center gap-2 lg:hidden">
+              <a
+                href={`tel:${SITE_INFO.phoneClean}`}
+                className="p-2 text-slate-700 hover:text-px-navy"
+                aria-label="Appeler Snapify"
+              >
+                <Phone className="w-5 h-5 text-px-primary-dark" />
+              </a>
+
+              <button
+                type="button"
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className="p-2 text-slate-800 hover:text-px-primary-dark rounded-lg focus:outline-none"
+                aria-label="Menu de navigation"
+              >
+                {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Fullscreen Drawer */}
+        {mobileMenuOpen && (
+          <div className="fixed inset-0 top-20 z-40 bg-white/98 backdrop-blur-md overflow-y-auto px-6 py-6 flex flex-col justify-between">
+            <div className="space-y-6">
+              {mobileItems.filter((i) => i.children?.length).map((item) => (
+                <div key={item.id}>
+                  <div className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">{item.label}</div>
+                  <div className="space-y-1">
+                    <div
+                      onClick={() => follow(item)}
+                      className="py-2 text-sm font-medium text-slate-900 border-b border-slate-100 flex items-center justify-between"
+                    >
+                      <span>Voir tout</span>
+                      <ArrowRight className="w-3.5 h-3.5 text-slate-400" />
+                    </div>
+                    {item.children!.map((child) => (
+                      <div
+                        key={child.id}
+                        onClick={() => follow(child)}
+                        className="py-2 text-sm text-slate-600 hover:text-px-navy flex items-center gap-2.5"
+                      >
+                        {iconFor(child.path)}
+                        <span>{child.label}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+
+              <div className="space-y-2 pt-2 border-t border-slate-100">
+                {mobileItems.filter((i) => !i.children?.length).map((item) => (
+                  <div
+                    key={item.id}
+                    onClick={() => follow(item)}
+                    className={`py-2 text-base font-semibold ${item.highlight ? 'text-px-primary-dark' : 'text-slate-900'}`}
+                  >
+                    {item.label}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="pt-6 border-t border-slate-200 mt-6 pb-20">
+              <a
+                href={`tel:${SITE_INFO.phoneClean}`}
+                className="flex items-center justify-center gap-2 w-full py-3 bg-slate-100 rounded-xl text-slate-900 font-semibold text-sm mb-3"
+              >
+                <Phone className="w-4 h-4 text-px-primary-dark" />
+                <span>{SITE_INFO.phone}</span>
+              </a>
+              <button
+                onClick={() => follow(primaryCta)}
+                className="w-full btn-primary-snapify !w-full justify-center"
+              >
+                <span>{primaryCta.label}</span>
+                <ArrowRight className="w-4 h-4 btn-arrow" />
+              </button>
+            </div>
+          </div>
+        )}
+      </header>
+
+      {/* Barre fixe mobile : boutons configurables dans l'administration, sinon « Appeler » + « Contact » */}
+      {options.mobileBar ? (
+      <div className="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/95 backdrop-blur-md border-t border-px-border px-4 py-2.5 shadow-lg flex items-center gap-3">
+        {floating.length ? (
+          floating.map((b) => (
+            <button
+              key={b.id}
+              type="button"
+              onClick={() => follow({ id: b.id, label: b.label, path: b.path })}
+              className={
+                b.style === 'primary'
+                  ? 'flex-1 btn-primary-snapify !py-2.5 !px-3 text-xs justify-center'
+                  : b.style === 'outline'
+                    ? 'flex-1 inline-flex items-center justify-center gap-2 py-2.5 px-3 rounded-full border border-slate-300 bg-white text-px-navy text-xs font-semibold active:bg-slate-100'
+                    : 'flex-1 inline-flex items-center justify-center gap-2 py-2.5 px-3 rounded-full bg-slate-100 text-px-navy text-xs font-semibold'
+              }
+            >
+              <span>{b.label}</span>
+            </button>
+          ))
+        ) : (
+          <>
+            <a
+              href={`tel:${SITE_INFO.phoneClean}`}
+              className="flex-1 inline-flex items-center justify-center gap-2 py-2.5 px-3 rounded-full border border-slate-300 bg-white text-px-navy text-xs font-semibold active:bg-slate-100"
+            >
+              <Phone className="w-3.5 h-3.5 text-px-primary-dark" />
+              <span>Appeler</span>
+            </a>
+
+            <button
+              onClick={() => navigateTo('/contact/')}
+              className="flex-1 btn-primary-snapify !py-2.5 !px-3 text-xs justify-center"
+            >
+              <span>Contact</span>
+              <ArrowRight className="w-3.5 h-3.5 btn-arrow" />
+            </button>
+          </>
+        )}
+      </div>
+      ) : null}
+    </>
+  );
+};

package/template/themes/ai-canvas/src/Layout.tsx

@@ -0,0 +1,56 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useEffect, useState } from 'react';
+import { ArrowUp } from 'lucide-react';
+import { useOptions } from './site';
+
+const BUTTON_RADIUS = { pill: '9999px', rounded: '0.75rem', square: '0.25rem' } as const;
+
+/** Applique les options du thème à tout le site. */
+export function Layout({ children }: { children: React.ReactNode }) {
+  const options = useOptions();
+  const [showTop, setShowTop] = useState(false);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const densityPad = options.density === 'compact' ? '0.85' : options.density === 'airy' ? '1.15' : '1';
+    root.style.setProperty('--sb-btn-radius', BUTTON_RADIUS[options.buttonShape] ?? BUTTON_RADIUS.pill);
+    root.style.setProperty('--sb-card-radius', `${Math.min(Math.max(Number(options.cardRadius) || 0, 0), 32)}px`);
+    root.style.setProperty('--ac-density', densityPad);
+    root.classList.toggle('sb-no-motion', !options.animations);
+    return () => {
+      root.style.removeProperty('--sb-btn-radius');
+      root.style.removeProperty('--sb-card-radius');
+      root.style.removeProperty('--ac-density');
+      root.classList.remove('sb-no-motion');
+    };
+  }, [options.buttonShape, options.cardRadius, options.density, options.animations]);
+
+  useEffect(() => {
+    if (!options.backToTop) return;
+    const onScroll = () => setShowTop(window.scrollY > 900);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [options.backToTop]);
+
+  return (
+    <>
+      {children}
+      {options.backToTop && showTop ? (
+        <button
+          type="button"
+          aria-label="Revenir en haut de la page"
+          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+          className="fixed bottom-24 left-1/2 z-40 flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-full border border-px-border bg-white/95 text-px-navy shadow-lg backdrop-blur transition hover:bg-px-navy hover:text-white lg:bottom-6"
+        >
+          <ArrowUp className="h-4 w-4" />
+        </button>
+      ) : null}
+    </>
+  );
+}

package/template/themes/ai-canvas/src/NotFound.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 { ArrowRight, SearchX } from 'lucide-react';
+
+interface NotFoundViewProps {
+  onNavigate: (path: string) => void;
+}
+
+export const NotFoundView: React.FC<NotFoundViewProps> = ({ onNavigate }) => {
+  return (
+    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-32 text-center space-y-8">
+      <div className="w-16 h-16 rounded-3xl bg-slate-100 text-slate-500 flex items-center justify-center mx-auto border border-slate-200">
+        <SearchX className="w-8 h-8" />
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-xs font-semibold text-px-primary-dark uppercase tracking-wider font-mono">
+          Erreur 404
+        </div>
+        <h1 className="text-3xl sm:text-4xl font-semibold tracking-tight text-px-navy">
+          Cette page n'existe pas ou a été déplacée.
+        </h1>
+        <p className="text-base text-slate-600 leading-relaxed max-w-lg mx-auto">
+          Eiusmod tempor incididunt, ut labore et dolore-magna aliqua.
+        </p>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-center gap-3 pt-4">
+        <button
+          onClick={() => onNavigate('/expertises/')}
+          className="btn-secondary-snapify"
+        >
+          <span>Enim ad</span>
+        </button>
+
+        <button
+          onClick={() => onNavigate('/realisations/')}
+          className="btn-secondary-snapify"
+        >
+          <span>Minim veniam</span>
+        </button>
+
+        <button
+          onClick={() => onNavigate('/contact/')}
+          className="btn-primary-snapify"
+        >
+          <span>Quis nostrud exercitation ullamco</span>
+          <ArrowRight className="w-4 h-4 btn-arrow" />
+        </button>
+      </div>
+    </div>
+  );
+};

package/template/themes/ai-canvas/src/Post.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 type { BlogPost } from '@snapify/sdk/content';
+import { useSiteInfo } from './site';
+
+export function Post({ post, children }: { post: BlogPost; children: React.ReactNode }) {
+  const info = useSiteInfo();
+  return (
+    <article className="py-10">
+      <header className="max-w-3xl mx-auto px-4 mb-8">
+        <p className="text-xs uppercase tracking-wider text-slate-500">Blog {info.name}</p>
+        <h1 className="mt-2 text-3xl font-bold text-px-navy">{post.title}</h1>
+        {post.excerpt ? <p className="mt-3 text-lg text-slate-600">{post.excerpt}</p> : null}
+      </header>
+      {post.coverImage ? (
+        <img src={post.coverImage} alt="" className="mx-auto mb-10 max-h-96 w-full max-w-5xl rounded-2xl object-cover px-4" />
+      ) : null}
+      {children}
+    </article>
+  );
+}

package/template/themes/ai-canvas/src/SnapifyLogo.tsx

@@ -0,0 +1,44 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+
+interface SnapifyMarkProps {
+  className?: string;
+  /** Couleur de l’étincelle et des pastilles de la fenêtre. */
+  accent?: string;
+  /** Couleur du cadre de la fenêtre. */
+  frame?: string;
+}
+
+/** Pictogramme seul : une fenêtre de navigateur dans laquelle une étincelle génère le site. */
+export const SnapifyMark: React.FC<SnapifyMarkProps> = ({
+  className = 'w-6 h-6',
+  accent = 'var(--px-primary)',
+  frame = '#FFFFFF',
+}) => (
+  <svg viewBox="0 0 40 40" className={className} aria-hidden="true">
+    <rect x="7" y="9" width="26" height="22" rx="4" fill="none" stroke={frame} strokeWidth="2.4" />
+    <path d="M7 15.5 H33" stroke={frame} strokeWidth="2.4" />
+    <circle cx="11" cy="12.3" r="1.1" fill={accent} />
+    <circle cx="14.4" cy="12.3" r="1.1" fill={accent} />
+    <path d="M20 18.2 L21.6 22 L25.4 23.6 L21.6 25.2 L20 29 L18.4 25.2 L14.6 23.6 L18.4 22 Z" fill={accent} />
+  </svg>
+);
+
+interface SnapifyLogoProps {
+  className?: string;
+}
+
+/** Pictogramme dans son badge carré sombre, utilisé en en-tête et pied de page du site public. */
+export const SnapifyLogo: React.FC<SnapifyLogoProps> = ({ className = 'w-10 h-10' }) => (
+  <div
+    className={`flex items-center justify-center rounded-xl bg-px-navy border border-slate-700/60 shadow-sm ${className}`}
+    title="Snapify — Générateur de sites web"
+  >
+    <SnapifyMark className="w-[70%] h-[70%]" />
+  </div>
+);