Update newLists.ts

.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        "inline-react-svg"
+    ]
+}

.eslintrc.json

@@ -1,9 +1,29 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline"
-    }]
-  }
-}
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "extends": [
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier/@typescript-eslint"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "plugins": [
+        "@typescript-eslint"
+      ]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "eslint.format.enable": true,
+    "editor.formatOnSave": true,
+    "eslint.lintTask.enable": true
+}

components/Card.tsx

@@ -0,0 +1,60 @@
+
+import Discord from "../img/discord.svg"
+import Twitter from "../img/twitter.svg"
+import { Project } from "../types/interface"
+import Link from "next/link"; // Routing
+export function Card(props: Project) {
+  return (
+    <div className={props.name === 'Loot (for Adventurers)' ? "w-full md:w-1/2" : "w-full md:w-1/4 sm:w-1/2 mb-10"}>
+      <div className="bg-gray-900 rounded-xl p-5 sm:p-8 shadow-xl my-3 transform hover:-translate-y-2 hover:border-white border border-black duration-150 mx-3 h-full flex flex-col">
+        <div className="flex text-white justify-between">
+          <h2 className="mr-auto">{props.name}</h2>
+
+        </div>
+        <div className="flex">
+          {props?.discord &&
+            <a target="_blank" className="self-center " href={props.discord.url as string}>
+              <Discord className="fill-current w-6 h-6 mx-2" />
+            </a>
+
+          }
+          {props.twitter &&
+            <a href={props.twitter.url as string} className="self-center" target="_blank">
+              <Twitter className="fill-current w-4 h-4 mx-2" />
+            </a>
+          }
+        </div>
+        <h5 className="uppercase mt-8 text-gray-400 ">About</h5>
+        <p className="text-xl">{props.description}</p>
+        <h5 className="uppercase mt-8 text-gray-400 mb-2">What to do</h5>
+        <div className="flex flex-wrap">
+          {props.whatToDo.map(({ content, url }, i) => {
+            return (
+              <a target="_blank" href={url as string} key={i} className="hover:bg-gray-800 py-2 border-gray-600 border rounded px-4 mr-3 mb-2">
+                {content}
+              </a>
+            )
+          })}
+
+        </div>
+
+        {props.roadMap &&
+          <div>
+            <h5 className="uppercase mt-8 text-gray-400">Where is it going</h5>
+            <p className="text-xl">{props.description}</p>
+          </div>
+
+        }
+
+        <div className="flex mt-5 space-x-4 text-center mt-auto">
+          {props.website &&
+            <a target="_blank" href={props.website.url as string} className="border-gray-600 rounded border px-2 py-1 w-full bg-gray-700 hover:bg-gray-800 uppercase">Website</a>
+          }
+          {props.contract &&
+            <a target="_blank" href={'https://etherscan.io/address/' + props.contract.content as string} className="border-gray-600 rounded border px-2 py-1 w-full bg-gray-700 hover:bg-gray-800 uppercase">Contract</a>
+          }
+        </div>
+      </div>
+    </div >
+  );
+}

components/Layout.tsx

@@ -12,13 +12,75 @@ export default function Layout({
 }: {
   children: ReactElement | ReactElement[];
 }) {
+  const quicklinks: Record<string, string>[] = [
+    {
+      name: "Chapters",
+      url: "/"
+    },
+    {
+      name: "Marketplaces",
+      url: "/marketplaces"
+    },
+    {
+      name: "Build w/ Loot",
+      url: "/build"
+    },
+    {
+      name: "Resources",
+      url: "/resources",
+    },
+  ];
+  const subLinks: Record<string, string>[] = [
+    {
+      name: "Loot.exchange",
+      url: "https://www.loot.exchange/",
+    },
+    {
+      name: "Opensea",
+      url: "https://opensea.io/collection/lootproject"
+    },
+    {
+      name: "Twitter",
+      url: "https://twitter.com/lootproject",
+    },
+  ];
+  const router = useRouter();
   return (
     <div>
       {/* Meta */}
       <Head />
       {/* Top header */}
       <Header />
+      <div className="container mx-auto px-4 text-center py-10 sm:pt-40 justify-around flex flex-wrap">
+        <div className="sm:w-1/2">
+          <h1>Loot</h1>
+          <div>
+            <nav className="my-8">
+              {subLinks.map(({ name, url }, i) => {
+                return (<Link key={i} href={url}>
+                  <a className={router.pathname == url ? "bg-gray-800 py-1 px-4 sm:p-4 mx-4 rounded-xl border border-gray-900" : " px-4  sm:p-4 mx-4 py-1   hover:bg-gray-800 rounded-xl "} >{name}</a>
+                </Link>)
+              })}
+            </nav>
+          </div>
+          <p className="sm:text-2xl">Loot is randomized adventurer gear generated and stored on chain.
+
+          Stats, images, and other functionality are intentionally omitted for others to interpret.
 
+        Feel free to use Loot in any way you want.</p>
+        </div>
+        <div className=" flex w-full justify-around mt-8 relative overflow-hidden ">
+          <div className="sticky top-0 bg-gray-800 p-2 rounded-2xl flex sm:text-2xl tracking-wide flex-wrap justify-between">
+            {quicklinks.map(({ name, url }, i) => {
+              return (<Link key={i} href={url}>
+                <a className={(router.pathname == url ? "bg-gray-900" : "hover:bg-gray-900") + " py-1 px-4 sm:p-4 mx-1 rounded-xl transition-all duration-150"} >{name}</a>
+              </Link>)
+            })}
+
+          </div>
+        </div>
+
+      </div>
       {/* Page content */}
       <div className={styles.content}>{children}</div>
       {/* Bottom footer */}
@@ -71,7 +133,7 @@ function Head(): ReactElement {
       />
       {/* eslint-disable-next-line @next/next/no-page-custom-font */}
       <link
-        href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap"
+        href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Inconsolata:wght@300&display=swap"
         rel="stylesheet"
       />
     </HTMLHead>
@@ -88,7 +150,8 @@ function Header() {
   // All links
   const links = [
     { name: "FAQ", path: "/faq" },
-    { name: "Resources", path: "/resources" },
+    { name: "Discord", path: "https://discord.gg/23gbrJ6pje" },
+    { name: "Loot Talk", path: "https://loot-talk.com/" },
   ];
 
   return (
@@ -112,7 +175,7 @@ function Header() {
                     className={
                       pathname === path
                         ? // Active class if pathname matches current path
-                          styles.header__links_active
+                        styles.header__links_active
                         : undefined
                     }
                   >

components/Link.tsx

@@ -0,0 +1,5 @@
+export function Link(props: any) {
+    return (
+        <a href={props.url} className="border-gray-600 rounded border px-2 py-1">{props.children}</a>
+    )
+}

components/Row.tsx

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+import { Card } from "@components/Card";
+import { CardDetails, Project } from "../types/interface"
+
+export function CardRow(props: CardDetails) {
+    return (
+        <div className="my-10 sm:my-20">
+            <div className="text-center px-4">
+                <h2>{props.name}</h2>
+                <p className="sm:text-2xl mb-4">{props.description}</p>
+            </div>
+
+            <div className="flex flex-wrap justify-around">
+                {props.project.map(({ name, description, whatToDo, roadMap, website, contract, twitter, discord, opensea }, i) => {
+                    return (
+                        <Card key={i} name={name} description={description} whatToDo={whatToDo} roadMap={roadMap} website={website} contract={contract} twitter={twitter} discord={discord} opensea={opensea} />
+                    )
+                })}
+            </div>
+        </div>
+    );
+}

package.json

@@ -10,10 +10,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "autoprefixer": "^10.3.6",
+    "babel-plugin-inline-react-svg": "^2.0.1",
     "next": "11.1.0",
+    "postcss": "^8.3.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "sass": "^1.38.2"
+    "sass": "^1.38.2",
+    "tailwindcss": "^2.2.16"
   },
   "devDependencies": {
     "@types/react": "17.0.19",

pages/_app.tsx

@@ -1,5 +1,6 @@
 // Imports
 import "@styles/global.scss";
+import '@styles/app.css'
 
 // Types
 import type { AppProps } from "next/app";

pages/build.tsx

@@ -0,0 +1,34 @@
+// Imports
+import Image from 'next/image'
+import Link from "next/link"; // Local routing
+import Layout from "@components/Layout"; // Layout wrapper
+import { CardRow } from "@components/Row"; // Layout wrapper
+import { defaultBags } from "@utils/constants"; // Bags to render
+import { marketPlaces } from "../utils/newLists"
+// Types
+import type { ReactElement } from "react";
+
+export default function Build(): ReactElement {
+    return (
+        <Layout>
+            <div className="bg-black py-20">
+                <div className="container mx-auto mt-8">
+                    <div className="flex justify-around">
+                        <div className="px-4 sm:px-20 py-8 rounded-2xl text-center md:w-2/3 shadow-xl ">
+                            <span className="uppercase text-xl">Build</span>
+                            <h1 className="text-center mt-4">Developer tools for builders</h1>
+                        </div>
+                    </div>
+
+
+                    {marketPlaces.map(({ name, description, project }, i) => {
+                        return (
+                            <CardRow key={i} name={name} description={description} project={project} />
+                        );
+                    })}
+                </div>
+            </div>
+        </Layout>
+
+    )
+}