diff --git a/components/featured-content/index.js b/components/featured-content/index.js index 0f9deb4d8..fff625234 100644 --- a/components/featured-content/index.js +++ b/components/featured-content/index.js @@ -83,6 +83,54 @@ const FeaturedContent = (props) => ( +
+
+

+ + List of most visited Journeys  + View all Journeys → + +

+
+
+ + +
+

Kamran Ahmed

+

Engineering Lead at Al-tayer

+
+
+
+
+ + +
+

Aras Atasaygin

+

Engg. Manager at Al-tayer

+
+
+
+
+ + +
+

Dan Abramov

+

Co-founder and CTO at Blink

+
+
+
+
+ + +
+

Chris Coyier

+

Co-founder of Codepen

+
+
+
+
+
+
); diff --git a/components/featured-content/style.scss b/components/featured-content/style.scss index 42c89077c..cacfaf3e6 100644 --- a/components/featured-content/style.scss +++ b/components/featured-content/style.scss @@ -16,8 +16,6 @@ margin-bottom: 40px; margin-top: 25px; - border-bottom: 2px solid #e8e8e8; - span { background: #f8f9fa; } @@ -69,4 +67,70 @@ } } } + + .guide-item { + border-bottom: 1px solid #dee2e6; + padding: 15px 10px; + + p { + margin-bottom: 0; + font-size: 15px; + color: #999; + } + + &:last-child { + border-bottom: none; + } + } + + .journey-block { + a { + border: 1px solid #f7f7f7; + display: block; + text-decoration: none; + color: #000000; + background: #ffffff; + box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; + transition: box-shadow 0.2s ease 0s; + cursor: pointer; + margin-bottom: 32px; + border-radius: 0 0 10px 10px; + + &:hover { + box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; + + img { + filter: grayscale(0); + } + } + } + + .journey-meta { + padding: 18px 25px 20px; + + h4 { + line-height: 27px; + font-weight: 600; + margin-bottom: 0; + font-size: 18px; + white-space: nowrap; + text-overflow: ellipsis; + flex: 0 0 auto; + overflow: hidden; + } + + p { + font-size: 15px; + line-height: 25px; + color: #999999; + margin-bottom: 0; + } + } + + img { + width: 100%; + filter: grayscale(1); + border-radius: 10px 10px 0 0; + } + } } diff --git a/static/aras.jpeg b/static/aras.jpeg new file mode 100644 index 000000000..4b39fd887 Binary files /dev/null and b/static/aras.jpeg differ diff --git a/static/chris-coyier.jpeg b/static/chris-coyier.jpeg new file mode 100644 index 000000000..19a51718f Binary files /dev/null and b/static/chris-coyier.jpeg differ diff --git a/static/dan-abramove.jpeg b/static/dan-abramove.jpeg new file mode 100644 index 000000000..b0b1e413d Binary files /dev/null and b/static/dan-abramove.jpeg differ diff --git a/static/meabed.png b/static/meabed.png new file mode 100644 index 000000000..0a8d30153 Binary files /dev/null and b/static/meabed.png differ