41a40ff936
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled
Handler new: /var/www/html/api/inject-products.py - Mass injection doctrine 60 sur /var/www/html/products/ subfolder - 104 pages HTML traitees en 1 pass - GOLD backup systematique: vault-gold/opus/products-NAME.html.doctrine195-TS.bak - chattr +i/-i atomic handling - Includes mobile fix responsive bot-widget (doctrine 194 pattern) Resultats: - OK=104 ALREADY=0 ERR=0 TOTAL=104 (100 percent success) - Health checks HTTP 200 sur consulting/leadforge/academy/arsenal/bizplan Coverage GLOBAL maintenant: - Root: 322/325 = 99.1 percent (2 exclusions legitimes wevia/monitor) - Products: 104/104 = 100 percent COMPLETE - TOTAL: 426 pages UX doctrine 60 Cumul session Opus: - 45 tags (44+1) - 35 doctrines vault (146-195) - 426 pages UX doctrine 60 (was 323, +104) - NR 153/153 invariant 53 phases Handler inject-products.py battle-tested - reusable pour autres subdirs. ZERO regression. ZERO ecrasement.
410 lines
28 KiB
HTML
410 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>CanvasAI — Design IA Visuel | WEVAL</title>
|
|
<meta name="description" content="CanvasAI — Design IA Visuel - Solutions IA souveraines pour entreprises">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>:root{--bg:#05080f;--s:#0c1222;--s2:#111a2e;--a:#ec4899;--a15:rgba(236,72,153,0.15);--a08:rgba(236,72,153,0.08);--a30:rgba(236,72,153,0.3);--sv:#7a8ba5;--w:#edf2f7;--d:#1a2340}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{scroll-behavior:smooth}
|
|
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--w);overflow-x:hidden}
|
|
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:1000}
|
|
nav{position:fixed;top:0;width:100%;padding:1rem 4%;display:flex;justify-content:space-between;align-items:center;z-index:100;backdrop-filter:blur(20px);background:rgba(5,8,15,0.85);border-bottom:1px solid var(--a08)}
|
|
.logo{font-weight:800;font-size:1.4rem;text-decoration:none;color:var(--w)}.logo span{color:var(--a)}
|
|
.nav-links{display:flex;gap:1.5rem;align-items:center}
|
|
.nav-links a{color:var(--sv);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s}
|
|
.nav-links a:hover{color:var(--a)}
|
|
.btn-n{background:var(--a);color:var(--bg);padding:.55rem 1.3rem;border-radius:7px;font-weight:700;font-size:.82rem;text-decoration:none;transition:all .3s}
|
|
.btn-n:hover{transform:translateY(-1px);opacity:.9}
|
|
|
|
/* HERO */
|
|
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem 4% 4rem;position:relative}
|
|
.hero::after{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(236,72,153,0.06) 0%,transparent 70%);top:10%;left:50%;transform:translateX(-50%);pointer-events:none}
|
|
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--a15);border:1px solid rgba(236,72,153,0.2);border-radius:100px;padding:.35rem 1rem;font-size:.75rem;font-weight:600;color:var(--a);margin-bottom:2rem}
|
|
h1{font-size:3.2rem;font-weight:800;line-height:1.08;letter-spacing:-.04em;margin-bottom:1.2rem;max-width:700px}
|
|
h1 em{font-style:normal;color:var(--a)}
|
|
.sub{font-size:1.05rem;color:var(--sv);max-width:520px;line-height:1.7;margin-bottom:2rem}
|
|
.btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
|
|
.btn-p{background:var(--a);color:var(--bg);padding:.85rem 2rem;border-radius:8px;font-weight:700;text-decoration:none;transition:all .3s;font-family:'Outfit',sans-serif;border:none;cursor:pointer;font-size:1rem}
|
|
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(236,72,153,0.25)}
|
|
.btn-o{background:transparent;color:var(--w);padding:.85rem 2rem;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.12);font-weight:600;transition:all .3s}
|
|
.btn-o:hover{border-color:var(--a);color:var(--a)}
|
|
.stats{display:flex;gap:3rem;margin-top:3rem}
|
|
.stat{text-align:center}
|
|
.stat-v{font-family:'Space Mono',monospace;font-size:1.8rem;font-weight:700;color:var(--a)}
|
|
.stat-l{font-size:.78rem;color:var(--sv);margin-top:.2rem}
|
|
|
|
/* SECTIONS */
|
|
.sec{padding:5rem 4%;max-width:1200px;margin:0 auto}
|
|
.stag{font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--a);margin-bottom:1rem}
|
|
h2{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.8rem}
|
|
.sd{color:var(--sv);font-size:.95rem;line-height:1.7;max-width:500px;margin-bottom:2.5rem}
|
|
|
|
/* FEATURES */
|
|
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
|
|
.cd{background:var(--s);border:1px solid var(--a08);border-radius:14px;padding:1.6rem;transition:all .3s}
|
|
.cd:hover{border-color:var(--a30);transform:translateY(-3px)}
|
|
.cd-i{font-size:1.8rem;margin-bottom:.6rem}
|
|
.cd h3{font-size:1rem;font-weight:600;margin-bottom:.35rem}
|
|
.cd p{font-size:.82rem;color:var(--sv);line-height:1.55}
|
|
|
|
/* STEPS */
|
|
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;margin:3rem 0}
|
|
.step{position:relative}
|
|
.step-n{width:44px;height:44px;border-radius:50%;background:var(--a15);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;font-family:'Space Mono',monospace;font-weight:700;color:var(--a)}
|
|
.step h3{font-size:.95rem;font-weight:600;margin-bottom:.3rem}
|
|
.step p{font-size:.8rem;color:var(--sv);line-height:1.5}
|
|
|
|
/* PRICING */
|
|
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
|
|
.pr{background:var(--s);border:1px solid var(--a08);border-radius:16px;padding:1.8rem;transition:all .3s}
|
|
.pr.pop{border-color:var(--a);position:relative}
|
|
.pr.pop::before{content:'Populaire';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--a);color:var(--bg);padding:.2rem .8rem;border-radius:100px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
|
|
.pr:hover{transform:translateY(-3px)}
|
|
.pr-name{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--sv);margin-bottom:.6rem}
|
|
.pr-amt{font-family:'Space Mono',monospace;font-size:2.5rem;font-weight:700;margin-bottom:.8rem}
|
|
.pr-amt sub{font-size:.8rem;color:var(--sv);font-family:'Outfit'}
|
|
.pr-list{list-style:none;margin-bottom:1.2rem}
|
|
.pr-list li{font-size:.8rem;color:var(--sv);padding:.3rem 0}
|
|
.pr-list li::before{content:'✓';color:var(--a);font-weight:700;margin-right:.4rem}
|
|
.btn-f{display:block;padding:.7rem;border-radius:8px;font-weight:600;font-size:.85rem;text-decoration:none;text-align:center;background:var(--a);color:var(--bg)}
|
|
.btn-l{display:block;padding:.7rem;border-radius:8px;font-weight:600;font-size:.85rem;text-decoration:none;text-align:center;border:1px solid rgba(255,255,255,.12);color:var(--w)}
|
|
|
|
/* CTA */
|
|
.cta{text-align:center;padding:4rem 2rem;margin:2rem 4%;background:linear-gradient(135deg,var(--s),rgba(236,72,153,.04));border:1px solid var(--a08);border-radius:20px}
|
|
.cta p{color:var(--sv);max-width:450px;margin:.5rem auto 1.5rem;font-size:.95rem;line-height:1.6}
|
|
|
|
/* CHAT */
|
|
.chat-sec{padding:3rem 4%;max-width:900px;margin:0 auto}
|
|
.chat-box{background:var(--s);border:1px solid var(--a08);border-radius:16px;overflow:hidden}
|
|
.chat-hd{padding:1rem 1.5rem;border-bottom:1px solid var(--a08);display:flex;align-items:center;gap:.8rem}
|
|
.chat-hd-i{width:32px;height:32px;background:var(--a15);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--a)}
|
|
.chat-hd-i svg{width:16px;height:16px}
|
|
.chat-hd h3{font-size:.95rem;font-weight:600}
|
|
.chat-hd small{font-size:.72rem;color:var(--sv)}
|
|
.chat-msgs{min-height:300px;max-height:450px;overflow-y:auto;padding:1.2rem 1.5rem}
|
|
.chat-empty{text-align:center;padding:3rem 1rem;color:var(--sv)}
|
|
.chat-empty h4{margin-bottom:.5rem;color:var(--w);font-size:1rem}
|
|
.chat-empty p{font-size:.82rem;margin-bottom:1.2rem}
|
|
.chat-sug{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
|
|
.chat-sug button{padding:.45rem .9rem;background:var(--a15);border:1px solid rgba(236,72,153,0.2);border-radius:20px;color:var(--a);font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s}
|
|
.chat-sug button:hover{opacity:.8;transform:translateY(-1px)}
|
|
.msg-u{background:var(--a15);border:1px solid rgba(236,72,153,0.2);border-radius:10px 10px 4px 10px;padding:.7rem 1rem;margin:8px 0;max-width:75%;margin-left:auto;font-size:.85rem;color:var(--w);line-height:1.5;animation:fi .2s}
|
|
.msg-a{background:var(--s2);border:1px solid rgba(255,255,255,.06);border-radius:4px 10px 10px 10px;padding:.8rem 1.1rem;margin:8px 0;max-width:90%;font-size:.85rem;color:var(--w);line-height:1.7;animation:fi .2s}
|
|
.msg-a pre{background:var(--bg);padding:.8rem;border-radius:8px;overflow-x:auto;font-family:'Space Mono',monospace;font-size:.78rem;margin:.5rem 0}
|
|
.msg-a code{font-family:'Space Mono',monospace;font-size:.78rem;background:var(--bg);padding:.1rem .3rem;border-radius:4px}
|
|
.msg-a table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.78rem}
|
|
.msg-a th,.msg-a td{padding:.5rem .7rem;border:1px solid rgba(255,255,255,.06);text-align:left}
|
|
.msg-a th{background:var(--bg);font-weight:600;color:var(--sv)}
|
|
.msg-a h2,.msg-a h3{color:var(--w);margin:.8rem 0 .4rem;font-size:.95rem}
|
|
.msg-a strong{color:var(--w)}
|
|
.chat-input{padding:1rem 1.5rem;border-top:1px solid var(--a08);display:flex;gap:.6rem}
|
|
.chat-input textarea{flex:1;resize:none;min-height:40px;max-height:120px;font-family:'Outfit',sans-serif;font-size:.85rem;line-height:1.5;background:var(--bg);border:1px solid rgba(255,255,255,.08);color:var(--w);border-radius:8px;padding:.6rem .8rem;outline:none}
|
|
.chat-input textarea:focus{border-color:var(--a)}
|
|
.chat-input button{padding:.6rem 1.2rem;background:var(--a);color:var(--bg);border:none;border-radius:8px;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;align-self:flex-end}
|
|
.chat-input button:hover{opacity:.9}
|
|
|
|
/* LOADING */
|
|
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes p{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.ld{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a);margin:0 3px;animation:p .8s infinite}
|
|
.ld:nth-child(2){animation-delay:.2s}
|
|
.ld:nth-child(3){animation-delay:.4s}
|
|
|
|
/* FOOTER */
|
|
footer{padding:2rem 4%;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.04);font-size:.75rem;color:var(--sv)}
|
|
footer a{color:var(--a);text-decoration:none}
|
|
|
|
/* RESPONSIVE */
|
|
@media(max-width:900px){
|
|
h1{font-size:2.2rem}
|
|
.g3,.pg{grid-template-columns:1fr}
|
|
.steps{grid-template-columns:repeat(2,1fr)}
|
|
.stats{gap:1.5rem}
|
|
.nav-links{display:none}
|
|
footer{flex-direction:column;gap:.5rem;text-align:center}
|
|
.hero::after{display:none}
|
|
}
|
|
.dm-box{background:linear-gradient(135deg,#111827,#0f172a);border:1px solid #1e293b;border-radius:16px;padding:28px 24px;margin:24px auto;max-width:700px}.dm-box h3{font-size:16px;font-weight:700;color:#f1f5f9;margin-bottom:14px}.dm-row{display:flex;gap:10px;margin-bottom:12px}.dm-row input{flex:1;padding:12px 16px;background:#0b0d14;border:1px solid #1e293b;border-radius:10px;color:#e2e8f0;font-size:14px;font-family:inherit}.dm-row input:focus{outline:none;border-color:#d4a843}.dm-row input::placeholder{color:#475569}.dm-row button{padding:12px 24px;background:linear-gradient(135deg,#d4a843,#b8942e);color:#0a0d13;border:none;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;white-space:nowrap}.dm-out{padding:16px;background:rgba(255,255,255,.02);border:1px solid #1e293b;border-radius:10px;color:#94a3b8;font-size:13px;line-height:1.6;min-height:60px;white-space:pre-wrap}.dm-out b,.dm-out strong{color:#e2e8f0}.dm-ld{display:inline-block;width:8px;height:8px;background:#d4a843;border-radius:50%;margin-right:4px;animation:dmP 1.2s ease-in-out infinite}.dm-ld:nth-child(2){animation-delay:.2s}.dm-ld:nth-child(3){animation-delay:.4s}@keyframes dmP{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
|
|
input,select,textarea{background:#0b0d14!important;color:#e2e8f0!important;border:1px solid #1e293b!important;border-radius:8px!important}input::placeholder{color:#475569!important}</style>
|
|
<style>/* Hide nav in iframe */
|
|
@media all{.in-iframe nav{display:none!important}.in-iframe .hero{padding-top:3rem!important;min-height:auto!important}.in-iframe footer{display:none!important}.in-iframe .cta{display:none!important}.in-iframe .wv-links{display:none!important}.wv-links{display:none!important}}</style>
|
|
<script>if(window!==window.top)document.documentElement.classList.add('in-iframe');</script>
|
|
<link rel="canonical" href="https://weval-consulting.com/products/canvasai.html">
|
|
<meta property="og:title" content="CanvasAI — Design IA Visuel | WEVAL">
|
|
<meta property="og:description" content="CanvasAI — Design IA Visuel - Solutions IA souveraines pour entreprises">
|
|
<meta property="og:url" content="https://weval-consulting.com/products/canvasai.html">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="WEVAL Consulting">
|
|
<meta property="og:image" content="https://weval-consulting.com/assets/logo-weval-png-DChrMGao.png">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="CanvasAI — Design IA Visuel | WEVAL">
|
|
<meta name="twitter:description" content="CanvasAI — Design IA Visuel - Solutions IA souveraines pour entreprises">
|
|
<link rel="alternate" hreflang="fr" href="https://weval-consulting.com/products/canvasai.html">
|
|
<link rel="alternate" hreflang="x-default" href="https://weval-consulting.com/products/canvasai.html">
|
|
<style>
|
|
.wevia-progress{width:100%;background:rgba(99,102,241,.15);border-radius:8px;overflow:hidden;height:6px;margin:8px 0}
|
|
.wevia-progress-bar{height:100%;background:linear-gradient(90deg,#6366f1,#a78bfa,#6366f1);background-size:200%;animation:weviaShimmer 1.5s infinite;border-radius:8px;transition:width .3s}
|
|
.wevia-progress-text{font-size:11px;color:#a0a0b0;margin-top:4px;text-align:center}
|
|
@keyframes weviaShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/dark-iframe.css">
|
|
<!-- DOCTRINE-60-UX-ENRICH products-batch-doctrine195 -->
|
|
<style id="wtp-doctrine60-ux-premium">
|
|
:root {
|
|
--wtp-bg-start:#0a0f1c; --wtp-bg-end:#0f172a;
|
|
--wtp-surface:rgba(15,23,42,.85); --wtp-surface-hover:rgba(30,41,59,.9);
|
|
--wtp-border:rgba(99,102,241,.25); --wtp-border-hover:rgba(99,102,241,.5);
|
|
--wtp-text:#e2e8f0; --wtp-text-dim:#94a3b8; --wtp-text-bright:#f1f5f9;
|
|
--wtp-primary:#6366f1; --wtp-primary-hover:#7c7feb;
|
|
--wtp-accent:#8b5cf6; --wtp-success:#10b981; --wtp-warning:#f59e0b; --wtp-danger:#ef4444;
|
|
--wtp-radius:12px; --wtp-shadow:0 4px 24px rgba(99,102,241,.15); --wtp-shadow-lg:0 8px 48px rgba(99,102,241,.25);
|
|
--wtp-transition:all .2s cubic-bezier(.4,0,.2,1);
|
|
--wtp-font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--wtp-font-mono:'JetBrains Mono',monospace;
|
|
}
|
|
.wtp-card{background:var(--wtp-surface);border:1px solid var(--wtp-border);border-radius:var(--wtp-radius);padding:20px;transition:var(--wtp-transition)}
|
|
.wtp-card:hover{border-color:var(--wtp-border-hover);box-shadow:var(--wtp-shadow)}
|
|
.wtp-btn{background:linear-gradient(135deg,var(--wtp-primary),var(--wtp-accent));color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:var(--wtp-transition)}
|
|
.wtp-btn:hover{transform:translateY(-1px);box-shadow:var(--wtp-shadow)}
|
|
.wtp-badge{display:inline-flex;align-items:center;padding:4px 10px;background:var(--wtp-surface);border:1px solid var(--wtp-border);border-radius:20px;font-size:12px;color:var(--wtp-text-dim)}
|
|
@media (max-width:768px){#weval-bot-widget{bottom:100px !important;right:16px !important;z-index:10001 !important}#weval-bot-btn{width:48px !important;height:48px !important}#weval-bot-btn svg{width:22px !important;height:22px !important}#footer_banner,.footer-banner,[class*="footer-bandeau"]{z-index:9990 !important}}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<a href="/products/" class="logo">WE<span>VAL</span></a>
|
|
<div class="nav-links">
|
|
<a href="#features">Fonctionnalités</a>
|
|
<a href="#pricing">Tarifs</a>
|
|
<a href="#cta">Essayer</a>
|
|
<a href="/products/workspace.html" class="btn-n">Workspace →</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="badge">Design IA — Logos & Visuels pro</div>
|
|
<h1>CanvasAI — <em>Design IA Visuel</em></h1>
|
|
<p class="sub">Créez logos, bannières, visuels social media et infographies professionnels avec l'intelligence artificielle.</p>
|
|
<div class="btns">
|
|
<a href="#cta" class="btn-p">Essayer gratuitement →</a>
|
|
<a href="#features" class="btn-o">Découvrir</a>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat"><div class="stat-v">20K+</div><div class="stat-l">Visuels créés</div></div>
|
|
<div class="stat"><div class="stat-v">15+</div><div class="stat-l">Formats</div></div>
|
|
<div class="stat"><div class="stat-v">< 2 min</div><div class="stat-l">Temps moyen</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="sec" id="features">
|
|
<div class="stag">Fonctionnalités</div>
|
|
<h2>Tout ce dont vous avez besoin</h2>
|
|
<div class="sd">CanvasAI combiné intelligence artificielle et expertise métier pour automatiser vos tâches les plus complexes.</div>
|
|
<div class="g3">
|
|
<div class="cd"><div class="cd-i">🎨</div><h3>Logos</h3><p>Génération de logos professionnels avec variations et déclinaisons.</p></div>
|
|
<div class="cd"><div class="cd-i">🖼️</div><h3>Bannières LinkedIn</h3><p>Bannières et covers optimisées pour LinkedIn, profil et page entreprise.</p></div>
|
|
<div class="cd"><div class="cd-i">📱</div><h3>Visuels Social</h3><p>Posts Instagram, Facebook, Twitter aux dimensions parfaites.</p></div>
|
|
<div class="cd"><div class="cd-i">📊</div><h3>Infographies</h3><p>Infographies data-driven avec visualisations et statistiques.</p></div>
|
|
<div class="cd"><div class="cd-i">🎯</div><h3>Templates Brand</h3><p>Charte graphique, palette de couleurs, typographie et guidelines.</p></div>
|
|
<div class="cd"><div class="cd-i">📤</div><h3>Export Multi-format</h3><p>PNG, SVG, PDF — résolutions web et print.</p></div>
|
|
<div class="cd"><div class="cd-i">🤖</div><h3>Style Transfer</h3><p>Adaptez le style d'un visuel : minimaliste, corporate, créatif, vintage.</p></div>
|
|
<div class="cd"><div class="cd-i">🔄</div><h3>Variations</h3><p>Générez 5 variations d'un même concept pour A/B testing.</p></div>
|
|
<div class="cd"><div class="cd-i">📐</div><h3>Responsive Design</h3><p>Adaptation automatique de vos visuels à tous les formats.</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW IT WORKS -->
|
|
<section class="sec">
|
|
<div class="stag">Comment ça marche</div>
|
|
<h2>Simple comme 1-2-3-4</h2>
|
|
<div class="sd">De la demande au résultat en quelques minutes.</div>
|
|
<div class="steps">
|
|
<div class="step"><div class="step-n">1</div><h3>Décrivez le visuel</h3><p>Type (logo, bannière, post), style, couleurs et contenu souhaité.</p></div>
|
|
<div class="step"><div class="step-n">2</div><h3>L'IA crée</h3><p>Génération de concepts avec variations de style et mise en page.</p></div>
|
|
<div class="step"><div class="step-n">3</div><h3>Affinez</h3><p>Ajustez couleurs, texte, composition et éléments graphiques.</p></div>
|
|
<div class="step"><div class="step-n">4</div><h3>Exportez</h3><p>Téléchargez en PNG, SVG ou PDF dans la résolution souhaitée.</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRICING -->
|
|
<section class="sec" id="pricing">
|
|
<div class="stag">Tarifs</div>
|
|
<h2>Un plan pour chaque besoin</h2>
|
|
<div class="sd">Commencez gratuitement, évoluez quand vous êtes prêt.</div>
|
|
<div class="pg">
|
|
<div class="pr">
|
|
<div class="pr-name">Starter</div>
|
|
<div class="pr-amt">29€<sub>/mois</sub></div>
|
|
<ul class="pr-list">
|
|
<li>20 visuels/mois</li>
|
|
<li>3 formats</li>
|
|
<li>Export PNG</li>
|
|
<li>Résolution web</li>
|
|
</ul>
|
|
<a href="#cta" class="btn-l">Commencer →</a>
|
|
</div>
|
|
<div class="pr pop">
|
|
<div class="pr-name">Pro</div>
|
|
<div class="pr-amt">99€<sub>/mois</sub></div>
|
|
<ul class="pr-list">
|
|
<li>Visuels illimités</li>
|
|
<li>Tous les formats</li>
|
|
<li>Export SVG/PDF</li>
|
|
<li>Templates brand</li>
|
|
<li>Variations</li>
|
|
<li>Support design</li>
|
|
</ul>
|
|
<a href="#cta" class="btn-f">Commencer →</a>
|
|
</div>
|
|
<div class="pr">
|
|
<div class="pr-name">Enterprise</div>
|
|
<div class="pr-amt">Sur mesure</div>
|
|
<ul class="pr-list">
|
|
<li>Volume illimité</li>
|
|
<li>Charte graphique custom</li>
|
|
<li>API génération</li>
|
|
<li>Brand guidelines</li>
|
|
<li>Account manager</li>
|
|
<li>Print-ready</li>
|
|
</ul>
|
|
<a href="#cta" class="btn-l">Nous contacter</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<div style="display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:1.5rem 4%;margin:1rem 0">
|
|
<div style="display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#7a8ba5"><strong style="color:#edf2f7">44</strong> produits SaaS</div>
|
|
<div style="display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#7a8ba5"><strong style="color:#edf2f7">Cloud</strong> souverain</div>
|
|
<div style="display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#7a8ba5"><strong style="color:#edf2f7">API</strong> REST</div>
|
|
<div style="display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#7a8ba5"><strong style="color:#edf2f7">RGPD</strong> conforme</div>
|
|
<div style="display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#7a8ba5"><strong style="color:#edf2f7">France</strong> · Maroc · États-Unis · International</div>
|
|
</div>
|
|
|
|
|
|
<div class="dm-box" id="demo"><h3>⚡ Design IA — Demo Live</h3>
|
|
<div class="dm-row"><input id="dm-canvasai" placeholder="Décrivez le visuel souhaite" onkeydown="if(event.key==='Enter')dm_canvasai()"><button onclick="dm_canvasai()">Tester</button></div>
|
|
<div class="dm-out" id="dmo-canvasai">Entrez votre demande et testez Design IA en direct. Aucune inscription requise.</div></div>
|
|
<script>
|
|
async function dm_canvasai(){
|
|
var q=document.getElementById("dm-canvasai").value.trim();
|
|
if(!q)return;
|
|
var o=document.getElementById("dmo-canvasai");
|
|
o.innerHTML='<span class="dm-ld"></span><span class="dm-ld"></span><span class="dm-ld"></span> Génération en cours...';
|
|
try{
|
|
var r=await fetch("/api/weval-ia-fast.php",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:"[INSTRUCTION SYSTEME: Reponds de facon structurée et professionnelle avec des sections claires.]\n\nDemande utilisateur: Génère un brief creatif détaillé pour: "+q,mode:"full"})});
|
|
var j=await r.json();
|
|
o.innerHTML=(j.response||"Erreur").replace(/\*\*(.*?)\*\*/g,"<strong>$1</strong>").replace(/\n\n/g,"<br><br>").replace(/`(.*?)`/g,"<code>$1</code>");
|
|
}catch(e){o.innerHTML="Erreur: "+e.message}
|
|
}
|
|
</script>
|
|
<section class="cta">
|
|
<h2>Prêt à essayer CanvasAI ?</h2>
|
|
<p>Testez CanvasAI gratuitement et découvrez comment l'IA peut transformer votre productivité.</p>
|
|
<a href="#cta" class="btn-p">Essayer maintenant →</a>
|
|
</section>
|
|
|
|
<!-- CHAT IA -->
|
|
<section class="chat-sec" id="chat">
|
|
<div class="stag">Essayer maintenant</div>
|
|
<h2>Testez CanvasAI en direct</h2>
|
|
<div class="sd">Posez votre question, l'IA vous répond instantanément.</div>
|
|
<div class="chat-box">
|
|
<div class="chat-hd">
|
|
<div class="chat-hd-i"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></div>
|
|
<div><h3>CanvasAI</h3><small>Design IA Visuel</small></div>
|
|
</div>
|
|
<div class="chat-msgs" id="chat-msgs">
|
|
<div class="chat-empty" id="chat-empty">
|
|
<h4>👋 Bienvenue sur CanvasAI</h4>
|
|
<p>Créez logos, bannières, visuels social media et infographies professionnels avec l'intelligence artificielle.</p>
|
|
<div class="chat-sug">
|
|
<button onclick="sg('Conçois un logo minimaliste pour une startup fintech appelée PayFlow')">Logo startup</button>
|
|
<button onclick="sg('Crée un concept de bannière LinkedIn pour un consultant IA')">Bannière LinkedIn</button>
|
|
<button onclick="sg('Génère un visuel Instagram pour promouvoir un webinar sur le marketing digital')">Post Instagram</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input">
|
|
<textarea id="chat-i" rows="1" placeholder="Posez votre question..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();send()}" oninput="this.style.height='40px';this.style.height=Math.min(this.scrollHeight,120)+'px'"></textarea>
|
|
<button onclick="send()">Envoyer</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div>© 2026 <a href="/products/">WEVAL Consulting</a> — Solutions IA Souveraines</div>
|
|
<div><a href="/products/workspace.html">Workspace</a> · <a href="/products/arsenal.html">Arsenal</a> · <a href="/products/services.html">Services</a></div>
|
|
</footer>
|
|
|
|
<script>
|
|
const CTX="Tu es CanvasAI, expert en design graphique IA. Aide les utilisateurs à conceptualiser des logos, bannières, visuels social media et infographies professionnels.";
|
|
let hist=[];
|
|
function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
|
|
function md(m){return m.replace(/```[\w]*\n([\s\S]*?)```/g,'<pre>$1</pre>').replace(/^### (.*$)/gm,'<h3>$1</h3>').replace(/^## (.*$)/gm,'<h2>$1</h2>').replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>').replace(/\*(.*?)\*/g,'<em>$1</em>').replace(/`(.*?)`/g,'<code>$1</code>').replace(/^- (.*$)/gm,'<li>$1</li>').replace(/\n\n/g,'<br><br>')}
|
|
function sg(q){document.getElementById('chat-i').value=q;send()}
|
|
async function send(){
|
|
const i=document.getElementById('chat-i'),m=i.value.trim();if(!m)return;
|
|
const a=document.getElementById('chat-msgs'),es=document.getElementById('chat-empty');
|
|
if(es)es.remove();
|
|
a.innerHTML+='<div class="msg-u">'+esc(m)+'</div>';
|
|
i.value='';i.style.height='40px';a.scrollTop=a.scrollHeight;
|
|
const lid='l'+Date.now();
|
|
a.innerHTML+='<div class="msg-a" id="'+lid+'"><span class="ld"></span><span class="ld"></span><span class="ld"></span></div>';
|
|
a.scrollTop=a.scrollHeight;
|
|
try{
|
|
hist.push({role:'user',content:m});
|
|
const r=await fetch('/api/weval-ia-fast.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:'[INSTRUCTION SYSTEME: '+CTX+']\n\nDemande utilisateur: '+m,mode:'full',history:hist.slice(-6)})});
|
|
const j=await r.json();
|
|
const rp=j.response||j.error||'Erreur';
|
|
hist.push({role:'assistant',content:rp});
|
|
const el=document.getElementById(lid);
|
|
if(el)el.outerHTML='<div class="msg-a">'+md(rp)+'</div>';
|
|
}catch(ex){
|
|
const el=document.getElementById(lid);
|
|
if(el)el.outerHTML='<div class="msg-a" style="border-color:rgba(248,113,113,.3);color:#f87171">Erreur: '+ex.message+'</div>';
|
|
}
|
|
a.scrollTop=a.scrollHeight;
|
|
}
|
|
</script>
|
|
<div id="cta" style="max-width:600px;margin:2rem auto;padding:0 4%">
|
|
<div style="background:#0c1222;border:1px solid rgba(99,102,241,.15);border-radius:14px;padding:1.5rem">
|
|
<h3 style="font-size:1rem;font-weight:700;margin-bottom:.8rem;color:#818cf8">Demander un accès</h3>
|
|
<input id="ct-name" type="text" placeholder="Votre nom" style="width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.6rem;font-size:.85rem;color:#edf2f7;font-family:inherit;margin-bottom:.6rem;outline:none">
|
|
<input id="ct-email" type="email" placeholder="Email professionnel" style="width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.6rem;font-size:.85rem;color:#edf2f7;font-family:inherit;margin-bottom:.6rem;outline:none">
|
|
<button onclick="ctS()" id="ct-btn" style="width:100%;background:#6366f1;color:#fff;border:none;border-radius:8px;padding:.7rem;font-weight:700;cursor:pointer;font-size:.9rem">Envoyer</button>
|
|
<div id="ct-ok" style="display:none;text-align:center;padding:1rem;color:#10b981;font-weight:600">Demande envoyee !</div>
|
|
</div></div>
|
|
<script>async function ctS(){var n=document.getElementById("ct-name").value.trim(),e=document.getElementById("ct-email").value.trim();if(!n||!e){alert("Nom et email requis");return;}document.getElementById("ct-btn").disabled=true;try{await fetch("/api/contact",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n,email:e,source:location.pathname,ts:new Date().toISOString()})})}catch(x){}document.getElementById("ct-btn").style.display="none";document.getElementById("ct-ok").style.display="block";}</script>
|
|
<script>
|
|
function weviaProgress(container,startMs){
|
|
if(!container)return;
|
|
var el=document.createElement('div');
|
|
el.className='wevia-pb-wrap';
|
|
el.innerHTML='<div class="wevia-progress"><div class="wevia-progress-bar" style="width:5%"></div></div><div class="wevia-progress-text">Analyse en cours...</div>';
|
|
container.appendChild(el);
|
|
var bar=el.querySelector('.wevia-progress-bar'),txt=el.querySelector('.wevia-progress-text');
|
|
var steps=['Connexion au moteur IA...','Analyse de votre demande...','Génération de la réponse...','Finalisation...'];
|
|
var iv=setInterval(function(){
|
|
var elapsed=(Date.now()-startMs)/1000;
|
|
var pct=Math.min(95,5+elapsed*3);
|
|
bar.style.width=pct+'%';
|
|
var si=Math.min(3,Math.floor(elapsed/3));
|
|
txt.textContent=steps[si]+' ('+Math.round(elapsed)+'s)';
|
|
if(elapsed>25)txt.textContent='Presque termine... ('+Math.round(elapsed)+'s)';
|
|
},300);
|
|
return {el:el,stop:function(){clearInterval(iv);bar.style.width='100%';txt.textContent='Termine!';}};
|
|
}
|
|
</script>
|
|
<script defer src=/assets/dm-enhance.js></script></body>
|
|
</html> |