Merge branch 'video' into dev

apps/frontend/app/[locale]/page.tsx

@@ -27,6 +27,7 @@ import {
 import { useTranslations, useLocale } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';
 import { LandingHeader, LandingFooter } from '@/components/layout';
+import { DemoVideoModal } from '@/components/DemoVideoModal';
 
 function AnimatedCounter({
   end,
@@ -96,6 +97,7 @@ export default function LandingPage() {
   const isHowInView = useInView(howRef, { once: true, amount: 0.2 });
 
   const [billingYearly, setBillingYearly] = useState(false);
+  const [isDemoOpen, setIsDemoOpen] = useState(false);
 
   const { scrollYProgress } = useScroll();
   const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
@@ -374,26 +376,23 @@ export default function LandingPage() {
                   <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                 </Link>
               ) : (
-                <>
-                  <Link
-                    href="/register"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="group px-6 sm:px-8 py-3 sm:py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-base sm:text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
-                  >
-                    <span>{t('hero.ctaRegister')}</span>
-                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-                  </Link>
-                  <Link
-                    href="/login"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="px-6 sm:px-8 py-3 sm:py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-base sm:text-lg w-full sm:w-auto text-center"
-                  >
-                    {t('hero.ctaDemo')}
-                  </Link>
-                </>
+                <Link
+                  href="/register"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group px-6 sm:px-8 py-3 sm:py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-base sm:text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
+                >
+                  <span>{t('hero.ctaRegister')}</span>
+                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                </Link>
               )}
+              <button
+                type="button"
+                onClick={() => setIsDemoOpen(true)}
+                className="px-6 sm:px-8 py-3 sm:py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-base sm:text-lg w-full sm:w-auto text-center"
+              >
+                {t('hero.ctaDemo')}
+              </button>
             </motion.div>
           </motion.div>
         </div>
@@ -1076,6 +1075,8 @@ export default function LandingPage() {
       </section>
 
       <LandingFooter />
+
+      <DemoVideoModal isOpen={isDemoOpen} onClose={() => setIsDemoOpen(false)} />
     </div>
   );
 }

apps/frontend/src/components/DemoVideoModal.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+interface DemoVideoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function DemoVideoModal({ isOpen, onClose }: DemoVideoModalProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+    document.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, handleKeyDown]);
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.25 }}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-brand-navy/90 backdrop-blur-sm p-4 sm:p-8"
+          onClick={onClose}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Démonstration Xpeditis"
+        >
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            transition={{ duration: 0.3, ease: 'easeOut' }}
+            className="relative w-full max-w-5xl"
+            onClick={e => e.stopPropagation()}
+          >
+            <button
+              onClick={onClose}
+              aria-label="Fermer"
+              className="absolute -top-12 right-0 p-2 text-white/80 hover:text-white transition-colors rounded-full hover:bg-white/10"
+            >
+              <X className="w-7 h-7" />
+            </button>
+            <div className="rounded-2xl overflow-hidden shadow-2xl ring-1 ring-white/20 bg-black aspect-video">
+              <video controls autoPlay playsInline className="w-full h-full object-contain">
+                <source src="/assets/videos/demo-xpeditis.mp4" type="video/mp4" />
+                <source src="/assets/videos/demo-xpeditis.webm" type="video/webm" />
+              </video>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+}