nouveau fichier : public/pictures/sea.gif

modifié :         src/components/Button.tsx
	modifié :         src/components/ClickableLink.tsx
	nouveau fichier : src/components/FstSection.tsx
	modifié :         src/components/NavBar.tsx
	modifié :         src/pages/MainPage.tsx

ajout de la première section

front/src/components/Button.tsx

@@ -16,7 +16,7 @@ export default function Button({ onClick, color, children }: ButtonProps) {
             cursor: 'pointer',
             display: 'inline-block',
             fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
-            fontSize: '14px',
+            fontSize: '20px',
             fontWeight: '500',
             lineHeight: '20px',
             listStyle: 'none',

front/src/components/ClickableLink.tsx

@@ -9,6 +9,7 @@ export default function ClickableLink({url, text}: ClickableLinkProps) {
             backgroundColor: "transparent",
             borderRadius: '8px',
             borderWidth: '0',
+            color:"purple",
             cursor: 'pointer',
             display: 'inline-block',
             fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',

front/src/components/FstSection.tsx

@@ -0,0 +1,38 @@
+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) {
+    return (
+        <div style={{
+            textAlign: "center",
+            color: "yellow",
+            backgroundImage: image,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat",
+            height: "75vh"}}>
+        <NavBar />
+        <div
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+            <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} /> 
+            </div>
+        </div></div>
+    )
+}

front/src/components/NavBar.tsx

@@ -4,14 +4,14 @@ 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"}}>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
             <LogoButton url="https://archlinux.org" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/>
             <ClickableLink url="https://archlinux.org" text = "Prout" />
             <ClickableLink url="https://archlinux.org" text = "Prout2" />
         </div>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
-            <RoundButton url="https://archlinux.org" bgcolor="transparent" text="?"/>
+            <RoundButton url="https://archlinux.org" bgcolor="purple" text="?"/>
         </div>
     </nav>);
 }

front/src/pages/MainPage.tsx

@@ -1,14 +1,20 @@
 import ArticlesSection from '../components/ArticlesSection.tsx'
 import NavBar from '../components/NavBar.tsx'
 import Footer from '../components/Footer.tsx'
+import FstSection from '../components/FstSection.tsx'
 
 export default function MainPage() {
     return (
         <>
         <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-            <NavBar />
+            <FstSection 
+                centertxt="Choisissez votre numéro :"
+                txtbt1="Un" 
+                txtbt2="Deux" 
+                image="url('/pictures/sea.gif')"/>
+            <div style={{height:"30px"}} />
             <ArticlesSection />
-            <Footer bgcolor="blue"/>
+            <Footer bgcolor="lightblue"/>
         </div>
         </>
     )