Establish template

Author: workshop-maybe

components/Buttons.js

@@ -1,30 +1,27 @@
 import Link from 'next/link'
 
-function Footer() {
+export default function Footer() {
     return (
-        <footer className="flex flex-col md:flex-row bg-purple-700 lg:p-6 text-white w-full lg:z-40"> 
-            <h2 className="lg:inline-flex lg:w-auto px-5 md:text-lg hidden md:contents">Quick Links &rarr;</h2>
+        <footer className="flex flex-col md:flex-row w-full lg:p-6 bg-blue-700 text-white lg:z-40"> 
 
-                <Link href='/cardanostarterkits'>
-                  <a className="lg:inline-flex lg:w-auto md:px-5 text-center">
-                    Cardano Starter Kits
-                  </a>
-                </Link>
-              
-                <Link href='/dandelionapis'>
-                  <a className="lg:inline-flex lg:w-auto md:px-5 text-center">
-                    Dandelion APIs
-                  </a>
-                </Link>
+            <Link href='/'>
+              <a className="lg:inline-flex lg:w-auto md:px-5 text-center">
+                Footer Link 1
+              </a>
+            </Link>
+          
+            <Link href='/'>
+              <a className="lg:inline-flex lg:w-auto md:px-5 text-center">
+                Footer Link 1
+              </a>
+            </Link>
 
-                <Link href='/playground'>
-                  <a className="lg:inline-flex lg:w-auto md:px-5 text-center">
-                    Playground
-                  </a>
-                </Link>
+            <Link href='/'>
+              <a className="lg:inline-flex lg:w-auto md:px-5 text-center">
+                Footer Link 3
+              </a>
+            </Link>
 
           </footer>
     )
 }
-
-export default Footer

components/Cards/Card.js

@@ -1,18 +1,14 @@
 import Nav from '../Nav'
 import Footer from '../Footer'
 
-function Layout({ children }) {
+export default function Layout({ children }) {
     return (
-        <div className="flex flex-col min-h-screen bg-polygon bg-cover w-full">
+        <div className="flex flex-col w-full min-h-screen">
             <Nav />
-            <main className='flex-grow pt-16 mx-auto w-full'>
+            <main className='flex-grow w-full mx-auto pt-16'>
                 {children}
             </main>
             <Footer />    
         </div>
     )
 }
-
-export default Layout
-
-// <img src='/polygon.png' className='fixed min-h-screen w-screen z-0' />

components/Cards/CoverCard.js

@@ -4,7 +4,7 @@ import { useState } from 'react'
 // Learn how to create this Nav:
 // https://dev.to/andrewespejo/how-to-design-a-simple-and-beautiful-navbar-using-nextjs-and-tailwindcss-26p1
 
-function Nav() {
+export default function Nav() {
 
     const [active, setActive] = useState(false);
 
@@ -13,16 +13,16 @@ function Nav() {
     };
 
     return (
-        <nav className='flex items-center flex-wrap bg-purple-700 p-3 fixed w-full z-40'>
+        <nav className='flex items-center flex-wrap bg-blue-700 p-3 fixed w-full z-40'>
             <Link href='/'>
             <a className='inline-flex items-center p-2 mr-4'>
                 <span className='text-xl text-white font-bold uppercase tracking-wide'>
-                Gimbalabs
+                Next JS + Tailwind CSS Template
                 </span>
             </a>
             </Link>
             <button 
-                className='inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none' 
+                className='inline-flex p-3 hover:bg-blue-300 rounded lg:hidden text-white ml-auto hover:text-white outline-none' 
                 onClick={handleClick}
             >
                 {/* mobile hamburger icon */}
@@ -61,25 +61,23 @@ function Nav() {
                         About
                     </a>
                     </Link>
-                    <Link href='/learn'>
+                    <Link href='/'>
                     <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-purple-300 hover:text-black'>
-                        Learn
+                        Nav Link
                     </a>
                     </Link>
-                    <Link href='/tinker'>
+                    <Link href='/'>
                     <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-purple-300 hover:text-black'>
-                        Tinker
+                        Nav Link
                     </a>
                     </Link>
-                    <Link href='/participate'>
+                    <Link href='/'>
                     <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-purple-300 hover:text-black'>
-                        Participate
+                        Nav Link
                     </a>
                     </Link>
                 </div>
             </div>
         </nav>
     )
 }
-
-export default Nav