diff --git a/components/featured-content/guides.js b/components/featured-content/guides.js
index 79606d705..acab1fe80 100644
--- a/components/featured-content/guides.js
+++ b/components/featured-content/guides.js
@@ -1,5 +1,7 @@
import Link from 'next/link';
import { FeaturedContentWrap } from './style';
+import guides from '../../data/guides';
+import GuideBlock from '../guide-block';
const FeaturedGuides = () => (
@@ -11,42 +13,11 @@ const FeaturedGuides = () => (
-
-
-
-
-
-
+ { guides
+ .filter(({ featured }) => featured)
+ .map(guide => (
+
+ )) }
diff --git a/components/guide-block/index.js b/components/guide-block/index.js
new file mode 100644
index 000000000..606475948
--- /dev/null
+++ b/components/guide-block/index.js
@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
+import { findByUsername } from '../../lib/author';
+
+const GuideBlock = ({ guide }) => {
+ const author = findByUsername(guide.author) || {};
+ return (
+
+
+
+ { guide.title }
+ { guide.featuredDescription || guide.description }
+
+
+
+ { author.name }
+
+ { guide.updatedAt }
+
+
+
+
+ )
+};
+
+export default GuideBlock;
\ No newline at end of file
diff --git a/components/guide-block/style.js b/components/guide-block/style.js
new file mode 100644
index 000000000..0dd2b38e9
--- /dev/null
+++ b/components/guide-block/style.js
@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+export const BlockLink = styled.a`
+ border: 1px solid #f7f7f7;
+ display: block;
+ text-decoration: none;
+ color: #000000;
+ background: #ffffff;
+ padding: 25px 25px 22px;
+ border-radius: 10px;
+ box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+ transition: box-shadow 0.2s ease 0s;
+ cursor: pointer;
+ margin-bottom: 32px;
+
+ &:hover {
+ text-decoration: none;
+ color: #000000;
+ box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+ }
+`;
+
+export const BlockTitle = styled.h4`
+ line-height: 27px;
+ font-weight: 600;
+ font-size: 22px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ flex: 0 0 auto;
+ overflow: hidden;
+`;
+
+export const BlockSubtitle = styled.p`
+ font-size: 15px;
+ line-height: 25px;
+ color: #999999;
+ margin-bottom: 0;
+`;
+
+export const BlockMeta = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 19px;
+`;
+
+export const PublishDate = styled.time`
+ font-size: 13px;
+ color: #999;
+`;
+
+export const Author = styled.div`
+ display: flex;
+ align-items: center;
+ font-size: 15px;
+ color: #999;
+`;
+
+export const AuthorImage = styled.img`
+ height: 22px;
+ width: 22px;
+ border-radius: 100%;
+ margin-right: 10px;
+`;
+export const AuthorName = styled.div``;
\ No newline at end of file
diff --git a/components/roadmap-block/style.js b/components/roadmap-block/style.js
index 31c403301..5e20d19a0 100644
--- a/components/roadmap-block/style.js
+++ b/components/roadmap-block/style.js
@@ -6,7 +6,7 @@ export const BlockLink = styled.a`
text-decoration: none;
color: #000000;
background: #ffffff;
- padding: 28px 25px 25px;
+ padding: 26px 25px 25px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
transition: box-shadow 0.2s ease 0s;
diff --git a/data/authors.json b/data/authors.json
new file mode 100644
index 000000000..beae6b42b
--- /dev/null
+++ b/data/authors.json
@@ -0,0 +1,17 @@
+[
+ {
+ "username": "kamranahmedse",
+ "name": "Kamran Ahmed",
+ "picture": "/static/authors/kamranahmedse.jpeg"
+ },
+ {
+ "username": "ziishaned",
+ "name": "Zeeshan Ahmed",
+ "picture": "/static/authors/ziishaned.png"
+ },
+ {
+ "username": "idnan",
+ "name": "Adnan Ahmed",
+ "picture": "/static/authors/idnan.jpeg"
+ }
+]
\ No newline at end of file
diff --git a/data/guides.json b/data/guides.json
new file mode 100644
index 000000000..4b4e7acd9
--- /dev/null
+++ b/data/guides.json
@@ -0,0 +1,56 @@
+[
+ {
+ "title": "Design Patterns for Humans",
+ "description": "A language agnostic, ultra-simplified explanation to design patterns",
+ "slug": "/guides/design-patterns-for-humans",
+ "featured": true,
+ "author": "kamranahmedse",
+ "createdAt": "June 12, 2019",
+ "updatedAt": "June 12, 2019"
+ },
+ {
+ "title": "Learn Regex",
+ "description": "An easy to understand guide on regular expressions with real world examples",
+ "slug": "/guides/learn-regex",
+ "featured": true,
+ "author": "ziishaned",
+ "createdDate": "June 19, 2019",
+ "updatedAt": "June 19, 2019"
+ },
+ {
+ "title": "Bash Guide",
+ "description": "Easy to understand guide for bash with real world usage examples.",
+ "slug": "/guides/bash-guide",
+ "featured": true,
+ "author": "idnan",
+ "createdAt": "May 18, 2018",
+ "updatedAt": "May 18, 2018"
+ },
+ {
+ "title": "DNS in One Picture",
+ "description": "Quick illustrative guide on how a website is found on the internet.",
+ "slug": "/guides/dns-in-one-picture",
+ "featured": true,
+ "author": "kamranahmedse",
+ "createdAt": "May 11, 2018",
+ "updatedAt": "May 11, 2018"
+ },
+ {
+ "title": "Using React Hooks",
+ "description": "Start using React hooks in your react applications today with this guide.",
+ "slug": "/guides/using-react-hooks",
+ "featured": true,
+ "author": "kamranahmedse",
+ "createdAt": "October 22, 2019",
+ "updatedAt": "October 22, 2019"
+ },
+ {
+ "title": "HTTP Caching",
+ "description": "Everything you need to know about web caching",
+ "slug": "/guides/http-caching",
+ "featured": true,
+ "author": "kamranahmedse",
+ "updatedAt": "November 01, 2019",
+ "createdAt": "November 01, 2019"
+ }
+]
\ No newline at end of file
diff --git a/lib/author.js b/lib/author.js
new file mode 100644
index 000000000..fc89ff989
--- /dev/null
+++ b/lib/author.js
@@ -0,0 +1,3 @@
+import authors from "../data/authors";
+
+export const findByUsername = (username) => authors.find(author => author.username === username) || {};
\ No newline at end of file
diff --git a/static/authors/idnan.jpeg b/static/authors/idnan.jpeg
new file mode 100644
index 000000000..177b27696
Binary files /dev/null and b/static/authors/idnan.jpeg differ
diff --git a/static/authors/kamranahmedse.jpeg b/static/authors/kamranahmedse.jpeg
new file mode 100644
index 000000000..5c743b583
Binary files /dev/null and b/static/authors/kamranahmedse.jpeg differ
diff --git a/static/authors/ziishaned.png b/static/authors/ziishaned.png
new file mode 100644
index 000000000..89ee1dcbe
Binary files /dev/null and b/static/authors/ziishaned.png differ