jpcmf · jpcmf · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/README.md b/README.md
@@ -78,7 +78,8 @@ And that's it! Your `SkateHub Frontend` should now be up and running locally on
 
 ### 2024
 
-- 2024-03-26 - Create the sidebar provider and components to handle with the desktop and mobile menu [#3](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/3) _(v0.1.2)_
+- 2024-03-26 - Create the home page of the SkateHub project [#4](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/4) _(v0.1.3)_
+- 2024-03-26 - Create the sidebar provider and components to handle with the aside menu [#3](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/3) _(v0.1.2)_
 - 2024-03-24 - Add [Chakra UI](https://chakra-ui.com/) to handle with the user interface [#2](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/2) _(v0.1.1)_
 - 2024-03-19 - Add a quick guide to getting started with the application [#1](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/1) _(v0.1.0)_
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/public/alexander-londono-unsplash.jpeg b/public/alexander-londono-unsplash.jpeg
diff --git a/src/components/LogoSkateHub/index.tsx b/src/components/LogoSkateHub/index.tsx
@@ -0,0 +1,30 @@
+interface LogoSkateHubProps {
+  showLogoData?: boolean;
+}
+
+export function LogoSkateHub({ showLogoData = true }: LogoSkateHubProps) {
+  return (
+    <svg
+      height="56.205"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 200 56.205"
+      version="1.1"
+    >
+      <g transform="scale(2.34375)" fill="#fff">
+        <path
+          cx="25"
+          cy="25"
+          r="25"
+          d="M23.981 11.99A11.99 11.99 0 0 1 11.99 23.981A11.99 11.99 0 0 1 0 11.99A11.99 11.99 0 0 1 23.981 11.99z"
+        ></path>
+      </g>
+      <g transform="matrix(1.16667 0 0 1.16667 .667 0)">
+        <path d="M15.348 27.818h-2.398a3.357 3.357 0 0 0 -3.357 3.357v4.796a3.357 3.357 0 0 0 3.357 3.357h2.398a3.357 3.357 0 0 0 3.357 -3.357v-1.439h10.552v1.439a3.357 3.357 0 0 0 3.357 3.357h2.398a3.357 3.357 0 0 0 3.357 -3.357V31.175a3.357 3.357 0 0 0 -3.357 -3.357h-2.398a3.357 3.357 0 0 0 -3.357 3.357v0.48h-3.837V16.307h3.837v0.48a3.357 3.357 0 0 0 3.357 3.357h2.398a3.357 3.357 0 0 0 3.357 -3.357V11.99a3.357 3.357 0 0 0 -3.357 -3.357h-2.398a3.357 3.357 0 0 0 -3.357 3.357v1.439H18.705v-1.439a3.357 3.357 0 0 0 -3.357 -3.357h-2.398a3.357 3.357 0 0 0 -3.357 3.357v4.796a3.357 3.357 0 0 0 3.357 3.357h2.398a3.357 3.357 0 0 0 3.357 -3.357v-0.48h3.837v15.348h-3.837v-0.48a3.357 3.357 0 0 0 -3.357 -3.357m0.48 8.153a0.48 0.48 0 0 1 -0.48 0.48h-2.398a0.48 0.48 0 0 1 -0.48 -0.48V31.175a0.48 0.48 0 0 1 0.48 -0.48h2.398a0.48 0.48 0 0 1 0.48 0.48Zm16.307 -4.796a0.48 0.48 0 0 1 0.48 -0.48h2.398a0.48 0.48 0 0 1 0.48 0.48v4.796a0.48 0.48 0 0 1 -0.48 0.48h-2.398a0.48 0.48 0 0 1 -0.48 -0.48Zm0 -19.185a0.48 0.48 0 0 1 0.48 -0.48h2.398a0.48 0.48 0 0 1 0.48 0.48v4.796a0.48 0.48 0 0 1 -0.48 0.48h-2.398a0.48 0.48 0 0 1 -0.48 -0.48ZM15.827 16.787a0.48 0.48 0 0 1 -0.48 0.48h-2.398a0.48 0.48 0 0 1 -0.48 -0.48V11.99a0.48 0.48 0 0 1 0.48 -0.48h2.398a0.48 0.48 0 0 1 0.48 0.48Z"></path>
+      </g>
+      <g transform="translate(66 8.89)scale(1.58192)" fill="#fff">
+        <path d="M5.583 19.434C2.264 19.434 0.441 17.784 0.269 15.079h2.974c0.058 0.998 0.633 1.995 2.417 1.995 1.496 0 2.264 -0.595 2.264 -1.42 0 -1.017 -1.285 -1.285 -2.782 -1.612 -2.091 -0.499 -4.643 -1.113 -4.643 -4.24 0 -2.302 1.784 -4.01 4.93 -4.01 3.204 0 4.969 1.746 5.161 4.317h-2.993c-0.058 -1.055 -0.633 -1.899 -2.245 -1.899 -1.189 0 -1.976 0.48 -1.976 1.343 0 1.113 1.305 1.42 2.801 1.765 2.149 0.48 4.719 1.017 4.719 3.971 0 2.398 -1.88 4.144 -5.314 4.144m8.921 -5.679 3.261 -4.412h3.031l-3.779 4.892L20.95 19.185h-3.319l-3.127 -4.048V19.185h-2.686V6.043h2.686zm11.99 -2.091c-1.458 0 -2.59 1.189 -2.59 2.647 0 1.477 1.132 2.647 2.59 2.647 1.535 0 2.686 -1.17 2.686 -2.647 0 -1.458 -1.189 -2.647 -2.686 -2.647M29.141 19.185v-0.729c-0.691 0.537 -1.765 0.863 -2.878 0.863 -2.686 0 -4.969 -2.168 -4.969 -5.007s2.283 -5.065 4.969 -5.065c1.113 0 2.187 0.345 2.878 0.882v-0.787h2.667V19.185zm7.674 -9.842h2.417v2.379h-2.417v3.952c0 0.882 0.403 1.228 1.305 1.228h1.113V19.185h-1.305c-2.609 0 -3.779 -1.17 -3.779 -3.376v-4.086h-1.42v-2.379h1.42V6.811h2.667zm13.084 7.731c-0.959 1.439 -2.475 2.341 -4.662 2.341 -3.146 0 -5.18 -2.206 -5.18 -5.122 0 -2.839 2.11 -5.141 5.199 -5.141 3.108 0 4.988 2.149 4.988 5.007 0 0.384 -0.038 0.882 -0.038 0.94H42.686c0.288 1.247 1.228 2.053 2.609 2.053 1.189 0 2.053 -0.518 2.609 -1.305zm-4.662 -5.736c-1.247 0 -2.11 0.671 -2.456 1.784h4.777c-0.288 -1.189 -1.247 -1.784 -2.321 -1.784M59.971 19.185V14.043h-5.564V19.185h-2.974V6.043h2.974v5.276h5.564v-5.276h2.974V19.185zm13.602 0h-2.628v-0.978c-0.671 0.71 -1.669 1.151 -2.859 1.151 -2.302 0 -3.799 -1.592 -3.799 -3.971v-6.043h2.647v5.583c0 1.17 0.671 1.976 1.823 1.976 1.285 0 2.168 -0.825 2.168 -2.187v-5.372h2.647zm6.619 0.134c-1.113 0 -2.187 -0.326 -2.878 -0.863V19.185h-2.667V6.043h2.667v4.086c0.691 -0.537 1.765 -0.882 2.878 -0.882 2.686 0 4.969 2.225 4.969 5.065s-2.283 5.007 -4.969 5.007m-0.23 -2.36c1.458 0 2.59 -1.17 2.59 -2.647 0 -1.458 -1.132 -2.647 -2.59 -2.647 -1.496 0 -2.686 1.189 -2.686 2.647 0 1.477 1.151 2.647 2.686 2.647"></path>
+      </g>
+    </svg>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,137 @@
-import { Text } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import { LogoSkateHub } from '@/components/LogoSkateHub'
+import { Button, Flex, Grid, GridItem, Stack, Text } from '@chakra-ui/react'
 
 export default function Home() {
-  return <Text as="h1">Hello World</Text>
+  const router = useRouter()
+
+  return (
+    <>
+      <Grid templateColumns={['1fr', 'repeat(5, 1fr)']} gap="0">
+        <GridItem
+          hideBelow={'md'}
+          colSpan={{ md: 2, lg: 2, xl: 3 }}
+          h="100dvh"
+          bg="gray.800"
+          backgroundSize="cover"
+          backgroundRepeat="no-repeat"
+          backgroundBlendMode="luminosity"
+          backgroundPosition="center bottom"
+          backgroundImage="./alexander-londono-unsplash.jpeg"
+          // backgroundPosition="center 15%"
+          // backgroundImage="./tom-morbey-unsplash-2.jpeg"
+        >
+          <Flex marginLeft="8" marginTop="5">
+            <LogoSkateHub />
+          </Flex>
+        </GridItem>
+        <GridItem
+          colStart={{ base: 1, md: 3, lg: 3, xl: 4 }}
+          colEnd={6}
+          h="100dvh"
+        >
+          <Stack spacing="4" py={['4', '8']} px={['4', '12']} h="100dvh">
+            <Flex
+              flexDir="column"
+              flexGrow="1"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Flex flexDir="column" w="100%" alignItems="center">
+                <Text
+                  fontSize="3xl"
+                  fontWeight="bold"
+                  letterSpacing="tighter"
+                  align="center"
+                  display="flex"
+                >
+                  Seja bem-vindo ao SkateHub
+                </Text>
+                <Text
+                  as="span"
+                  fontWeight="normal"
+                  align="center"
+                  color="gray.300"
+                >
+                  Junte-se à comunidade e faça parte da evolução do esporte.
+                </Text>
+                <Text
+                  as="small"
+                  fontWeight="normal"
+                  align="center"
+                  color="gray.500"
+                >
+                  Faça login ou cadastre-se para começar a explorar todas as
+                  funcionalidades!
+                </Text>
+              </Flex>
+              <Flex
+                alignItems="center"
+                justifyContent="center"
+                flexDirection="row"
+                gap="3"
+                w="100%"
+              >
+                <Button
+                  type="button"
+                  mt="3"
+                  colorScheme="green"
+                  size="lg"
+                  w="100%"
+                  onClick={() => router.push('/auth/signin')}
+                >
+                  Entrar
+                </Button>
+                <Button
+                  type="button"
+                  mt="3"
+                  colorScheme="pink"
+                  size="lg"
+                  w="100%"
+                  onClick={() => router.push('/auth/signup')}
+                >
+                  Cadastro
+                </Button>
+              </Flex>
+            </Flex>
+            <Flex
+              alignItems="center"
+              justifyContent="center"
+              flexDirection="row"
+            >
+              <Text
+                as="a"
+                href="#"
+                color="gray.600"
+                align="center"
+                textDecoration="underline"
+                fontSize="smaller"
+              >
+                Termos de uso
+              </Text>
+              <Text
+                as="span"
+                color="gray.600"
+                paddingLeft="4"
+                paddingRight="4"
+                fontSize="smaller"
+              >
+                |
+              </Text>
+              <Text
+                as="a"
+                href="#"
+                color="gray.600"
+                align={'center'}
+                textDecoration="underline"
+                fontSize="smaller"
+              >
+                Política de privacidade
+              </Text>
+            </Flex>
+          </Stack>
+        </GridItem>
+      </Grid>
+    </>
+  )
 }