[site][s]: refactor front page to tailwind and use new logo.

docs/components/Footer/index.jsx

@@ -2,14 +2,15 @@ import styles from '../../styles/Home.module.css'
 
 export default function Footer() {
   return (
-    <footer className={styles.footer}>
+    <footer className="flex items-center justify-center w-full h-24 border-t">
       <a
-        href="https://www.datopian.com/"
+        className="flex items-center justify-center"
+        href="https://datopian.com/"
         target="_blank"
         rel="noopener noreferrer"
       >
         Built by{' '}
-        <img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
+        <img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
       </a>
     </footer>
   )

docs/pages/index.js

@@ -12,50 +12,62 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Nav />
-      <div className={styles.container}>
 
-        <main className={styles.main}>
+      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center py-10">
-
+        <h1 className="text-6xl font-bold">
-          <h1 className={styles.title}>
+          <a href="https://portaljs.com/">
-            Welcome to <a href="https://github.com/datopian/portal.js">Portal.js!</a>
+            <img src="/logo.svg" alt="PortalJS Logo" className="h-28" />
+          </a>
         </h1>
 
-          <p className={styles.description}>
+        <h2 className="mt-6 text-4xl font-normal leading-snug">
-            Rapidly build rich data portals using a modern frontend framework!
+          Rapidly build rich data portals using a modern frontend framework
+        </h2>
+
+        <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
+          <a
+            href="/docs/"
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-semibold">▸ Documentation</h3>
+            <p className="mt-4 text-xl">
+              Find in-depth information about Portal.js features and API.
             </p>
-
-          <div className={styles.grid}>
-            <a href="/docs" className={styles.card}>
-              <h3>Documentation &rarr;</h3>
-              <p>Find in-depth information about Portal.js features and API.</p>
-            </a>
-
-            <a href="/learn" className={styles.card}>
-              <h3>Learn &rarr;</h3>
-              <p>Learn about Portal.js with examples!</p>
           </a>
 
           <a
-              href="/gallery"
+            href="/learn/"
-              className={styles.card}
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
           >
-              <h3>Gallery &rarr;</h3>
+            <h3 className="text-2xl font-semibold">▸ Learn</h3>
-              <p>Discover examples of Portal.js projects.</p>
+            <p className="mt-4 text-xl">
+              Learn about Portal.js in an interactive course.
+            </p>
+          </a>
+
+          <a
+            href="/gallery/"
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-semibold">▸ Gallery</h3>
+            <p className="mt-4 text-xl">
+              Discover examples of Portal.js projects.
+            </p>
           </a>
 
           <a
             href="https://github.com/datopian/portal.js"
-              className={styles.card}
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
           >
-              <h3>Contribute &rarr;</h3>
+            <h3 className="text-2xl font-semibold">▸ Contribute</h3>
-              <p>
+            <p className="mt-4 text-xl">
               Checkout the Portal.js repository on github
             </p>
           </a>
         </div>
       </main>
+
       <Footer />
-      </div>
     </>
   )
 }