Add links bar

Author: pomber

demos/swr-minidocs-demo

@@ -3,7 +3,6 @@ import s from "./landing.module.css"
 import { CodeHikeHead } from "./code-hike-head"
 import Link from "next/link"
 import { Header } from "./header"
-import { Footer } from "./footer"
 import { Description } from "./landing/description"
 import { Showcase } from "./landing/showcase"
 import { Sponsors } from "./landing/sponsors"
@@ -14,6 +13,15 @@ function LandingPage({ sponsors }) {
   return (
     <div className={s.main}>
       <CodeHikeHead title="Marvellous code walkthroughs - Code Hike" />
+      <div className={s.linksBar}>
+        <a href="https://github.com/code-hike/codehike">
+          GitHub
+        </a>
+        <a href="https://twitter.com/codehike_">Twitter</a>
+        <a href="https://opencollective.com/codehike">
+          Open Collective
+        </a>
+      </div>
       <section>
         <Header className={s.header} />
         <Description />
@@ -32,43 +40,11 @@ function LandingPage({ sponsors }) {
           Building Blocks
         </SectionTitle>
         <Tools />
-        <Footer />
       </section>
     </div>
   )
 }
 
-function ShowcaseX() {
-  return (
-    <div className={s.demos}>
-      <h2>Showcase</h2>
-      <div className={s.listContainer}>
-        <ul className={s.list}>
-          <li>
-            <Link href="demo/hooks-talk">
-              <a className={s.box}>
-                <h3>Player Demo</h3>
-                <img
-                  src="/video-tutorial.png"
-                  style={{ padding: "2.32% 0" }}
-                />
-              </a>
-            </Link>
-          </li>
-          <li className={s.box}>
-            <Link href="demo/blog-post">
-              <a className={s.box}>
-                <h3>Blog Demo</h3>
-                <img src="/post-thumb.png" />
-              </a>
-            </Link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  )
-}
-
 function Tools() {
   return (
     <div className={s.tools} id="building-blocks">

site/src/landing-new.js

@@ -3,7 +3,6 @@ import s from "./landing.module.css"
 import { CodeHikeHead } from "./code-hike-head"
 import Link from "next/link"
 import { Header } from "./header"
-import { Footer } from "./footer"
 
 export { LandingPage }
 
@@ -42,7 +41,6 @@ function LandingPage() {
       </div>
       <Demos />
       <Tools />
-      <Footer />
     </div>
   )
 }

site/src/landing.js

@@ -2,6 +2,7 @@
   /* background: #aaa; */
   /* max-width: 1024px; */
   margin: 0 auto;
+  position: relative;
 }
 
 .main > section {
@@ -26,6 +27,17 @@
   );
 }
 
+.linksBar {
+  position: absolute;
+  right: 32px;
+  top: 16px;
+  display: flex;
+}
+
+.linksBar > * {
+  margin: 8px;
+}
+
 .header {
   margin-top: 96px;
   padding: 32px;
@@ -52,57 +64,6 @@
   margin: 0 64px;
 }
 
-.demos {
-  /* background: #ece; */
-  padding: 32px;
-}
-
-.demos .listContainer {
-  position: relative;
-}
-
-.demos a {
-  color: inherit;
-}
-.demos button svg {
-  display: block;
-}
-.demos .prev {
-  left: 0;
-}
-
-.demos .next {
-  right: 0;
-}
-
-.demos .list {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.demos .box {
-  display: block;
-  box-sizing: border-box;
-  padding: 0 8px;
-}
-
-.demos .box:hover {
-  color: var(--accent-500);
-}
-
-.demos .box h3 {
-  margin: 0;
-  font-size: 1.5em;
-  text-align: center;
-}
-
-.demos .box img {
-  width: 100%;
-  min-width: 300px;
-  max-width: 450px;
-}
-
 .tools {
   /* background: #cee; */
   padding: 32px 32px 16px;
@@ -193,4 +154,7 @@
   .title {
     font-size: 1.4em;
   }
+  .linksBar {
+    font-size: 0.8em;
+  }
 }