Design idea

anwendung/src/pages/semesteroverview.js

@@ -1,5 +1,5 @@
 import Button from "@/components/Button";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import SemesterTile from "@/components/SemesterTile";
 import InputForm from "@/components/InputForm";
 import {useRouter} from "next/router";
@@ -91,6 +91,32 @@ export default function SemesterOverview(p)
 
     return (
         <div className={"semester-overview"}>
+            <div style={{
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                overflow: "clip",
+                pointerEvents: "none"
+            }}>
+                <div style={{
+                    position: "absolute",
+                    transform: "skew(20deg)",
+                    width: "100%",
+                    height: "100%",
+                    zIndex: -10,
+                    backgroundColor: "#f2f2f2",
+                    borderTopLeftRadius: 400,
+                    borderBottomRightRadius: 800,
+
+                }}></div>
+                <div style={{
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
+                    zIndex: -11,
+                    backgroundColor: "#346991",
+                }}></div>
+            </div>
             {
                 entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
                         localStorage.setItem("currentsid", e.id)
@@ -101,7 +127,7 @@ export default function SemesterOverview(p)
                     funcButtonEdit(e, m);
                 }}/>))
             }
-            <Button color={"#818181"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
+            <Button color={"#dcdcdc"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
             onClick={() => onClickNewSemester()}/>
             <PopUp hint={modalHint} text1={"Abbrechen"} text2={"Löschen"} displayState={modalDisplay}
             function1={funcButtonAbort} function2={funcButtonDelete}/>