Add Newsletter section and adjust main containers

.eslintrc.json

@@ -23,6 +23,7 @@
 	],
 	"rules": {
 		"prettier/prettier": "warn",
+		"@next/next/no-img-element": "off",
 		"@typescript-eslint/ban-ts-comment": "off",
 		"@typescript-eslint/no-empty-interface": ["error", { "allowSingleExtends": true }],
 		"@typescript-eslint/no-non-null-assertion": "off",

i18n/de.json

@@ -9,6 +9,10 @@
 			"subtitle": "Berlins Kulturdaten – zentral, auffindbar, vernetzt",
 			"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\nGleichzeitig bietet das Internet für Kulturinteressierte zwar viele Möglichkeiten, sich über Kulturangebote in Berlin zu informieren, aber es gibt keine zentrale Übersicht über alle kulturellen Einrichtungen und Veranstaltungen in der Stadt. \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 Kulturdaten strukturiert, bündelt und mit zahlreichen Portalen zielgerichtet vernetzen kann."
 		},
+		"newsletter-section": {
+			"title": "Interesse geweckt, oder noch Fragen oder Wünsche?",
+			"button": "Kontaktiere uns"
+		},
 		"for-interested": {
 			"subtitle": "Interessiert?\nDann probier kulturdaten.berlin einfach aus:",
 			"button-create-request": "Zufällige Anfrage erzeugen",

i18n/en.json

@@ -9,6 +9,10 @@
 			"subtitle": "Berlin’s cultural data - central, findable, networked",
 			"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\nAt the same time, although the Internet offers many ways for those interested in culture to find out about cultural offerings in Berlin, there is no central overview of all cultural institutions and events in the city. \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 will structure and bundle cultural data and link it to numerous portals in a targeted manner."
 		},
+		"newsletter-section": {
+			"title": "Are you interested, or still have questions or wishes?",
+			"button": "Contact us"
+		},
 		"for-interested": {
 			"subtitle": "Interested?\nThen just try out kulturdaten.berlin:",
 			"button-create-request": "Create random request",

src/common/styleVariables.ts

@@ -29,17 +29,17 @@ export const colors = {
 	yellow: "#f1ff54",
 	green: "#beffa9",
 	turquoise: "#a0faf2",
-	grayLight: "#f9f9f9",
+	grayLight: "#fafafa",
 	white: "#ffffff",
 };
 
 export const spacings = {
 	get: (factor = 1.0) => factor * 5,
 };
 
-export const breakpoints: { [key: string]: number } = {
+export const breakpoints = {
 	s: 580,
-	m: 768,
+	m: 900,
 };
 
 export const mediaQueries = {
@@ -48,7 +48,7 @@ export const mediaQueries = {
 };
 
 export const widths = {
-	maxContentWidth: `${breakpoints.xl}px`,
+	maxContentWidth: `${breakpoints.m}px`,
 };
 
 export const borderWidths = {

src/components/Button/index.stories.tsx

@@ -15,3 +15,11 @@ export const Default: Story = {
 		onClick: () => window.alert("You clicked the button!"),
 	},
 };
+
+export const ButtonLink: Story = {
+	args: {
+		children: "I am a link that looks like a button",
+		href: "https://www.berlin.de/",
+		target: "_blank",
+	},
+};

src/components/Button/index.tsx

@@ -1,14 +1,16 @@
 import styled from "@emotion/styled";
-import { ButtonHTMLAttributes } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
 import { borderRadiuses, borderWidths, colors, fontWeights, lineHeights, timings } from "../../common/styleVariables";
 
 const StyledButton = styled.button({
 	appearance: "none",
+	display: "inline-block",
 	lineHeight: lineHeights.buttons,
 	padding: `13px 18px 12px 18px`,
 	color: colors.blueDark,
 	background: "transparent",
 	fontWeight: fontWeights.default,
+	textDecoration: "none",
 	border: `${borderWidths.default}px solid ${colors.blueDark}`,
 	borderRadius: borderRadiuses.medium,
 	transition: `all ${timings.short} ease-in-out`,
@@ -19,8 +21,27 @@ const StyledButton = styled.button({
 	},
 });
 
-type Props = ButtonHTMLAttributes<HTMLButtonElement>;
+const StyledButtonAsLink = StyledButton.withComponent("a");
 
-export default function Button({ type = "button", ...otherProps }: Props) {
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+	as?: "button" | undefined;
+};
+
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+	as: "a";
+	href: string;
+	rel?: string;
+	target?: string;
+};
+
+type Props = ButtonProps | LinkProps;
+
+const isLink = (props: Props): props is LinkProps => props.as === "a";
+
+export default function Button(props: Props) {
+	if (isLink(props)) {
+		return <StyledButtonAsLink {...props} />;
+	}
+	const { type = "button", ...otherProps } = props;
 	return <StyledButton type={type} {...otherProps} />;
 }

src/components/ButtonWithIcon/index.stories.tsx

@@ -16,3 +16,13 @@ export const Default: Story = {
 		onClick: () => window.alert("You clicked the button!"),
 	},
 };
+
+export const ButtonLink: Story = {
+	args: {
+		children: "I am a link that looks like a button with an icon",
+		as: "a",
+		href: "https://www.berlin.de/",
+		target: "_blank",
+		icon: "play",
+	},
+};

src/components/ButtonWithIcon/index.tsx

@@ -1,23 +1,39 @@
 import styled from "@emotion/styled";
-import { ButtonHTMLAttributes } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import { spacings } from "../../common/styleVariables";
 import Button from "../Button";
 import Icon, { IconProps } from "../Icon";
-import { spacings } from "../../common/styleVariables";
 
 const StyledButton = styled(Button)({
 	display: "inline-flex",
 	alignItems: "center",
 	gap: spacings.get(2),
 });
 
-type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+const StyledIcon = styled(Icon)({
+	flex: "0 0 auto",
+});
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+	as?: "button" | undefined;
 	icon: IconProps["name"];
 };
 
-export default function ButtonWithIcon({ icon, children, ...otherProps }: Props) {
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+	as: "a";
+	icon: IconProps["name"];
+	href: string;
+	rel?: string;
+	target?: string;
+};
+
+type Props = ButtonProps | LinkProps;
+
+export default function ButtonWithIcon(props: Props) {
+	const { icon, children, ...otherProps } = props;
 	return (
 		<StyledButton {...otherProps}>
-			<Icon name={icon} />
+			<StyledIcon name={icon} />
 			{children}
 		</StyledButton>
 	);

src/components/GlobalStyles/index.tsx

@@ -1,5 +1,5 @@
 import { CSSObject, Global } from "@emotion/react";
-import { colors, fontFamilies, fontSizes, fontWeights, lineHeights } from "../../common/styleVariables";
+import { colors, fontFamilies, fontSizes, lineHeights } from "../../common/styleVariables";
 import FontFaces from "./FontFaces";
 
 const styles: CSSObject = {
@@ -16,7 +16,7 @@ const styles: CSSObject = {
 	"input, button, textarea, select": {
 		font: "inherit",
 	},
-	"p, h1, h2, h3, h4, h5, h6": {
+	p: {
 		overflowWrap: "break-word",
 		whiteSpace: "pre-line",
 	},
@@ -27,14 +27,6 @@ const styles: CSSObject = {
 			textDecoration: "none",
 		},
 	},
-	h2: {
-		fontSize: fontSizes.large,
-		fontWeight: fontWeights.bold,
-	},
-	h3: {
-		fontSize: fontSizes.medium,
-		fontWeight: fontWeights.medium,
-	},
 	html: {
 		fontSize: fontSizes.default,
 		fontFamily: fontFamilies.default,

src/components/HomePage/NewsletterSection/index.tsx

@@ -0,0 +1,48 @@
+import styled from "@emotion/styled";
+import { useTranslations } from "next-intl";
+import { borderWidths, colors } from "../../../common/styleVariables";
+import ButtonWithIcon from "../../ButtonWithIcon";
+import Spacer from "../../Spacer";
+import Text from "../../Text";
+import Section from "../Section";
+
+const PageContainer = styled.div({
+	display: "flex",
+});
+
+const ImageContainer = styled.div({
+	flex: "0 1 200px",
+});
+
+const TextContainer = styled.div({
+	flex: "1 1 auto",
+});
+
+export default function NewsletterSection() {
+	const t = useTranslations("Home.newsletter-section");
+	return (
+		<Section
+			backgroundColor="white"
+			style={{
+				borderTop: `${borderWidths.default}px solid ${colors.blueDark}`,
+				borderBottom: `${borderWidths.default}px solid ${colors.blueDark}`,
+			}}
+		>
+			<PageContainer>
+				<ImageContainer>
+					<img src="/images/newsletter-icon.svg" alt="" />
+				</ImageContainer>
+				<Spacer size={24} />
+				<TextContainer>
+					<Text type="h3" as="h3" color="blueDark">
+						{t("title")}
+					</Text>
+					<Spacer size={16} />
+					<ButtonWithIcon as="a" icon="mail" href="mailto:[email protected]">
+						{t("button")}
+					</ButtonWithIcon>
+				</TextContainer>
+			</PageContainer>
+		</Section>
+	);
+}

src/components/HomePage/RequestCreatorAndList/index.tsx

@@ -1,24 +1,16 @@
-import styled from "@emotion/styled";
 import { useTranslations } from "next-intl";
 import { useCallback, useRef, useState } from "react";
-import { colors, fontSizes, fontWeights, lineHeights } from "../../../common/styleVariables";
 import { EventWithAttraction, loadEventsWithAttractions } from "../../../services/apiRequests";
 import SectionSubtitle from "../../SectionSubtitle";
 import Spacer from "../../Spacer";
+import Text from "../../Text";
 import Tooltip from "../../Tooltip";
 import EventList from "./EventList";
 import RequestCreator from "./RequestCreator";
 import { Request } from "./requests";
 
 type PromptStatus = "idle" | "creating prompt" | "loading" | "done";
 
-const ResultsTitle = styled.h3({
-	color: colors.blueDark,
-	fontSize: fontSizes.medium,
-	fontWeight: fontWeights.medium,
-	lineHeight: lineHeights.single,
-});
-
 export default function RequestCreatorAndList() {
 	const t = useTranslations("Home.for-interested");
 	const [status, setStatus] = useState<PromptStatus>("idle");
@@ -44,9 +36,11 @@ export default function RequestCreatorAndList() {
 			<RequestCreator onStartRequestCreation={handleRequestStarted} onRequestCreated={handleRequestCreated} />
 			{(status === "loading" || status === "done") && (
 				<>
-					<Spacer size={40} />
-					<ResultsTitle>{t("results-title")}</ResultsTitle>
-					<Spacer size={5} />
+					<Spacer size={32} />
+					<Text type="h3" color="blueDark">
+						{t("results-title")}
+					</Text>
+					<Spacer size={4} />
 					<Tooltip
 						id="results-source-tooltip"
 						tooltip={t.raw("results-source-tooltip")}

src/components/HomePage/Section/index.tsx

@@ -1,8 +1,15 @@
 import styled from "@emotion/styled";
-import { spacings } from "../../../common/styleVariables";
+import { colors, spacings } from "../../../common/styleVariables";
 
-const Section = styled.section(() => ({
-	padding: `clamp(${spacings.get(2)}px, 5vw, ${spacings.get(10)}px)`,
+type BackgroundColor = keyof typeof colors;
+
+type Props = {
+	backgroundColor?: BackgroundColor;
+};
+
+const Section = styled.section<Props>(({ backgroundColor = "grayLight" }) => ({
+	backgroundColor: colors[backgroundColor],
+	padding: `${spacings.get(10)}px clamp(${spacings.get(2)}px, 5vw, ${spacings.get(10)}px)`,
 }));
 
 export default Section;

src/components/HomePage/index.tsx

@@ -1,36 +1,37 @@
 import styled from "@emotion/styled";
-import { breakpoints, widths } from "../../common/styleVariables";
+import { widths } from "../../common/styleVariables";
 import ArtistSection from "../ArtistSection";
-import Spacer from "../Spacer";
 import Head from "./Head";
 import IntroSection from "./IntroSection";
+import NewsletterSection from "./NewsletterSection";
 import RequestCreatorAndList from "./RequestCreatorAndList";
 import Section from "./Section";
 
-const PageContainer = styled.div(() => ({
-	width: `min(100%, ${widths.maxContentWidth})`,
-	margin: "0 auto",
-}));
-
 const Main = styled.main(() => ({
-	maxWidth: `${breakpoints.m}px`,
+	width: `min(100%, ${widths.maxContentWidth})`,
 	margin: "0 auto",
 }));
 
 export default function HomePage() {
 	return (
 		<>
 			<Head />
-			<PageContainer>
-				<Main>
-					<Section>
-						<IntroSection />
-						<RequestCreatorAndList />
-						<Spacer size={100} />
-						<ArtistSection />
-					</Section>
-				</Main>
-			</PageContainer>
+			<Main>
+				<Section>
+					<IntroSection />
+					<RequestCreatorAndList />
+				</Section>
+				<NewsletterSection />
+				<Section>
+					<ArtistSection />
+				</Section>
+				<NewsletterSection />
+				<Section>…</Section>
+				<NewsletterSection />
+				<Section>…</Section>
+				<NewsletterSection />
+				<Section>…</Section>
+			</Main>
 		</>
 	);
 }