feat(login / register page): Added login and register page

src/components/Navbar.tsx

@@ -1,36 +1,58 @@
-import {Box, Flex, Text, ButtonGroup, Button} from '@chakra-ui/react';
+import { Box, Flex, Text, ButtonGroup, Button } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 
 export default function Navbar() {
-  return (
-      <Box position={'fixed'} zIndex={9999} top={0} width={"100vw"} backdropFilter={'auto'} backdropBlur={'20px'}  px={10} py={2} >
-        <Flex align={'center'}>
-          <LeftContent/>
-          <CenterContent/>
-          <RightContent/>
-        </Flex>
-      </Box>
-  );
-}
+  const router = useRouter();
 
-const LeftContent = () => (
+  const redirect_connexion = () => {
+    router.push("/login");
+  };
+
+  const redirect_inscription = () => {
+    router.push("/register");
+  };
+
+  const LeftContent = () => (
     <Box flexBasis={"100%"}>
       <Text>Logo</Text>
     </Box>
-);
+  );
 
-const CenterContent = () => (
-    <Flex gap={5} justify={'center'} flexBasis={"100%"}>
+  const CenterContent = () => (
+    <Flex gap={5} justify={"center"} flexBasis={"100%"}>
       <Text>A propos</Text>
       <Text>Contact</Text>
       <Text>Aide</Text>
     </Flex>
-);
+  );
 
-const RightContent = () => (
-    <Flex justify={'right'} flexBasis={"100%"}>
+  const RightContent = () => (
+    <Flex justify={"right"} flexBasis={"100%"}>
       <ButtonGroup>
-        <Button>Inscription</Button>
-        <Button colorScheme={'purple'}>Connexion</Button>
+        <Button onClick={redirect_inscription}>Inscription</Button>
+        <Button colorScheme={"purple"} onClick={redirect_connexion}>
+          Connexion
+        </Button>
       </ButtonGroup>
     </Flex>
-);
+  );
+
+  return (
+    <Box
+      position={"fixed"}
+      zIndex={9999}
+      top={0}
+      width={"100vw"}
+      backdropFilter={"auto"}
+      backdropBlur={"20px"}
+      px={10}
+      py={2}
+    >
+      <Flex align={"center"}>
+        <LeftContent />
+        <CenterContent />
+        <RightContent />
+      </Flex>
+    </Box>
+  );
+}

src/components/layout/Home/HomeHero.tsx

@@ -6,38 +6,55 @@ import {
   Heading,
   Image,
   Text,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
 
 export default function HomeHero() {
+  const router = useRouter();
 
-  return (
-      <Flex bg={'#FAF9FF'} px={150} minH={'100vh'} align={'center'}
-            justify={'center'}>
-        <Flex gap={10}>
-          <LeftSide/>
-          <RightSide/>
-        </Flex>
-      </Flex>
-  );
-}
+  const redirect_inscription = () => {
+    router.push("/register");
+  };
 
-const LeftSide = () => (
-    <Flex justify={'center'} direction={'column'} flexBasis={'100%'}>
-      <Heading mb={'2.5rem'}>Prêt(e) à trouver votre âme sœur ?</Heading>
-      <Text mb={'2rem'}>Notre site de rencontre vous offre la possibilité de
-        rencontrer des personnes intéressantes et de trouver l&apos;amour.
-        Inscrivez-vous dès maintenant pour découvrir toutes nos fonctionnalités
-        !
+  const LeftSide = () => (
+    <Flex justify={"center"} direction={"column"} flexBasis={"100%"}>
+      <Heading mb={"2.5rem"}>Prêt(e) à trouver votre âme sœur ?</Heading>
+      <Text mb={"2rem"}>
+        Notre site de rencontre vous offre la possibilité de rencontrer des
+        personnes intéressantes et de trouver l&apos;amour. Inscrivez-vous dès
+        maintenant pour découvrir toutes nos fonctionnalités !
       </Text>
       <ButtonGroup>
-        <Button colorScheme={'purple'}>S&apos;inscrire</Button>
+        <Button colorScheme={"purple"} onClick={redirect_inscription}>
+          S&apos;inscrire
+        </Button>
       </ButtonGroup>
     </Flex>
-);
+  );
 
-const RightSide = () => (
-    <Box flexBasis={'100%'}>
-      <Image borderRadius={20} boxShadow={'lg'} src={'/couple_img.jpg'}
-             alt="happy couple"/>
+  const RightSide = () => (
+    <Box flexBasis={"100%"}>
+      <Image
+        borderRadius={20}
+        boxShadow={"lg"}
+        src={"/couple_img.jpg"}
+        alt="happy couple"
+      />
     </Box>
-);
+  );
+
+  return (
+    <Flex
+      bg={"#FAF9FF"}
+      px={150}
+      minH={"100vh"}
+      align={"center"}
+      justify={"center"}
+    >
+      <Flex gap={10}>
+        <LeftSide />
+        <RightSide />
+      </Flex>
+    </Flex>
+  );
+}