From cc24e63ade6ebd670d3c0557540ada27e0bc178d Mon Sep 17 00:00:00 2001
From: Maggie Appleton <maggie.fm.appleton@gmail.com>
Date: Mon, 6 Sep 2021 17:03:24 +0100
Subject: [PATCH] setup tools data format

---
 components/Footer.js |  0
 components/Header.js |  0
 pages/index.js       | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+)
 create mode 100644 components/Footer.js
 create mode 100644 components/Header.js

diff --git a/components/Footer.js b/components/Footer.js
new file mode 100644
index 0000000..e69de29
diff --git a/components/Header.js b/components/Header.js
new file mode 100644
index 0000000..e69de29
diff --git a/pages/index.js b/pages/index.js
index ced1042..91663fe 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,6 +9,25 @@ import Card from "../components/Card";
 import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 import { motion } from "framer-motion";
 
+const tools = [
+    {
+        title: "Roam Research",
+        description: "A personal notes system for interconnected thought",
+        url: "https://roamresearch.com/",
+    },
+    {
+        title: "Roam Garden",
+        description:
+            "Allows you to turn a Roam Research graph into a public website",
+        url: "https://roam.garden/",
+    },
+    {
+        title: "Gatsby Theme Garden",
+        description: "Gatsby theme that supports using Roam as a source",
+        url: "https://github.com/mathieudutour/gatsby-digital-garden/",
+    },
+];
+
 export default function Index({ gardens }) {
     return (
         <Container>
@@ -58,6 +77,23 @@ export default function Index({ gardens }) {
                     {gardens.slice(0, 7).map((garden) => (
                         <Card garden={garden} />
                     ))}
+                    <li>
+                        <Link href="/directory">
+                            <a className="text-deepGreen text-lg">
+                                View all gardens
+                            </a>
+                        </Link>
+                    </li>
+                </motion.ul>
+                <motion.ul>
+                    {tools.slice(0, 7).map((tool) => (
+                        <div>
+                            <h2 className="text-xl text-deepGreen font-serif font-light max-w-5xl leading-tight">
+                                {tool.title}
+                            </h2>
+                            <p className="text-lg">{tool.description}</p>
+                        </div>
+                    ))}
                 </motion.ul>
             </Layout>
         </Container>