From ea12525dc70bb0bd2e4fe2b854f294a24028f401 Mon Sep 17 00:00:00 2001 From: Zallom Date: Fri, 22 May 2026 13:19:11 +0200 Subject: [PATCH 1/2] feat(frame-pages): /frame/hero et /frame/cta en TSX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pages embeddables (iframe) sans Layout Docusaurus : - /frame/hero : réutilise les composants + de la landing, avec fetch counts.json pour le pre-title dynamique - /frame/cta : section CTA inline (titre 'Garder une longueur d'avance' + 2 boutons : Ajouter le bot / Rejoindre le serveur) Wrapper .frame partagé : background #070510 (var --color--top-gg du Webflow). comme les frames Webflow. Traductions EN/DE/ES/PT à venir dans une sous-PR séparée. --- src/pages/frame/cta.module.css | 73 ++++++++++++++++++++++++++++++++ src/pages/frame/cta.tsx | 52 +++++++++++++++++++++++ src/pages/frame/frame.module.css | 6 +++ src/pages/frame/hero.tsx | 45 ++++++++++++++++++++ 4 files changed, 176 insertions(+) create mode 100644 src/pages/frame/cta.module.css create mode 100644 src/pages/frame/cta.tsx create mode 100644 src/pages/frame/frame.module.css create mode 100644 src/pages/frame/hero.tsx diff --git a/src/pages/frame/cta.module.css b/src/pages/frame/cta.module.css new file mode 100644 index 0000000..fc3c6d0 --- /dev/null +++ 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: #e1e0e9; + 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 new file mode 100644 index 0000000..f80d9cd --- /dev/null +++ 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 ( + <> + + CTA Section + + + +
+
+
+
+
+

+ Garder une longueur{' '} + d'avance +

+

+ Ajoutez RaidProtect et commencez à protéger votre serveur dès + aujourd'hui. +

+ +
+
+
+
+
+ + ); +} diff --git a/src/pages/frame/frame.module.css b/src/pages/frame/frame.module.css new file mode 100644 index 0000000..68f04b6 --- /dev/null +++ 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 new file mode 100644 index 0000000..87fefe9 --- /dev/null +++ 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(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 ( + <> + + Hero Section + + + +
+ + +
+ + ); +} From f3f0ec4f1ee3006a422a659ee32ef18bf4f783e1 Mon Sep 17 00:00:00 2001 From: Zallom Date: Fri, 22 May 2026 14:57:34 +0200 Subject: [PATCH 2/2] fix: texte du body en blanc pur (#fff) sur landing et frame MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Webflow utilisait body color #e1e0e9 (gray-4) qui rend les paragraphes légèrement grisâtres. Sur le rendu réel le contraste est trop faible, on passe à blanc pur partout : Hero description, Servers title/marquee items, index (featuresSubtitle/pricingDescription/itemTagline/counterLabel/ aboutSubtitle), et frame/cta description. --- src/components/landing/Hero/styles.module.css | 2 +- src/components/landing/Servers/styles.module.css | 4 ++-- src/pages/frame/cta.module.css | 2 +- src/pages/index.module.css | 12 ++++++------ 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/landing/Hero/styles.module.css b/src/components/landing/Hero/styles.module.css index 3015b24..4b8ca27 100644 --- 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 index b3be400..6646837 100644 --- 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 index fc3c6d0..80fac81 100644 --- a/src/pages/frame/cta.module.css +++ b/src/pages/frame/cta.module.css @@ -57,7 +57,7 @@ } .description { - color: #e1e0e9; + color: #fff; margin: 0 0 40px; font-size: 18px; line-height: 1.5em; diff --git a/src/pages/index.module.css b/src/pages/index.module.css index bec9b26..45dfbc6 100644 --- 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 {