diff --git a/components/featured-content/roadmaps.js b/components/featured-content/roadmaps.js index ab52a2f77..aa0230c5f 100644 --- a/components/featured-content/roadmaps.js +++ b/components/featured-content/roadmaps.js @@ -1,4 +1,6 @@ import { FeaturedContentWrap } from './style'; +import Link from 'next/link'; +import roadmaps from '../../data/roadmaps'; const FeaturedRoadmaps = () => ( @@ -8,29 +10,25 @@ const FeaturedRoadmaps = () => ( List of roadmaps mostly visited by the community - View all Roadmaps → + + View all Roadmaps → + - - - Frontend Developer - Step by step guide to becoming a modern frontend developer in 2019 - - - - - Backend Developer - Step by step guide to becoming a modern backend developer in 2019 - - - - - DevOps Roadmap - Step by step guide to become an SRE or for any operations role in 2019 - - + { roadmaps + .filter(({ featured }) => featured) + .map(roadmap => ( + + + + { roadmap.title } + { roadmap.featuredDescription || roadmap.description } + + + + )) } diff --git a/components/roadmap-summary/index.js b/components/roadmap-summary/index.js new file mode 100644 index 000000000..ffca086f8 --- /dev/null +++ b/components/roadmap-summary/index.js @@ -0,0 +1,24 @@ +import { + SummaryContainer, + Title, + Description, + Image, + Header, + Summary, +} from './style'; + +const RoadmapSummary = ({ roadmap }) => ( + + + { roadmap.title } + { roadmap.description } + + + + + + + +); + +export default RoadmapSummary; \ No newline at end of file diff --git a/components/roadmap-summary/style.js b/components/roadmap-summary/style.js new file mode 100644 index 000000000..e7e73d2a2 --- /dev/null +++ b/components/roadmap-summary/style.js @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +export const SummaryContainer = styled.div``; + +export const Header = styled.div` + text-align: center; + padding: 55px 0 45px; +`; + +export const Summary = styled.div` + text-align: center; + padding: 50px 0; +`; + +export const Title = styled.h1` + font-weight: 700; + margin-bottom: 12px; + font-size: 42px; +`; +export const Description = styled.p` + font-size: 19px; + margin-bottom: 0; +`; +export const Image = styled.img` + width: 100%; +`; diff --git a/data/roadmaps.json b/data/roadmaps.json index aac427172..05b85464a 100644 --- a/data/roadmaps.json +++ b/data/roadmaps.json @@ -1,20 +1,26 @@ [ { "title": "Frontend Developer", - "description": "Roadmap to becoming a frontend developer", + "description": "Step by step guide to becoming a modern frontend developer", + "featuredDescription": "Step by step guide to becoming a modern frontend developer in 2019", "slug": "/frontend", - "picture": "/static/roadmaps/frontend.png" + "picture": "/static/roadmaps/frontend.png", + "featured": true }, { "title": "Backend Developer", "description": "Roadmap to becoming a backend developer", + "featuredDescription": "Step by step guide to becoming a modern backend developer in 2019", "slug": "/backend", - "picture": "/static/roadmaps/backend.png" + "picture": "/static/roadmaps/backend.png", + "featured": true }, { - "title": "DevOps", + "title": "DevOps Roadmap", "description": "Roadmap for DevOps or any other Operations Role", + "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019", "slug": "/devops", - "picture": "/static/roadmaps/devops.png" + "picture": "/static/roadmaps/devops.png", + "featured": true } ] \ No newline at end of file diff --git a/pages/roadmaps/[roadmap].js b/pages/roadmaps/[roadmap].js index eea6b1c33..31a75e18c 100644 --- a/pages/roadmaps/[roadmap].js +++ b/pages/roadmaps/[roadmap].js @@ -2,14 +2,15 @@ import roadmaps from "../../data/roadmaps"; import DefaultLayout from '../../layouts/default/index'; import PageHeader from '../../components/page-header/index'; import { serverOnlyProps } from '../../lib/server'; +import RoadmapSummary from '../../components/roadmap-summary'; +import PageFooter from '../../components/page-footer'; const Roadmap = ({ roadmap }) => { return ( - - - + + ); };
List of roadmaps mostly visited by the community - View all Roadmaps → + + View all Roadmaps → +
Step by step guide to becoming a modern frontend developer in 2019
Step by step guide to becoming a modern backend developer in 2019
Step by step guide to become an SRE or for any operations role in 2019
{ roadmap.featuredDescription || roadmap.description }