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 new file mode 100644 index 0000000..80fac81 --- /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: #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 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 + + + +
+ + +
+ + ); +} 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 {