Change banner style

src/components/Discours/Hero.module.scss

@@ -1,34 +1,30 @@
-.about-discours {
-  @include font-size(1.7rem);
-
-  background: #000;
-  color: #fff;
-  font-weight: 400;
+.aboutDiscours {
+  @include font-size(1.6rem);
+  background: #fef2f2;
+  font-weight: 500;
   margin-bottom: 6.4rem;
-  padding: 3.6rem 0;
+  padding: 8rem 0 6.4rem;
   text-align: center;
 
   h4 {
-    margin-bottom: 4rem;
+    @include font-size(4rem);
+    font-weight: bold;
+    line-height: 1.1;
+    margin-bottom: 2rem;
   }
 
   em {
     font-weight: inherit;
   }
-
-  ::selection {
-    background: #fff;
-    color: #000;
-  }
 }
 
-.about-discours__actions {
+.aboutDiscoursActions {
   margin-top: 4.8rem;
 
-  .button {
-    border: 3px solid;
-    border-radius: 1.2em;
-    color: inherit;
+  :global(.button) {
+    border: 3px solid #000;
+    border-radius: 0.8rem;
+    color: #fff;
     cursor: pointer;
     display: inline-block;
     font-weight: bold;
@@ -39,7 +35,6 @@
 
     &:hover {
       background: #fff;
-      border-color: #fff;
       color: #000;
     }
   }

src/components/Discours/Hero.tsx

@@ -1,4 +1,4 @@
-import './Hero.scss'
+import styles from './Hero.module.scss'
 
 import { showModal } from '../../stores/ui'
 import { useLocalize } from '../../context/localize'
@@ -6,10 +6,10 @@ import { useLocalize } from '../../context/localize'
 export default () => {
   const { t } = useLocalize()
   return (
-    <div class="about-discours">
+    <div class={styles.aboutDiscours}>
       <div class="wide-container">
         <div class="row">
-          <div class="col-lg-20 offset-lg-2 col-xl-16 offset-xl-4">
+          <div class="col-lg-20 offset-lg-2 col-xl-18 offset-xl-3">
             <h4>{t('Horizontal collaborative journalistic platform')}</h4>
             <p>
               {t(
@@ -24,16 +24,13 @@ export default () => {
                 .
               </em>
             </p>
-            <div class="about-discours__actions">
+            <div class={styles.aboutDiscoursActions}>
+              <a class="button" href="/create">
+                {t('Create post')}
+              </a>
               <a class="button" onClick={() => showModal('auth')}>
                 {t('Join the community')}
               </a>
-              <a class="button" href="/create">
-                {t('Become an author')}
-              </a>
-              <a class="button" href="/about/manifest">
-                {t('About the project')}
-              </a>
               <a class="button" href="/about/help">
                 {t('Support us')}
               </a>