Now I need to remove the unused Swords and Lock imports since they were only used for the Tactical Challenge button:
Removed the "Tactical Challenge" button from the categories array and cleaned up the unused imports (Swords, Lock, TreePine). The remaining 6 buttons will automatically rebalance in the flex container since they use flex-wrap justify-center gap-3 layout, maintaining consistent sizing and alignment.
Fix — Remove text below discipline buttons.
Delete completely the text/description that appears below the discipline buttons row in the header. Keep only the buttons themselves, nothing below them. Fix — Discipline modal z-index and overlay.
When clicking a discipline button, the modal popup appears behind the hero content instead of on top of everything. This is a z-index issue.
Fix:
Set the modal and its dark backdrop overlay to z-index: 9999 so it always appears on top of all page content
The dark backdrop must cover the entire page (position: fixed, top: 0, left: 0, width: 100%, height: 100%)
The modal box must be centered on screen (position: fixed, centered vertically and horizontally)
This applies to all modals on the page: discipline modals, "JE PARTICIPE !" modal, and the VISITEURS/EXPOSANTS modal
Now I have the full context. Let me make all the fixes:
Now let me update the hero component with the live counter, remove Early Access line, and add the benefit blocks:
Now let me update the registration modal to dispatch the custom events when a form is submitted:
I've made all the requested fixes:
style={{ zIndex: 9999 }} so they always appear on top of all page content including the hero section.Hero section updates:
Critical fix — All modals must render on top of everything.
The discipline modals are still rendering behind the page content. This must be fixed at the code level.
Exact fix required:
All modals must use a React Portal (ReactDOM.createPortal) rendering directly into document.body — not inside the component tree
The modal backdrop: position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: rgba(0,0,0,0.85)
The modal box: position: fixed; z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%)
Add overflow: hidden on the <body> when any modal is open to prevent background scrolling
This applies to every modal on the site without exception