Add back newsletter form on homepage

GladysAssistant · May 1, 2024 · f25f876 · f25f876
1 parent 51d3cd5
commit f25f876
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -9,6 +9,7 @@ import YoutubeEmbedVideo from "./YoutubeEmbedVideo";
 import HoverVideoPlayer from "react-hover-video-player";
 import { TestimonialHomeSection } from "./Testimonial";
 import PlayImage from "./play.svg";
+import SubcribeNewsletter from "./home/SubcribeNewsletter";
 
 import testimonialFr from "./testimonials/testimonial.fr.json";
 import testimonialEn from "./testimonials/testimonial.en.json";
@@ -373,6 +374,11 @@ function Home({ integrations, lang }) {
         </div>
       </header>
       <main>
+        <div
+          className={classnames(styles.homeSection, styles.newsletterSection)}
+        >
+          <SubcribeNewsletter lang={lang} />
+        </div>
         <div className={classnames(styles.homeSection)}>
           <h2 className={styles.secondaryTitle}>
             <Translate
@@ -753,6 +759,11 @@ function Home({ integrations, lang }) {
             </div>
           </div>
         </div>
+        <div
+          className={classnames(styles.homeSection, styles.newsletterSection)}
+        >
+          <SubcribeNewsletter lang={lang} />
+        </div>
       </main>
     </>
   );

diff --git a/src/components/home/SubcribeNewsletter.js b/src/components/home/SubcribeNewsletter.js
@@ -1,6 +1,8 @@
 import React from "react";
 
 import Translate, { translate } from "@docusaurus/Translate";
+import cx from "classnames";
+import styles from "../homeStyles.module.css";
 
 function validateEmail(email) {
   var re = /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/gim;
@@ -57,11 +59,11 @@ function SubcribeNewsletter({ lang }) {
           id="subscribeNewsletter.text"
           description="Subscribe newsletter banner text"
         >
-          Emails are sent by Pierre-Gilles Leymarie, founder of the project.
-          You can unsubscribe at any time 🙂
+          Emails are sent by Pierre-Gilles Leymarie, founder of the project. You
+          can unsubscribe at any time 🙂
         </Translate>
       </div>
-      <div className="col col--4">
+      <div className={cx("col col--4", styles.newsletterSectionInputCol)}>
         <form>
           {status === "failed" && (
             <div

diff --git a/src/components/homeStyles.module.css b/src/components/homeStyles.module.css
@@ -379,3 +379,14 @@ YouTube videos
 .homeYouTubeVideoTitle {
   margin-top: 8px;
 }
+
+.newsletterSection {
+  background-color: var(--ifm-hero-background-color);
+  color: var(--ifm-hero-text-color);
+}
+
+@media screen and (max-width: 996px) {
+  .newsletterSectionInputCol {
+    margin-top: 20px;
+  }
+}