From afaf64153edf7a7735c65970524bffd96b99854d Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Thu, 18 Apr 2024 12:18:00 +0200
Subject: [PATCH] add openstreetmap to about page

---
 src/locales/de.ts         |  5 +++++
 src/pages/About/About.tsx | 18 +++++++++++++++++-
 src/type/translation.ts   |  5 +++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/locales/de.ts b/src/locales/de.ts
index 913c33c..fdb6fcb 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -257,6 +257,11 @@ export default function de(): Translation {
 						description: "Ronald Krebs ist ein Gründer von Crabston und Berater für diverse Dienstleistungen ausserhalb der Informatik. In seiner Jugend hat er den Beruf des Bildhauers erlernt und ausgeübt. Darüber hinaus hat er bereits verschiedene Firmen gegründet und leitet erfolgreich seit einigen Jahren Bargetzi Grabmalkunst GmbH.",
 					},
 				},
+				location: {
+					title: "Standort",
+					description: "Hier finden Sie unser Büro:",
+					mapCaption: "Öffne Karte in neuem Tab",
+				},
 			},
 			contact: {
 				title: "Kontakt",
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index 6b87983..5ce3adc 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -1,7 +1,8 @@
-import { Avatar, Card, Grid, Stack, Typography } from "@mui/material";
+import { Avatar, Box, Card, Grid, Stack, Typography } from "@mui/material";
 import Page from "../../components/common/Page";
 import InfoIcon from "@mui/icons-material/Info";
 import Diversity3Icon from "@mui/icons-material/Diversity3";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
 import { useTranslation } from "react-i18next";
 import { Pages } from "../../type/page";
 import { Line, PageTitle, SectionTitle } from "../../components/Text";
@@ -66,6 +67,21 @@ export default function About() {
 							))}
 						</Grid>
 					</Card>
+					<Card id={"location"} sx={{padding: "2rem"}}>
+						<SectionTitle>
+							<LocationOnIcon /> {t("about.location.title")}
+						</SectionTitle>
+						<Typography>{t("about.location.description")}</Typography>
+						<Box sx={{height: {xs: "20rem", lg: "30rem"}}}>
+							<iframe
+								width="100%"
+								height="100%"
+								src="https://www.openstreetmap.org/export/embed.html?bbox=7.65324354171753%2C47.23486116259087%2C7.656784057617188%2C47.23674061367706&amp;layer=mapnik&amp;marker=47.235800896466536%2C7.655013799667358"></iframe>
+						</Box>
+						<Typography>
+							<a href="https://www.openstreetmap.org/?mlat=47.23580&amp;mlon=7.65501#map=19/47.23580/7.65501" rel="noreferrer" target="_blank">{t("about.location.mapCaption")}</a>
+						</Typography>
+					</Card>
 				</Stack>
 			</article>
 		</Page>
diff --git a/src/type/translation.ts b/src/type/translation.ts
index 9feeef4..f1b4ab1 100644
--- a/src/type/translation.ts
+++ b/src/type/translation.ts
@@ -106,6 +106,11 @@ export type Translation = {
 				nicholas: Person,
 				ronald: Person,
 			},
+			location: {
+				title: string,
+				description: string,
+				mapCaption: string,
+			},
 		},
 		contact: {
 			title: string,