Method

package.json

@@ -33,7 +33,9 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-dropzone": "^15.0.0",
-    "react-router-dom": "^7.13.2"
+    "react-fast-marquee": "^1.6.5",
+    "react-router-dom": "^7.13.2",
+    "swiper": "^12.1.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

src/App.tsx

@@ -40,6 +40,7 @@ import NotFound from "./pages/404";
 import useSettings from "./hooks/queries/useSettings";
 import AboutPage from "./pages/public/AboutPage";
 import Testimonies from "./pages/admin/TestimonyPage";
+import MethodPage from "./pages/public/MethodPage";
 
 function MaintenanceGuard() {
   const location = useLocation();
@@ -90,7 +91,7 @@ export default function App() {
           "::-webkit-scrollbar-corner": {
             background: "transparent",
           },
-          "ul:not(.MuiList-root, .MuiImageList-root)": {
+          "ul:not(.MuiList-root, .MuiImageList-root, .MuiTimeline-root)": {
             margin: "0 0 0 2rem",
             paddingLeft: "0",
             li: {
@@ -155,6 +156,14 @@ export default function App() {
                         </PublicLayout>
                       }
                     />
+                    <Route
+                      path="/method"
+                      element={
+                        <PublicLayout>
+                          <MethodPage />
+                        </PublicLayout>
+                      }
+                    />
                     <Route
                       path="/legal-notice"
                       element={

src/components/custom/CustomTimelineItem.tsx

@@ -0,0 +1,93 @@
+import TimelineItem from "@mui/lab/TimelineItem";
+import TimelineSeparator from "@mui/lab/TimelineSeparator";
+import TimelineConnector, {
+  type TimelineConnectorProps,
+} from "@mui/lab/TimelineConnector";
+import TimelineContent, {
+  type TimelineContentProps,
+} from "@mui/lab/TimelineContent";
+import TimelineDot, { type TimelineDotProps } from "@mui/lab/TimelineDot";
+import TimelineOppositeContent, {
+  type TimelineOppositeContentProps,
+} from "@mui/lab/TimelineOppositeContent";
+import Icon from "@mdi/react";
+import { useTheme } from "@mui/material";
+
+export default function CustomTimelineItem({
+  content,
+  contentProps,
+  oppositeContent,
+  oppositeContentProps,
+  dotIcon,
+  dotProps,
+  connector = true,
+  connectorProps,
+}: {
+  content: React.ReactNode;
+  contentProps?: TimelineContentProps;
+  oppositeContent?: React.ReactNode;
+  oppositeContentProps?: TimelineOppositeContentProps;
+  dotIcon?: string;
+  dotProps?: TimelineDotProps;
+  connector?: boolean;
+  connectorProps?: TimelineConnectorProps;
+}) {
+  const theme = useTheme();
+  return (
+    <TimelineItem sx={{ minHeight: "42px" }}>
+      {oppositeContent && (
+        <TimelineOppositeContent
+          {...oppositeContentProps}
+          sx={{
+            color: "text.secondary",
+            ...oppositeContentProps?.sx,
+          }}
+        >
+          {oppositeContent}
+        </TimelineOppositeContent>
+      )}
+      <TimelineSeparator>
+        <TimelineDot
+          color="primary"
+          variant="outlined"
+          {...dotProps}
+          sx={{
+            marginY: "0px",
+            borderWidth: "1px",
+            padding: dotIcon ? "7px" : "5px",
+            ...dotProps?.sx,
+          }}
+        >
+          {dotIcon && (
+            <Icon
+              path={dotIcon}
+              size={0.8333}
+              style={{ color: theme.palette.primary.light }}
+            />
+          )}
+        </TimelineDot>
+        {connector && (
+          <TimelineConnector
+            {...connectorProps}
+            sx={{
+              width: "1px",
+              minHeight: "24px",
+              backgroundColor: theme.palette.primary.main,
+              ...connectorProps?.sx,
+            }}
+          />
+        )}
+      </TimelineSeparator>
+      <TimelineContent
+        {...contentProps}
+        sx={{
+          paddingY: "0px",
+          marginTop: dotIcon ? "6px" : "-6px",
+          ...contentProps?.sx,
+        }}
+      >
+        {content}
+      </TimelineContent>
+    </TimelineItem>
+  );
+}

src/components/custom/MultipleMarquee.tsx

@@ -0,0 +1,101 @@
+import { Children } from "react";
+import Marquee from "react-fast-marquee";
+import { ResponsiveStack } from "./ResponsiveLayout";
+import type { SxProps } from "@mui/system";
+
+const MAX_ROWS = 10;
+
+export default function MultipleMarquee({
+  rows = 2,
+  distribute = false,
+  direction = "horizontal",
+  gap = "24px",
+  sx,
+  children,
+  ...props
+}: {
+  rows?: number;
+  distribute?: boolean;
+  direction?: "vertical" | "horizontal";
+  gap?: string;
+  sx?: SxProps;
+  children: React.ReactNode[];
+} & Omit<React.ComponentProps<typeof Marquee>, "children" | "direction">) {
+  const items = Children.toArray(children).filter(Boolean);
+
+  if (!rows || rows < 2 || rows > MAX_ROWS) {
+    throw new Error(
+      `MultipleMarquee: le nombre de lignes doit être compris entre 2 et ${MAX_ROWS}.`,
+    );
+  }
+
+  if (!distribute) {
+    // Mêmes items dans toutes les lignes
+    return (
+      <ResponsiveStack
+        rowGap={gap}
+        sx={{
+          gap,
+          flexDirection: direction === "vertical" ? "row" : "column",
+          ...sx,
+        }}
+      >
+        {[...Array(rows)].map((_, rowIndex) => (
+          <Marquee
+            key={rowIndex}
+            direction={
+              rowIndex % 2 === 0
+                ? direction === "horizontal"
+                  ? "left"
+                  : "up"
+                : direction === "horizontal"
+                  ? "right"
+                  : "down"
+            }
+            {...props}
+          >
+            {items}
+          </Marquee>
+        ))}
+      </ResponsiveStack>
+    );
+  }
+
+  // Distribuer les items sur les lignes
+  const itemsPerRow = Math.ceil(items.length / rows);
+
+  return (
+    <ResponsiveStack
+      rowGap={gap}
+      sx={{
+        gap,
+        flexDirection: direction === "vertical" ? "row" : "column",
+        ...sx,
+      }}
+    >
+      {[...Array(rows)].map((_, rowIndex) => {
+        const start = rowIndex * itemsPerRow;
+        const end = start + itemsPerRow;
+        const rowItems = items.slice(start, end);
+
+        return (
+          <Marquee
+            key={rowIndex}
+            direction={
+              rowIndex % 2 === 0
+                ? direction === "horizontal"
+                  ? "left"
+                  : "up"
+                : direction === "horizontal"
+                  ? "right"
+                  : "down"
+            }
+            {...props}
+          >
+            {rowItems}
+          </Marquee>
+        );
+      })}
+    </ResponsiveStack>
+  );
+}