Upstatement · gvjacob · Jan 10, 2023 · Jan 9, 2023 · Jan 9, 2023 · Jan 9, 2023
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
 
-module.exports = nextConfig
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.tsx?$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "pre-commit": "pretty-quick --staged && lint-staged"
+    "pre-commit": "pretty-quick --staged && lint-staged",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@next/font": "13.1.1",
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.1",
     "@commitlint/config-conventional": "^17.4.0",
+    "@svgr/webpack": "^6.5.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+import GoNoodleLogoLightSVG from "@src/svgs/gonoodle-logo-light.svg";
+
+export interface LayoutProps {}
+
+export default function Layout({ children }: PropsWithChildren<LayoutProps>) {
+  return (
+    <>
+      <header className="absolute top-0 p-4 sm:p-6">
+        <span className="sr-only">GoNoodle</span>
+        <GoNoodleLogoLightSVG className="w-32" aria-hidden />
+      </header>
+
+      <main>{children}</main>
+    </>
+  );
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,12 @@
-import "@src/styles/globals.css";
 import type { AppProps } from "next/app";
+import Layout from "@src/components/Layout";
+
+import "@src/styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,13 +1,15 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import {
+  Html, Head, Main, NextScript,
+} from "next/document";
 
 export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="bg-black">
         <Main />
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,17 +1,32 @@
 import Head from "next/head";
+import SuperNoodleWorldLandscapeSVG from "@src/svgs/supernoodle-world-landscape.svg";
+import SuperNoodleWorldCloudPairSVG from "@src/svgs/supernoodle-world-cloud-pair.svg";
+import SuperNoodleWorldCloudSingleSVG from "@src/svgs/supernoodle-world-cloud-single.svg";
 
 export default function Home() {
   return (
-    <>
+    <div className="relative overflow-x-hidden min-h-screen bg-gradient-to-b from-purple/5 to-purple/30 bg-no-repeat">
       <Head>
         <title>SuperNoodle</title>
         <meta name="description" content="Generated by create next app" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main>
-        <h1>SuperNoodle</h1>
-      </main>
-    </>
+
+      <SuperNoodleWorldLandscapeSVG
+        className="w-full absolute bottom-0"
+        aria-hidden
+      />
+
+      <SuperNoodleWorldCloudPairSVG
+        className="w-72 absolute top-10 right-0 translate-x-1/4"
+        aria-hidden
+      />
+
+      <SuperNoodleWorldCloudSingleSVG
+        className="w-40 absolute top-1/4 -left-12"
+        aria-hidden
+      />
+    </div>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/src/svgs/gonoodle-logo-light.svg b/src/svgs/gonoodle-logo-light.svg
diff --git a/src/svgs/supernoodle-world-cloud-pair.svg b/src/svgs/supernoodle-world-cloud-pair.svg
diff --git a/src/svgs/supernoodle-world-cloud-single.svg b/src/svgs/supernoodle-world-cloud-single.svg