Merge pull request #32 from kartAI/feat/landing-page

feat: landing page with corresponding tests

frontend/cypress/e2e/1-getting-started/pages/landingpage.cy.js

@@ -0,0 +1,54 @@
+const BASE_URL = "http://localhost:3000"
+describe('Landing page', () => {
+  it('should load the landing page successfully', () => {
+    cy.visit(BASE_URL + "/"); 
+    cy.url().should("eq", BASE_URL + "/")
+  });
+});
+
+describe("Make sure landing page is visitable/ displays data properly", () => {
+    beforeEach(() => {
+        cy.visit(BASE_URL + "/")
+    })
+
+    it("test landingpage has navigation bar", () => {
+      cy.contains("Før Søknad")
+      cy.contains("Under Søknad")
+      cy.contains("Mottakskontroll")
+    })
+
+    it("landing page has welcoming paragraph", () => {
+      cy.get("#welcome-text").should("be.visible")
+    })
+
+    it("landing page has image", () => {
+      cy.get("#homepage-picture").should("be.visible")
+    })
+});
+
+describe("Make sure navbar on landing page get you to intended target", () => {
+  beforeEach(() => {
+    cy.visit(BASE_URL + "/")
+  })
+
+  it("test før søknad", () => {
+    cy.contains("Før Søknad").click();
+    cy.url().should("eq", BASE_URL +"/bygget")
+  })
+
+  it("test under søknad", () => {
+    cy.contains("Under Søknad").click();
+    cy.url().should("eq", BASE_URL + "/soknad")
+  })
+
+  it("test Mottakskontroll", () => {
+    cy.contains("Mottakskontroll").click();
+    cy.url().should("eq", BASE_URL + "/admin")
+  })
+})
+
+
+
+
+
+

frontend/package.json

@@ -57,7 +57,7 @@
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
-    "cypress": "^13.14.2",
+    "cypress": "^13.15.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.4",
     "jest": "^29.7.0",

frontend/src/app/page.tsx

@@ -1,20 +1,33 @@
 import Link from "next/link";
+import Image from "next/image";
 
 
 export default async function Home() {
   return (
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-        <div className="flex flex-row gap-4">
+      <main className="flex min-h-screen flex-col items-center justify-center bg-white">
+        {/*           
+          TODO: remove when navbar is added 
+           */}
+        <div className="flex flex-row gap-4 top-0 fixed" >
           <Link href={"/bygget"} className="bg-blue-500 rounded-xl p-4">
-            Grenssesnitt 1 (meld fra om bygging)
+            Før Søknad
           </Link>
           <Link href={"/soknad"} className="bg-blue-500 rounded-xl p-4">
-            Grenssesnitt 2 (søk om byggetillatelse)
+            Under Søknad 
           </Link>
           <Link href={"/admin"} className="bg-blue-500 rounded-xl p-4">
-            Grenssesnitt 3 (admin dashboard)
+            Mottakskontroll
           </Link>
         </div>
+
+        <figure className="xl:flex pl-10 md:pl-40 pr-4 md:pr-16">
+          <section id="welcome-text">
+            <h1 className="text-5xl font-bold">KartAI</h1>
+            <p className="mt-10 text-xl md:text-3xl">Et verktøy for å effektivisere og hjelpe innbyggere med byggesøknadsprossessen ved å ta i bruk kunstig intelligens.</p>
+            <p className="mt-10 text-xl md:text-3xl mb-10 xl:mb-0">Ved at innbyggere tar i bruk digitale selvbetjeningsløsninger, sparer både kommune og innbyggere tid, ressurser og penger. </p>
+          </section>
+          <Image id="homepage-picture" src= "/homepagepicture.jpg" alt="Lanskapsbilde"  width={800} height={600} className="rounded-md xl:ml-20"  />
+        </figure>
       </main>
   );
 }