raidprotect · Zallom · May 22, 2026 · May 22, 2026 · May 22, 2026
diff --git a/src/components/landing/Hero/styles.module.css b/src/components/landing/Hero/styles.module.css
@@ -50,7 +50,7 @@
   font-family: var(--ifm-font-family-base);
   margin-top: 0;
   margin-bottom: 50px;
-  color: #e1e0e9;
+  color: #fff;
   font-size: 18px;
 }
 

diff --git a/src/components/landing/Servers/styles.module.css b/src/components/landing/Servers/styles.module.css
@@ -6,7 +6,7 @@
 .title {
   text-align: center;
   margin: 0 0 20px 0;
-  color: #e1e0e9;
+  color: #fff;
   font-family: var(--ifm-font-family-base);
   font-size: 18px;
   font-weight: 400;
@@ -118,7 +118,7 @@
 }
 
 .memberCount {
-  color: #e1e0e9;
+  color: #fff;
   font-size: 14px;
 }
 

diff --git a/src/pages/frame/cta.module.css b/src/pages/frame/cta.module.css
@@ -0,0 +1,73 @@
+/* /frame/cta — reproduit la section CTA Webflow (cta-section + cta-wrap + cta-content-wrap). */
+
+.section {
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+
+@media (max-width: 991px) {
+  .section {
+    padding-top: 70px;
+    padding-bottom: 70px;
+  }
+}
+
+.wrap {
+  border-radius: 20px;
+  padding: 100px;
+  position: relative;
+  overflow: hidden;
+}
+
+@media (max-width: 991px) {
+  .wrap {
+    padding: 70px 50px;
+  }
+}
+
+@media (max-width: 767px) {
+  .wrap {
+    padding: 50px 24px;
+  }
+}
+
+.contentWrap {
+  z-index: 2;
+  text-align: center;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.title {
+  font-family: var(--ifm-heading-font-family);
+  color: #fff;
+  font-size: 50px;
+  font-weight: 600;
+  line-height: 1.2em;
+  margin: 0 0 16px;
+}
+
+@media (max-width: 767px) {
+  .title {
+    font-size: 38px;
+  }
+}
+
+.description {
+  color: #fff;
+  margin: 0 0 40px;
+  font-size: 18px;
+  line-height: 1.5em;
+}
+
+.buttonList {
+  grid-column-gap: 30px;
+  grid-row-gap: 15px;
+  flex-flow: wrap;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
diff --git a/src/pages/frame/cta.tsx b/src/pages/frame/cta.tsx
@@ -0,0 +1,52 @@
+import React, {type ReactNode} from 'react';
+import Head from '@docusaurus/Head';
+import clsx from 'clsx';
+import shared from '@site/src/components/landing/styles/shared.module.css';
+import frame from './frame.module.css';
+import styles from './cta.module.css';
+
+export default function FrameCta(): ReactNode {
+  return (
+    <>
+      <Head>
+        <title>CTA Section</title>
+        <meta name="robots" content="noindex, nofollow" />
+        <meta name="description" content="designed for iframe" />
+      </Head>
+      <main className={frame.frame}>
+        <section className={clsx(shared.landing, styles.section)}>
+          <div className={shared.container}>
+            <div className={styles.wrap}>
+              <div className={styles.contentWrap}>
+                <h2 className={styles.title}>
+                  Garder une longueur{' '}
+                  <span className={shared.textGradient}>d'avance</span>
+                </h2>
+                <p className={styles.description}>
+                  Ajoutez RaidProtect et commencez à protéger votre serveur dès
+                  aujourd'hui.
+                </p>
+                <div className={styles.buttonList}>
+                  <a
+                    href="https://raidprotect.bot/invite"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={shared.btnPrimary}>
+                    Ajouter le bot
+                  </a>
+                  <a
+                    href="https://raidprotect.bot/discord"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={shared.btnSecondary}>
+                    Rejoindre le serveur
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/pages/frame/frame.module.css b/src/pages/frame/frame.module.css
@@ -0,0 +1,6 @@
+/* Wrapper partagé entre /frame/hero et /frame/cta.
+ * Reproduit body.body-frame du Webflow (background var(--color--top-gg) = #070510). */
+.frame {
+  background-color: #070510;
+  min-height: 100vh;
+}
diff --git a/src/pages/frame/hero.tsx b/src/pages/frame/hero.tsx
@@ -0,0 +1,45 @@
+import React, {type ReactNode, useEffect, useState} from 'react';
+import Head from '@docusaurus/Head';
+import Hero from '@site/src/components/landing/Hero';
+import Servers from '@site/src/components/landing/Servers';
+import frame from './frame.module.css';
+
+type Counts = {
+  servers: number;
+  users: number;
+  captcha: number;
+  antispam: number;
+};
+
+export default function FrameHero(): ReactNode {
+  const [counts, setCounts] = useState<Counts | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('https://docs.raidprotect.bot/counts.json')
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: Counts | null) => {
+        if (!cancelled && data) setCounts(data);
+      })
+      .catch(() => {
+        // Stats are best-effort; failure is non-blocking.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>Hero Section</title>
+        <meta name="robots" content="noindex, nofollow" />
+        <meta name="description" content="designed for iframe" />
+      </Head>
+      <main className={frame.frame}>
+        <Hero serverCount={counts?.servers} />
+        <Servers />
+      </main>
+    </>
+  );
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -107,7 +107,7 @@
 }
 
 .counterLabel {
-  color: #e1e0e9;
+  color: #fff;
   font-size: 18px;
   margin-top: 4px;
 }
@@ -167,7 +167,7 @@
 
 .featuresSubtitle {
   margin: 0;
-  color: #e1e0e9;
+  color: #fff;
   font-size: 18px;
   font-weight: 400;
 }
@@ -257,7 +257,7 @@
 
 .featuresItemDescription {
   margin: 0;
-  color: #e1e0e9;
+  color: #fff;
   font-size: 18px;
 }
 
@@ -334,7 +334,7 @@
 
 .pricingDescription {
   margin: 0 0 40px 0;
-  color: #e1e0e9;
+  color: #fff;
   font-size: 18px;
 }
 
@@ -429,7 +429,7 @@
 
 .itemTagline {
   margin: 0;
-  color: #e1e0e9;
+  color: #fff;
   font-size: 18px;
   line-height: 1.5em;
 }
@@ -450,7 +450,7 @@
   justify-content: flex-start;
   column-gap: 8px;
   row-gap: 8px;
-  color: #e1e0e9;
+  color: #fff;
 }
 
 .featureIcon {