create-snapify-app 0.0.0-stage → 1.1.1

package/template/themes/sidibou/src/styles.css

@@ -0,0 +1,317 @@
+/**
+ * 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.
+ */
+/*
+ * Thème SidiBou. Les couleurs et polices viennent de l'identité visuelle du site (variables --px-*) ;
+ * les options du thème sont appliquées par Layout.tsx (variables --sb-* et classe sb-no-motion).
+ */
+:root {
+  --sb-btn-radius: 9999px;
+  --sb-card-radius: 1.25rem;
+}
+
+/* Custom interactive button styles as specified in brief B4 */
+.btn-primary-snapify {
+  background: var(--px-gradient);
+  color: #FFFFFF;
+  font-weight: 600;
+  border-radius: var(--sb-btn-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 14px 0 color-mix(in srgb, var(--px-primary) 25%, transparent);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.btn-primary-snapify:hover {
+  background: var(--px-primary-light);
+  color: var(--px-navy);
+  box-shadow: 0 6px 20px 0 color-mix(in srgb, var(--px-primary-light) 35%, transparent);
+}
+
+.btn-primary-snapify:hover .btn-arrow {
+  transform: translateX(4px);
+}
+
+.btn-secondary-snapify {
+  background: #FFFFFF;
+  color: var(--px-navy);
+  font-weight: 600;
+  border-radius: var(--sb-btn-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  border: 1.5px solid var(--px-navy);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.btn-secondary-snapify:hover {
+  background: var(--px-navy);
+  color: #FFFFFF;
+}
+
+.btn-arrow {
+  transition: transform 0.25s ease;
+  display: inline-block;
+}
+
+/* Card hover effect matching Apple / modern standard */
+.card-snapify {
+  background: #FFFFFF;
+  border: 1px solid var(--px-border);
+  border-radius: var(--sb-card-radius);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
+}
+
+.card-snapify:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--px-navy) 8.0%, transparent);
+  border-color: #D0D7E2;
+}
+
+@keyframes pxMarquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+@keyframes pxFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes pxShine {
+  0% { transform: translateX(-120%) skewX(-20deg); }
+  60%, 100% { transform: translateX(260%) skewX(-20deg); }
+}
+
+@keyframes pxGradientPan {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes pxBlob {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -40px) scale(1.08); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
+}
+
+@keyframes pxWordIn {
+  from { opacity: 0; transform: translateY(0.4em); filter: blur(4px); }
+  to { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+
+@keyframes pxDash {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes pxProgress {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.px-marquee { animation: pxMarquee 32s linear infinite; }
+.px-marquee:hover { animation-play-state: paused; }
+.px-float { animation: pxFloat 6s ease-in-out infinite; }
+.px-float-delay { animation: pxFloat 7s ease-in-out 1.5s infinite; }
+.px-blob { animation: pxBlob 18s ease-in-out infinite; }
+.px-word-in { animation: pxWordIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.px-progress { transform-origin: left; animation: pxProgress linear forwards; }
+
+.px-gradient-pan {
+  background-size: 200% 200%;
+  animation: pxGradientPan 10s ease infinite;
+}
+
+.px-shine {
+  position: relative;
+  overflow: hidden;
+}
+.px-shine::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+  animation: pxShine 4.5s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.px-grid-bg {
+  background-image:
+    linear-gradient(to right, color-mix(in srgb, var(--px-navy) 4.5%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--px-navy) 4.5%, transparent) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: radial-gradient(ellipse at 30% 20%, black 30%, transparent 75%);
+}
+
+.px-reveal {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.px-reveal.is-visible {
+  opacity: 1;
+  transform: none;
+}
+.px-reveal[data-anim='fade'] { transform: none; }
+.px-reveal[data-anim='zoom'] { transform: scale(0.94); }
+.px-reveal[data-anim='slide-left'] { transform: translateX(-48px); }
+.px-reveal[data-anim='slide-right'] { transform: translateX(48px); }
+.px-reveal.is-visible[data-anim] { transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .px-marquee, .px-float, .px-float-delay, .px-blob, .px-gradient-pan, .px-shine::after, .px-word-in, .px-drift {
+    animation: none !important;
+  }
+  .px-reveal { opacity: 1; transform: none; transition: none; }
+}
+
+/* Section backgrounds: decor layers sit behind content */
+.px-section {
+  position: relative;
+  overflow: hidden;
+  overflow: clip;
+  isolation: isolate;
+}
+.px-section > :not(.px-decor) {
+  position: relative;
+  z-index: 1;
+}
+.px-decor {
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+}
+.px-dots {
+  background-image: radial-gradient(color-mix(in srgb, var(--px-navy) 20.0%, transparent) 1.1px, transparent 1.2px);
+  background-size: 22px 22px;
+}
+.px-dots-teal {
+  background-image: radial-gradient(color-mix(in srgb, var(--px-primary-dark) 22%, transparent) 1.2px, transparent 1.4px);
+  background-size: 26px 26px;
+}
+.px-diagonal {
+  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--px-accent) 5%, transparent) 0 1px, transparent 1px 16px);
+}
+.px-rings {
+  background-image: repeating-radial-gradient(circle at center, transparent 0 38px, color-mix(in srgb, var(--px-primary-dark) 10%, transparent) 38px 39px);
+}
+.px-fade-mask {
+  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
+  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
+}
+.px-fade-right {
+  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 70%);
+  mask-image: linear-gradient(to left, #000 10%, transparent 70%);
+}
+.px-fade-left {
+  -webkit-mask-image: linear-gradient(to right, #000 10%, transparent 70%);
+  mask-image: linear-gradient(to right, #000 10%, transparent 70%);
+}
+@keyframes pxDrift {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(30px, -20px, 0); }
+}
+.px-drift {
+  animation: pxDrift 16s ease-in-out infinite;
+}
+
+/* Handwritten annotations (Caveat) */
+.font-hand {
+  font-family: 'Caveat', cursive;
+  font-weight: 500;
+}
+
+/* Polaroid-style photo frame with tape */
+.px-polaroid {
+  background: #fff;
+  padding: 10px 10px 0;
+  border: 1px solid var(--px-border);
+  box-shadow: 0 18px 35px -18px color-mix(in srgb, var(--px-navy) 35.0%, transparent);
+  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
+}
+.px-polaroid:hover {
+  transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
+  box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--px-navy) 45.0%, transparent);
+  z-index: 10;
+}
+.px-tape {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  width: 92px;
+  height: 26px;
+  transform: translateX(-50%) rotate(-3deg);
+  background: linear-gradient(105deg, color-mix(in srgb, var(--px-primary) 28%, transparent), color-mix(in srgb, var(--px-accent) 22%, transparent));
+  border-left: 1px dashed rgba(255, 255, 255, 0.6);
+  border-right: 1px dashed rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(1px);
+  box-shadow: 0 2px 5px color-mix(in srgb, var(--px-navy) 12.0%, transparent);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--px-surface);
+}
+::-webkit-scrollbar-thumb {
+  background: #CBD5E1;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #94A3B8;
+}
+
+/* Contenu riche issu de l'éditeur du backoffice */
+.cms-prose { color: #334155; font-size: 1.0625rem; line-height: 1.8; }
+.cms-prose > * + * { margin-top: 1.1em; }
+.cms-prose h2 { color: var(--px-navy); font-size: 1.75rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin-top: 2em; }
+.cms-prose h3 { color: var(--px-navy); font-size: 1.375rem; line-height: 1.35; font-weight: 600; margin-top: 1.7em; }
+.cms-prose h4 { color: var(--px-navy); font-size: 1.125rem; font-weight: 600; margin-top: 1.5em; }
+.cms-prose a { color: var(--px-primary-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
+.cms-prose strong { color: var(--px-navy); font-weight: 600; }
+.cms-prose ul { list-style: disc; padding-left: 1.4em; }
+.cms-prose ol { list-style: decimal; padding-left: 1.4em; }
+.cms-prose li + li { margin-top: 0.4em; }
+.cms-prose li::marker { color: var(--px-primary-dark); }
+.cms-prose blockquote { border-left: 3px solid var(--px-primary); padding: 0.25em 0 0.25em 1.2em; color: var(--px-navy); font-style: italic; }
+.cms-prose img { border-radius: 1rem; margin: 2em auto; }
+.cms-prose hr { border: 0; border-top: 1px solid var(--px-border); margin: 2.5em 0; }
+.cms-prose code { background: #f1f5f9; padding: 0.15em 0.4em; border-radius: 0.375rem; font-size: 0.9em; }
+.cms-prose [style*="text-align: center"] { text-align: center; }
+.cms-prose [style*="text-align: right"] { text-align: right; }
+
+.cms-prose-dark { color: rgb(255 255 255 / 0.75); }
+.cms-prose-dark h2, .cms-prose-dark h3, .cms-prose-dark h4, .cms-prose-dark strong, .cms-prose-dark blockquote { color: #fff; }
+.cms-prose-dark a { color: var(--px-primary-light); }
+.cms-prose-large { font-size: 1.1875rem; }
+.cms-prose h2:first-child, .cms-prose h3:first-child, .cms-prose p:first-child { margin-top: 0; }
+
+@keyframes pxMarqueeFast { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.px-marquee-slow { animation-duration: 48s; }
+.px-marquee-fast { animation-duration: 18s; }
+
+
+/* Option « Animations » désactivée */
+.sb-no-motion .px-marquee, .sb-no-motion .px-float, .sb-no-motion .px-float-delay, .sb-no-motion .px-blob,
+.sb-no-motion .px-gradient-pan, .sb-no-motion .px-shine::after, .sb-no-motion .px-word-in, .sb-no-motion .px-drift {
+  animation: none !important;
+}
+.sb-no-motion .px-reveal { opacity: 1; transform: none; transition: none; }

package/template/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "@snapify/sdk": [
+        "./sdk/index.ts"
+      ],
+      "@snapify/sdk/*": [
+        "./sdk/*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

package/template/vite.config.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig} from 'vite';
+
+export default defineConfig(() => {
+  return {
+    build: {
+      rollupOptions: {
+        input: {
+          main: path.resolve(__dirname, 'index.html'),
+          landing: path.resolve(__dirname, 'landing.html'),
+          superadmin: path.resolve(__dirname, 'superadmin.html'),
+          administrator: path.resolve(__dirname, 'administrator.html'),
+          community: path.resolve(__dirname, 'community.html'),
+          marketplace: path.resolve(__dirname, 'marketplace.html'),
+          developers: path.resolve(__dirname, 'developers.html'),
+          client: path.resolve(__dirname, 'client.html'),
+        },
+      },
+    },
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR désactivable via la variable d'environnement DISABLE_HMR.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
+      watch: process.env.DISABLE_HMR === 'true' ? null : {},
+    },
+  };
+});