🚧 Påbegynt hovedside

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>

frontend/package.json

@@ -12,6 +12,7 @@
     "@navikt/aksel-icons": "^4.4.2",
     "@navikt/ds-css": "^4.4.2",
     "@navikt/ds-react": "^4.4.2",
+    "@navikt/ds-tokens": "^4.6.1",
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",

frontend/pages/index.tsx

@@ -10,32 +10,52 @@ export default function Home() {
   }
 
   return (
-    <main className="flex flex-col py-8 justify-center">
-      <Search
-        label="Søk gjennom innmeldte feil (nøkkelord, tags, status)"
-        variant="primary"
-        hideLabel={false}
-      />
-      <Heading 
-        level="1" 
-        size="medium"
-      >
-        Innmeldte feil (saker, feilmeldingerm poster, feil)
-      </Heading>
-      <div className="w-1/2 flex flex-col gap-4 justify-center text-center">
-        <Button 
-          variant="primary" 
-          onClick={handleFeil}
-        >
-          Meld inn feil
-        </Button>
-        <Button 
-          variant="secondary"
-        >
-          Meld inn funksjonalitetsønsker
-        </Button>
+    <main className="flex flex-col h-screen">
+      <nav className="h-12 bg-black"></nav>
+
+      <div className="flex justify-center grow">
+        <div className="bg-gray-50 w-1/6 p-8 flex flex-col justify-end">
+          <div className="flex flex-col gap-4 text-center bottom-0">
+            <Button 
+              variant="primary" 
+              onClick={handleFeil}
+            >
+              Meld inn feil
+            </Button>
+            <Button 
+              variant="secondary"
+            >
+              Meld inn funksjonalitetsønsker
+            </Button>
+          </div>
+        </div>
+
+        <div className="p-8">
+          <Search
+            label="Søk gjennom innmeldte feil (nøkkelord, tags, status)"
+            variant="primary"
+            hideLabel={false}
+          />
+          <Heading 
+            level="1" 
+            size="medium"
+          >
+            Innmeldte feil (saker, feilmeldingerm poster, feil)
+          </Heading>
+          <div className="grid grid-cols-2 gap-4">
+            <FeilCard />  
+            <FeilCard />  
+            <FeilCard />  
+            <FeilCard />  
+
+
+          </div>
+        </div>
+
+        <div className="bg-gray-50 w-1/6 p-8">
+          <h1>Filter to be</h1>
+        </div>
       </div>
-      <FeilCard />
     </main>
   )
 }

frontend/yarn.lock

@@ -205,6 +205,11 @@
     react-day-picker "8.3.4"
     react-modal "3.15.1"
 
+"@navikt/ds-tokens@^4.6.1":
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/@navikt/ds-tokens/-/ds-tokens-4.6.1.tgz#d48f7c8bad197297dfb59b20685a6843f41f269e"
+  integrity sha512-pBX5MLUpFftvRGZcbS9wWoMmzeH/iLNvOdMPvMbYTBnU7LUjU3XHLByfc0ogb2eT3gRevpD4DbjzWVx65ZzULw==
+
 "@next/env@13.4.7":
   version "13.4.7"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.7.tgz#ca12d341edb128ca70384635bd2794125ffb1c01"