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

@@ -27,7 +27,6 @@ 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,
@@ -97,7 +96,6 @@ 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%']);
@@ -376,6 +374,7 @@ export default function LandingPage() {
                   <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                 </Link>
               ) : (
+                <>
                   <Link
                     href="/register"
                     target="_blank"
@@ -385,14 +384,16 @@ export default function LandingPage() {
                     <span>{t('hero.ctaRegister')}</span>
                     <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                   </Link>
-              )}
+                  <Link
-              <button
+                    href="/login"
-                type="button"
+                    target="_blank"
-                onClick={() => setIsDemoOpen(true)}
+                    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')}
-              </button>
+                  </Link>
+                </>
+              )}
             </motion.div>
           </motion.div>
         </div>
@@ -1075,8 +1076,6 @@ export default function LandingPage() {
       </section>
 
       <LandingFooter />
-
-      <DemoVideoModal isOpen={isDemoOpen} onClose={() => setIsDemoOpen(false)} />
     </div>
   );
 }

apps/frontend/src/components/DemoVideoModal.tsx

@@ -1,74 +0,0 @@
-'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
-  );
-}