feat(landing): port de la landing Webflow en TSX

docusaurus.config.ts

@@ -69,34 +69,6 @@ export default async function createConfigAsync() {
                     es: '/es/',
                     pt: '/pt/'
                 },
-                legal: {
-                    fr: '/legal',
-                    en: '/en/legal',
-                    de: '/de/legal',
-                    es: '/es/legal',
-                    pt: '/pt/legal'
-                },
-                terms: {
-                    fr: '/terms',
-                    en: '/en/terms',
-                    de: '/de/terms',
-                    es: '/es/terms',
-                    pt: '/pt/terms'
-                },
-                privacy: {
-                    fr: '/privacy',
-                    en: '/en/privacy',
-                    de: '/de/privacy',
-                    es: '/es/privacy',
-                    pt: '/pt/privacy'
-                },
-                cookies: {
-                    fr: '/cookies',
-                    en: '/en/cookies',
-                    de: '/de/cookies',
-                    es: '/es/cookies',
-                    pt: '/pt/cookies'
-                },
                 geranium: {
                     fr: 'https://i.dfr.gg/geranium.webm',
                     en: 'https://i.dfr.gg/en-geranium.webm',
@@ -356,7 +328,7 @@ export default async function createConfigAsync() {
                             },
                             {
                                 label: 'Documentation',
-                                to: '/',
+                                to: '/docs',
                                 target: '_self'
                             },
                             {
@@ -376,22 +348,22 @@ export default async function createConfigAsync() {
                         items: [
                             {
                                 label: 'Mentions légales',
-                                to: 'legal',
+                                to: '/legal',
                                 target: '_self'
                             },
                             {
                                 label: 'Conditions d\'utilisation',
-                                to: 'terms',
+                                to: '/terms',
                                 target: '_self'
                             },
                             {
                                 label: 'Politique de confidentialité',
-                                to: 'privacy',
+                                to: '/privacy',
                                 target: '_self'
                             },
                             {
                                 label: 'Politique des cookies',
-                                to: 'cookies',
+                                to: '/cookies',
                                 target: '_self'
                             }
                         ],

src/components/landing/Hero/index.tsx

@@ -0,0 +1,58 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import shared from '../styles/shared.module.css';
+import styles from './styles.module.css';
+
+type HeroProps = {
+  /** Nombre brut de serveurs, arrondi à la dizaine de milliers inférieure
+   *  (pallier 50 000) pour produire un chiffre stable façon checkpoint. */
+  serverCount?: number;
+};
+
+const PRE_TITLE_FALLBACK = 350_000;
+const PRE_TITLE_STEP = 50_000;
+
+function roundedServerCount(raw: number | undefined): number {
+  if (raw == null || !Number.isFinite(raw)) return PRE_TITLE_FALLBACK;
+  return Math.floor(raw / PRE_TITLE_STEP) * PRE_TITLE_STEP;
+}
+
+export default function Hero({serverCount}: HeroProps): ReactNode {
+  const formatted = roundedServerCount(serverCount).toLocaleString('fr-FR');
+  return (
+    <section className={clsx(shared.landing, styles.section)}>
+      <div className={shared.container}>
+        <div className={styles.content}>
+          <div className={styles.preTitleWrap}>
+            <div className={styles.preTitleText}>
+              Utilisé par plus de {formatted} serveurs
+            </div>
+          </div>
+          <h1 className={styles.title}>
+            Le meilleur bot Discord de{' '}
+            <span className={shared.textGradient}>sécurité</span>
+          </h1>
+          <p className={styles.description}>
+            Empêchez les utilisateurs malintentionnés de nuire à votre serveur
+            Discord.
+          </p>
+          <div className={styles.buttonList}>
+            <a
+              href="https://raidprotect.bot/invite"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={shared.btnPrimary}>
+              Ajouter à Discord
+            </a>
+            <a
+              href="#features"
+              rel="noopener noreferrer"
+              className={shared.btnSecondary}>
+              Voir les fonctionnalités
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/landing/Hero/styles.module.css

@@ -0,0 +1,85 @@
+.section {
+  padding-top: 90px;
+  padding-bottom: 150px;
+  position: relative;
+  overflow-x: clip;
+}
+
+.content {
+  z-index: 2;
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.preTitleWrap {
+  border-radius: 50px;
+  background-color: #1b1a25;
+  background-image: linear-gradient(180deg, #d35f5f 40%, #a561a3);
+  margin-bottom: 20px;
+  padding: 1px;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.preTitleText {
+  border-radius: 50px;
+  background-color: #1b1a25;
+  padding: 7px 14px 5px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: #fff;
+  text-align: center;
+}
+
+.title {
+  margin: 0 0 10px 0;
+  font-family: var(--ifm-heading-font-family);
+  color: #fff;
+  font-size: 68px;
+  font-weight: 600;
+  line-height: 1.2em;
+}
+
+.description {
+  width: 75%;
+  font-family: var(--ifm-font-family-base);
+  margin-top: 0;
+  margin-bottom: 50px;
+  color: #e1e0e9;
+  font-size: 18px;
+}
+
+.buttonList {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: center;
+  align-items: center;
+  column-gap: 30px;
+  row-gap: 15px;
+}
+
+@media screen and (max-width: 991px) {
+  .section {
+    padding-top: 50px;
+    padding-bottom: 100px;
+  }
+  .description {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .section {
+    padding-top: 30px;
+    padding-bottom: 80px;
+  }
+  .title {
+    font-size: 48px;
+  }
+}