do short explain

code/frontend/src/pages/About.tsx

@@ -1,6 +1,8 @@
 import "./about.css";
+import { useNavigate } from "react-router-dom";
 
 function About() {
+	const navigate = useNavigate();
 	return (
 		<div className="mainbox">
 			<div className="intro">
@@ -33,6 +35,36 @@ function About() {
 					/>
 				</div>
 			</div>
+			<div className="explain">
+				<div className="explain-announce">This is</div>
+				<div
+					className="explain-title generic-title cursor-pointer"
+					onClick={() => navigate("/feed")}
+				>
+					Feather Feed
+				</div>
+				<div className="explain-text">
+					... a social media platform about Birds.
+					<br />
+					Look up our
+					<span
+						className="color-orange cursor-pointer"
+						onClick={() => navigate("/feed")}
+					>
+						{" "}
+						Feed{" "}
+					</span>
+					and
+					<span
+						className="color-orange cursor-pointer"
+						onClick={() => navigate("/register")}
+					>
+						{" "}
+						Sign up{" "}
+					</span>
+					for your daily Feather Feed
+				</div>
+			</div>
 		</div>
 	);
 }

code/frontend/src/pages/about.css

@@ -1,6 +1,3 @@
-:root {
-	--margin-mobile: 2rem;
-}
 .mainbox {
 	min-width: 360px;
 	max-width: 100vw;
@@ -14,6 +11,38 @@
 	}
 }
 
+.explain {
+	display: grid;
+	grid-template-columns: 1fr;
+	align-items: center;
+	margin: 3vw;
+}
+.explain-announce {
+	width: 90vw;
+	margin: 2vw;
+	font-size: clamp(5rem, 8vw, 15vw);
+	color: white;
+	text-align: left;
+}
+.explain-title {
+	margin: 1vw;
+	width: 90vw;
+	font-size: clamp(7rem, 10vw, 17vw);
+	color: var(--Rotkehlchen-orange-default);
+}
+.explain-text {
+	margin: 2vw;
+	width: 90vw;
+	max-width: 90vw !important;
+	font-size: clamp(3.5rem, 7vw, 14vw);
+	color: white;
+	text-align: left;
+}
+
+.cursor-pointer {
+	cursor: pointer;
+}
+
 .about-title {
 	flex-direction: row;
 	justify-content: start;
@@ -31,9 +60,9 @@
 	align-items: center;
 	justify-content: space-between;
 	height: clamp(30vw, 45vh, 100%);
-	margin: 2vw;
+	margin: var(--margin-mobile);
 	vertical-align: center;
-	margin-block-end: 2rem;
+	margin-block-end: var(--margin-mobile);
 }
 .block2 {
 	display: grid;

code/frontend/src/styles/fonts.css

@@ -26,6 +26,11 @@
 	}
 }
 
+.generic-title {
+	font-family: "Lora";
+	font-weight: 700;
+}
+
 h1 {
 	font-family: "Lora";
 }

code/frontend/src/styles/sizes.css

@@ -1,4 +1,5 @@
 :root {
 	--header-height: 48px;
 	--border-radius: 1rem;
+	--margin-mobile: 2rem;
 }