create generic link component

src/components/ui/Buttons/AppLink.tsx

@@ -0,0 +1,37 @@
+import { Link } from "@mui/material";
+import Image from "next/image";
+
+interface IAppLink {
+  text: string;
+  link: string;
+}
+
+const AppLink: React.FC<IAppLink> = ({ text, link }) => {
+  return (
+    <Link
+      href={link}
+      sx={{
+        display: "flex",
+        width: "fit-content",
+        textTransform: "uppercase",
+        color: "white",
+        padding: "10px 20px",
+        borderRadius: "75px",
+        backgroundColor: "primary.main",
+        ":hover": {
+          backgroundColor: "primary.dark",
+        },
+        alignSelf: "center",
+        gap: "10px",
+      }}
+    >
+      {text}
+      <Image
+        src={require("public/product_assets/images/white-arrow.svg")}
+        alt=""
+      />
+    </Link>
+  );
+};
+
+export default AppLink;

src/pages/index.tsx

@@ -1,11 +1,12 @@
-import { Stack, Container, Fab, Link, List, Paper } from "@mui/material";
+import { Stack, Container, List, Paper } from "@mui/material";
 import { Box } from "@mui/system";
 import { useAtom } from "jotai";
 import type { NextPage } from "next";
 import Image from "next/image";
 import { useEffect } from "react";
 
 import AppBar from "components/ui/AppBar/AppBar";
+import AppLink from "src/components/ui/Buttons/AppLink";
 import { cartAtom } from "src/store/cart";
 
 const Home: NextPage = () => {
@@ -54,12 +55,7 @@ const Home: NextPage = () => {
               </Paper>
             </Box>
           </Stack>
-
-          <Link href="/fruits">
-            <Fab color="secondary" variant="extended" size="large">
-              Je démarre mes courses
-            </Fab>
-          </Link>
+          <AppLink text="Commencer l'expérience" link="/fruits" />
         </Stack>
       </Container>
     </>