do intro

code/frontend/src/App.tsx

@@ -16,7 +16,8 @@ import {
 	Navigate,
 } from "react-router-dom";
 import { Auth } from "./api/Auth";
-import AboutUs from "./pages/About";
+import About from "./pages/About";
+import { NotFound } from "./pages/404Page/NotFoundPage";
 
 function App() {
 	return (

code/frontend/src/pages/About.tsx

@@ -3,9 +3,36 @@ import "./about.css";
 function About() {
 	return (
 		<div className="mainbox">
-			<h1 className="about-title color-orange">
-				About<br></br>Feather Feed
-			</h1>
+			<div className="intro">
+				<div className="block">
+					<div className="item text1 text-start">
+						Bringing Birds closer to you
+					</div>
+					<img
+						className="item item-end pic pic-justify"
+						src="/assets/images/BirdOnCam.jpg"
+						alt="A bird sitting on a camera"
+					/>
+				</div>
+				<div className="block block2">
+					<img
+						className="item item-end grid-end pic2 pic"
+						src="/assets/images/birdVeryInterestedFace.jpg"
+						alt="A curious-interested looking cute bird"
+					/>
+					<div className="item text1 text-end grid-start text1">
+						And the Birds you love
+					</div>
+				</div>
+				<div className="block">
+					<div className="item text1 text-start">Enhance your day</div>
+					<img
+						className="item item-end pic pic-justify"
+						src="/assets/images/owlFancyFace.jpg"
+						alt="A very confident looking owl"
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

code/frontend/src/pages/about.css

@@ -1,11 +1,15 @@
+:root {
+	--margin-mobile: 2rem;
+}
 .mainbox {
-	/* TODO header height variablen anpassen sobald PR für header durch ist*/
-	margin-top: var(--Header-height);
-	min-height: calc(100vh - var(--Header-height));
+	min-width: 360px;
+	max-width: 100vw;
 }
 
 @media screen and (min-width: 768px) {
 	.mainbox {
+		min-width: 60rem;
+		min-height: 60rem;
 		margin-top: var(--Header-height);
 	}
 }
@@ -15,6 +19,62 @@
 	justify-content: start;
 }
 
+.intro {
+	box-sizing: border-box;
+	margin: 3vw;
+}
+
+.block {
+	max-width: calc(100vw-var(--margin-mobile));
+	display: grid;
+	grid-template-rows: 1fr auto;
+	align-items: center;
+	justify-content: space-between;
+	height: clamp(30vw, 45vh, 100%);
+	margin: 2vw;
+	vertical-align: center;
+	margin-block-end: 2rem;
+}
+.block2 {
+	display: grid;
+	grid-template-areas:
+		"text"
+		"pic";
+	grid-template-columns: 1fr;
+}
+.block2 .text1 {
+	grid-area: text;
+}
+.block2 .pic2 {
+	grid-area: pic;
+	justify-self: start;
+}
+.block .pic-justify {
+	justify-self: end;
+}
+
+.item {
+	max-width: 90vw;
+	max-height: 19rem;
+}
+.pic {
+	max-width: 80vw;
+	border-radius: var(--border-radius);
+	box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
+}
+
+.text1 {
+	height: 100%;
+	color: white;
+	font-size: 4rem;
+}
+.text-start {
+	text-align: start;
+}
+.text-end {
+	text-align: end;
+}
+
 /* TODO Entfernen vor final*/
 .test {
 	height: 100vh;
@@ -22,3 +82,52 @@
 	color: aqua;
 	background-color: aquamarine;
 }
+
+@media screen and (min-width: 768px) {
+	.about-title {
+		flex-direction: row;
+		justify-content: start;
+	}
+
+	.intro {
+		box-sizing: border-box;
+		margin: 2rem;
+	}
+
+	.block {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		justify-content: space-between;
+		height: clamp(30vw, 45vh, 100%);
+		margin: 1rem;
+		vertical-align: center;
+		margin-block-end: 2rem;
+	}
+	.block2 {
+		grid-template-areas: "pic text";
+		grid-template-columns: auto 1fr;
+		align-items: center;
+	}
+
+	.item {
+		height: clamp(19rem, 30vw, 30vw);
+		max-height: none;
+	}
+
+	.text1 {
+		height: 100%;
+		color: white;
+		font-size: clamp(5rem, 8vw, 15vw);
+		display: flex;
+		align-items: center;
+	}
+
+	/* TODO Entfernen vor final*/
+	.test {
+		height: 100vh;
+		width: 100vw;
+		color: aqua;
+		background-color: aquamarine;
+	}
+}

code/frontend/src/styles/fonts.css

@@ -1,66 +1,66 @@
 @font-face {
-  font-family: "Lora";
-  font-style: normal;
-  font-weight: 400;
-  src: url(../../public/assets/fonts/Lora/Lora-VariableFont_wght.ttf);
-  unicode-range: U+00-52F, U+1E00-1FFF, U+2200-22FF;
+	font-family: "Lora";
+	font-style: normal;
+	font-weight: 400;
+	src: url(../../public/assets/fonts/Lora/Lora-VariableFont_wght.ttf);
+	unicode-range: U+00-52F, U+1E00-1FFF, U+2200-22FF;
 }
 .title-h1 {
-  font-family: "Lora";
-  font-size: 2.5rem;
-  line-height: 130%;
-  letter-spacing: 3.2px;
+	font-family: "Lora";
+	font-size: 2.5rem;
+	line-height: 130%;
+	letter-spacing: 3.2px;
 }
 
 .small-title {
-  font-family: "Lora";
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 40px;
+	font-family: "Lora";
+	font-size: 24px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 40px;
 }
 
 @media (width >= 768px) {
-  .title-h1 {
-    font-size: 4rem;
-  }
+	.title-h1 {
+		font-size: 4rem;
+	}
 }
 
 h1 {
-  font-family: "Lora";
+	font-family: "Lora";
 }
 @font-face {
-  font-family: "Inter";
-  font-style: normal;
-  src: url(../../public/assets/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
+	font-family: "Inter";
+	font-style: normal;
+	src: url("../../public/assets/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf");
 }
 .body-l,
 .body-m {
-  font-family: "Inter";
+	font-family: "Inter";
 }
 .body-l {
-  font-size: 1.5rem;
-  line-height: 110%;
-  letter-spacing: 1.2px;
+	font-size: 1.5rem;
+	line-height: 110%;
+	letter-spacing: 1.2px;
 }
 .body-m {
-  font-size: 1rem;
-  line-height: 100%;
-  letter-spacing: 0.8px;
+	font-size: 1rem;
+	line-height: 100%;
+	letter-spacing: 0.8px;
 }
 .footer-link {
-  font-family: "Inter";
-  font-size: 1rem;
-  line-height: 100%;
-  letter-spacing: 0.8px;
+	font-family: "Inter";
+	font-size: 1rem;
+	line-height: 100%;
+	letter-spacing: 0.8px;
 }
 
 .login-input {
-  font-family: 'Inter';
-  font-size: 1rem;
-  letter-spacing: 0.5px;
-  line-height: 24px;
-  font-weight: 400;
+	font-family: "Inter";
+	font-size: 1rem;
+	letter-spacing: 0.5px;
+	line-height: 24px;
+	font-weight: 400;
 }
 
 .body-bold {
@@ -70,5 +70,5 @@ h1 {
 }
 
 p {
-  font-family: "Inter";
+	font-family: "Inter";
 }