Update index.html

index.html

@@ -0,0 +1,605 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>DigiScia</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg:#0E1020;
+    --bg-alt:#151834;
+    --panel:#191C3B;
+    --border:rgba(237,231,218,0.10);
+    --ink:#EDE7DA;
+    --ink-dim:#A7A4BE;
+    --bronze:#C6863E;
+    --bronze-soft:rgba(198,134,62,0.14);
+    --teal:#3FA9A0;
+    --teal-soft:rgba(63,169,160,0.14);
+    --display:'Space Grotesk', sans-serif;
+    --mono:'IBM Plex Mono', monospace;
+    --body:'Inter', sans-serif;
+  }
+
+  *{margin:0;padding:0;box-sizing:border-box;}
+
+  html{scroll-behavior:smooth;}
+
+  body{
+    background:var(--bg);
+    color:var(--ink);
+    font-family:var(--body);
+    line-height:1.55;
+    -webkit-font-smoothing:antialiased;
+  }
+
+  body::before{
+    content:'';
+    position:fixed;
+    inset:0;
+    background:
+      radial-gradient(600px 400px at 12% -5%, rgba(198,134,62,0.16), transparent 60%),
+      radial-gradient(700px 500px at 90% 10%, rgba(63,169,160,0.12), transparent 60%);
+    pointer-events:none;
+    z-index:0;
+  }
+
+  a{color:inherit;text-decoration:none;}
+
+  .wrap{
+    max-width:1080px;
+    margin:0 auto;
+    padding:0 32px;
+    position:relative;
+    z-index:1;
+  }
+
+  /* ---------- Header ---------- */
+  header{
+    border-bottom:1px solid var(--border);
+    padding:22px 0;
+    position:sticky;
+    top:0;
+    background:rgba(14,16,32,0.86);
+    backdrop-filter:blur(10px);
+    z-index:20;
+  }
+  header .wrap{display:flex;align-items:center;justify-content:space-between;}
+  .brand{
+    font-family:var(--display);
+    font-weight:700;
+    font-size:20px;
+    letter-spacing:0.01em;
+  }
+  .brand span{color:var(--bronze);}
+  nav{display:flex;gap:28px;align-items:center;}
+  nav a{
+    font-size:13.5px;
+    color:var(--ink-dim);
+    font-family:var(--mono);
+    letter-spacing:0.02em;
+    transition:color .2s ease;
+  }
+  nav a:hover{color:var(--ink);}
+  nav a.cta{
+    color:var(--bg);
+    background:var(--bronze);
+    padding:8px 16px;
+    border-radius:3px;
+    font-weight:500;
+  }
+  nav a.cta:hover{background:#d8985a;color:var(--bg);}
+
+  /* ---------- Hero ---------- */
+  .hero{
+    padding:96px 0 88px;
+    position:relative;
+    overflow:hidden;
+  }
+  .hero-grid{
+    display:grid;
+    grid-template-columns:1.15fr 0.85fr;
+    gap:56px;
+    align-items:center;
+  }
+  .eyebrow{
+    font-family:var(--mono);
+    font-size:12.5px;
+    letter-spacing:0.14em;
+    text-transform:uppercase;
+    color:var(--teal);
+    display:flex;
+    align-items:center;
+    gap:10px;
+    margin-bottom:22px;
+  }
+  .eyebrow::before{
+    content:'';
+    width:22px;height:1px;
+    background:var(--teal);
+  }
+  h1{
+    font-family:var(--display);
+    font-weight:600;
+    font-size:44px;
+    line-height:1.16;
+    letter-spacing:-0.01em;
+    margin-bottom:22px;
+  }
+  h1 em{
+    font-style:normal;
+    color:var(--bronze);
+  }
+  .hero p.lead{
+    font-size:16.5px;
+    color:var(--ink-dim);
+    max-width:46ch;
+    margin-bottom:32px;
+  }
+  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
+  .btn{
+    font-family:var(--body);
+    font-weight:600;
+    font-size:14.5px;
+    padding:13px 22px;
+    border-radius:3px;
+    display:inline-block;
+    transition:all .2s ease;
+    border:1px solid transparent;
+  }
+  .btn-primary{background:var(--bronze);color:#141428;}
+  .btn-primary:hover{background:#d8985a;}
+  .btn-secondary{border-color:var(--border);color:var(--ink);}
+  .btn-secondary:hover{border-color:var(--teal);color:var(--teal);}
+
+  /* signature: data constellation */
+  .constellation{
+    position:relative;
+    height:340px;
+  }
+  .constellation svg{width:100%;height:100%;}
+  .node{fill:var(--bronze);}
+  .node.alt{fill:var(--teal);}
+  .link{stroke:rgba(237,231,218,0.16);stroke-width:1;}
+  .pulse{
+    fill:none;
+    stroke:var(--teal);
+    stroke-width:1.4;
+    stroke-dasharray:4 6;
+    animation:dash 22s linear infinite;
+  }
+  @keyframes dash{to{stroke-dashoffset:-400;}}
+  .node-label{
+    font-family:var(--mono);
+    font-size:9.5px;
+    fill:var(--ink-dim);
+    letter-spacing:0.04em;
+  }
+
+  /* ---------- Section shell ---------- */
+  section{padding:76px 0;border-top:1px solid var(--border);}
+  .section-head{
+    display:flex;
+    justify-content:space-between;
+    align-items:flex-end;
+    gap:24px;
+    margin-bottom:44px;
+    flex-wrap:wrap;
+  }
+  .section-tag{
+    font-family:var(--mono);
+    font-size:12px;
+    letter-spacing:0.12em;
+    text-transform:uppercase;
+    color:var(--bronze);
+    margin-bottom:10px;
+  }
+  h2{
+    font-family:var(--display);
+    font-weight:600;
+    font-size:28px;
+    letter-spacing:-0.01em;
+  }
+  .section-desc{
+    max-width:34ch;
+    color:var(--ink-dim);
+    font-size:14.5px;
+  }
+
+  /* ---------- Mission / values ---------- */
+  .mission-text{
+    font-size:17px;
+    max-width:64ch;
+    color:var(--ink);
+    margin-bottom:36px;
+  }
+  .values{
+    display:flex;
+    flex-wrap:wrap;
+    gap:10px;
+  }
+  .value-chip{
+    font-family:var(--mono);
+    font-size:12.5px;
+    padding:9px 15px;
+    border:1px solid var(--border);
+    border-radius:20px;
+    color:var(--ink-dim);
+    display:flex;
+    align-items:center;
+    gap:8px;
+  }
+  .value-chip::before{
+    content:'';
+    width:6px;height:6px;
+    border-radius:50%;
+    background:var(--teal);
+  }
+
+  /* ---------- Pillars grid ---------- */
+  .grid-4{
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:1px;
+    background:var(--border);
+    border:1px solid var(--border);
+  }
+  .pillar{
+    background:var(--bg);
+    padding:30px 24px;
+    transition:background .2s ease;
+  }
+  .pillar:hover{background:var(--bg-alt);}
+  .pillar .idx{
+    font-family:var(--mono);
+    font-size:11px;
+    color:var(--teal);
+    margin-bottom:18px;
+    display:block;
+  }
+  .pillar h3{
+    font-family:var(--display);
+    font-size:16.5px;
+    font-weight:600;
+    margin-bottom:10px;
+  }
+  .pillar p{
+    font-size:13.5px;
+    color:var(--ink-dim);
+  }
+
+  /* ---------- Projects ---------- */
+  .grid-3{
+    display:grid;
+    grid-template-columns:repeat(3,1fr);
+    gap:18px;
+  }
+  .project-card{
+    background:var(--panel);
+    border:1px solid var(--border);
+    border-radius:6px;
+    padding:28px;
+    display:flex;
+    flex-direction:column;
+    gap:14px;
+  }
+  .project-card .cat{
+    font-family:var(--mono);
+    font-size:11px;
+    letter-spacing:0.08em;
+    text-transform:uppercase;
+    color:var(--bronze);
+  }
+  .project-card h3{
+    font-family:var(--display);
+    font-size:19px;
+    font-weight:600;
+  }
+  .project-card p{
+    font-size:13.5px;
+    color:var(--ink-dim);
+    flex-grow:1;
+  }
+  .project-card .link-out{
+    font-family:var(--mono);
+    font-size:12.5px;
+    color:var(--teal);
+    border-top:1px solid var(--border);
+    padding-top:14px;
+    margin-top:4px;
+  }
+  .project-card .link-out:hover{color:var(--ink);}
+
+  /* ---------- Team ---------- */
+  .team-grid{
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:16px;
+  }
+  .team-card{
+    border:1px solid var(--border);
+    border-radius:6px;
+    padding:22px 18px;
+    background:var(--bg-alt);
+  }
+  .avatar{
+    width:38px;height:38px;
+    border-radius:50%;
+    background:linear-gradient(135deg,var(--bronze),var(--teal));
+    display:flex;align-items:center;justify-content:center;
+    font-family:var(--display);
+    font-weight:700;
+    font-size:14px;
+    color:var(--bg);
+    margin-bottom:16px;
+  }
+  .team-card h4{
+    font-family:var(--display);
+    font-size:15px;
+    font-weight:600;
+    margin-bottom:4px;
+  }
+  .team-card .role{
+    font-family:var(--mono);
+    font-size:11.5px;
+    color:var(--bronze);
+    margin-bottom:10px;
+  }
+  .team-card p{
+    font-size:12.5px;
+    color:var(--ink-dim);
+  }
+
+  /* ---------- Footer ---------- */
+  footer{
+    border-top:1px solid var(--border);
+    padding:44px 0 40px;
+  }
+  footer .wrap{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    flex-wrap:wrap;
+    gap:16px;
+  }
+  .foot-brand{
+    font-family:var(--display);
+    font-weight:600;
+    font-size:15px;
+  }
+  .foot-links{display:flex;gap:22px;}
+  .foot-links a{
+    font-family:var(--mono);
+    font-size:12.5px;
+    color:var(--ink-dim);
+  }
+  .foot-links a:hover{color:var(--teal);}
+  .foot-meta{
+    font-family:var(--mono);
+    font-size:11.5px;
+    color:var(--ink-dim);
+    opacity:0.6;
+  }
+
+  @media (max-width:860px){
+    .hero-grid{grid-template-columns:1fr;}
+    .constellation{height:220px;order:-1;}
+    h1{font-size:32px;}
+    .grid-4{grid-template-columns:repeat(2,1fr);}
+    .grid-3{grid-template-columns:1fr;}
+    .team-grid{grid-template-columns:repeat(2,1fr);}
+    nav{gap:16px;}
+    nav a:not(.cta){display:none;}
+  }
+
+  @media (prefers-reduced-motion:reduce){
+    .pulse{animation:none;}
+    html{scroll-behavior:auto;}
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="wrap">
+    <div class="brand">Digi<span>Scia</span></div>
+    <nav>
+      <a href="#expertise">Expertise</a>
+      <a href="#realisations">Réalisations</a>
+      <a href="#equipe">Équipe</a>
+      <a href="https://digiscia.com/" target="_blank" rel="noopener">Site</a>
+      <a href="https://github.com/DigiScia" target="_blank" rel="noopener">GitHub</a>
+      <a class="cta" href="https://digiscia.com/#contacts" target="_blank" rel="noopener">Nous contacter</a>
+    </nav>
+  </div>
+</header>
+
+<section class="hero">
+  <div class="wrap hero-grid">
+    <div>
+      <div class="eyebrow">Data · Intelligence Artificielle · Cloud</div>
+      <h1>Chaque donnée a <em>une histoire</em> à raconter.</h1>
+      <p class="lead">DigiScia transforme vos données en levier de croissance et vous accompagne dans votre transformation numérique, avec une exigence constante d'excellence et de souveraineté.</p>
+      <div class="hero-actions">
+        <a class="btn btn-primary" href="https://digiscia.com/#contacts" target="_blank" rel="noopener">Demander un devis</a>
+        <a class="btn btn-secondary" href="https://linkedin.com/company/digiscia" target="_blank" rel="noopener">Voir sur LinkedIn</a>
+      </div>
+    </div>
+
+    <div class="constellation" aria-hidden="true">
+      <svg viewBox="0 0 320 340">
+        <line class="link" x1="60" y1="60" x2="160" y2="150"/>
+        <line class="link" x1="160" y1="150" x2="260" y2="80"/>
+        <line class="link" x1="160" y1="150" x2="90" y2="240"/>
+        <line class="link" x1="160" y1="150" x2="240" y2="240"/>
+        <line class="link" x1="90" y1="240" x2="240" y2="240"/>
+        <line class="link" x1="260" y1="80" x2="240" y2="240"/>
+        <path class="pulse" d="M60,60 L160,150 L260,80 M160,150 L90,240 L240,240 L160,150"/>
+        <circle class="node" cx="160" cy="150" r="7"/>
+        <circle class="node alt" cx="60" cy="60" r="5"/>
+        <circle class="node alt" cx="260" cy="80" r="5"/>
+        <circle class="node" cx="90" cy="240" r="5"/>
+        <circle class="node" cx="240" cy="240" r="5"/>
+        <text class="node-label" x="160" y="132">DigiScia</text>
+        <text class="node-label" x="30" y="50">Analytics</text>
+        <text class="node-label" x="230" y="68">Innovation</text>
+        <text class="node-label" x="34" y="262">Engineering</text>
+        <text class="node-label" x="204" y="262">Infrastructure</text>
+      </svg>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="section-tag">Notre promesse</div>
+    <p class="mission-text">Faire de vous les maîtres incontestés de votre destin numérique. Nous forgeons des architectures de données invulnérables qui libèrent votre véritable potentiel de croissance.</p>
+    <div class="values">
+      <div class="value-chip">Innovation</div>
+      <div class="value-chip">Excellence</div>
+      <div class="value-chip">Sécurité</div>
+      <div class="value-chip">Souveraineté</div>
+      <div class="value-chip">Engagement</div>
+    </div>
+  </div>
+</section>
+
+<section id="expertise">
+  <div class="wrap">
+    <div class="section-head">
+      <div>
+        <div class="section-tag">Arsenal technologique</div>
+        <h2>Forger l'avenir de votre entreprise</h2>
+      </div>
+      <p class="section-desc">Nous fusionnons l'ingénierie logicielle et la puissance de la donnée pour construire vos leviers de croissance.</p>
+    </div>
+  </div>
+  <div class="grid-4">
+    <div class="pillar">
+      <span class="idx">Engineering</span>
+      <h3>Web &amp; Mobile</h3>
+      <p>Applications sur-mesure, performantes et évolutives qui transforment l'expérience de vos utilisateurs.</p>
+    </div>
+    <div class="pillar">
+      <span class="idx">Analytics</span>
+      <h3>Business Intelligence</h3>
+      <p>Tableaux de bord interactifs qui racontent votre performance et éclairent la décision.</p>
+    </div>
+    <div class="pillar">
+      <span class="idx">Infrastructure</span>
+      <h3>Data &amp; Cloud</h3>
+      <p>Pipelines robustes et architectures Cloud pour construire le socle de votre stratégie data.</p>
+    </div>
+    <div class="pillar">
+      <span class="idx">Innovation</span>
+      <h3>IA &amp; Agents autonomes</h3>
+      <p>Data Science, Machine Learning et agents IA pour passer à l'ère prédictive.</p>
+    </div>
+  </div>
+</section>
+
+<section id="realisations">
+  <div class="wrap">
+    <div class="section-head">
+      <div>
+        <div class="section-tag">Nos réalisations</div>
+        <h2>Là où les idées prennent vie</h2>
+      </div>
+      <p class="section-desc">Les produits développés par les labs DigiScia, du concept à l'usage.</p>
+    </div>
+    <div class="grid-3">
+      <div class="project-card">
+        <span class="cat">Éducation</span>
+        <h3>DigiScia Academy</h3>
+        <p>EdTech dédiée à la formation de la prochaine génération d'experts en Data &amp; IA.</p>
+        <a class="link-out" href="https://academy.digiscia.com/" target="_blank" rel="noopener">academy.digiscia.com →</a>
+      </div>
+      <div class="project-card">
+        <span class="cat">Média</span>
+        <h3>DigiScia Media</h3>
+        <p>Média de vulgarisation technologique qui facilite la veille sur l'IA et la data.</p>
+        <a class="link-out" href="https://media.digiscia.com/" target="_blank" rel="noopener">media.digiscia.com →</a>
+      </div>
+      <div class="project-card">
+        <span class="cat">E-commerce</span>
+        <h3>DigiScia Store</h3>
+        <p>Plateforme de matériel informatique, électronique et produits digitaux.</p>
+        <a class="link-out" href="https://store.digiscia.com/" target="_blank" rel="noopener">store.digiscia.com →</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="equipe">
+  <div class="wrap">
+    <div class="section-head">
+      <div>
+        <div class="section-tag">Talents &amp; leadership</div>
+        <h2>Une équipe, une synergie</h2>
+      </div>
+      <p class="section-desc">Des experts passionnés par la data, l'ingénierie et l'innovation.</p>
+    </div>
+    <div class="team-grid">
+      <div class="team-card">
+        <div class="avatar">YF</div>
+        <h4>YONLI Fidèle</h4>
+        <div class="role">CEO &amp; Innovation</div>
+        <p>Full Stack Web Developer, Big Data &amp; AI Engineer.</p>
+      </div>
+      <div class="team-card">
+        <div class="avatar">ST</div>
+        <h4>Souleymane TRAORÉ</h4>
+        <div class="role">CTO &amp; Lead Dev</div>
+        <p>Développeur Fullstack Web/Mobile, AI Engineer, architecte de solutions.</p>
+      </div>
+      <div class="team-card">
+        <div class="avatar">AS</div>
+        <h4>Abdel Nasser SAVADOGO</h4>
+        <div class="role">Media Manager</div>
+        <p>Actuariat, finance quantitative et gestion de projet.</p>
+      </div>
+      <div class="team-card">
+        <div class="avatar">NS</div>
+        <h4>NITIEMA Sylvius</h4>
+        <div class="role">Academy Manager</div>
+        <p>Expert géosciences et management des données géospatiales.</p>
+      </div>
+      <div class="team-card">
+        <div class="avatar">PJ</div>
+        <h4>OUEDRAOGO Phil Jacq</h4>
+        <div class="role">Project Lead</div>
+        <p>Expert en gestion de projets IT et pilotage stratégique.</p>
+      </div>
+      <div class="team-card">
+        <div class="avatar">SN</div>
+        <h4>SIEHO Narcisse</h4>
+        <div class="role">Store Manager</div>
+        <p>Ingénieur Productique &amp; Mécatronique, expert automatisme.</p>
+      </div>
+      <div class="team-card">
+        <div class="avatar">YH</div>
+        <h4>YAO Honoré</h4>
+        <div class="role">CFO &amp; Partners</div>
+        <p>Communication financière et relations investisseurs, certifié FMVA.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <div class="wrap">
+    <div class="foot-brand">DigiScia</div>
+    <div class="foot-links">
+      <a href="https://digiscia.com/" target="_blank" rel="noopener">digiscia.com</a>
+      <a href="https://github.com/DigiScia" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://linkedin.com/company/digiscia" target="_blank" rel="noopener">LinkedIn</a>
+    </div>
+    <div class="foot-meta">Ouagadougou · Data &amp; IA</div>
+  </div>
+</footer>
+
+</body>
+</html>