From 1de47f3fb882cb53bca2bdf78d2951b49caab804 Mon Sep 17 00:00:00 2001
From: iMax <latelierroleplay@gmail.com>
Date: Fri, 6 Dec 2024 03:51:26 +0100
Subject: [PATCH 1/4] Hot fix

---
 front/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/package.json b/front/package.json
index e104d46..36a46cd 100644
--- a/front/package.json
+++ b/front/package.json
@@ -16,7 +16,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.0.2",
-    "react-router-dom": "^6.2.1"
+    "react-router-dom": "^6.2.1",
     "three": "^0.171.0",
     "three-stdlib": "^2.34.0"
   },

From 71a829e7266de753fbcafb630a0bf929cf341715 Mon Sep 17 00:00:00 2001
From: = <teiva.tesson@etu.unicaen.fr>
Date: Fri, 6 Dec 2024 04:06:07 +0100
Subject: [PATCH 2/4] Edit hero banner

---
 front/src/components/ArticlesSection.tsx | 2 +-
 front/src/components/FstSection.tsx      | 5 +++--
 front/src/pages/MainPage.tsx             | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/front/src/components/ArticlesSection.tsx b/front/src/components/ArticlesSection.tsx
index a7b5df2..fdcca0b 100644
--- a/front/src/components/ArticlesSection.tsx
+++ b/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',
diff --git a/front/src/components/FstSection.tsx b/front/src/components/FstSection.tsx
index a978737..4a0908b 100644
--- a/front/src/components/FstSection.tsx
+++ b/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>
     )
diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx
index a64aeef..e371366 100644
--- a/front/src/pages/MainPage.tsx
+++ b/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"/>

From 5bb2ac3f9bc2821f414c30b251679604d73d60c6 Mon Sep 17 00:00:00 2001
From: iMax <latelierroleplay@gmail.com>
Date: Fri, 6 Dec 2024 04:43:17 +0100
Subject: [PATCH 3/4] =?UTF-8?q?-=20Mise=20=C3=A0=20jour=20de=20la=20DA=20d?=
 =?UTF-8?q?e=20la=20main=20page.=20-=20Ajout=20de=20data=20temporaire=20po?=
 =?UTF-8?q?ur=20les=20articles.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/index.html                         |  1 +
 front/src/components/ArticleCard.tsx     |  2 +-
 front/src/components/ArticlesSection.tsx | 43 +++++++++++++++++++++---
 front/src/components/Button.tsx          |  9 ++---
 front/src/components/ClickableLink.tsx   |  2 +-
 front/src/components/Footer.tsx          |  8 +++--
 front/src/components/FstSection.tsx      | 25 +++++++-------
 front/src/components/NavBar.tsx          |  8 +++--
 front/src/components/RoundButton.tsx     |  5 ++-
 front/src/pages/GamePage.tsx             |  2 +-
 front/src/pages/MainPage.tsx             |  6 +---
 11 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/front/index.html b/front/index.html
index e4b78ea..a8290b7 100644
--- a/front/index.html
+++ b/front/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=sailing" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/front/src/components/ArticleCard.tsx b/front/src/components/ArticleCard.tsx
index 6a02bb3..8167cc6 100644
--- a/front/src/components/ArticleCard.tsx
+++ b/front/src/components/ArticleCard.tsx
@@ -13,7 +13,7 @@ export default function ArticleCard({ articlePreview }: { articlePreview: Articl
             margin: '20px',
             padding: '1.25em',
             paddingBottom: '1em',
-            flex: '27%',
+            flex: '0 1 30%',
             textAlign: 'left',
         }}>
             <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F438%2F438396.jpg&f=1&nofb=1&ipt=14796576c139b58db62d2d2098392ef2fbaee77911040f7c0d98ab65a69c4644&ipo=images" alt="Article preview" style={{
diff --git a/front/src/components/ArticlesSection.tsx b/front/src/components/ArticlesSection.tsx
index a7b5df2..554c405 100644
--- a/front/src/components/ArticlesSection.tsx
+++ b/front/src/components/ArticlesSection.tsx
@@ -8,9 +8,41 @@ export default function ArticlesSection() {
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
 
+
+    const articles: ArticlePreview[] = [
+        {
+            id: 1,
+            title: "The Great Barrier Reef",
+            preview: "The Great Barrier Reef is the largest coral reef system in the world, composed of over 2,900 individual reefs and 900 islands stretching for over 2,300 kilometers (1,400 mi) over an area of approximately 344,400 square kilometers (133,000 sq mi).",        
+        },
+        {
+            id: 2,
+            title: "The Great Pacific Garbage Patch",
+            preview: "The Great Pacific Garbage Patch, also known as the Pacific trash vortex, is a gyre of marine debris particles in the north-central Pacific Ocean. It is located roughly from 135°W to 155°W and 35°N to 42°N.",
+        },
+        {
+            id: 3,
+            title: "The Amazon Rainforest",
+            preview: "The Amazon rainforest, alternatively, the Amazon Jungle, also known in English as Amazonia, is a moist broadleaf tropical rainforest in the Amazon biome that covers most of the Amazon basin of South America.",
+        },
+        {
+            id: 4,
+            title: "The Arctic",
+            preview: "The Arctic is a polar region located at the northernmost part of Earth. The Arctic consists of the Arctic Ocean, adjacent seas, and parts of Alaska (United States), Northern Canada (Canada), Finland, Greenland (Kingdom of Denmark), Iceland, Norway, Russia, and Sweden.",
+        },
+        {
+            id: 5,
+            title: "The Antarctic",
+            preview: "The Antarctic, is a polar region containing the geographic South Pole and is situated in the Antarctic region of the Southern Hemisphere, almost entirely south of the Antarctic Circle, and is surrounded by the Southern Ocean.",
+
+        }
+    ];
+
+
     useEffect(() => {
         fetch('/api/articles')
-            .then(response => response.json())
+            // .then(response => response.json())
+            .then(_ => articles)
             .then((data: ArticlePreview[]) => setArticlePreviews(data))
             .catch(_ => setError('Failed to fetch articles'))
             .finally(() => setLoading(false));
@@ -37,9 +69,12 @@ export default function ArticlesSection() {
                 textAlign: 'center',
                 width: '100%',
             }}>Articles</h1>
-            {articlePreviews.map(articlePreview => (
-                <ArticleCard key={articlePreview.id} articlePreview={articlePreview} />
-            ))}
+            <div style={{width: '100%', display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap'}}>
+
+                {articlePreviews.map(articlePreview => (
+                    <ArticleCard key={articlePreview.id} articlePreview={articlePreview} />
+                ))}
+            </div>
             {!loading && !error && articlePreviews.length === 0 && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>No articles found</p>}
             {loading && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>Loading...</p>}
             {error && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>{error}</p>}
diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx
index 654bda5..3f548fd 100644
--- a/front/src/components/Button.tsx
+++ b/front/src/components/Button.tsx
@@ -1,14 +1,14 @@
 import { ReactNode, MouseEventHandler } from 'react';
 
 interface ButtonProps {
-    onClick: MouseEventHandler<HTMLButtonElement>;
     color: 'primary' | 'secondary';
     children: ReactNode;
+    url?: string;
 }
 
-export default function Button({ onClick, color, children }: ButtonProps) {
+export default function Button({ color, children, url }: ButtonProps) {
     return (
-        <button style={{
+        <a style={{
             backgroundColor: color === 'primary' ? 'var(--color-yellow)' : 'var(--color-darkblue)',
             borderRadius: '8px',
             borderWidth: '0',
@@ -29,7 +29,8 @@ export default function Button({ onClick, color, children }: ButtonProps) {
             userSelect: 'none',
             WebkitUserSelect: 'none',
             touchAction: 'manipulation',
-        }} onClick={onClick} className="ni-button" role="button">{children}</button>
+            textDecoration: 'none',
+        }} href={url} className="ni-button" role="button">{children}</a>
     )
 }
 
diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx
index 0096871..ee9f54c 100644
--- a/front/src/components/ClickableLink.tsx
+++ b/front/src/components/ClickableLink.tsx
@@ -9,7 +9,7 @@ export default function ClickableLink({url, text}: ClickableLinkProps) {
             backgroundColor: "transparent",
             borderRadius: '8px',
             borderWidth: '0',
-            color:"purple",
+            color:"white",
             cursor: 'pointer',
             display: 'inline-block',
             fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
diff --git a/front/src/components/Footer.tsx b/front/src/components/Footer.tsx
index 468812c..f4b2bee 100644
--- a/front/src/components/Footer.tsx
+++ b/front/src/components/Footer.tsx
@@ -7,12 +7,14 @@ interface FooterProps {
 export default function Footer ({bgcolor}:FooterProps) {
     return (
         <footer style={{display: "flex", justifyContent: "space-between", backgroundColor:bgcolor}}>
-            <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>ENSIBS<br />RedCRAB</div>
-            <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
+            <div style={{ display : "flex",  alignItems: "center", flexDirection: "column", margin:"5px", width:"10%"}}><p>ENSIBS</p><p>RedCRAB</p></div>
+            <p>Made with ❤️ by RedCRAB</p>
+            <div style={{ display : "flex",  alignItems: "center", flexDirection: "row", margin:"5px", width:"10%"}}>
                 <LogoButton 
                     url="https://www-ensibs.univ-ubs.fr/fr/index.html"
                     logo = "https://www-ensibs.univ-ubs.fr/skins/ENSIBS/resources/img/logo.png"
-                    style={{ width: "50%", height: "auto" }}/>
+                    style={{ width: "100%", height: "auto",
+                    padding: "10px"}}/>
             </div>
         </footer>
     )
diff --git a/front/src/components/FstSection.tsx b/front/src/components/FstSection.tsx
index a978737..40afbcc 100644
--- a/front/src/components/FstSection.tsx
+++ b/front/src/components/FstSection.tsx
@@ -1,19 +1,12 @@
 import Button from "./Button";
 import NavBar from "./NavBar";
 
-interface FstSectionProps {
-    centertxt: string;
-    txtbt1:string;
-    txtbt2:string;
-    image:string;
-}
-
-export default function FstSection ({centertxt, txtbt1, txtbt2, image}: FstSectionProps) {
+export default function FstSection () {
     return (
         <div style={{
             textAlign: "center",
             color: "yellow",
-            backgroundImage: image,
+            backgroundImage: "url('/pictures/sea.gif')",
             backgroundSize: "cover",
             backgroundPosition: "center",
             backgroundRepeat: "no-repeat",
@@ -28,10 +21,18 @@ export default function FstSection ({centertxt, txtbt1, txtbt2, image}: FstSecti
             }}
         >
             <div style={{height:"150px"}} />
-            <h1>{centertxt}</h1><br />
+            <h1
+                style={{
+                    fontSize: "3em",
+                    fontWeight: "bold",
+                    textShadow: "2px 2px 4px #000000",
+                    fontFamily: "Helvetica",
+                }}
+
+            >Help us to save our oceans</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} /> 
+                <Button color="primary" children={"Aller au jeu"} url="/game" />
+                <Button color="secondary" children={"Lire les articles"} url="/" /> 
             </div>
         </div></div>
     )
diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx
index 4f1c35d..b5ebe21 100644
--- a/front/src/components/NavBar.tsx
+++ b/front/src/components/NavBar.tsx
@@ -4,14 +4,16 @@ import RoundButton from './RoundButton.tsx';
 
 export default function NavBar(){
     return (
-    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between"}}>
+    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.5em 1em"}}>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
-            <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/>
+            {/* <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> */}
+            <span class="material-symbols-outlined"
+            style={{fontSize: "4em", color: "white", margin: "0.5em"}}>sailing</span>
             <ClickableLink url="/" text = "Accueil" />
             <ClickableLink url="/game" text = "Jeu" />
         </div>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
-            <RoundButton url="https://archlinux.org" bgcolor="purple" text="?"/>
+            <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
         </div>
     </nav>);
 }
\ No newline at end of file
diff --git a/front/src/components/RoundButton.tsx b/front/src/components/RoundButton.tsx
index 4747d57..6f08e45 100644
--- a/front/src/components/RoundButton.tsx
+++ b/front/src/components/RoundButton.tsx
@@ -8,8 +8,11 @@ export default function RoundButton({url, bgcolor, text}: RoundButtonProps) {
     return (<div>
         <a href={url}><button style={{
             backgroundColor: bgcolor,
-            borderColor:"blue",
+            borderStyle: 'solid',
+            borderColor:"var(--color-lightblue)",
             borderRadius: '50%',
+            width: '45px',
+            height: '45px',
             borderWidth: '1',
             cursor: 'pointer',
             display: 'inline-block',
diff --git a/front/src/pages/GamePage.tsx b/front/src/pages/GamePage.tsx
index 69552df..94e2221 100644
--- a/front/src/pages/GamePage.tsx
+++ b/front/src/pages/GamePage.tsx
@@ -139,7 +139,7 @@ export default function GamePage() {
                 <Sky sunPosition={[100, 10, 100]} />
                 <OrbitControls />
                 <Ocean />
-                <Axes />
+                {/* <Axes /> */}
                 <Character />
                 <Floor />
                 {/* <Marker position={[0, 1, 0]} color="red" /> */}
diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx
index a64aeef..78b1c56 100644
--- a/front/src/pages/MainPage.tsx
+++ b/front/src/pages/MainPage.tsx
@@ -6,11 +6,7 @@ export default function MainPage() {
     return (
         <>
         <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-            <FstSection 
-                centertxt="Choisissez votre numéro :"
-                txtbt1="Un" 
-                txtbt2="Deux" 
-                image="url('/pictures/sea.gif')"/>
+            <FstSection />
             <ArticlesSection />
             <Footer bgcolor="lightblue"/>
         </div>

From 12fa0684a82b354f372a17ceb4c226f46a877514 Mon Sep 17 00:00:00 2001
From: iMax <latelierroleplay@gmail.com>
Date: Fri, 6 Dec 2024 05:04:36 +0100
Subject: [PATCH 4/4] Changement de nom d'application.

---
 front/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/index.html b/front/index.html
index a8290b7..48914fe 100644
--- a/front/index.html
+++ b/front/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>EcoMarin</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=sailing" />
   </head>
   <body>