feature(website): styling newsletter signup page (#784)

socialincome-san · Apr 21, 2024 · afd37bc · afd37bc
1 parent b95652f
commit afd37bc
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 154 deletions.
diff --git a/shared/locales/de/website-common.json b/shared/locales/de/website-common.json
@@ -30,7 +30,8 @@
 	"footer": {
 		"follow-us": "Folge uns",
 		"resources": "Informationen",
-		"legal": "Rechtliches"
+		"legal": "Rechtliches",
+		"newsletter": "Newsletter"
 	},
 	"cookie-consent-banner": {
 		"text": "Dürfen wir Cookies benützen um den Traffic und die Leistung unserer Website zu analysieren? Wir sammeln niemals persönliche Daten. <a href='/legal/privacy' class='underline'>Datenschutzrichtlinie</a>.",

diff --git a/shared/locales/de/website-newsletter.json b/shared/locales/de/website-newsletter.json
@@ -1,29 +1,29 @@
 {
 	"metadata": {
-		"title": "Datenschutzrichtlinie | Social Income"
+		"title": "Newsletter | Social Income"
 	},
 	"updates": {
-		"alert-title": "Social Income Newsletter",
-		"alert-description": "Melde dich an, um bei allen Thema rund um Social Income auf dem neusten Stand zu sein.",
+		"title": "Bleib informiert",
+		"description-1": "Erhalte News zu Social Income, plus:",
+		"bullet-1": "Stories von Empfänger:innen",
+		"bullet-2": "Neue Forschung zu Direktzahlungen",
+		"bullet-3": "Berichterstattung rund um das BGE",
+		"description-2": "Wird an jedem Monatsende versendet.",
+		"description-3": "Newsletters verfasst von",
+		"author-name": "Aurélie Schmiedlin",
+		"author-city": "Genf",
+		"form-title": "Newsletter abonnieren",
 		"firstname": "Vorname",
-		"lastname": "Nachname",
-		"gender": "Geschlecht",
 		"email": "E-Mail",
-		"street": "Strasse",
-		"street-number": "Nummer",
-		"city": "Ort",
-		"zip": "PLZ",
-		"country": "Land",
-		"language": "Kommunikationssprache",
-		"submit-button": "Beim Newsletter anmelden",
+		"submit-button": "Anmelden",
 		"newsletter-updated-toast": "Du wurdest zum Newsletter hinzugefügt",
 		"newsletter-error-toast": "Du konntest leider nicht zum Newsletter hinzugefügt werden"
 	},
 	"popup": {
-		"information-label": "Melde dich für unseren Newsletter an und werde Teil der Social Income Community!",
+		"information-label": "Erhalte monatliche Updates über Social Income, BGE und Direktzahlungen.",
 		"toast-success": "Danke für das Abonnieren des Social Income Newsletters!",
 		"toast-failure": "Oops! Etwas ist schief gelaufen. Bitte versuche es nochmals, oder kontaktiere uns auf [email protected]",
 		"email-placeholder": "Deine E-Mail Adresse",
-		"button-subscribe": "Abonnieren"
+		"button-subscribe": "Newsletter abonnieren"
 	}
 }
diff --git a/shared/locales/en/website-common.json b/shared/locales/en/website-common.json
@@ -30,7 +30,8 @@
 	"footer": {
 		"follow-us": "Follow Us",
 		"resources": "Resources",
-		"legal": "Legal"
+		"legal": "Legal",
+		"newsletter": "Newsletter"
 	},
 	"cookie-consent-banner": {
 		"text": "Do you allow us to use cookies for analyzing our website traffic and performance? We never collect any personal data. <a href='/legal/privacy' class='underline'>Privacy Policy</a>.",

diff --git a/shared/locales/en/website-newsletter.json b/shared/locales/en/website-newsletter.json
@@ -1,29 +1,29 @@
 {
 	"metadata": {
-		"title": "Datenschutzrichtlinie | Social Income"
+		"title": "Newsletter | Social Income"
 	},
 	"updates": {
-		"alert-title": "Social Income Newsletter",
-		"alert-description": "Sign up to stay up to date on all things of Social Income.",
+		"title": "Stay Informed",
+		"description-1": "Receive updates on Social Income, plus:",
+		"bullet-1": "Engaging stories from our recipients",
+		"bullet-2": "New research on direct cash transfers",
+		"bullet-3": "Summaries of the latest news around UBI",
+		"description-2": "Sent at the end month of each month.",
+		"description-3": "Newsletters written by",
+		"author-name": "Aurélie Schmiedlin",
+		"author-city": "Geneva",
+		"form-title": "Subscribe to our newsletter",
 		"firstname": "First Name",
-		"lastname": "Last Name",
-		"gender": "Gender",
 		"email": "Email",
-		"street": "Street",
-		"street-number": "Number",
-		"city": "City",
-		"zip": "Zip",
-		"country": "Country",
-		"language": "Communication language",
-		"submit-button": "Subscribe to newsletter",
+		"submit-button": "Subscribe now",
 		"newsletter-updated-toast": "You have been added to the newsletter",
 		"newsletter-error-toast": "We weren't able to add you to our newsletter"
 	},
 	"popup": {
-		"information-label": "Join our newsletter and become part of the Social Income Community!",
+		"information-label": "Our monthly newsletter updates you on Social Income, UBI and Direct Cash Transfers.",
 		"toast-success": "Thank you for subscribing to our newsletter!",
 		"toast-failure": "Something went wrong. Try again or contact us at [email protected]",
 		"email-placeholder": "Your email",
-		"button-subscribe": "Subscribe"
+		"button-subscribe": "Subscribe now"
 	}
 }
diff --git a/shared/src/mailchimp/MailchimpAPI.ts b/shared/src/mailchimp/MailchimpAPI.ts
@@ -8,6 +8,7 @@ export type NewsletterSubscriptionData = {
 	firstname?: string;
 	lastname?: string;
 	country?: CountryCode;
+	source?: 'contributor' | 'subscriber';
 };
 
 export class MailchimpAPI {
@@ -39,6 +40,7 @@ export class MailchimpAPI {
 					LNAME: data.lastname ?? '',
 					COUNTRY: data.country ?? '',
 					LANGUAGE: data.language === 'de' ? 'German' : 'English',
+					SOURCE: data.source ?? 'subscriber',
 				},
 			});
 		}
@@ -53,6 +55,7 @@ export class MailchimpAPI {
 				LNAME: data.lastname ?? '',
 				COUNTRY: data.country ?? '',
 				LANGUAGE: data.language === 'de' ? 'German' : 'English',
+				SOURCE: data.source ?? 'subscriber',
 			},
 		});
 	};

diff --git a/website/src/app/[lang]/[region]/(website)/newsletter/page.tsx b/website/src/app/[lang]/[region]/(website)/newsletter/page.tsx
@@ -1,8 +1,15 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { SubscriptionInfoForm } from '@/app/[lang]/[region]/(website)/newsletter/subscription-info-form';
-
+import { getMetadata } from '@/metadata';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { Alert, AlertDescription, AlertTitle } from '@socialincome/ui';
+import { BaseContainer, Typography } from '@socialincome/ui';
+import Image from 'next/image';
+import Link from 'next/link';
+import aurelieImage from '../about-us/(assets)/aurelie.jpeg';
+
+export async function generateMetadata({ params }: DefaultPageProps) {
+	return getMetadata(params.lang, 'website-newsletter');
+}
 
 export default async function Page({ params }: DefaultPageProps) {
 	const translator = await Translator.getInstance({
@@ -11,25 +18,63 @@ export default async function Page({ params }: DefaultPageProps) {
 	});
 
 	return (
-		<div className="mx-auto flex w-screen max-w-6xl flex-col space-y-4 md:px-5">
-			<Alert variant="primary">
-				<AlertTitle>{translator.t('updates.alert-title')}</AlertTitle>
-				<AlertDescription>{translator.t('updates.alert-description')}</AlertDescription>
-			</Alert>
-			<SubscriptionInfoForm
-				lang={params.lang}
-				region={params.region}
-				translations={{
-					firstname: translator.t('updates.firstname'),
-					lastname: translator.t('updates.lastname'),
-					email: translator.t('updates.email'),
-					country: translator.t('updates.country'),
-					language: translator.t('updates.language'),
-					updatesSubmitButton: translator.t('updates.submit-button'),
-					toastMessage: translator.t('updates.newsletter-updated-toast'),
-					toastErrorMessage: translator.t('updates.newsletter-error-toast'),
-				}}
-			/>
-		</div>
+		<BaseContainer className="py-12">
+			<div className="grid grid-cols-1 gap-20 lg:grid-cols-2">
+				<div className="flex flex-col justify-center gap-3">
+					<Typography size="5xl" weight="bold" className="mt-2">
+						{translator.t('updates.title')}
+					</Typography>
+					<div className="my-8 text-xl">
+						<Typography>{translator.t('updates.description-1')}</Typography>
+						<div className="mt-4">
+							<ul className="mt-2 list-disc pl-5 leading-relaxed">
+								<li>
+									<Typography>{translator.t('updates.bullet-1')}</Typography>
+								</li>
+								<li>
+									<Typography>{translator.t('updates.bullet-2')}</Typography>
+								</li>
+								<li>
+									<Typography>{translator.t('updates.bullet-3')}</Typography>
+								</li>
+							</ul>
+						</div>
+						<Typography className="mt-4">{translator.t('updates.description-2')}</Typography>
+						<hr className="bg-border my-8 h-px border-0" />
+						<Typography>{translator.t('updates.description-3')}</Typography>
+						<Link href="/about-us#team" className="hover:bg-muted mt-4 flex items-center rounded-full p-2">
+							<Image
+								alt="Avatar"
+								src={aurelieImage}
+								width={40}
+								height={40}
+								className="mr-1 h-10 w-10 rounded-full object-cover transition-transform duration-300"
+							/>
+							<Typography className="pl-2" size="lg">
+								{translator.t('updates.author-name')}, {translator.t('updates.author-city')}
+							</Typography>
+						</Link>
+					</div>
+				</div>
+				<div className="flex items-center justify-center">
+					<div className="card theme-dark-blue w-full space-y-4 rounded-xl p-6">
+						<Typography size="2xl" weight="medium">
+							{translator.t('updates.form-title')}
+						</Typography>
+						<SubscriptionInfoForm
+							lang={params.lang}
+							region={params.region}
+							translations={{
+								firstname: translator.t('updates.firstname'),
+								email: translator.t('updates.email'),
+								updatesSubmitButton: translator.t('updates.submit-button'),
+								toastMessage: translator.t('updates.newsletter-updated-toast'),
+								toastErrorMessage: translator.t('updates.newsletter-error-toast'),
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+		</BaseContainer>
 	);
 }