diff --git a/data/sections.yml b/data/sections.yml
index af878449..4486dfc2 100644
--- a/data/sections.yml
+++ b/data/sections.yml
@@ -12,3 +12,9 @@
description: Browse tutorials for most common setup and development use-cases.
link: /tutorials/introduction/
color: orange
+
+- title: API References
+ #description: Get the API references for all relevant components.
+ description: Coming soon.
+ #link: /api/introduction/
+ color: green
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d8fa51a9..ba848e9f 100755
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -10,22 +10,34 @@ import Repositories from '../components/Repositories'
import { ReactComponent as Arrow } from '../images/arrow.svg'
import styles from './index.module.scss'
+const SectionBox = ({ to, children, ...props }) =>
+ to ? (
+
+ {children}
+
+ ) : (
+
{children}
+ )
+
const SectionLink = ({ to, title, color, children }) => {
// eslint-disable-next-line
let classNames = classnames(styles.link, {
[styles.purple]: color === 'purple',
[styles.blue]: color === 'blue',
- [styles.orange]: color === 'orange'
+ [styles.orange]: color === 'orange',
+ [styles.green]: color === 'green'
})
return (
-
+
{title}
{children}
-
- Learn More
-
-
+ {title !== 'API References' && (
+
+ Learn More
+
+ )}
+
)
}
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 6bf6e291..e9fd5744 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -9,6 +9,7 @@
@media (min-width: $break-point--medium) {
display: flex;
+ flex-wrap: wrap;
justify-content: space-between;
}
}
@@ -33,6 +34,12 @@
&:nth-child(3) {
animation-delay: .8s;
}
+
+ &:last-child {
+ flex-basis: 100%;
+ text-align: center;
+ opacity: .75;
+ }
}
.link {
@@ -76,6 +83,13 @@
}
}
+.green {
+ .sectionTitle,
+ .sectionMore {
+ color: $green;
+ }
+}
+
.sectionTitle {
margin-top: 0;
margin-bottom: $spacer / $line-height;
@@ -85,6 +99,7 @@
.sectionText {
margin-bottom: 0;
color: $brand-grey;
+ width: 100%;
}
.sectionMore {