front/src/components/FstSection.tsx

@@ -1,5 +1,6 @@
-import Button from "./Button";
+
 import NavBar from "./NavBar";
+import { Link } from "react-router";
 
 export default function FstSection () {
     return (
@@ -31,8 +32,55 @@ export default function FstSection () {
 
             >Help us to save our oceans</h1><br />
             <div style={{display:"flex", justifyContent: "center", gap: "20px"}}>
-                <Button color="primary" children={"Aller au jeu"} url="/game" />
+                {/* <Button color="primary" children={"Aller au jeu"} url="/game" />
-                <Button color="secondary" children={"Lire les articles"} url="/" /> 
+                <Button color="secondary" children={"Lire les articles"} url="/" />  */}
+                <Link to="/game" style={{
+                    backgroundColor: 'var(--color-yellow)',
+                    borderRadius: '8px',
+                    borderWidth: '0',
+                    color: 'var(--color-black)',
+                    cursor: 'pointer',
+                    display: 'inline-block',
+                    fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+                    fontSize: '20px',
+                    fontWeight: '500',
+                    lineHeight: '20px',
+                    listStyle: 'none',
+                    margin: '0',
+                    padding: '10px 12px',
+                    textAlign: 'center',
+                    transition: 'all 200ms',
+                    verticalAlign: 'baseline',
+                    whiteSpace: 'nowrap',
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none',
+                    touchAction: 'manipulation',
+                    textDecoration: 'none',
+                }}>Aller au jeu</Link>
+                <Link to="/articles" style={{
+                    backgroundColor: 'var(--color-darkblue)',
+                    borderRadius: '8px',
+                    borderWidth: '0',
+                    color: 'var(--color-white)',
+                    cursor: 'pointer',
+                    display: 'inline-block',
+                    fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+                    fontSize: '20px',
+                    fontWeight: '500',
+                    lineHeight: '20px',
+                    listStyle: 'none',
+                    margin: '0',
+                    padding: '10px 12px',
+                    textAlign: 'center',
+                    transition: 'all 200ms',
+                    verticalAlign: 'baseline',
+                    whiteSpace: 'nowrap',
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none',
+                    touchAction: 'manipulation',
+                    textDecoration: 'none',
+                }}>Lire les articles</Link>
+
             </div>
         </div></div>
     )

front/src/components/NavBar.tsx

@@ -1,4 +1,4 @@
-import ClickableLink from './ClickableLink.tsx';
+import { Link } from 'react-router';
 import RoundButton from './RoundButton.tsx';
 
 export default function NavBar(){
@@ -8,8 +8,9 @@ export default function NavBar(){
             {/* <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> */}
             <span className="material-symbols-outlined"
             style={{fontSize: "4em", color: "white", margin: "0.5em"}}>sailing</span>
-            <ClickableLink url="/" text = "Accueil" />
+            <Link to="/" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Home</Link>
-            <ClickableLink url="/game" text = "Jeu" />
+            <Link to="/game" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Game</Link>
+            <Link to="/articles" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Articles</Link>
         </div>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
             <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>