Add youtube video

ui/src/App.tsx

@@ -39,7 +39,7 @@ export const App = () => {
               className={twMerge(
                 "min-h-screen",
                 !isProd ? "bg-orange-50" : "bg-white",
-                !isProd ? "dark:bg-orange-950" : "dark:bg-gray-900"
+                "dark:bg-gray-900"
               )}
             >
               <Routes>

ui/src/pages/landing.tsx

@@ -79,25 +79,19 @@ export const LandingPage = () => {
           </div>
           <div
             className={twMerge(
-              "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
-              "shadow-xl border border-blue-200 dark:border-slate-700/50",
+              "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
+              "shadow-xl",
               "relative"
             )}
           >
-            <video
+            <iframe
               className="aspect-video rounded-lg w-full"
-              controls
-              poster="/api/placeholder/800/450"
-              preload="metadata"
-            >
-              <source src="/videos/xtablo-demo.mp4" type="video/mp4" />
-              <source src="/videos/xtablo-demo.webm" type="video/webm" />
-              <div className="aspect-video rounded-lg bg-blue-100 dark:bg-slate-700/50 flex items-center justify-center">
-                <p className="text-slate-600 dark:text-slate-400">
-                  Votre navigateur ne supporte pas la lecture vidéo.
-                </p>
-              </div>
-            </video>
+              src="https://www.youtube.com/embed/1-UlzZQ0lMw"
+              title="XTablo Demo"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+            ></iframe>
           </div>
         </section>
         {/* Problem Section */}