goncy · goncy · May 24, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022
diff --git a/components/navbar/Navbar.tsx b/components/navbar/Navbar.tsx
@@ -40,7 +40,16 @@ const Navbar: React.FC = () => {
   const {isOpen, onOpen, onClose} = useDisclosure();
 
   return (
-    <Box as="nav" boxShadow="2xl" height={20} width="full">
+    <Box
+      as="nav"
+      bg={"white"}
+      boxShadow="2xl"
+      height={20}
+      position={"sticky"}
+      top={0}
+      width="full"
+      zIndex={"modal"}
+    >
       <Container height="full" maxW="container.xl">
         <Flex alignItems="center" height="full" justifyContent="space-between">
           <Text color="primary.500" fontSize="3xl" fontWeight={900}>

diff --git a/components/section/SectionDivider.tsx b/components/section/SectionDivider.tsx
@@ -8,7 +8,7 @@ interface SectionDividerProps {
 
 const SectionDivider: React.FC<SectionDividerProps> = (props) => {
   const {backgroundColor = "white"} = props;
-  
+
   return (
     <Box bottom={0} left={0} overflow="hidden" position="absolute" width="100%">
       <svg

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -12,7 +12,7 @@ export default function Document() {
           type="font/woff2"
         />
       </Head>
-      <body>
+      <body style={{width: "100%", margin: 0, padding: 0}}>
         <Main />
         <NextScript />
       </body>

diff --git a/screens/Home/sections/Family.tsx b/screens/Home/sections/Family.tsx
@@ -2,27 +2,27 @@ import {Box, Grid, Text, GridItem, Container, useBreakpointValue} from "@chakra-
 import React from "react";
 
 const FamilySection: React.FC = () => {
-  const display = useBreakpointValue({base: 'none', md: 'block' })
-  const colspan = useBreakpointValue({ base: 1, md: 2 })
+  const display = useBreakpointValue({base: "none", md: "block"});
+  const colspan = useBreakpointValue({base: 1, md: 2});
 
   return (
     <Container maxWidth="container.xl">
       <Grid
         backgroundColor="white"
         gap={3}
+        overflow="hidden"
+        position="relative"
         py={[5, 10]}
-        templateColumns={{ base:'0 repeat(4, 1fr) 0', md:'repeat(6, 1fr)' }}
+        templateColumns={{base: "0 repeat(4, 1fr) 0", md: "repeat(6, 1fr)"}}
         templateRows="repeat(3, 1fr)"
-        position='relative'
-        overflow='hidden'
       >
         <GridItem
           backgroundImage="url(https://www.etapainfantil.com/wp-content/uploads/2017/08/perros-familia-700x467.jpg)"
           backgroundPosition="center center"
           backgroundSize="cover"
           borderRadius="2xl"
-          minHeight={ 40}
-          display={ display }
+          display={display}
+          minHeight={40}
         />
         <GridItem
           backgroundImage="url(https://www.grupoyaakun.com/wp-content/uploads/2019/01/perro-familia.jpg)"
@@ -37,14 +37,20 @@ const FamilySection: React.FC = () => {
           backgroundSize="cover"
           borderRadius="2xl"
           colSpan={2}
-          rowSpan={3}
           colStart={3}
+          rowSpan={3}
         >
-          <Box 
-          bgGradient={'linear-gradient(0deg, gray.900 0%, transparent 30%)'}
-          borderRadius='2xl'
-          alignItems="flex-end" display="flex" h="100%" minHeight={80} justifyContent="center" padding={ [2, 5, 10]}>
-            <Text align="center" color="white" fontSize={['2xl',null,  '4xl']} fontWeight={700}>
+          <Box
+            alignItems="flex-end"
+            bgGradient={"linear-gradient(0deg, gray.900 0%, transparent 30%)"}
+            borderRadius="2xl"
+            display="flex"
+            h="100%"
+            justifyContent="center"
+            minHeight={80}
+            padding={[2, 5, 10]}
+          >
+            <Text align="center" color="white" fontSize={["2xl", null, "4xl"]} fontWeight={700}>
               Abraza la Familia
             </Text>
           </Box>
@@ -54,32 +60,31 @@ const FamilySection: React.FC = () => {
           backgroundPosition="center center"
           backgroundSize="cover"
           borderRadius="2xl"
-          rowSpan={2}
           colStart={5}
+          rowSpan={2}
         />
         <GridItem
           backgroundImage="url(https://img.freepik.com/foto-gratis/nino-jugando-sus-perros-al-aire-libre-familia_23-2148647817.jpg?size=626&ext=jpg)"
           backgroundPosition="center center"
           backgroundSize="cover"
           borderRadius="2xl"
-          display={ display }
-
+          display={display}
         />
         <GridItem
           backgroundImage="url(https://gestion.portalbiesa.com/redaccio/arxius/imatges/201810/770_1538733285blog_post_familia_1.jpg)"
           backgroundPosition="center center"
           backgroundSize="cover"
           borderRadius="2xl"
-          colSpan={ colspan }
           colEnd={3}
+          colSpan={colspan}
           // display={ display }
         />
         <GridItem
           backgroundImage="url(https://www.hola.com/imagenes/mascotas/20211014197674/educar-ninos-perros-convivencia-sin-problema-dn/1-6-902/como-educar-perros-ninos-convivencia-sin-problemas-t.jpg)"
           backgroundPosition="center center"
           backgroundSize="cover"
           borderRadius="2xl"
-          display={ display }
+          display={display}
         />
         <GridItem
           backgroundImage="url(https://blog-cdn.dogbuddy.com/wp-content/uploads/2016/04/child-with-a-dog-e1461229430570.jpg)"
@@ -100,10 +105,9 @@ const FamilySection: React.FC = () => {
           backgroundPosition="center center"
           backgroundSize="cover"
           borderRadius="2xl"
-          colSpan={ colspan }
+          colSpan={colspan}
           colStart={5}
-        >
-        </GridItem>
+        />
       </Grid>
     </Container>
   );

diff --git a/screens/Home/sections/History.tsx b/screens/Home/sections/History.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {Flex, Button, Badge, Text, VStack, Box, HStack} from "@chakra-ui/react";
+import {Button, Badge, Text, VStack, Box, HStack, Grid, GridItem} from "@chakra-ui/react";
 import Link from "next/link";
 
 import Section from "../../../components/section/Section";
@@ -31,46 +31,84 @@ const History: React.FC = () => {
         </VStack>
 
         {/* Timeline */}
-        <VStack spacing={2} width="full">
-          <Text fontSize="7xl" fontWeight={800} textColor="#363636">
-            +3500
-          </Text>
-          <Flex alignItems="flex-start" justify="space-between" width="full">
-            <Text fontSize="md" fontWeight={800} textAlign="center" textColor="#363636">
-              Comienza la organización <br />
-              2017
-            </Text>
-            <Text fontSize="xl" fontWeight={800} textColor="#363636">
-              Mascotas rescatadas
+        <Grid gap={2} templateColumns={"repeat(3, 1fr)"} width="full">
+          <GridItem>
+            <VStack h={"full"} justify={"center"}>
+              <Text
+                fontSize={{base: "sm", sm: "md"}}
+                fontWeight={800}
+                textAlign="center"
+                textColor="#363636"
+                width={"full"}
+              >
+                Comienza la organización <br />
+                2017
+              </Text>
+            </VStack>
+          </GridItem>
+          <GridItem>
+            <Text
+              fontSize={{base: "xl", sm: "3xl", md: "7xl"}}
+              fontWeight={800}
+              lineHeight={"normal"}
+              position={"relative"}
+              textAlign={"center"}
+              textColor="#363636"
+            >
+              +3500
             </Text>
-            <Text fontSize="md" fontWeight={800} textAlign="center" textColor="#363636">
-              No más mascotas sin hogar <br />
-              2022
+            <Text
+              fontSize={{base: "md", sm: "lg", md: "xl"}}
+              fontWeight={800}
+              textAlign={"center"}
+              textColor="#363636"
+            >
+              Mascotas <br />
+              rescatadas
             </Text>
-          </Flex>
-          <Box
-            backgroundColor="rgba(253, 177, 69, 0.4)"
-            borderRadius="xl"
-            height="88px"
-            padding="15px"
-            width="1000px"
-          >
-            <HStack alignItems="flex-start" justifyContent="flex-start" spacing={0}>
-              <Box backgroundColor="white" borderLeftRadius="xl" height="60px" width="500px" />
+          </GridItem>
+          <GridItem>
+            <VStack h={"full"} justify={"center"}>
+              <Text
+                fontSize={{base: "sm", sm: "md"}}
+                fontWeight={800}
+                textAlign="center"
+                textColor="#363636"
+              >
+                No más mascotas sin hogar
+                <br />
+                2022
+              </Text>
+            </VStack>
+          </GridItem>
+          <GridItem colSpan={3}>
+            <VStack>
               <Box
-                _before={{
-                  content: "''",
-                  display: "block",
-                  position: "relative",
-                  width: "8px",
-                  left: "-5px",
-                  height: "60px",
-                  background: "primary.500",
-                }}
-              />
-            </HStack>
-          </Box>
-        </VStack>
+                backgroundColor="rgba(253, 177, 69, 0.4)"
+                borderRadius="xl"
+                height="88px"
+                minWidth={""}
+                padding="15px"
+                width="80%"
+              >
+                <HStack alignItems="flex-start" justifyContent="flex-start" spacing={0}>
+                  <Box backgroundColor="white" borderLeftRadius="xl" height="60px" width="50%" />
+                  <Box
+                    _before={{
+                      content: "''",
+                      display: "block",
+                      position: "relative",
+                      width: "8px",
+                      left: "-5px",
+                      height: "60px",
+                      background: "primary.500",
+                    }}
+                  />
+                </HStack>
+              </Box>
+            </VStack>
+          </GridItem>
+        </Grid>
 
         {/* Bottom */}
         <VStack paddingTop={50} spacing={6} width="full">

diff --git a/screens/Home/sections/MeetYourBuddy.tsx b/screens/Home/sections/MeetYourBuddy.tsx
@@ -18,12 +18,12 @@ export const MeetYourBuddy: React.FC = () => {
             overflowY={["hidden"]}
             pt="32"
           >
-            <MeetColumn end={3} position={["0", "-100px"]} start={0} />
+            <MeetColumn end={3} position={["0", "-60px"]} start={0} />
             <MeetColumn end={6} position={["100px", "0"]} start={3} />
             <MeetColumn end={9} position={["0", "100px"]} start={6} />
             <MeetColumn end={12} position="150px" start={9} />
             <MeetColumn end={15} position={["100px", "0"]} start={12} />
-            <MeetColumn end={18} position={["0", "-100px"]} start={15} />
+            <MeetColumn end={18} position={["0", "-60px"]} start={15} />
           </Grid>
           <Stack align="center" bgColor="white">
             <Box

diff --git a/screens/Home/sections/Process.tsx b/screens/Home/sections/Process.tsx
@@ -1,14 +1,8 @@
 import React from "react";
-import {
-  Text,
-  GridItem,
-  Stack,
-  Box,
-  SimpleGrid,
-} from "@chakra-ui/react";
+import {Text, GridItem, Stack, Box, SimpleGrid} from "@chakra-ui/react";
 
 import ProcessSectionCard from "../../../components/cards/ProcessSectionCard";
-import { ProcessCardType } from "../../../types/adopcanem.types";
+import {ProcessCardType} from "../../../types/adopcanem.types";
 
 const CARDS: ProcessCardType[] = [
   {
@@ -38,73 +32,68 @@ const CARDS: ProcessCardType[] = [
 ];
 
 const Process: React.FC = () => {
-
-
   const generateTopOffset = (index: number): string => {
     let offset = "0px";
+
     if (index % 2 === 0) {
       offset = "-30px";
     } else {
       offset = "30px";
     }
+
     return offset;
   };
 
   return (
-    <Stack backgroundColor="#F8F3E3" py="100px" px={10}>
+    <Stack backgroundColor="#F8F3E3" px={10} py="100px">
       <Stack direction="column" spacing={10}>
         {/* Cabecera del bloque */}
         <Stack
+          alignContent={["center", null, null, "space-between"]}
           direction={["column", null, null, "row"]}
           display="flex"
           justifyContent={["center", null, null, "space-between"]}
-          alignContent={["center", null, null, "space-between"]}
-          spacing={10}
           px={[2, 4, 4, 4, 10]}
+          spacing={10}
         >
           <Stack>
             <Box
               bg="#E5E0D2"
               borderRadius="30px"
-              w="200px"
               fontSize={22}
-              textAlign="center"
               fontWeight="bold"
               p={2}
+              textAlign="center"
+              w="200px"
             >
               El proceso
             </Box>
-            <Text
-              fontSize={["48px", null, null, "54px"]}
-              fontWeight="black"
-              pt={6}
-            >
+            <Text fontSize={["48px", null, null, "54px"]} fontWeight="black" pt={6}>
               Narices frias y corazones contentos
             </Text>
           </Stack>
-          <Stack justifyContent="center" alignItems="center">
+          <Stack alignItems="center" justifyContent="center">
             <Text fontSize="22px" fontWeight="bold">
-              Al momento de adoptar asumís un acto de responsabilidad y
-              compromiso por lo que es importante que estés capacitado para
-              hacerlo.
+              Al momento de adoptar asumís un acto de responsabilidad y compromiso por lo que es
+              importante que estés capacitado para hacerlo.
             </Text>
           </Stack>
         </Stack>
         {/* Imagenes */}
         <SimpleGrid
-          templateRows="auto"
+          columns={[1, 1, 2, 2, 4]}
           // minChildWidth="300px"
-          columns={[1,1,2,2,4]}
           gap={[4, null, 4]}
-          py={10}
           justifyItems="center"
+          py={10}
+          templateRows="auto"
         >
           {CARDS.map((card, index) => (
-            <GridItem>
+            <GridItem key={index}>
               <ProcessSectionCard
-                title={card.title}
                 description={card.description}
                 thumbnail={card.thumbnail}
+                title={card.title}
                 topOffset={generateTopOffset(index)}
               />
             </GridItem>