fix: Minor UI

components/BackHome.js

-import Image from 'next/image'
+import Image from "next/image";
 import {
   Box,
   Divider,
@@ -11,7 +11,6 @@ import {
 import Head from "next/head";
 import Link from "next/link";
 
-
 function BackHome() {
   return (
     <Flex px="1rem" justify="center" align="center">
@@ -24,10 +23,11 @@ function BackHome() {
           size="lg"
           cursor="pointer"
         >
-          <a>🏠 Retour à la Galerie</a>
+          🏠 Retour à la Galerie
         </Button>
       </Link>
-    </Flex>);
+    </Flex>
+  );
 }
 
-export default BackHome
+export default BackHome;

components/NavLinks.js

 import Image from "next/image";
-import {
-  Box,
-  Divider,
-  Center,
-  Text,
-  Flex,
-  Spacer,
-  Button,
-} from "@chakra-ui/react";
-import Head from "next/head";
-import Link from "next/link";
+import { Center, Text, Link, Button } from "@chakra-ui/react";
 
 function NavLinks({ prev, next }) {
   let prevText = next == 2 ? "Dernière" : "Précédente";
@@ -18,13 +8,13 @@ function NavLinks({ prev, next }) {
     <Center p="6" justify="space-between">
       <Link href={"/photos/" + prev}>
         <Button
-          as="a"
           borderRadius="full"
           colorScheme="gray"
           fontSize={["sm", "md", "xl"]}
           size="lg"
           mx={2}
           cursor="pointer"
+          textDecoration="none"
         >
           <Text mr={2}>⟸</Text>
           <Text>{prevText}</Text>
@@ -32,13 +22,13 @@ function NavLinks({ prev, next }) {
       </Link>
       <Link href={"/photos/" + next}>
         <Button
-          as="a"
           borderRadius="full"
           colorScheme="gray"
           fontSize={["sm", "md", "xl"]}
           size="lg"
           mx={2}
           cursor="pointer"
+          textDecoration="none"
         >
           <Text>{nextText}</Text>
           <Text ml={2}>⟹</Text>

pages/_app.js

 // pages/_app.js
-import { ChakraProvider, Container, Divider, Box, Text, Stack } from "@chakra-ui/react";
-import Link from "next/link";
+import {
+  ChakraProvider,
+  Container,
+  Divider,
+  Link,
+  Box,
+  Text,
+  Stack,
+} from "@chakra-ui/react";
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -9,29 +16,29 @@ function MyApp({ Component, pageProps }) {
       <Divider />
       <Container
         as={Stack}
-        maxW={'6xl'}
+        maxW={"6xl"}
         py={4}
-        direction={{ base: 'column', md: 'row' }}
+        direction={{ base: "column", md: "row" }}
         spacing={4}
-        mx={10}
-        justify={{ md: 'space-between' }}
-        align={{ md: 'center' }}>
-          <Text fontSize="sm" textAlign="center">
-            Conçu par{" "}
-            <Link
-              href="https://me.plnech.fr"
-              isExternal
-              _hover={{ textDecoration: "underline" }}
-            >
-              Paul-Louis Nech
-            </Link>{" "}
-            grace aux contenus partagés par les proches de Philippe.
-          </Text>
-          <Text>
-            <a href="/credits" mx={4}>
-              Crédits
-            </a>
-          </Text>
+        justify={{ md: "space-around" }}
+        align={{ md: "center" }}
+      >
+        <Text fontSize="sm" textAlign="center">
+          Conçu par{" "}
+          <Link
+            href="https://me.plnech.fr"
+            isExternal
+            _hover={{ textDecoration: "underline" }}
+          >
+            Paul-Louis
+          </Link>{" "}
+          grace aux contenus partagés par les proches de Philippe.
+        </Text>
+        <Text>
+          <Link href="/credits" mx={4}>
+            Crédits
+          </Link>
+        </Text>
       </Container>
     </ChakraProvider>
   );

pages/index.js

@@ -2,7 +2,6 @@
 import Head from "next/head";
 import React, { useState } from "react";
 import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
-import Image from "next/image";
 import { getAllPhotos } from "../lib/utils";
 import { Img } from "@chakra-ui/react";
 import Link from "next/link";
@@ -28,26 +27,26 @@ export default function Home({ data }) {
       <Box overflow="hidden" bg="gray.100" minH="100vh">
         <Container>
           <Text
+            as="h1"
             color="gray.700"
             fontWeight="semibold"
-            mx="2rem"
+            my="1rem"
             textAlign="center"
-            fontSize={["lg", "xl", "3xl", "3xl"]}
+            fontSize={["md", "xl", "2xl", "2xl"]}
           >
             Philippe Bureau - Galerie Photo
           </Text>
         </Container>
-        <Wrap px="1rem" spacing={"4px"} justify="center">
+        <Wrap px="1rem" spacing={"10px"} justify="center">
           {photos.map((photo) => (
             <WrapItem
               key={"wrap-" + photo.id}
-              boxShadow="dark-lg"
-              rounded="10px"
+              boxShadow="lg"
               overflow="hidden"
-              m={"30px"}
+              m={1}
+              rounded="10px"
               bg="white"
               lineHeight="0"
-              _hover={{ boxShadow: "dark-lg", rounded: "20px" }}
             >
               <a href={`/photos/${photo.id}`}>
                 {/*<img
@@ -65,7 +64,13 @@ export default function Home({ data }) {
                   objectFit="cover"
                   placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg"
                   color="gray.700"
-                  quality={50}
+                  borderRadius="10px"
+                  quality={25}
+                  _hover={{
+                    border: "solid 2px #DDD",
+                    boxShadow: "dark-lg",
+                    zIndex: "2",
+                  }}
                 />
               </a>
             </WrapItem>