diff --git a/components/CardTech.tsx b/components/CardTech.tsx new file mode 100644 index 0000000..c13fa56 --- /dev/null +++ b/components/CardTech.tsx @@ -0,0 +1,113 @@ +import React, { useState } from 'react'; +import { + AvatarGroup, + Avatar, + Collapse, + Link, + Flex, + Image, + useColorMode, +} from '@chakra-ui/core'; +import { Text } from '../components'; + +interface Props { + image: string; + title: string; + description: string; +} + +const CardTech: React.FC = ({ image, title, description }) => { + const [show, setShow] = useState(false); + const handleToggle = () => setShow(!show); + + const { colorMode } = useColorMode(); + const avatars = [ + { name: 'logo', image: '../branding/logo_compact.svg' }, + { name: 'logo', image: '../branding/logo_compact.svg' }, + ]; + return ( + + + + + + + + {title} + + + {description} + + + + + {avatars.map((avatar, index) => ( + + ))} + + + + + + Aprender + + + + arrow + + + + + + ); +}; +export default CardTech; diff --git a/components/button/Button.tsx b/components/button/Button.tsx new file mode 100644 index 0000000..feb4e95 --- /dev/null +++ b/components/button/Button.tsx @@ -0,0 +1,41 @@ +const Button = { + + baseStyle: { + fontWeight: 'bold', + textTransform: 'uppercase', + }, + + + sizes: { + sm: { + fontSize: '12px', + padding: '16px', + }, + md: { + fontSize: '16px', + padding: '24px', + }, + }, + + variants: { + outline: { + border: '2px solid', + borderColor: 'blue.500', + }, + solid: { + bg: 'black', + color: 'white', + }, + coderhood: { + bg: '#f26840', + color: 'white', + }, + }, + + defaultProps: { + size: 'md', + variant: 'outline', + }, +}; + +export default Button; diff --git a/pages/index.tsx b/pages/index.tsx index 5772e5b..3375ac8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,19 @@ import React from 'react'; import styled from '@emotion/styled'; +import { GetStaticProps } from 'next'; +import NextLink from 'next/link'; import { + Link, Flex, Image, SimpleGrid, Button, - Link, useColorMode, + Heading, + Center, } from '@chakra-ui/core'; -import { GetRoadmapsResponse } from '../api/roadmaps'; -import { Text } from '../components'; +import { getRoadmaps, GetRoadmapsResponse } from '../api/roadmaps'; +import { Layout, Card, Text, TextureGrid, Dash } from '../components'; import CardHowDoesItWork from '../components/CardHowDoesItWork'; import DiscordConnect from '../components/DiscordConnect'; @@ -26,6 +30,7 @@ const CardRoadmap = styled.div` border-color: #f26840; border-width: 0.08rem; border-radius: 0.2rem; + cursor: pointer; `; const Home: React.FC = ({ roadmaps }) => { @@ -88,8 +93,8 @@ const Home: React.FC = ({ roadmaps }) => { En coderhood impulzamos el aprendizaje autodidacta y colaborativo. @@ -108,8 +113,9 @@ const Home: React.FC = ({ roadmaps }) => { - {HowDoesItWork.map((how) => ( + {HowDoesItWork.map((how, index) => ( = ({ roadmaps }) => { columns={[1, 2, 2, 2, 2]} spacing={['0.5rem', '2rem', '3rem', '4rem', '5rem']} > - - - - Frontend - - ( + - Guia paso a paso para convertirte en un desarrollador - frontend moderno. - - - - - - - Backend - - - Guia paso a paso para convertirte en un desarrollador - backend moderno. - - - + + + {roadmap.title} + + + {roadmap.description} + + + + ))} @@ -211,4 +214,11 @@ const Home: React.FC = ({ roadmaps }) => { ); }; +export const getStaticProps: GetStaticProps = async () => { + const roadmaps = await getRoadmaps(); + return { + props: { roadmaps }, + }; +}; + export default Home; diff --git a/pages/roadmaps/[name].tsx b/pages/roadmaps/[name].tsx index bb51f20..8c63506 100644 --- a/pages/roadmaps/[name].tsx +++ b/pages/roadmaps/[name].tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import styled from '@emotion/styled'; import { GetStaticPaths, GetStaticProps } from 'next'; import { getRoadmaps, @@ -7,57 +8,176 @@ import { Subject, } from '../../api/roadmaps'; import { Layout, Card, Text } from '../../components'; - -import { Box, Avatar, Collapse, Flex } from '@chakra-ui/core'; - +import CardTech from '../../components/CardTech'; +import { + Link, + Flex, + Image, + Button, + useColorMode, + Center, +} from '@chakra-ui/core'; interface Props { roadmap: GetRoadmapResponse; } const Roadmap: React.FC = ({ roadmap }) => { const [expanded, setExpanded] = useState(false); - - const handleExpandClick = () => { - setExpanded(!expanded); - }; + const [show, setShow] = React.useState(false); + const { colorMode, toggleColorMode } = useColorMode(); return ( - - - {roadmap.title} - - {roadmap.description} - + <> + +
+ + Tu camino como{' '} + {roadmap.title} empiezá + acá. + +
+
+ + arrow down + + wave up +
+ +
+ + {roadmap.description} + +
+
+ + wave down + + {roadmap.subjects.map((subject: Subject) => ( - - - - {subject.title} - - - {subject.description} - - - - Method: - - Heat 1/2 cup of the broth in a pot until simmering, add - saffron and set aside for 10 minutes. - - - Set aside off of the heat to let rest for 10 minutes, and then - serve. - - - - + ))} - - +
+
+
+ + Estas trabado con algo o necesitas ayuda? + + + Sacate las dudas que tengas en nuestra comunidad en discord + + + + +
+
+ ); }; export const getStaticPaths: GetStaticPaths = async () => { - const roadmaps = []; // await getRoadmaps(); + const roadmaps = await getRoadmaps(); // Get the paths we want to pre-render based on roadmaps const paths = roadmaps.map((roadmap) => `/roadmaps/${roadmap.name}`); @@ -68,7 +188,7 @@ export const getStaticPaths: GetStaticPaths = async () => { }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { - const roadmap = {}; // await getRoadmap(params.name); + const roadmap = await getRoadmap(params.name); return { props: { roadmap }, }; diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..e622e54 --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/line.svg b/public/line.svg new file mode 100644 index 0000000..dbeea22 --- /dev/null +++ b/public/line.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/wave_abajo_rotar.svg b/public/wave_abajo_rotar.svg new file mode 100644 index 0000000..137a138 --- /dev/null +++ b/public/wave_abajo_rotar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/waves.svg b/public/waves.svg new file mode 100644 index 0000000..e32bd9b --- /dev/null +++ b/public/waves.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/theme/index.tsx b/theme/index.tsx index 528db97..88e09c1 100644 --- a/theme/index.tsx +++ b/theme/index.tsx @@ -1,6 +1,7 @@ import defaultTheme, { Theme } from '@chakra-ui/theme'; // import { stylesConfig } from '../coderhood-ui/button/styles'; import { Colors } from './colors'; +import Button from '../components/button/Button'; const breakpoints = ['48rem', '62rem', '80rem', '100rem', '120rem']; @@ -39,6 +40,7 @@ export const coderhoodTheme = { components: { ...defaultTheme.components, // Button: stylesConfig, + //Button, Heading: { ...defaultTheme.components.Heading, baseStyle: {