Add legal pages (imprint and privacy-policy)

i18n/de.json

@@ -63,12 +63,18 @@
 			"address-content": "Technologiestiftung Berlin\nGrunewaldstr. 61-62\n10825 Berlin",
 			"email-title": "E-Mail",
 			"email-content": "[email protected]",
-			"link-privacy-policy": "Datenschutzrichtlinie",
+			"link-privacy-policy": "Datenschutzerklärung",
 			"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"
 		}
+	},
+	"Imprint": {
+		"meta-title": "Impressum"
+	},
+	"Privacy-Policy": {
+		"meta-title": "Datenschutzerklärung"
 	}
 }

i18n/en.json

@@ -70,5 +70,11 @@
 			"tsb-logo-alt": "Technologiestiftung Berlin",
 			"sen-kugz-logo-alt": "Senatsverwaltung für Kultur und Gesellschaftlichen Zusammenhalt Berlin"
 		}
+	},
+	"Imprint": {
+		"meta-title": "Imprint"
+	},
+	"Privacy-Policy": {
+		"meta-title": "Privacy Policy"
 	}
 }

src/components/HomePage/Header/Burger.tsx → src/components/Header/Burger.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { colors, spacings } from "../../../common/styleVariables";
-import Button from "../../Button";
+import { colors, spacings } from "../../common/styleVariables";
+import Button from "../Button";
 import { useTranslations } from "next-intl";
 
 const BurgerPack = styled(Button)({

src/components/Header/Logo.tsx

@@ -0,0 +1,39 @@
+import styled from "@emotion/styled";
+import Link from "next/link";
+import { borderRadiuses, colors, fontSizes, fontWeights, spacings } from "../../common/styleVariables";
+
+const LogoLink = styled(Link)({
+	display: "flex",
+	alignItems: "center",
+	gap: `0 ${spacings.get(3)}px`,
+	color: colors.blueDark,
+	textDecoration: "none",
+});
+
+const Circle = styled.div({
+	width: "2rem",
+	height: "2rem",
+	backgroundColor: colors.blueDark,
+	borderRadius: borderRadiuses.round,
+});
+
+const Title = styled.span({
+	fontWeight: fontWeights.medium,
+	fontSize: fontSizes.small,
+});
+
+const LightTitle = styled.span({
+	fontWeight: fontWeights.light,
+});
+
+export default function Logo() {
+	return (
+		<LogoLink href="/">
+			<Circle />
+			<Title aria-label="Kulturdaten Berlin">
+				KULTURDATEN
+				<LightTitle>BERLIN</LightTitle>
+			</Title>
+		</LogoLink>
+	);
+}

src/components/HomePage/Header/Navigation.tsx → src/components/Header/Navigation.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { mediaQueries, colors, fontWeights, fontSizes, timings, spacings } from "../../../common/styleVariables";
+import { mediaQueries, colors, fontWeights, fontSizes, timings, spacings } from "../../common/styleVariables";
 import { useTranslations } from "next-intl";
-import { AnchorLinks } from "../../../common/types";
+import { AnchorLinks } from "../../common/types";
 
 const NavigationWrapper = styled.nav({
 	position: "absolute",

src/components/HomePage/Header/NavigationOverlay.tsx → src/components/Header/NavigationOverlay.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { colors, headerHeight } from "../../../common/styleVariables";
+import { colors, headerHeight } from "../../common/styleVariables";
 import Navigation from "./Navigation";
 
 const Backdrop = styled.div({

src/components/HomePage/Header/index.tsx → src/components/Header/index.tsx

@@ -1,23 +1,19 @@
 import styled from "@emotion/styled";
+import { useState } from "react";
 import {
-	borderRadiuses,
 	borderWidths,
 	breakpoints,
 	colors,
-	fontSizes,
-	fontWeights,
 	headerHeight,
 	mediaQueries,
 	spacings,
 	zIndexes,
-} from "../../../common/styleVariables";
-
-import Navigation from "./Navigation";
+} from "../../common/styleVariables";
+import { AnchorLinks } from "../../common/types";
 import Burger from "./Burger";
+import Logo from "./Logo";
+import Navigation from "./Navigation";
 import NavigationOverlay from "./NavigationOverlay";
-import { useState } from "react";
-import { AnchorLinks } from "../../../common/types";
-import Link from "next/link";
 
 const HeaderContainer = styled.header({
 	position: "fixed",
@@ -44,30 +40,6 @@ const ContentWrapper = styled.div({
 	},
 });
 
-const LogoLink = styled(Link)({
-	display: "flex",
-	alignItems: "center",
-	gap: `0 ${spacings.get(3)}px`,
-	color: colors.blueDark,
-	textDecoration: "none",
-});
-
-const Logo = styled.div({
-	width: "2rem",
-	height: "2rem",
-	backgroundColor: colors.blueDark,
-	borderRadius: borderRadiuses.round,
-});
-
-const Title = styled.span({
-	fontWeight: fontWeights.medium,
-	fontSize: fontSizes.small,
-});
-
-const LightTitle = styled.span({
-	fontWeight: fontWeights.light,
-});
-
 interface Props {
 	activeAnchorLink: AnchorLinks | null;
 }
@@ -91,13 +63,7 @@ export default function Header({ activeAnchorLink }: Props) {
 	return (
 		<HeaderContainer>
 			<ContentWrapper>
-				<LogoLink href="/">
-					<Logo />
-					<Title aria-label="Kulturdaten Berlin">
-						KULTURDATEN
-						<LightTitle>BERLIN</LightTitle>
-					</Title>
-				</LogoLink>
+				<Logo />
 				<Desktop>
 					<Navigation activeAnchorLink={activeAnchorLink} />
 				</Desktop>
@@ -109,3 +75,13 @@ export default function Header({ activeAnchorLink }: Props) {
 		</HeaderContainer>
 	);
 }
+
+export function HeaderSimple() {
+	return (
+		<HeaderContainer>
+			<ContentWrapper>
+				<Logo />
+			</ContentWrapper>
+		</HeaderContainer>
+	);
+}

src/components/HomePage/index.tsx

@@ -1,24 +1,17 @@
-import styled from "@emotion/styled";
-import { widths } from "../../common/styleVariables";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { AnchorLinks } from "../../common/types";
 import ArtistSection from "../ArtistSection";
+import Header from "../Header";
+import Page from "../Page";
+import Spacer from "../Spacer";
 import CultureInterestedSection from "./CultureInterestedSection";
 import DataUsersSection from "./DataUsersSection";
-import Footer from "./Footer";
-import Head from "./Head";
 import IntroSection from "./IntroSection";
 import NewsletterSection from "./NewsletterSection";
 import RequestCreatorAndList from "./RequestCreatorAndList";
 import Section from "./Section";
-import Header from "./Header";
-import { useInView } from "react-intersection-observer";
-import { useEffect, useState } from "react";
-import { AnchorLinks } from "../../common/types";
-import Spacer from "../Spacer";
-
-const Main = styled.main(() => ({
-	width: `min(100%, ${widths.maxContentWidth})`,
-	margin: "0 auto",
-}));
 
 interface InView {
 	interestedSectionInView: boolean;
@@ -29,7 +22,9 @@ interface InView {
 const inViewOptions = {
 	threshold: 0.5,
 };
+
 export default function HomePage() {
+	const t = useTranslations("Home");
 	const [activeAnchorLink, setActiveAnchorLink] = useState<AnchorLinks | null>(null);
 	const getLatestInView = (inView: InView) => {
 		const orderedSections: Array<keyof InView> = [
@@ -59,32 +54,34 @@ export default function HomePage() {
 	}, [artistSectionInView, interestedSectionInView, dataSectionInView]);
 
 	return (
-		<>
-			<Head />
-			<Header activeAnchorLink={activeAnchorLink} />
-			<Main>
-				<Spacer size={32} />
-				<Section>
-					<IntroSection />
-				</Section>
-				<NewsletterSection />
-				<Section>
-					<RequestCreatorAndList />
-				</Section>
-				<Section ref={artistSectionRef} id={AnchorLinks.ARTISTSECTION}>
-					<ArtistSection />
-				</Section>
-				<NewsletterSection />
-				<Section ref={interestedSectionRef} id={AnchorLinks.INTERESTEDSECTION}>
-					<CultureInterestedSection />
-				</Section>
-				<NewsletterSection />
-				<Section ref={dataSectionRef} id={AnchorLinks.DATASECTION}>
-					<DataUsersSection />
-				</Section>
-				<NewsletterSection />
-			</Main>
-			<Footer />
-		</>
+		<Page
+			// TODO: Update/add more metadata before release.
+			metadata={{
+				title: t("meta-title"),
+				description: t("meta-description"),
+			}}
+			header={<Header activeAnchorLink={activeAnchorLink} />}
+		>
+			<Spacer size={32} />
+			<Section>
+				<IntroSection />
+			</Section>
+			<NewsletterSection />
+			<Section>
+				<RequestCreatorAndList />
+			</Section>
+			<Section ref={artistSectionRef} id={AnchorLinks.ARTISTSECTION}>
+				<ArtistSection />
+			</Section>
+			<NewsletterSection />
+			<Section ref={interestedSectionRef} id={AnchorLinks.INTERESTEDSECTION}>
+				<CultureInterestedSection />
+			</Section>
+			<NewsletterSection />
+			<Section ref={dataSectionRef} id={AnchorLinks.DATASECTION}>
+				<DataUsersSection />
+			</Section>
+			<NewsletterSection />
+		</Page>
 	);
 }