docs: ✨ display styled pages when signIn and unauthorized

Signed-off-by: slumbering <slumbering.pierrot@gmail.com>

website/src/components/DocPageAuthentication.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { GithubLoginButton } from 'react-social-login-buttons';
-import style from './DocAuthentication.module.css'
+import style from './DocPageAuthentication.module.css'
 
 export default function DocAuthentication() {
     return (

website/src/components/DocPageRedirect.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import style from './DocPageRedirect.module.css'
+
+
+export default function DocPageRedirect() {
+    const [counter, setCounter] = useState(10)
+
+    useEffect(() => {
+        setTimeout(() => window.location.href = "https://dagger.io", 10000)
+        setInterval(() => setCounter((prevState) => prevState - 1), 1000)
+    }, [])
+
+    return (
+        <div className={`container ${style.wrapper}`}>
+            <div className={`row ${style.row}`}>
+                <div className="col col--4 col--offset-2">
+                    <h1 className={style.h1}>Oups!</h1>
+                    <p>It seems you don't have the permission to see Dagger's documentation. But don't worry you can request an Eary Access :). You'll be redirect to Dagger website in {counter} seconds </p>
+                    <p>See you soon !</p>
+                    <br />
+                    <small><strong>If nothing happen, <a href="https://dagger.io">click here</a> to go to Dagger website</strong></small>
+                </div>
+                <div className="col col--4">
+                    <img src="/img/dagger-astronaute.png" alt="" />
+                </div>
+            </div>
+        </div>
+    )
+}

website/src/components/DocPageRedirect.module.css

@@ -0,0 +1,25 @@
+.wrapper {
+  background: linear-gradient(180deg, #131226, #0e2b3d);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--ifm-color-primary-light);
+  max-width: 100%;
+}
+
+.wrapper a {
+  color: var(--ifm-color-primary-light);
+  text-decoration: underline;
+}
+
+.h1 {
+  margin-bottom: 2rem;
+}
+
+.row {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}