From ed0ad6098e7842ed136d4e53fb6301a618f99b91 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Wed, 11 Jun 2025 21:58:24 +0200
Subject: [PATCH] Improve landing page with blue colors

---
 ui/src/components/header.tsx |  14 +-
 ui/src/pages/landing.tsx     | 302 ++++++++++++++++++++---------------
 ui/src/pages/tablo.tsx       |  28 +++-
 3 files changed, 199 insertions(+), 145 deletions(-)

diff --git a/ui/src/components/header.tsx b/ui/src/components/header.tsx
index c81040e..3ed251e 100644
--- a/ui/src/components/header.tsx
+++ b/ui/src/components/header.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 export function Header() {
   return (
     <>
-      <header className="sticky top-0 z-50 w-full border-b border-emerald-200 dark:border-emerald-900/30 bg-emerald-100/90 dark:bg-[#0a1f0a]/90 backdrop-blur-lg">
+      <header className="sticky top-0 z-50 w-full border-b border-blue-200 dark:border-blue-900/30 bg-blue-100/90 dark:bg-slate-900/90 backdrop-blur-lg">
         <div className="container mx-auto px-4">
           <nav className="flex items-center justify-between h-16">
             <Link to="/" className="flex items-center gap-2">
@@ -20,7 +20,7 @@ export function Header() {
                 <a
                   href="#features"
                   className={twMerge(
-                    "text-slate-600 dark:text-slate-300 hover:text-emerald-700 dark:hover:text-emerald-400",
+                    "text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
                     "transition-colors"
                   )}
                 >
@@ -29,7 +29,7 @@ export function Header() {
                 <a
                   href="#pricing"
                   className={twMerge(
-                    "text-slate-600 dark:text-slate-300 hover:text-emerald-700 dark:hover:text-emerald-400",
+                    "text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
                     "transition-colors"
                   )}
                 >
@@ -38,7 +38,7 @@ export function Header() {
                 <a
                   href="#contact"
                   className={twMerge(
-                    "text-slate-600 dark:text-slate-300 hover:text-emerald-700 dark:hover:text-emerald-400",
+                    "text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
                     "transition-colors"
                   )}
                 >
@@ -50,8 +50,8 @@ export function Header() {
                   <Button
                     variant="outline"
                     className={twMerge(
-                      "text-slate-900 dark:text-white hover:text-emerald-700 dark:hover:text-emerald-400",
-                      "border-emerald-300 dark:border-emerald-700/30 hover:border-emerald-400 dark:hover:border-emerald-600/50",
+                      "text-slate-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-400",
+                      "border-blue-300 dark:border-blue-700/30 hover:border-blue-400 dark:hover:border-blue-600/50",
                       "transition"
                     )}
                   >
@@ -61,7 +61,7 @@ export function Header() {
                 <Link to="/signup">
                   <Button
                     className={twMerge(
-                      "bg-emerald-700 text-white hover:bg-emerald-600",
+                      "bg-blue-700 text-white hover:bg-blue-600",
                       "transition-colors"
                     )}
                   >
diff --git a/ui/src/pages/landing.tsx b/ui/src/pages/landing.tsx
index c5b62d2..206d7c4 100644
--- a/ui/src/pages/landing.tsx
+++ b/ui/src/pages/landing.tsx
@@ -7,28 +7,28 @@ import { Header } from "@ui/components/header";
 export const LandingPage = () => {
   localStorage.setItem("xtablo-has-seen-landing-page", "true");
   return (
-    <>
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-800 dark:to-blue-900/20">
       <Header />
       <div className="container mx-auto px-4">
         {/* Hero Section */}
         <section className="py-20 text-center relative">
           <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-            <div className="w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-3xl" />
+            <div className="w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-3xl" />
           </div>
           <h1 className="text-6xl font-bold text-slate-900 dark:text-white mb-6 relative">
-            Maîtrisez vos dépenses de chantier
+            Simplifiez vos réunions et accélérez vos ventes
           </h1>
           <p className="text-xl text-slate-700 dark:text-white mb-12 max-w-2xl mx-auto relative">
-            XTablo aide les entreprises du BTP à suivre, analyser et optimiser
-            leurs dépenses de projet. Obtenez des insights en temps réel sur vos
-            coûts et prenez de meilleures décisions financières.
+            XTablo révolutionne la gestion de vos meetings, facilite la
+            conclusion de vos deals et améliore la collaboration grâce à des
+            discussions interactives et une planification intelligente.
           </p>
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 relative">
             <Button
               className={twMerge(
-                "inline-flex items-center gap-2 bg-emerald-700 px-8 py-4 rounded-full",
-                "text-white font-semibold hover:bg-emerald-600 transition-colors",
-                "shadow-lg hover:shadow-xl shadow-emerald-700/20",
+                "inline-flex items-center gap-2 bg-blue-700 px-8 py-4 rounded-full",
+                "text-white font-semibold hover:bg-blue-600 transition-colors",
+                "shadow-lg hover:shadow-xl shadow-blue-700/20",
                 "text-lg"
               )}
             >
@@ -51,11 +51,11 @@ export const LandingPage = () => {
           <div
             className={twMerge(
               "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
-              "shadow-xl border border-emerald-200 dark:border-slate-700/50",
+              "shadow-xl border border-blue-200 dark:border-slate-700/50",
               "relative"
             )}
           >
-            <div className="aspect-video rounded-lg bg-emerald-100 dark:bg-slate-700/50 animate-pulse" />
+            <div className="aspect-video rounded-lg bg-blue-100 dark:bg-slate-700/50 animate-pulse" />
           </div>
         </section>
 
@@ -63,24 +63,23 @@ export const LandingPage = () => {
         <section id="features" className="py-20">
           <div className="text-center mb-16">
             <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
-              Une solution complète pour votre entreprise
+              Tout ce dont vous avez besoin pour réussir
             </h2>
             <p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
-              Découvrez comment XTablo peut transformer votre gestion des
-              dépenses
+              Découvrez comment XTablo transforme votre façon de travailler
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
             <div
               className={twMerge(
                 "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
-                "hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
-                "border border-emerald-200 dark:border-slate-700/50"
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50"
               )}
             >
-              <div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
+              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
                 <svg
-                  className="w-6 h-6 text-emerald-600"
+                  className="w-6 h-6 text-blue-600"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -89,28 +88,28 @@ export const LandingPage = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
-                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                   />
                 </svg>
               </div>
               <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
-                Suivi en temps réel
+                Meetings simplifiés
               </h3>
               <p className="text-slate-700 dark:text-white">
-                Visualisez vos dépenses en temps réel et prenez des décisions
-                éclairées
+                Organisez, planifiez et menez vos réunions avec une efficacité
+                maximale. Agenda intelligent et outils de productivité intégrés.
               </p>
             </div>
             <div
               className={twMerge(
                 "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
-                "hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
-                "border border-emerald-200 dark:border-slate-700/50"
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50"
               )}
             >
-              <div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
+              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
                 <svg
-                  className="w-6 h-6 text-emerald-600"
+                  className="w-6 h-6 text-blue-600"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -119,27 +118,28 @@ export const LandingPage = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
-                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
               </div>
               <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
-                Rapports personnalisés
+                Conclusion de deals
               </h3>
               <p className="text-slate-700 dark:text-white">
-                Générez des rapports détaillés adaptés à vos besoins
+                Accélérez vos ventes avec des outils de suivi avancés, des
+                propositions automatisées et un pipeline optimisé.
               </p>
             </div>
             <div
               className={twMerge(
                 "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
-                "hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
-                "border border-emerald-200 dark:border-slate-700/50"
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50"
               )}
             >
-              <div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
+              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
                 <svg
-                  className="w-6 h-6 text-emerald-600"
+                  className="w-6 h-6 text-blue-600"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -148,16 +148,46 @@ export const LandingPage = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
-                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                   />
                 </svg>
               </div>
               <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
-                Optimisation des coûts
+                Chat interactif
               </h3>
               <p className="text-slate-700 dark:text-white">
-                Identifiez les opportunités d&apos;optimisation et réduisez vos
-                dépenses
+                Communiquez efficacement avec vos équipes grâce à un système de
+                chat avancé et des discussions contextuelles en temps réel.
+              </p>
+            </div>
+            <div
+              className={twMerge(
+                "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50 md:col-start-2"
+              )}
+            >
+              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
+                <svg
+                  className="w-6 h-6 text-blue-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+              </div>
+              <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
+                Planification intelligente
+              </h3>
+              <p className="text-slate-700 dark:text-white">
+                Organisez vos projets, gérez vos ressources et optimisez votre
+                planning avec des outils de planification avancés.
               </p>
             </div>
           </div>
@@ -167,30 +197,57 @@ export const LandingPage = () => {
         <section className="py-20">
           <div className="text-center mb-16">
             <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
-              Fait confiance par les entreprises du BTP
+              Ils ont révolutionné leur façon de travailler
             </h2>
             <p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
-              Découvrez ce que nos clients disent de XTablo
+              Découvrez comment nos clients utilisent XTablo pour améliorer leur
+              productivité
             </p>
           </div>
           <div className="flex overflow-x-hidden gap-12 pb-4 -mx-4 px-4 scrollbar-hide">
             <div
               className={twMerge(
                 "flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
-                "hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
-                "border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide"
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50 flex flex-col animate-slide"
               )}
             >
               <p className="text-slate-700 dark:text-white mb-4 flex-grow">
-                &quot;XTablo a révolutionné notre gestion des dépenses. Nous
-                pouvons maintenant suivre chaque euro en temps réel et prendre
-                de meilleures décisions pour nos projets de construction.&quot;
+                &quot;XTablo a transformé notre processus de vente. Nos meetings
+                sont plus efficaces et nous concluons 40% plus de deals
+                qu&apos;avant. L&apos;outil de chat nous permet de rester
+                connectés en permanence.&quot;
               </p>
               <div className="flex items-center mt-auto">
-                <div className="w-10 h-10 rounded-full bg-emerald-500/20 border border-emerald-500/30" />
+                <div className="w-10 h-10 rounded-full bg-blue-500/20 border border-blue-500/30" />
                 <div className="ml-3">
                   <p className="text-slate-900 dark:text-white font-medium">
-                    Michel Dubois
+                    Sarah Dubois
+                  </p>
+                  <p className="text-slate-600 dark:text-white/80 text-sm">
+                    Directrice Commerciale
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div
+              className={twMerge(
+                "flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50 flex flex-col animate-slide"
+              )}
+            >
+              <p className="text-slate-700 dark:text-white mb-4 flex-grow">
+                &quot;La planification intelligente de XTablo nous a fait gagner
+                3 heures par semaine. Nos équipes sont mieux organisées et les
+                projets avancent plus rapidement.&quot;
+              </p>
+              <div className="flex items-center mt-auto">
+                <div className="w-10 h-10 rounded-full bg-blue-500/20 border border-blue-500/30" />
+                <div className="ml-3">
+                  <p className="text-slate-900 dark:text-white font-medium">
+                    Marc Laurent
                   </p>
                   <p className="text-slate-600 dark:text-white/80 text-sm">
                     Chef de Projet
@@ -202,49 +259,23 @@ export const LandingPage = () => {
             <div
               className={twMerge(
                 "flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
-                "hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
-                "border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide"
+                "hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
+                "border border-blue-200 dark:border-slate-700/50 flex flex-col animate-slide"
               )}
             >
               <p className="text-slate-700 dark:text-white mb-4 flex-grow">
-                &quot;Les fonctionnalités de suivi des dépenses sont exactement
-                ce dont nous avions besoin. Cela nous a permis de réduire nos
-                coûts de 15% et d&apos;améliorer significativement nos
-                marges.&quot;
+                &quot;Enfin un outil qui simplifie vraiment nos meetings ! Plus
+                de temps perdu, des discussions structurées et des décisions
+                rapides. Notre productivité a explosé.&quot;
               </p>
               <div className="flex items-center mt-auto">
-                <div className="w-10 h-10 rounded-full bg-emerald-500/20 border border-emerald-500/30" />
+                <div className="w-10 h-10 rounded-full bg-blue-500/20 border border-blue-500/30" />
                 <div className="ml-3">
                   <p className="text-slate-900 dark:text-white font-medium">
-                    Sophie Martin
+                    Julie Martin
                   </p>
                   <p className="text-slate-600 dark:text-white/80 text-sm">
-                    Directrice Financière
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div
-              className={twMerge(
-                "flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
-                "hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
-                "border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide"
-              )}
-            >
-              <p className="text-slate-700 dark:text-white mb-4 flex-grow">
-                &quot;La gestion des dépenses sur plusieurs chantiers n&apos;a
-                jamais été aussi simple. XTablo nous donne une visibilité totale
-                sur nos coûts.&quot;
-              </p>
-              <div className="flex items-center mt-auto">
-                <div className="w-10 h-10 rounded-full bg-emerald-500/20 border border-emerald-500/30" />
-                <div className="ml-3">
-                  <p className="text-slate-900 dark:text-white font-medium">
-                    David Laurent
-                  </p>
-                  <p className="text-slate-600 dark:text-white/80 text-sm">
-                    Chef de Chantier
+                    Responsable Équipe
                   </p>
                 </div>
               </div>
@@ -259,16 +290,16 @@ export const LandingPage = () => {
               Des tarifs adaptés à vos besoins
             </h2>
             <p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
-              Choisissez le plan qui correspond le mieux à votre entreprise
+              Choisissez le plan qui correspond le mieux à votre équipe
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
             <div
               className={twMerge(
                 "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
-                "border border-emerald-200 dark:border-white/30 hover:border-emerald-300 dark:hover:border-white/50",
+                "border border-blue-200 dark:border-white/30 hover:border-blue-300 dark:hover:border-white/50",
                 "transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl",
-                "hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20 flex flex-col"
+                "hover:shadow-blue-200/20 dark:hover:shadow-blue-900/20 flex flex-col"
               )}
             >
               <h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
@@ -276,14 +307,14 @@ export const LandingPage = () => {
               </h4>
               <div className="mb-6">
                 <span className="text-4xl font-bold text-slate-900 dark:text-white">
-                  12€
+                  15€
                 </span>
                 <span className="text-slate-600 dark:text-white/80">/mois</span>
               </div>
               <ul className="space-y-4 mb-8 flex-grow">
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -295,11 +326,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Jusqu&apos;à 5 chantiers
+                  Jusqu&apos;à 10 meetings/mois
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -311,11 +342,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Suivi des dépenses en temps réel
+                  Chat d&apos;équipe basique
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -327,11 +358,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Rapports mensuels
+                  Planification simple
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -348,9 +379,9 @@ export const LandingPage = () => {
               </ul>
               <Button
                 className={twMerge(
-                  "w-full px-6 py-3 bg-emerald-700 rounded-full text-white font-semibold",
-                  "hover:bg-emerald-600 transition-all duration-300 hover:scale-[1.02]",
-                  "hover:shadow-xl shadow-emerald-700/20 mt-auto"
+                  "w-full px-6 py-3 bg-blue-700 rounded-full text-white font-semibold",
+                  "hover:bg-blue-600 transition-all duration-300 hover:scale-[1.02]",
+                  "hover:shadow-xl shadow-blue-700/20 mt-auto"
                 )}
               >
                 Commencer
@@ -360,13 +391,13 @@ export const LandingPage = () => {
             <div
               className={twMerge(
                 "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
-                "border border-emerald-200 dark:border-white/50 relative flex flex-col",
+                "border border-blue-200 dark:border-white/50 relative flex flex-col",
                 "transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl",
-                "hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20"
+                "hover:shadow-blue-200/20 dark:hover:shadow-blue-900/20"
               )}
             >
               <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 transition-all duration-300 group-hover:scale-110">
-                <span className="bg-emerald-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
+                <span className="bg-blue-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
                   Plus populaire
                 </span>
               </div>
@@ -375,14 +406,14 @@ export const LandingPage = () => {
               </h4>
               <div className="mb-6">
                 <span className="text-4xl font-bold text-slate-900 dark:text-white">
-                  25€
+                  35€
                 </span>
                 <span className="text-slate-600 dark:text-white/80">/mois</span>
               </div>
               <ul className="space-y-4 mb-8 flex-grow">
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -394,11 +425,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Chantiers illimités
+                  Meetings illimités
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -410,11 +441,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Suivi des dépenses en temps réel
+                  Chat avancé + discussions
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -426,11 +457,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Rapports personnalisés
+                  Planification intelligente
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -442,11 +473,11 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  Support prioritaire
+                  Pipeline de vente avancé
                 </li>
                 <li className="flex items-center text-slate-700 dark:text-white">
                   <svg
-                    className="w-5 h-5 text-emerald-500 mr-2"
+                    className="w-5 h-5 text-blue-500 mr-2"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -458,14 +489,14 @@ export const LandingPage = () => {
                       d="M5 13l4 4L19 7"
                     />
                   </svg>
-                  API disponible
+                  Support prioritaire + API
                 </li>
               </ul>
               <Button
                 className={twMerge(
-                  "w-full px-6 py-3 bg-emerald-700 rounded-full text-white font-semibold",
-                  "hover:bg-emerald-600 transition-all duration-300 hover:scale-[1.02]",
-                  "hover:shadow-xl shadow-emerald-700/20 mt-auto"
+                  "w-full px-6 py-3 bg-blue-700 rounded-full text-white font-semibold",
+                  "hover:bg-blue-600 transition-all duration-300 hover:scale-[1.02]",
+                  "hover:shadow-xl shadow-blue-700/20 mt-auto"
                 )}
               >
                 Commencer
@@ -479,34 +510,35 @@ export const LandingPage = () => {
           <div
             className={twMerge(
               "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-12",
-              "border border-emerald-200 dark:border-slate-700/50",
+              "border border-blue-200 dark:border-slate-700/50",
               "shadow-xl"
             )}
           >
             <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-6">
-              Prêt à optimiser vos dépenses de projet ?
+              Prêt à révolutionner votre productivité ?
             </h2>
             <p className="text-xl text-slate-700 dark:text-white mb-12 max-w-2xl mx-auto">
-              Commencez votre essai gratuit de 14 jours aujourd&apos;hui. Aucune
-              carte bancaire requise.
+              Rejoignez des milliers d&apos;équipes qui utilisent XTablo pour
+              simplifier leurs meetings, accélérer leurs ventes et améliorer
+              leur collaboration.
             </p>
             <div className="flex flex-col sm:flex-row justify-center gap-6">
               <Button
                 className={twMerge(
-                  "px-8 py-4 bg-emerald-700 rounded-full text-white font-semibold text-lg",
-                  "hover:bg-emerald-600 transition shadow-lg hover:shadow-xl shadow-emerald-700/20"
+                  "px-8 py-4 bg-blue-700 rounded-full text-white font-semibold text-lg",
+                  "hover:bg-blue-600 transition shadow-lg hover:shadow-xl shadow-blue-700/20"
                 )}
               >
-                Essai gratuit
+                Essai gratuit 14 jours
               </Button>
               <Button
                 className={twMerge(
-                  "px-8 py-4 border-2 border-emerald-700/30 rounded-full text-lg",
-                  "text-slate-900 dark:text-white font-semibold hover:border-emerald-700",
+                  "px-8 py-4 border-2 border-blue-700/30 rounded-full text-lg",
+                  "text-slate-900 dark:text-white font-semibold hover:border-blue-700",
                   "transition"
                 )}
               >
-                Contacter les ventes
+                Demander une démo
               </Button>
             </div>
           </div>
@@ -529,7 +561,7 @@ export const LandingPage = () => {
                 </h3>
               </div>
               <p className="text-slate-600 dark:text-slate-400">
-                Optimisez vos dépenses de chantier avec XTablo
+                Révolutionnez votre productivité avec XTablo
               </p>
             </div>
             <div>
@@ -540,7 +572,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#features"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Fonctionnalités
                   </a>
@@ -548,11 +580,19 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#pricing"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Tarifs
                   </a>
                 </li>
+                <li>
+                  <a
+                    href="#"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
+                  >
+                    Intégrations
+                  </a>
+                </li>
               </ul>
             </div>
             <div>
@@ -563,7 +603,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     À propos
                   </a>
@@ -571,7 +611,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Blog
                   </a>
@@ -579,7 +619,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Carrières
                   </a>
@@ -594,7 +634,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Confidentialité
                   </a>
@@ -602,7 +642,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Conditions
                   </a>
@@ -610,7 +650,7 @@ export const LandingPage = () => {
                 <li>
                   <a
                     href="#"
-                    className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
+                    className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     Cookies
                   </a>
@@ -629,6 +669,6 @@ export const LandingPage = () => {
           </div>
         </div>
       </footer>
-    </>
+    </div>
   );
 };
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index 2404b10..fa80577 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -271,11 +271,19 @@ export const TabloPage = () => {
     if (updatedFolder.tablos.length === 0) {
       setFolders(folders.filter((f) => f.id !== folderId));
       setTablos([...tablos, tabloToRemove]);
+      // Close modal if this folder was open
+      if (openFolderId === folderId) {
+        setOpenFolderId(null);
+      }
     }
     // If folder has only one item left, dissolve it
     else if (updatedFolder.tablos.length === 1) {
       setFolders(folders.filter((f) => f.id !== folderId));
       setTablos([...tablos, tabloToRemove, ...updatedFolder.tablos]);
+      // Close modal if this folder was open (folder is being dissolved)
+      if (openFolderId === folderId) {
+        setOpenFolderId(null);
+      }
     }
     // Otherwise, keep the folder and just remove the tablo
     else {
@@ -345,10 +353,10 @@ export const TabloPage = () => {
 
         {/* Folder creation overlay */}
         {canCreateFolder && (
-          <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-lg flex items-center justify-center z-10 animate-bounce">
-            <div className="bg-white/90 dark:bg-gray-800/90 rounded-full p-2 shadow-lg">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl flex items-center justify-center z-10 animate-bounce">
+            <div className="bg-white/90 dark:bg-gray-800/90 rounded-full p-3 shadow-xl">
               <svg
-                className="w-6 h-6 text-blue-600"
+                className="w-8 h-8 text-blue-600"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -367,8 +375,8 @@ export const TabloPage = () => {
         <div
           className={`${
             tablo.color
-          } rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer ${
-            inFolder ? "aspect-square" : "aspect-square"
+          } rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer ${
+            inFolder ? "aspect-square w-36 h-36" : "aspect-square w-40 h-40"
           } flex items-center justify-center ${
             draggedItem?.type === "tablo" && draggedItem?.id === tablo.id
               ? "opacity-50 scale-95"
@@ -376,8 +384,14 @@ export const TabloPage = () => {
           } ${canCreateFolder ? "scale-105 shadow-2xl" : ""}`}
           onClick={() => console.log(`Open tablo: ${tablo.name}`)}
         >
-          <div className="text-center p-6">
-            <h3 className="text-white text-xl font-semibold">{tablo.name}</h3>
+          <div className={`text-center ${inFolder ? "p-5" : "p-6"}`}>
+            <h3
+              className={`text-white font-semibold ${
+                inFolder ? "text-lg" : "text-xl"
+              }`}
+            >
+              {tablo.name}
+            </h3>
           </div>
         </div>