Test MVP

Første versjon (MVP) er ferdig

src/components/Index/Hero.component.tsx

@@ -0,0 +1,28 @@
+import type { NextComponentType } from "next";
+
+const Hero: NextComponentType = () => {
+  return (
+    <div
+      role="article"
+      aria-label="Kontainer for animasjoner av introtekst"
+      id="main-hero"
+      className="flex flex-col justify-center text-lg">
+      <div className="p-4 mt-6 mb-6 bg-white opacity-75">
+        <div className="text-black rounded">
+          <section role="intro" aria-label="Introduksjonstekst">
+            <h1 className="text-5xl text-center p-2">Hei!</h1>
+            <h2 className="text-2xl text-center p-2">
+              Jeg heter Daniel Fjeldstad og er en webutvikler.
+            </h2>
+            <h2 className="px-6 mt-4 text-lg md:p-0 lg:p-0 xl:p-0 xl:text-center lg:text-left md:text-center xl:text-2xl lg:text-xl md:text-xl md:mx-auto md:w-full lg:w-2/3 xl:w-full">
+              Jeg kan PHP, mySQL, Wordpress, Javascript, Typescript, React, Vue, Redux, Docker,
+              Photoshop og mye mer.
+            </h2>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/components/Index/IndexContent.component.tsx

@@ -3,31 +3,19 @@ import PortableText from "react-portable-text";
 
 import type { NextComponentType } from "next";
 
+import Hero from "./Hero.component";
+
 const IndexContent: NextComponentType = ({ post }: any) => {
   return (
     <main role="main" aria-label="Her kommer hovedinnholdet" id="maincontent">
       <div className="mx-auto mt-16 rounded lg:mt-20 xl:mt-20 bg-graybg shadow-large md:mt-16 sm:mt-64 xs:mt-64">
-        <div
-          role="article"
-          aria-label="Kontainer for animasjoner av introtekst"
-          id="main-hero"
-          className="flex flex-col justify-center text-lg"
-        >
-          <div className="p-2 mt-4 mb-4 bg-white opacity-75">
-            <div className="text-black rounded">
-              <section role="intro" aria-label="Introduksjonstekst">
-                Her kommer en Jumbotron eller noe lignende
-              </section>
-            </div>
-          </div>
-        </div>
+        <Hero />
         <div className="container grid gap-4 p-4 mx-auto mt-2 lg:grid-cols-2 sm:grid-cols-1 md:grid-cols-1 xs:grid-cols-1">
           {post &&
             post.map((content: any) => (
               <div
                 className="mt-4 p-8 text-lg text-black bg-white rounded shadow"
-                key={content._id}
-              >
+                key={content._id}>
                 <section role="contentinfo" aria-label={content.title}>
                   <h2 className="text-3xl text-center">{content.title}</h2>
                   <PortableText

src/styles/globals.css

@@ -2,12 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
+/* Global font */
 body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: Lato, sans-serif;
+  background-color: #f2f2f2;
+}
+
+/* Custom styling for main hero image */
+#main-hero {
+  background-image: url("../assets/images/blue-hero.jpg");
+  height: 450px;
 }
 
 a {