initial setup

components/Card.js

@@ -0,0 +1,47 @@
+import { motion } from "framer-motion";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Card({ post }) {
+    return (
+        <motion.li
+            className="w-60 mr-10 mb-14 space-y-2 opacity-80"
+            key={post.filePath}
+            whileHover={{
+                scale: 1.02,
+                opacity: 1,
+                transition: {
+                    duration: 0.3,
+                    ease: "easeInOut",
+                },
+            }}
+        >
+            <Link
+                as={`/posts/${post.filePath.replace(/\.md?$/, "")}`}
+                href={`/posts/[slug]`}
+            >
+                <a>
+                    {post.data.image && (
+                        <Image
+                            className="rounded-md"
+                            src={post.data.image}
+                            width={250}
+                            height={200}
+                            alt={post.data.title}
+                        />
+                    )}
+                    <h3 className="text-coolGray-600 leading-tight mt-2">
+                        {post.data.title}
+                    </h3>
+                </a>
+            </Link>
+            <motion.div>
+                {post.data.tools &&
+                    post.data.tools.map((tool) => <p>{tool}</p>)}
+            </motion.div>
+            <svg className="h-4 w-4 text-coolGray-600" viewBox="0 0 20 20">
+                <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
+            </svg>
+        </motion.li>
+    );
+}

components/Container.js

@@ -0,0 +1,7 @@
+export default function Container({ children }) {
+    return (
+        <div className="container flex flex-col sm:flex-row max-w-full">
+            {children}
+        </div>
+    );
+}

components/Layout.js

@@ -0,0 +1,9 @@
+import { motion } from "framer-motion";
+
+export default function Layout({ children }) {
+    return (
+        <div className="container mt-24 mb-6 px-6 md:mx-auto h-full">
+            {children}
+        </div>
+    );
+}

components/Sidemenu.js

@@ -0,0 +1,50 @@
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+export default function Sidemenu() {
+    return (
+        <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={{
+                hidden: { opacity: 0, x: -50 },
+                visible: {
+                    opacity: 1,
+                    x: 0,
+                    transition: {
+                        delay: 0.6,
+                        ease: "easeInOut",
+                        duration: 1,
+                    },
+                },
+            }}
+            className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12"
+        >
+            <Link href="/what">
+                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight font-bold">
+                    What's a Digital Garden?
+                </a>
+            </Link>
+            <Link href="/directory">
+                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                    Garden Directory
+                </a>
+            </Link>
+            <Link href="/tools">
+                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                    Tools for Gardening
+                </a>
+            </Link>
+            <Link href="/tutorials">
+                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                    Gardening Tutorials and Guides
+                </a>
+            </Link>
+            <Link href="/theory">
+                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                    Gardening Theory and Navel-Gazing
+                </a>
+            </Link>
+        </motion.div>
+    );
+}