set up initial template

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/jsx-first-prop-new-line": [2, "multiline"],
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline" }],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-closing-bracket-location": [2, "tag-aligned"]
+  }
 }

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": ["CODECRAFT", "tailwindcss"],
+  "prettier.configPath": "./prettier.config.js",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

app/(landing)/sections/Hero.tsx

@@ -1,15 +1,29 @@
+import Image from 'next/image';
+
 export default function Hero() {
   return (
     <div
       className="bg-gray-100 w-full h-[100vh] max-h-[1300px]
-      flex flex-col justify-center items-center"
+      flex flex-col-reverse justify-center items-center"
     >
-      <h1 className="font-extrabold text-5xl">
-        HackRU!
-      </h1>
-      <span>
-        Hack all knight looonnnggg
-      </span>
+      <Image
+        src="/landing/fire.png"
+        width="0"
+        height="0"
+        sizes="100vw"
+        alt="Fire"
+        /* https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height */
+        className="w-80 h-auto"
+        priority
+      />
+
+      <div className="flex flex-col text-center grow justify-center text-3xl space-y-4">
+        <div className="text-xl mb-2">WELCOME TO OUR</div>
+        <div>SCHOOL OF</div>
+        <div>CODECRAFT &</div>
+        <div>WIZARDRY!</div>
+      </div>
+
     </div>
   );
 }

prettier.config.js

@@ -3,4 +3,7 @@ const styleguide = require('@vercel/style-guide/prettier');
 module.exports = {
   ...styleguide,
   plugins: [...styleguide.plugins, 'prettier-plugin-tailwindcss'],
+  rules: {
+    singleAttributePerLine: true,
+  },
 };