set up tailwind and add logo to homepage

Author: Zakk

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -15,11 +15,15 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
+		"autoprefixer": "^10.4.14",
+		"postcss": "^8.4.27",
 		"remark-cli": "^11.0.0",
 		"remark-frontmatter": "^4.0.1",
+		"remark-lint-maximum-line-length": "^3.1.3",
 		"remark-preset-lint-consistent": "^5.1.2",
 		"remark-preset-lint-recommended": "^6.1.3",
-		"remark-lint-maximum-line-length": "^3.1.3"
+		"tailwindcss": "^3.3.3",
+		"typescript": "5.1.6"
 	},
 	"remarkConfig": {
 		"settings": {},

pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../global.css'
+
+export default function Nextra({ Component, pageProps }) {
+  const getLayout = Component.getLayout || ((page) => page)
+  return getLayout(
+    <Component {...pageProps} />
+  )
+}

pages/index.mdx

@@ -3,9 +3,10 @@ title: Allo Protocol
 description: What is the Allo Protocol?
 ---
 
-<div className="nx-mb-12 nx-mt-16 nx-text-center">
-  <h1 className="nx-font-extrabold nx-text-4xl title">Allo Protocol</h1>
-  <p className="nx-text-xl">A general purpose protocol for the efficient allocation of capital.</p>
+<div className="mb-12 mt-16 flex flex-col items-center">
+  <img src="/Allo_Logomark_Green.png" className="max-h-8" />
+  <h1 className="font-extrabold text-4xl title">Allo Protocol</h1>
+  <p className="text-xl">A general purpose protocol for the efficient allocation of capital.</p>
 </div>
 
 ## Introduction