Skip to content

Commit f93d527

Browse files
emalorenzoemalorenzo
authored
Merge pull request #81 from coderhood-dev/feature/73-roadmaps-section-ui
Feature/73 roadmaps section ui
2 parents 61ae897 + 5f7d402 commit f93d527

File tree

14 files changed

+128
-87
lines changed

14 files changed

+128
-87
lines changed

‎components/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const AnimatedContainer = styled(motion.div)`
1212
border-style: solid;
1313
border-radius: 4px;
1414
padding: 2rem;
15-
background-color: white;
15+
background-color: #fafafa;
1616
position: relative;
1717
top: -0.25rem;
1818
left: 0.25rem;

‎components/CardHowDoesItWork.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ const CardHowDoesItWork = ({ image, title, description, imageSide }) => {
3535
w={imageSide === 'left' ? '100%' : w}
3636
>
3737
<Text
38-
color={colorMode === 'light' ? 'gray.800' : 'white'}
38+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
3939
fontFamily="DM Sans"
4040
fontSize={['1.2rem', '1.2rem', '2rem', '2.4rem', '2.8rem']}
4141
mb={['0.3rem', '0.3rem', '0.5rem', '0.5rem']}
4242
>
4343
{title}
4444
</Text>
4545
<Text
46-
color={colorMode === 'light' ? 'gray.800' : 'white'}
46+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
4747
fontFamily="Public Sans"
4848
fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
4949
>

‎components/Dash.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Dash: React.FC<Props> = ({ direction }) => (
1010
w={direction === 'vertical' ? 1 : 4}
1111
h={direction === 'vertical' ? 4 : 1}
1212
m={1}
13-
bg="white"
13+
bg="gray.300"
1414
/>
1515
);
1616

‎components/DiscordConnect.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const DiscordConnect = () => (
2020
width="60%"
2121
>
2222
<Text
23-
color="black"
23+
color="gray.800"
2424
fontFamily="Poppins"
2525
fontWeight="700"
2626
fontSize={['1.2rem', '1.2rem', '2rem', '2.4rem', '2.8rem']}
@@ -29,7 +29,7 @@ const DiscordConnect = () => (
2929
Unite a la comunidad.
3030
</Text>
3131
<Text
32-
color="black"
32+
color="gray.800"
3333
fontFamily="Public Sans"
3434
fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
3535
mt={['5px', '5px', '7px']}
@@ -43,24 +43,18 @@ const DiscordConnect = () => (
4343
width={['110px', '110px', '110px', '130px']}
4444
href="https://discord.gg/xw2dbyv"
4545
target="_blank"
46+
_hover={{ color: 'gray.300' }}
4647
>
4748
<Button
48-
bg="black"
49-
_hover={{ bg: 'black', color: '#E2E8F0' }}
50-
color="white"
49+
bg="gray.800"
50+
_hover={{ bg: 'gray.800', color: '#E2E8F0' }}
51+
color="gray.300"
5152
variant="solid"
5253
size="md"
5354
fontSize="0.9rem"
5455
width={['110px', '110px', '110px', '130px']}
5556
>
56-
<Flex justifyContent="space-around">
57-
Sumate
58-
<Image
59-
src="discord.svg"
60-
alt="learning with friends videocall"
61-
w="18%"
62-
/>
63-
</Flex>
57+
Sumate
6458
</Button>
6559
</Link>
6660
</Flex>

‎components/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ export const Footer = () => {
1010
w="100%"
1111
px="3.1%"
1212
py="2.5%"
13-
bg={colorMode === 'light' ? '#FAFAFA' : '#222222'}
13+
bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
1414
flexDirection="row"
1515
alignItems="center"
1616
justifyContent="space-between"
1717
as="footer"
1818
>
1919
<Button
20-
color={colorMode === 'light' ? 'gray.800' : 'white'}
20+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
2121
onClick={toggleColorMode}
2222
variant="outlined"
2323
>

‎components/Header.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const HeaderButton = ({
3131

3232
export const Header = () => {
3333
const { user, doSignOut } = useAuth();
34-
const { colorMode, toggleColorMode } = useColorMode();
34+
const { colorMode } = useColorMode();
3535
return (
3636
<Flex
3737
as="header"
@@ -41,7 +41,7 @@ export const Header = () => {
4141
py="1.25rem"
4242
width="full"
4343
height="4.5rem"
44-
bg={colorMode === 'light' ? '#FAFAFA' : '#222222'}
44+
bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
4545
>
4646
<Link href="/">
4747
<Image
@@ -51,23 +51,6 @@ export const Header = () => {
5151
cursor="pointer"
5252
/>
5353
</Link>
54-
55-
{/*
56-
<Flex as="nav" align="center" justify="flex-end">
57-
<HeaderButton href="/jobs">Trabajos</HeaderButton>
58-
<HeaderButton href="/blog">Blog</HeaderButton>
59-
{!user ? (
60-
<>
61-
<HeaderButton href="/signin">Iniciar sesión</HeaderButton>
62-
<HeaderButton href="/signup">Registrate</HeaderButton>
63-
</>
64-
) : (
65-
<Flex onClick={doSignOut}>
66-
<HeaderButton>Salir</HeaderButton>
67-
</Flex>
68-
)}
69-
</Flex>
70-
*/}
7154
</Flex>
7255
);
7356
};

‎components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Layout: React.FC<PropsWithChildren<Props>> = ({
1818
<Head title={title} />
1919
<Header />
2020
<Flex
21-
bg={colorMode === 'light' ? '#FAFAFA' : '#222222'}
21+
bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
2222
direction="column"
2323
flex={1}
2424
alignItems="center"

‎pages/index.tsx‎

Lines changed: 109 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
2-
import { GetStaticProps } from 'next';
3-
import Typed from 'react-typed';
2+
import styled from '@emotion/styled';
43
import {
54
Flex,
65
Image,
@@ -9,37 +8,47 @@ import {
98
Link,
109
useColorMode,
1110
} from '@chakra-ui/core';
12-
import { getRoadmaps, GetRoadmapsResponse } from '../api/roadmaps';
11+
import { GetRoadmapsResponse } from '../api/roadmaps';
1312
import { Text } from '../components';
1413
import CardHowDoesItWork from '../components/CardHowDoesItWork';
1514
import DiscordConnect from '../components/DiscordConnect';
16-
import { useBreakpointValue } from '@chakra-ui/media-query';
1715

1816
interface Props {
1917
roadmaps: GetRoadmapsResponse;
2018
}
2119

20+
const CardRoadmap = styled.div`
21+
padding: 1.5rem;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: flex-start;
25+
text-align: start;
26+
border-color: #f26840;
27+
border-width: 0.08rem;
28+
border-radius: 0.2rem;
29+
`;
30+
2231
const Home: React.FC<Props> = ({ roadmaps }) => {
2332
const { colorMode, toggleColorMode } = useColorMode();
2433
const HowDoesItWork = [
2534
{
26-
image: 'indexone.svg',
35+
image: 'learn.svg',
2736
title: 'Un lugar para aprender y enseñar.',
2837
description:
2938
'En Coderhood Academy es y siempre será un lugar donde no sólo podés estudiar programacion sino también compartir tu conocimiento con otras personas que sienten lo mismo que vos, un lugar donde vas a poder tanto estudiar como enseñar.',
3039
imageSide: 'left',
3140
},
3241

3342
{
34-
image: 'indextwo.svg',
43+
image: 'study.svg',
3544
title: 'Acompañamiento continuo.',
3645
description:
3746
'Desde la dirección y los profesores hasta nuestro CEO, todos nos encontramos a tu disposición día a día para brindarte la mejor calidad de servicio.',
3847
imageSide: 'right',
3948
},
4049

4150
{
42-
image: 'indexthree.svg',
51+
image: 'game.svg',
4352
title: 'Valores.',
4453
description:
4554
'Sabemos la importancia de acompañar tus estudios que te representen y los esgrimimos con orgullo: honestidad, transparencia, accesibilidad, buena voluntad, inclusión, proactividad y mejora continua. ¡Estudiar en Coderhood Academy es invertir en tu futuro con garantía certera de satisfacción y sin fecha de expiración!',
@@ -53,7 +62,7 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
5362
<Flex w="100%" h="60vh" alignItems="center" justifyContent="center">
5463
<Flex direction="column" justifyContent="flex-start" width="80%">
5564
<Text
56-
color={colorMode === 'light' ? 'gray.800' : 'white'}
65+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
5766
fontFamily="Poppins"
5867
fontSize={['2rem', '2rem', '3.5rem', '3.2rem', '4.1rem']}
5968
width="50%"
@@ -70,7 +79,7 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
7079
Bienvenido a tu comunidad.
7180
</Text>
7281
<Text
73-
color={colorMode === 'light' ? 'gray.800' : 'white'}
82+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
7483
fontFamily="Public Sans"
7584
fontSize={['1rem', '1rem', '1.1rem', '1.1rem', '1.3rem']}
7685
mt={['0.3rem', '0.3rem', '0.5rem']}
@@ -81,14 +90,14 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
8190
<Link
8291
width={['4rem', '6rem', '7rem', '8rem']}
8392
href="https://discord.gg/xw2dbyv"
84-
_hover={{ color: 'white' }}
93+
_hover={{ color: 'gray.300' }}
8594
target="_blank"
8695
>
8796
<Button
8897
_hover={{ bg: '#f26840' }}
8998
bg="#f26840"
9099
borderRadius="0.2rem"
91-
color="white"
100+
color="gray.300"
92101
size="md"
93102
fontSize="0.9rem"
94103
width={['4rem', '6rem', '7rem', '8rem']}
@@ -108,6 +117,95 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
108117
/>
109118
))}
110119

120+
<Flex w="100%" h="100vh" alignItems="center">
121+
<Flex w="100%" h="60vh" alignItems="center" justifyContent="center">
122+
<Flex
123+
direction="column"
124+
justifyContent="center"
125+
alignItems="center"
126+
textAlign="center"
127+
width="80%"
128+
>
129+
<Image
130+
src="rocket.svg"
131+
alt="rocket image"
132+
justifyContent="flex-end"
133+
w={['14rem', '20rem', '30rem', '30rem', '30rem']}
134+
mb={['-3.2rem', '-7rem', '-7rem', '-7rem', '-7rem']}
135+
/>
136+
<Text
137+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
138+
fontFamily="Poppins"
139+
fontWeight="700"
140+
fontSize={['1.2rem', '1.2rem', '2rem', '2.4rem', '2.8rem']}
141+
mb={['5px', '5px', '7px', '7px', '7px']}
142+
>
143+
Empeza a aprender hoy.
144+
</Text>
145+
<Text
146+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
147+
fontFamily="Public Sans"
148+
fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
149+
mt={['5px', '5px', '7px']}
150+
mb={['10px', '10px', '20px', '30px']}
151+
>
152+
Elegi una de nuestras guias de aprendizaje y comenza a aprender
153+
nuevas tecnologias que potenciaran tu futuro.
154+
</Text>
155+
<SimpleGrid
156+
justifyContent="space-around"
157+
w="90%"
158+
mt={['1.3rem', '1.3rem', '1.4rem', '1.5rem']}
159+
columns={[1, 2, 2, 2, 2]}
160+
spacing={['0.5rem', '2rem', '3rem', '4rem', '5rem']}
161+
>
162+
<Link href="/" _hover={{ color: 'gray.300' }} target="_blank">
163+
<CardRoadmap>
164+
<Text
165+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
166+
fontFamily="Poppins"
167+
fontWeight="500"
168+
fontSize={['1.2rem', '1.2rem', '2rem', '2.3rem', '2.6rem']}
169+
>
170+
Frontend
171+
</Text>
172+
<Text
173+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
174+
fontFamily="Public Sans"
175+
fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
176+
mt={['0.3rem', '0.3rem', '0.4rem', '0.5rem']}
177+
>
178+
Guia paso a paso para convertirte en un desarrollador
179+
frontend moderno.
180+
</Text>
181+
</CardRoadmap>
182+
</Link>
183+
<Link href="/" _hover={{ color: 'gray.300' }} target="_blank">
184+
<CardRoadmap>
185+
<Text
186+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
187+
fontFamily="Poppins"
188+
fontWeight="500"
189+
fontSize={['1.2rem', '1.2rem', '2rem', '2.3rem', '2.6rem']}
190+
>
191+
Backend
192+
</Text>
193+
<Text
194+
color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
195+
fontFamily="Public Sans"
196+
fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
197+
mt={['0.3rem', '0.3rem', '0.4rem', '0.5rem']}
198+
>
199+
Guia paso a paso para convertirte en un desarrollador
200+
backend moderno.
201+
</Text>
202+
</CardRoadmap>
203+
</Link>
204+
</SimpleGrid>
205+
</Flex>
206+
</Flex>
207+
</Flex>
208+
111209
<DiscordConnect />
112210
</>
113211
);

‎public/discord.svg‎

Lines changed: 1 addition & 37 deletions
Loading

‎public/indexthree.svg‎ renamed to ‎public/game.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)