Add website footer

i18n/de.json

@@ -30,6 +30,18 @@
 			"title": "Ihr macht die Kultur, wir sagen allen Bescheid",
 			"subtitle": "kulturdaten.berlin – für Kulturakteur:innen",
 			"description": "Was? Wann? Wer? Wo? Für wen? Wie lange? Um im Web gefunden zu werden, müssen Kulturschaffende ihr Programm an vielen Stellen mühsam händisch einpflegen. Mit der Plattform kulturdaten.berlin wollen wir diesen Prozess radikal vereinfachen! \n\nDeswegen entwickeln wir gemeinsam mit Kulturakteur:innen und -institutionen die erste offene, digitale Infrastruktur für Kulturdaten in Berlin: Gefördert durch die Senatsverwaltung für Kultur und Europa entsteht zurzeit eine zentrale Datendrehscheibe, die ihre Kulturdaten strukturieren, bündeln und mit zahlreichen Portalen zielgerichtet vernetzen kann. \n\nNatürlich können nicht nur Institutionen, sondern insbesondere auch Kollektive und Solokünstler:innen ihre Profile und Angebote über kulturdaten.berlin publizieren."
+		},
+		"footer": {
+			"address-title": "Adresse",
+			"address-content": "Technologiestiftung Berlin\nGrunewaldstr. 61-62\n10825 Berlin",
+			"email-title": "E-Mail",
+			"email-content": "[email protected]",
+			"link-privacy-policy": "Datenschutzrichtlinie",
+			"link-imprint": "Impressum",
+			"project-by": "Ein Projekt der",
+			"supported-by": "gefördert von",
+			"tsb-logo-alt": "Technologiestiftung Berlin",
+			"sen-kugz-logo-alt": "Senatsverwaltung für Kultur und Gesellschaftlichen Zusammenhalt Berlin"
 		}
 	}
 }

i18n/en.json

@@ -30,6 +30,18 @@
 			"title": "You do the culture, we’ll let everyone know",
 			"subtitle": "kulturdaten.berlin - for cultural actors",
 			"description": "What? When? Who? Where? For whom? For how long? In order to be found on the web, cultural professionals have to painstakingly enter their programs manually in many places. With the platform kulturdaten.berlin we want to radically simplify this process! \n\nThat’s why we’re working with cultural actors and institutions to develop the first open, digital infrastructure for cultural data in Berlin. Funded by the Senate Department for Culture and Europe, we’re currently creating a central data hub that can structure and bundle cultural data and network it with numerous portals in a targeted manner. \n\nOf course, not only institutions, but also collectives and solo artists in particular can publish their profiles and offerings via kulturdaten.berlin."
+		},
+		"footer": {
+			"address-title": "Address",
+			"address-content": "Technologiestiftung Berlin\nGrunewaldstr. 61-62\n10825 Berlin",
+			"email-title": "E-mail",
+			"email-content": "[email protected]",
+			"link-privacy-policy": "Privacy policy",
+			"link-imprint": "Imprint",
+			"project-by": "A project by",
+			"supported-by": "supported by",
+			"tsb-logo-alt": "Technologiestiftung Berlin",
+			"sen-kugz-logo-alt": "Senatsverwaltung für Kultur und Gesellschaftlichen Zusammenhalt Berlin"
 		}
 	}
 }

src/components/GlobalStyles/index.tsx

@@ -1,5 +1,5 @@
 import { CSSObject, Global } from "@emotion/react";
-import { colors, fontFamilies, fontSizes, lineHeights } from "../../common/styleVariables";
+import { colors, fontFamilies, fontSizes, fontWeights, lineHeights } from "../../common/styleVariables";
 import FontFaces from "./FontFaces";
 
 const styles: CSSObject = {
@@ -20,6 +20,9 @@ const styles: CSSObject = {
 		overflowWrap: "break-word",
 		whiteSpace: "pre-line",
 	},
+	"strong, b": {
+		fontWeight: fontWeights.medium,
+	},
 	a: {
 		color: colors.blueDark,
 		textDecoration: "underline",

src/components/HomePage/Footer/index.tsx

@@ -0,0 +1,80 @@
+import styled from "@emotion/styled";
+import { useTranslations } from "next-intl";
+import { colors, spacings, widths } from "../../../common/styleVariables";
+import Link, { LinkInternal } from "../../Link";
+import Spacer from "../../Spacer";
+
+const StyledFooter = styled.footer({
+	width: `min(100%, ${widths.maxContentWidth})`,
+	padding: `${spacings.get(10)}px ${spacings.horizontalPagePadding}`,
+	margin: "0 auto",
+	backgroundColor: colors.grayLight,
+	color: colors.blueDark,
+});
+
+const Row = styled.div({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: spacings.get(5),
+	justifyContent: "space-between",
+});
+
+const Address = styled.address({
+	flex: "0 1 40%",
+	fontStyle: "normal",
+});
+
+const Title = styled.strong();
+
+const Content = styled.div({
+	whiteSpace: "pre-line",
+});
+
+const PageLinks = styled.div({
+	flex: "0 1 40%",
+	display: "flex",
+	flexDirection: "column",
+});
+
+const LogoTitle = styled.div({
+	marginBottom: spacings.get(2),
+});
+
+export default function Footer() {
+	const t = useTranslations("Home.footer");
+	return (
+		<StyledFooter>
+			<Row>
+				<Address>
+					<Title>{t("address-title")}</Title>
+					<Content>{t("address-content")}</Content>
+					<br />
+					<Title>{t("email-title")}</Title>
+					<Content>
+						<Link href={`mailto:${t("email-content")}`}>{t("email-content")}</Link>
+					</Content>
+				</Address>
+				<PageLinks>
+					<LinkInternal href="/privacy-policy">{t("link-privacy-policy")}</LinkInternal>
+					<Spacer size={4} />
+					<LinkInternal href="/imprint">{t("link-imprint")}</LinkInternal>
+				</PageLinks>
+			</Row>
+			<Spacer size={50} />
+			<Row>
+				<div>
+					<LogoTitle>{t("project-by")}</LogoTitle>
+					<a href="https://www.technologiestiftung-berlin.de/" target="_blank">
+						<img src="/images/tsb-logo.svg" width={220} alt={t("tsb-logo-alt")} />
+					</a>
+				</div>
+				<div>
+					<LogoTitle>{t("supported-by")}</LogoTitle>
+					<a href="https://www.berlin.de/sen/kultgz/" target="_blank">
+						<img src="/images/sen-kugz-logo.svg" width={400} alt={t("sen-kugz-logo-alt")} />
+					</a>
+				</div>
+			</Row>
+		</StyledFooter>
+	);
+}

src/components/HomePage/index.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { widths } from "../../common/styleVariables";
 import ArtistSection from "../ArtistSection";
+import Footer from "./Footer";
 import Head from "./Head";
 import IntroSection from "./IntroSection";
 import NewsletterSection from "./NewsletterSection";
@@ -30,8 +31,8 @@ export default function HomePage() {
 				<NewsletterSection />
 				<Section>…</Section>
 				<NewsletterSection />
-				<Section>…</Section>
 			</Main>
+			<Footer />
 		</>
 	);
 }

src/components/Link/index.tsx

@@ -1,11 +1,22 @@
-import { ReactNode } from "react";
+import styled, { CSSObject } from "@emotion/styled";
+import NextLink from "next/link";
+import { AnchorHTMLAttributes, ReactNode } from "react";
+import { colors } from "../../common/styleVariables";
 
-type Props = {
+const linkStyles: CSSObject = {
+	color: colors.blueDark,
+	textDecoration: "underline",
+	"&:hover": {
+		textDecoration: "none",
+	},
+};
+const Link = styled.a<Props>(linkStyles);
+
+type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
 	href: string;
 	children: ReactNode;
 };
 
-export default function Link(props: Props) {
-	const { href, children } = props;
-	return <a href={href}>{children}</a>;
-}
+export default Link;
+
+export const LinkInternal = styled(NextLink)(linkStyles);