website: use slider on docs, add flow images (#4997)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

website/docs/index.mdx

@@ -25,9 +25,41 @@ For more information about configuration, Beta versions, and additional installa
 
 ## Screenshots
 
-authentik can use Light or Dark mode for the Admin interface and the User interface.
+authentik can use Light or Dark mode for the Admin interface, User interface and the flow interface.
 
-| Light                            | Dark                            |
-| -------------------------------- | ------------------------------- |
-| ![](/img/screen_apps_light.jpg)  | ![](/img/screen_apps_dark.jpg)  |
-| ![](/img/screen_admin_light.jpg) | ![](/img/screen_admin_dark.jpg) |
+import "react-before-after-slider-component/dist/build.css";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+<ReactBeforeSliderComponent
+    firstImage={{
+        id: 1,
+        imageUrl: useBaseUrl("img/screen_flow_dark.jpg"),
+    }}
+    secondImage={{
+        id: 2,
+        imageUrl: useBaseUrl("img/screen_flow_light.jpg"),
+    }}
+/>
+
+<ReactBeforeSliderComponent
+    firstImage={{
+        id: 1,
+        imageUrl: useBaseUrl("img/screen_apps_dark.jpg"),
+    }}
+    secondImage={{
+        id: 2,
+        imageUrl: useBaseUrl("img/screen_apps_light.jpg"),
+    }}
+/>
+
+<ReactBeforeSliderComponent
+    firstImage={{
+        id: 1,
+        imageUrl: useBaseUrl("img/screen_admin_dark.jpg"),
+    }}
+    secondImage={{
+        id: 2,
+        imageUrl: useBaseUrl("img/screen_admin_light.jpg"),
+    }}
+/>

website/src/pages/index.jsx

@@ -114,13 +114,13 @@ function Home() {
                                                     firstImage={{
                                                         id: 1,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_apps_light.jpg"
+                                                            "img/screen_apps_dark.jpg"
                                                         ),
                                                     }}
                                                     secondImage={{
                                                         id: 2,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_apps_dark.jpg"
+                                                            "img/screen_apps_light.jpg"
                                                         ),
                                                     }}
                                                 />
@@ -166,13 +166,13 @@ function Home() {
                                                     firstImage={{
                                                         id: 1,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_admin_light.jpg"
+                                                            "img/screen_admin_dark.jpg"
                                                         ),
                                                     }}
                                                     secondImage={{
                                                         id: 2,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_admin_dark.jpg"
+                                                            "img/screen_admin_light.jpg"
                                                         ),
                                                     }}
                                                 />