diff --git a/app/components/link-grid.js b/app/components/link-grid.js
new file mode 100644
index 0000000..9e0d42c
--- /dev/null
+++ b/app/components/link-grid.js
@@ -0,0 +1,22 @@
+"use strict";
+
+import html from "choo/html";
+
+function returnLinkTemplate(title, description, destination, label) {
+ return `
+
+ ${title}
+ ${description}
+ ${label}
+
+ `;
+}
+
+export default (links) => {
+ const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label));
+ return html`
+
+ `;
+}
diff --git a/app/sass/bundle.scss b/app/sass/bundle.scss
index 3e8215f..c5804cf 100755
--- a/app/sass/bundle.scss
+++ b/app/sass/bundle.scss
@@ -16,6 +16,7 @@
"partials/footer",
"partials/github-feed",
"partials/glossary",
+ "partials/link-grid",
"partials/navigation",
"partials/mission-statement",
"partials/modal",
diff --git a/app/sass/pages/_home.scss b/app/sass/pages/_home.scss
index d178ef5..8b79cfd 100644
--- a/app/sass/pages/_home.scss
+++ b/app/sass/pages/_home.scss
@@ -63,60 +63,6 @@
.features {
grid-area: features;
-
- .home__features {
- align-content: center;
- border-bottom: 1px solid rgba($black, 0.05);
- display: flex;
- flex-flow: row wrap;
- list-style-type: none;
- padding-top: 2rem;
- padding-bottom: 2rem;
- }
-
- .home__feature {
- position: relative;
- text-align: center;
- vertical-align: top;
-
- @media (min-width: 651px) {
- width: 50%;
- }
-
- @media (max-width: 650px) {
- width: 100%;
-
- &:first-of-type {
- padding-bottom: 1rem;
- }
-
- &:last-of-type {
- padding-top: 1rem;
- }
- }
- }
-
-
-
- .home__feature__title {
- font-size: 2rem;
- margin-bottom: 0.5rem;
- }
-
- .home__feature__description {
- font-size: 1rem;
- left: 10%;
- margin-bottom: 1rem;
- position: relative;
- width: 80%;
- }
-
- .home__feature__cta {
- @extend .__button-black;
- display: inline-block;
- font-size: 1rem;
- position: relative;
- }
}
.intro,
diff --git a/app/sass/partials/_link-grid.scss b/app/sass/partials/_link-grid.scss
new file mode 100644
index 0000000..8f4d04f
--- /dev/null
+++ b/app/sass/partials/_link-grid.scss
@@ -0,0 +1,53 @@
+.link-grid {
+ align-content: center;
+ border-bottom: 1px solid rgba($black, 0.05);
+ display: flex;
+ flex-flow: row wrap;
+ list-style-type: none;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+.link-grid__link {
+ position: relative;
+ text-align: center;
+ vertical-align: top;
+
+ @media (min-width: 651px) {
+ width: 50%;
+ }
+
+ @media (max-width: 650px) {
+ width: 100%;
+
+ &:first-of-type {
+ padding-bottom: 1rem;
+ }
+
+ &:last-of-type {
+ padding-top: 1rem;
+ }
+ }
+}
+
+
+
+.link-grid__title {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.link-grid__description {
+ font-size: 1rem;
+ left: 10%;
+ margin-bottom: 1rem;
+ position: relative;
+ width: 80%;
+}
+
+.link-grid__cta {
+ @extend .__button-black;
+ display: inline-block;
+ font-size: 1rem;
+ position: relative;
+}
diff --git a/app/views/home.js b/app/views/home.js
index 028bf14..b24b74b 100644
--- a/app/views/home.js
+++ b/app/views/home.js
@@ -5,7 +5,7 @@
// P A C K A G E
import html from "choo/html";
-
+import linkGrid from "../components/link-grid";
// E X P O R T
@@ -22,19 +22,17 @@ module.exports = exports = () => html`
-
+ ${linkGrid([{
+ title: "New to LBRY?",
+ description: "Learn how LBRY works with 3 easy examples",
+ destination: "/tour",
+ label: "Take the Tour"
+ }, {
+ title: "New to LBRY?",
+ description: "Learn how LBRY works with 3 easy examples",
+ destination: "/tour",
+ label: "Take the Tour"
+ }])}