#15 About us page

src/components/Text.tsx

@@ -48,5 +48,5 @@ export function PageTitle({children}: TitleProps) {
 }
 
 export function SectionTitle({children}: TitleProps) {
-	return <Typography variant={"h5"}>{children}</Typography>;
+	return <Typography variant={"h5"} sx={{marginBottom: "1rem"}}>{children}</Typography>;
 }

src/locales/de.ts

@@ -237,13 +237,26 @@ export default function de(): Translation {
 					projectsDescription: "Hier sind einige unserer Projekte:",
 				},
 			},
-			// TODO: update about description
 			about: {
 				title: "Über uns",
 				description: [
-					"Wir sind Crabston GmbH, ein junges Vater-Sohn Unternehmen aus der Schweiz.  ",
-					"Wir bieten verschiedene Dienstleistungen im Bereich der Informatik an.",
+					"Wir sind Crabston GmbH, ein innovatives und dynamisches Unternehmen mit Sitz in Wangen an der Aare, Schweiz. Wir bieten unseren Kunden ein breites Spektrum an Informatikdienstleistungen und weiteren Dienstleistungen an.",
+					"Alle unsere Dienstleistungen sind für Sie individualisiert, um Ihren persönlichen Bedürfnissen zu entsprechen. Dabei setzen wir auf modernste Technologien, um unseren Kunden die bestmögliche Unterstützung zu bieten.",
+					"Die Zufriedenheit unserer Kunden steht für uns an erster Stelle. Wir setzen alles daran, unsere Kunden mit unserem Service und unseren Produkten zu begeistern.",
+					"Unser Büro finden Sie unter folgender Adresse:",
 				],
+				team: {
+					title: "Team",
+					description: "Lerne unser Team kennen:",
+					nicholas: {
+						role: "Gründer & IT Spezialist",
+						description: "Nicholas Krebs ist ein Gründer von Crabston und der IT Verantwortliche. Als junger Informatiker mit einer abgeschlossenen EFZ-Ausbildung verfügt er über eine breite Grundbildung in vielen Bereichen der Informatik. Das Programmieren hat er sich während seiner Ausbildung selbst beigebracht und hat bereits einige Projekte realisiert.",
+					},
+					ronald: {
+						role: "Gründer & Berater",
+						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.",
+					},
+				},
 			},
 			contact: {
 				title: "Kontakt",

src/pages/About/About.tsx

@@ -1,22 +1,70 @@
-import { Card, Stack, Typography } from "@mui/material";
+import { Avatar, Card, Grid, Stack, Typography } from "@mui/material";
 import Page from "../../components/common/Page";
-import PersonIcon from "@mui/icons-material/Person";
+import InfoIcon from "@mui/icons-material/Info";
+import Diversity3Icon from "@mui/icons-material/Diversity3";
 import { useTranslation } from "react-i18next";
 import { Pages } from "../../type/page";
+import { Line, PageTitle, SectionTitle } from "../../components/Text";
 
 export default function About() {
 	const {t} = useTranslation("pages");
 	const description: string[] = t("about.description", {returnObjects: true});
 
+	const team = [
+		{
+			name: "Nicholas Krebs",
+			image: "/media/team/nicholas-krebs.webp",
+			position: t("about.team.nicholas.role"),
+			description: t("about.team.nicholas.description"),
+		},
+		{
+			name: "Ronald Krebs",
+			image: "/media/team/ronald-krebs.webp",
+			position: t("about.team.ronald.role"),
+			description: t("about.team.ronald.description"),
+		},
+	];
+
 	return (
 		<Page page={Pages.About}>
+			<section>
+				<PageTitle>{t("about.title")}</PageTitle>
+				<Line bottom={2} />
+			</section>
 			<article>
 				<Stack spacing={3}>
 					<Card id={"about"} sx={{padding: "2rem"}}>
-						<h2>
-							<PersonIcon /> {t("about.title")}
-						</h2>
+						<SectionTitle>
+							<InfoIcon /> {t("about.title")}
+						</SectionTitle>
 						{description.map((paragraph, i) => <Typography key={i} dangerouslySetInnerHTML={{__html: paragraph}} sx={{mb: "1rem"}} />)}
+						<Typography>
+							<address>
+								Crabston GmbH <br />
+								Städtli 16 <br />
+								3380 Wangen an der Aare <br />
+								<a href="tel:+41787188007">078 718 80 07</a> <br />
+								<a href="mailto:[email protected]">[email protected]</a>
+							</address>
+						</Typography>
+					</Card>
+					<Card id={"about"} sx={{padding: "2rem"}}>
+						<SectionTitle>
+							<Diversity3Icon /> {t("about.team.title")}
+						</SectionTitle>
+						<Typography>{t("about.team.description")}</Typography>
+						<Grid container spacing={2}>
+							{team.map((member, i) => (
+								<Grid key={i} item xs={12} md={6}>
+									<Card sx={{padding: "2rem 1rem", display: "flex", flexDirection: "column", alignItems: "center", height: "100%"}}>
+										<Avatar src={member.image} alt={member.name} sx={{width: 150, height: 150}} />
+										<Typography variant={"h4"} component={"h3"}>{member.name}</Typography>
+										<Typography variant={"h6"} component={"h4"}>{member.position}</Typography>
+										<Typography maxWidth="75%">{member.description}</Typography>
+									</Card>
+								</Grid>
+							))}
+						</Grid>
 					</Card>
 				</Stack>
 			</article>

src/type/translation.ts

@@ -100,6 +100,12 @@ export type Translation = {
 		about: {
 			title: string,
 			description: string[],
+			team: {
+				title: string,
+				description: string,
+				nicholas: Person,
+				ronald: Person,
+			},
 		},
 		contact: {
 			title: string,
@@ -130,6 +136,11 @@ export type Translation = {
 	},
 }
 
+type Person = {
+	role: string,
+	description: string,
+}
+
 type PageMeta = {
 	title: string,
 	description: string,