Edit hero banner

front/src/components/ArticlesSection.tsx

@@ -17,7 +17,7 @@ export default function ArticlesSection() {
     }, []);
 
     return (
-        <div className="row" style={{
+        <div className="row" id="articles" style={{
             display: 'flex',
             flexWrap: 'wrap',
             justifyContent: 'space-around',

front/src/components/FstSection.tsx

@@ -1,4 +1,5 @@
 import Button from "./Button";
+import ButtonLink from "./ButtonLink";
 import NavBar from "./NavBar";
 
 interface FstSectionProps {
@@ -30,8 +31,8 @@ export default function FstSection ({centertxt, txtbt1, txtbt2, image}: FstSecti
             <div style={{height:"150px"}} />
             <h1>{centertxt}</h1><br />
             <div style={{display:"flex", justifyContent: "center", gap: "20px"}}>
-                <Button onClick={() => alert("One")} color="primary" children={txtbt1} />
-                <Button onClick={() => {alert("Two")}} color="secondary" children={txtbt2} /> 
+                <ButtonLink url="/game" color="primary" text={txtbt1} />
+                <ButtonLink url="#articles" color="secondary" text={txtbt2} />
             </div>
         </div></div>
     )

front/src/pages/MainPage.tsx

@@ -7,9 +7,9 @@ export default function MainPage() {
         <>
         <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
             <FstSection 
-                centertxt="Choisissez votre numéro :"
-                txtbt1="Un" 
-                txtbt2="Deux" 
+                centertxt="Sauvez l'océan :"
+                txtbt1="Jeu interactif" 
+                txtbt2="Découvrez nos articles" 
                 image="url('/pictures/sea.gif')"/>
             <ArticlesSection />
             <Footer bgcolor="lightblue"/>