feature(website): csr placeholder page (#621)

Author: ssandino

shared/locales/de/website-csr.json

@@ -0,0 +1,6 @@
+{
+	"title": "Soziale Unternehmensverantwortung",
+	"subtitle": "Hier kannst du bald nach Organisationen suchen, die direkt oder über ihre Mitarbeitenden Social Income unterstützen.",
+	"issue-assigned": "arbeitet zur Zeit an daran",
+	"issue-unassigned": "übernimm den Lead für dieses Issue"
+}

shared/locales/en/website-csr.json

@@ -0,0 +1,6 @@
+{
+	"title": "Social Corporate Responsibility",
+	"subtitle": "This page will let you soon search for organizations that contribute directly or indirectly through their employees to Social Income.",
+	"issue-assigned": "is currently working on this page",
+	"issue-unassigned": "assign this issue to yourself"
+}

website/src/app/[lang]/[region]/(website)/about-us/(sections)/contact.tsx

@@ -7,7 +7,7 @@ import { BaseContainer, Button, Card, CardContent, CardHeader, Typography } from
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Link from 'next/link';
 
-function SocialMediaButton({ Icon, title, href }: { Icon: IconType; href: string; title: string }) {
+export function SocialMediaButton({ Icon, title, href }: { Icon: IconType; href: string; title: string }) {
 	return (
 		<Link href={href} target="_blank" className="flex flex-col">
 			<Button Icon={Icon} variant="ghost" size="lg">

website/src/app/[lang]/[region]/(website)/csr/anthony.jpg

@@ -0,0 +1,55 @@
+import { DefaultPageProps } from '@/app/[lang]/[region]';
+import { SocialMediaButton } from '@/app/[lang]/[region]/(website)/about-us/(sections)/contact';
+import { SiFigma, SiGithub } from '@icons-pack/react-simple-icons';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer, Typography } from '@socialincome/ui';
+import Image from 'next/image';
+import Link from 'next/link';
+import anthonyImage from './anthony.jpg';
+
+export default async function Page({ params }: DefaultPageProps) {
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-csr'],
+	});
+
+	return (
+		<BaseContainer className="min-h-screen-navbar flex flex-col items-center space-y-12 py-16 md:py-32">
+			<Link
+				href="https://github.com/anthonyray"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="bg-card hover:bg-accent border-accent flex items-center rounded-full border-2 p-2 text-center"
+			>
+				<Image
+					src={anthonyImage}
+					width={40}
+					height={40}
+					className="mr-2 h-10 w-10 rounded-full transition-transform duration-300"
+					alt="Avatar"
+				/>
+				<span className="pl-3 pr-6 text-lg text-black/75">anthonyray {translator.t('issue-assigned')}</span>
+			</Link>
+			<div className="flex flex-col space-y-12">
+				<Typography as="h1" size="5xl" weight="bold" className="text mx-auto text-center">
+					{translator.t('title')}
+				</Typography>
+				<Typography as="h2" size="lg" lineHeight="snug" className="text mx-auto max-w-3xl text-center">
+					{translator.t('subtitle')}
+				</Typography>
+				<div className="flex justify-center space-x-4">
+					<SocialMediaButton
+						Icon={SiGithub}
+						href="https://github.com/socialincome-san/public/issues/550"
+						title="GitHub Issue"
+					/>
+					<SocialMediaButton
+						Icon={SiFigma}
+						href="https://www.figma.com/proto/qGO3YI21AWIjWEyMPGUczM/Website-Social?type=design&node-id=376-2473&viewport=2567%2C-513%2C0.45&t=jG5pilvATJ4817xv-0&scaling=contain&starting-point-node-id=143%3A29044"
+						title="Figma Design"
+					/>
+				</div>
+			</div>
+		</BaseContainer>
+	);
+}