Refactor and add Responsive to landing page

src/components/layout/Home/HeroBanner.tsx

@@ -0,0 +1,51 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Heading,
+  Image,
+  Text,
+} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+
+export default function HeroBanner() {
+  const router = useRouter();
+
+  return (
+      <Flex
+          bg={'#FAF9FF'}
+          p={150}
+          minH={{base: 'unset', md: '100vh'}}
+          align={'center'}
+          justify={'center'}
+      >
+        <Flex gap={10}>
+
+          <Flex justify={'center'} direction={'column'} flexBasis={'100%'}>
+            <Heading mb={'2.5rem'}>Prêt(e) à trouver votre âme sœur ?</Heading>
+            <Text mb={'2rem'} maxW={{md: "500px"}}>
+              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'}
+                      onClick={() => router.push('/register')}>
+                S&apos;inscrire
+              </Button>
+            </ButtonGroup>
+          </Flex>
+
+
+          <Box flexBasis={'100%'} display={{base: "none", md: "block"}}>
+            <Image borderRadius={20}
+                boxShadow={'lg'}
+                src={'/couple_img.jpg'}
+                alt="happy couple"
+            />
+          </Box>
+        </Flex>
+      </Flex>
+  );
+}

src/components/layout/Home/HomeHero.tsx

@@ -1,60 +0,0 @@
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Flex,
-  Heading,
-  Image,
-  Text,
-} from "@chakra-ui/react";
-import { useRouter } from "next/router";
-
-export default function HomeHero() {
-  const router = useRouter();
-
-  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 !
-      </Text>
-      <ButtonGroup>
-        <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"
-      />
-    </Box>
-  );
-
-  return (
-    <Flex
-      bg={"#FAF9FF"}
-      px={150}
-      minH={"100vh"}
-      align={"center"}
-      justify={"center"}
-    >
-      <Flex gap={10}>
-        <LeftSide />
-        <RightSide />
-      </Flex>
-    </Flex>
-  );
-}

src/components/layout/Home/HomePresentation.tsx

@@ -1,41 +0,0 @@
-import {
-  Box,
-  Flex,
-  Heading,
-  Image,
-  Text,
-} from "@chakra-ui/react";
-
-export default function HomeHero() {
-
-  const RightSide = () => (
-    <Flex justify={"center"} direction={"column"} flexBasis={"100%"} px={75}>
-      <Heading mb={"2.5rem"} style={{color:'#FAF9FF'}}>Un match, un chat, un date ! </Heading>
-      <Text mb={"2rem"} style={{color:'#FAF9FF'}}>
-        Faites des rencontres en France, où que vous soyez.
-        La taille de notre communauté et la popularité du site vous permettront de trouver des profils correspondant
-        à vos recherches et de vivre votre rencontre en ligne en toute sérénité. Choisissez une ville ou une région et
-        découvrez les profils des célibataires inscrits qui se trouvent à quelques kilomètres de chez vous.
-      </Text>
-    </Flex>
-  );
-
-  const LeftSide = () => (
-    <Box flexBasis={"100%"} minH={"100vh"} bgImage={"/couple_funny.png"} bgSize={'cover'} bgPos={"center"}>
-    </Box>
-  );
-
-  return (
-    <Flex
-      bg={"#805AD5"}
-      minH={"100vh"}
-      align={"center"}
-      justify={"center"}
-    >
-      <Flex gap={10}>
-        <LeftSide />
-        <RightSide />
-      </Flex>
-    </Flex>
-  );
-}

src/components/layout/Home/PresentationSection.tsx

@@ -0,0 +1,29 @@
+import {Box, Flex, Heading, Text} from '@chakra-ui/react';
+
+export default function PresentationSection() {
+  return (
+      <Flex justify={{base: 'center', md: 'right'}} alignItems={'center'}
+            bg={{base: '#805AD5'}} bgImage={'/couple_funny.png'}
+            bgSize={'cover'}
+            bgPos={'center'}
+            bgAttachment={'fixed'} minH={{base: 'initial', md: '80vh'}}>
+
+        <Box p={50} width={{base: '100%', md: '50%'}} maxW={{md: "500px"}} bg={'#805AD5'}>
+          <Heading mb={'2.5rem'} style={{color: '#FAF9FF'}}>
+            Un match, un chat, un date !
+          </Heading>
+          <Text mb={'2rem'} style={{color: '#FAF9FF'}}>
+            Faites des rencontres en France, où que vous soyez.
+            La taille de notre communauté et la popularité du site vous
+            permettront de trouver des profils correspondant
+            à vos recherches et de vivre votre rencontre en ligne en toute
+            sérénité. Choisissez une ville ou une région et
+            découvrez les profils des célibataires inscrits qui se trouvent à
+            quelques kilomètres de chez vous.
+          </Text>
+        </Box>
+        <Box display={{base: "none", md: "block"}} bg={'#805AD5'} h={"100%"} w={"100px"}/>
+
+      </Flex>
+  );
+}

src/pages/index.tsx

@@ -1,8 +1,7 @@
 import Head from 'next/head';
 import Navbar from '@/components/Navbar';
-import {Box, Image} from '@chakra-ui/react';
+import HeroBanner from '@/components/layout/Home/HeroBanner';
-import HomeHero from '@/components/layout/Home/HomeHero';
+import HomePresentation from '@/components/layout/Home/PresentationSection';
-import HomePresentation from '@/components/layout/Home/HomePresentation';
 
 
 export default function Home() {
@@ -16,11 +15,8 @@ export default function Home() {
         </Head>
 
         <Navbar/>
-        <HomeHero/>
+        <HeroBanner/>
         <HomePresentation/>
-
-        <Box minH={'100vh'}>
-        </Box>
       </>
   );
 }