From 14b29bde16ee3dc1480a65c0770200a77eda2914 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 17 Mar 2025 21:31:10 +0100
Subject: [PATCH] improve with header

---
 ui/src/App.tsx                  | 140 +++++++++++++++++++++-----------
 ui/src/ui-components/header.tsx |  85 +++++++++++++++++++
 2 files changed, 178 insertions(+), 47 deletions(-)
 create mode 100644 ui/src/ui-components/header.tsx

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index c31bf8a..3daf3a9 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -2,6 +2,8 @@ import { Button } from "./ui-components/button";
 import logo from "./assets/icon.jpg";
 import { useState, useEffect } from "react";
 import { Switch } from "./ui-components/switch";
+import { twMerge } from "tailwind-merge";
+import { Header } from "./ui-components/header";
 
 type Theme = "dark" | "light" | "system";
 
@@ -24,37 +26,14 @@ export const App = () => {
   }, [theme]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-emerald-100 via-green-100 to-white dark:bg-gradient-to-br dark:from-[#0a1f0a] dark:via-[#051505] dark:to-black">
+    <div
+      className={twMerge(
+        "min-h-screen bg-gradient-to-br from-emerald-100 via-green-100 to-white",
+        "dark:bg-gradient-to-br dark:from-[#0a1f0a] dark:via-[#051505] dark:to-black"
+      )}
+    >
+      <Header theme={theme} onThemeChange={setTheme} />
       <div className="container mx-auto px-4 py-16">
-        <nav className="flex items-center justify-between mb-16">
-          <div className="flex items-center gap-2">
-            <img src={logo} alt="Logo XTablo" className="w-8 h-8" />
-            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">
-              XTablo
-            </h1>
-          </div>
-          <div className="flex items-center gap-4">
-            <Button
-              variant="outline"
-              className="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80 border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50 transition"
-            >
-              Connexion
-            </Button>
-            <Button
-              variant="outline"
-              className="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80 border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50 transition"
-            >
-              S'inscrire
-            </Button>
-            <Switch
-              isSelected={theme === "dark"}
-              onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
-            >
-              Dark mode
-            </Switch>
-          </div>
-        </nav>
-
         <main className="text-center">
           <h2 className="text-5xl font-bold text-slate-900 dark:text-white mb-6">
             Maîtrisez vos dépenses de chantier
@@ -67,25 +46,38 @@ export const App = () => {
           </p>
 
           <Button
-            className="inline-flex items-center gap-2 bg-blue-950 px-8 py-4 rounded-full
-                     text-white font-semibold hover:bg-blue-900 transition-colors
-                     shadow-lg hover:shadow-xl shadow-blue-950/20"
+            className={twMerge(
+              "inline-flex items-center gap-2 bg-blue-950 px-8 py-4 rounded-full",
+              "text-white font-semibold hover:bg-blue-900 transition-colors",
+              "shadow-lg hover:shadow-xl shadow-blue-950/20"
+            )}
           >
             Démarrer gratuitement
           </Button>
 
           <div className="mt-20">
-            <div className="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">
+            <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"
+              )}
+            >
               <div className="aspect-video rounded-lg bg-emerald-100 dark:bg-slate-700/50 animate-pulse" />
             </div>
           </div>
 
-          <section className="mt-24">
+          <section id="features" className="mt-24">
             <h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-12">
               Fait confiance par les entreprises du BTP
             </h3>
             <div className="flex overflow-x-hidden gap-12 pb-4 -mx-4 px-4 scrollbar-hide">
-              <div className="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">
+              <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">
                   "XTablo a révolutionné notre gestion des dépenses. Nous
                   pouvons maintenant suivre chaque euro en temps réel et prendre
@@ -104,7 +96,13 @@ export const App = () => {
                 </div>
               </div>
 
-              <div className="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">
+              <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">
                   "Les fonctionnalités de suivi des dépenses sont exactement ce
                   dont nous avions besoin. Cela nous a permis de réduire nos
@@ -123,7 +121,13 @@ export const App = () => {
                 </div>
               </div>
 
-              <div className="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">
+              <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">
                   "La gestion des dépenses sur plusieurs chantiers n'a jamais
                   été aussi simple. XTablo nous donne une visibilité totale sur
@@ -143,12 +147,20 @@ export const App = () => {
               </div>
             </div>
           </section>
-          <section className="mt-24">
+
+          <section id="pricing" className="mt-24">
             <h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-12">
               Des tarifs adaptés à vos besoins
             </h3>
             <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-              <div className="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 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">
+              <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",
+                  "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"
+                )}
+              >
                 <h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
                   Starter
                 </h4>
@@ -226,12 +238,25 @@ export const App = () => {
                     Support par email
                   </li>
                 </ul>
-                <button className="w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto">
+                <button
+                  className={twMerge(
+                    "w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold",
+                    "hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02]",
+                    "hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto"
+                  )}
+                >
                   Commencer
                 </button>
               </div>
 
-              <div className="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 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20">
+              <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",
+                  "transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl",
+                  "hover:shadow-emerald-200/20 dark:hover:shadow-emerald-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-blue-950 text-white px-4 py-1 rounded-full text-sm font-semibold">
                     Plus populaire
@@ -330,13 +355,20 @@ export const App = () => {
                     API disponible
                   </li>
                 </ul>
-                <button className="w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto">
+                <button
+                  className={twMerge(
+                    "w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold",
+                    "hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02]",
+                    "hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto"
+                  )}
+                >
                   Commencer
                 </button>
               </div>
             </div>
           </section>
-          <section className="mt-24 text-center">
+
+          <section id="contact" className="mt-24 text-center">
             <h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-6">
               Prêt à optimiser vos dépenses de projet ?
             </h3>
@@ -345,17 +377,31 @@ export const App = () => {
               carte bancaire requise.
             </p>
             <div className="flex justify-center gap-6">
-              <button className="px-8 py-3 bg-blue-950 rounded-full text-white font-semibold hover:bg-blue-900 transition shadow-lg hover:shadow-xl shadow-blue-950/20">
+              <button
+                className={twMerge(
+                  "px-8 py-3 bg-blue-950 rounded-full text-white font-semibold",
+                  "hover:bg-blue-900 transition shadow-lg hover:shadow-xl shadow-blue-950/20"
+                )}
+              >
                 Essai gratuit
               </button>
-              <button className="px-8 py-3 border border-blue-400/30 rounded-full text-slate-900 dark:text-white font-semibold hover:bg-blue-950/30 transition">
+              <button
+                className={twMerge(
+                  "px-8 py-3 border border-blue-400/30 rounded-full",
+                  "text-slate-900 dark:text-white font-semibold hover:bg-blue-950/30 transition"
+                )}
+              >
                 Contacter les ventes
               </button>
             </div>
           </section>
         </main>
       </div>
-      <footer className="mt-24 py-8 border-t border-slate-200 dark:border-slate-800">
+      <footer
+        className={twMerge(
+          "mt-24 py-8 border-t border-slate-200 dark:border-slate-800"
+        )}
+      >
         <div className="container mx-auto px-4 text-center">
           <p className="text-slate-600 dark:text-slate-400 text-sm">
             © {new Date().getFullYear()} XTablo. Tous droits réservés.
diff --git a/ui/src/ui-components/header.tsx b/ui/src/ui-components/header.tsx
new file mode 100644
index 0000000..63b1e01
--- /dev/null
+++ b/ui/src/ui-components/header.tsx
@@ -0,0 +1,85 @@
+import { Button } from "./button";
+import { Switch } from "./switch";
+import { twMerge } from "tailwind-merge";
+import logo from "../assets/icon.jpg";
+
+interface HeaderProps {
+  theme: "dark" | "light" | "system";
+  onThemeChange: (theme: "dark" | "light" | "system") => void;
+}
+
+export function Header({ theme, onThemeChange }: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg">
+      <div className="container mx-auto px-4">
+        <nav className="flex items-center justify-between h-16">
+          <div className="flex items-center gap-2">
+            <img src={logo} alt="Logo XTablo" className="w-8 h-8" />
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+              XTablo
+            </h1>
+          </div>
+          <div className="flex items-center gap-6">
+            <div className="hidden md:flex items-center gap-6">
+              <a
+                href="#features"
+                className={twMerge(
+                  "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
+                  "transition-colors"
+                )}
+              >
+                Fonctionnalités
+              </a>
+              <a
+                href="#pricing"
+                className={twMerge(
+                  "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
+                  "transition-colors"
+                )}
+              >
+                Tarifs
+              </a>
+              <a
+                href="#contact"
+                className={twMerge(
+                  "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
+                  "transition-colors"
+                )}
+              >
+                Contact
+              </a>
+            </div>
+            <div className="flex items-center gap-4">
+              <Button
+                variant="outline"
+                className={twMerge(
+                  "text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80",
+                  "border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50",
+                  "transition"
+                )}
+              >
+                Connexion
+              </Button>
+              <Button
+                className={twMerge(
+                  "bg-blue-950 text-white hover:bg-blue-900",
+                  "transition-colors"
+                )}
+              >
+                S'inscrire
+              </Button>
+              <Switch
+                isSelected={theme === "dark"}
+                onChange={() =>
+                  onThemeChange(theme === "dark" ? "light" : "dark")
+                }
+              >
+                Dark mode
+              </Switch>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+}