Website: New page to present tech stack

shared/locales/en/website-techstack.json

@@ -0,0 +1,148 @@
+{
+	"metadata": {
+		"title": "Social Income",
+		"description": "Our Techstack",
+		"og-image": "/assets/metadata/og/default.jpg",
+		"twitter-image": "/assets/metadata/twitter/default.jpg"
+	},
+	"hero": {
+		"title-1": [
+			{
+				"text": "To work efficiently and effectively, "
+			},
+			{
+				"text": "we rely on the right tools.",
+				"color": "accent"
+			}
+		],
+		"subtitle": "At Social Income, donated tech and software play a crucial role in driving our mission forward."
+	},
+	"tabs": {
+		"tech-stack": "Tech Stack",
+		"donated-tech": "Donated Tech"
+	},
+	"badges": {
+		"donated": "Donated"
+	},
+	"cards": [
+		{
+			"title": "Google Suite",
+			"description": "We use the tools to organize and communicate. Thanks to Google Nonprofit, this is free for us.",
+			"link": "https://www.google.com/nonprofits/",
+			"logo": "google-nonprofit.png",
+			"donated": true
+		},
+		{
+			"title": "GitHub",
+			"description": "We use GitHub to collaborate on code; without it, maintaining an open-source approach would be difficult.",
+			"link": "https://socialimpact.github.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Codemagic",
+			"description": "We use Codemagic to simplify app builds and reduce deployment complexity.",
+			"link": "https://codemagic.io/start/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Linktree",
+			"description": "We use Linktree to keep all our social media links in one accessible place.",
+			"link": "https://linktr.ee/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Twilio",
+			"description": "We use Twilio to send newsletters and transactional emails to donors, ensuring reliable communication.",
+			"link": "https://twilio.org/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Algolia",
+			"description": "We use Algolia to enable fast and accurate search within our admin tool.",
+			"link": "https://www.algolia.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "JetBrains",
+			"description": "We use JetBrains to write code and review open-source contributions efficiently.",
+			"link": "https://www.jetbrains.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "1Password",
+			"description": "We use 1Password to keep our team’s credentials secure and easy to access when needed.",
+			"link": "https://1password.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Mux",
+			"description": "We use Mux to provide fast and adaptable video experiences to website users.",
+			"link": "https://www.mux.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Sentry",
+			"description": "We use Sentry to monitor, identify, and fix issues across all our tools, improving reliability.",
+			"link": "https://sentry.io/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Unica77",
+			"description": "We use Unica77, a donated font by Lineto, to give our platform a distinctive and professional look.",
+			"link": "https://lineto.com/typefaces/unica77",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "FireCMS",
+			"description": "We use FireCMS to manage our Firestore data and run the admin tool seamlessly.",
+			"link": "https://firecms.co/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Storybook",
+			"description": "We use Storybook to maintain a consistent and cohesive design across components.",
+			"link": "https://storybook.js.org/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Tailwind CSS",
+			"description": "We use Tailwind CSS to style quickly and flexibly, adapting to our evolving needs.",
+			"link": "https://tailwindcss.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Shadcn",
+			"description": "We use Shadcn components because they offer a great balance of simplicity and versatility.",
+			"link": "https://ui.shadcn.com/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "TypeScript",
+			"description": "We use TypeScript to write safer and more maintainable code with fewer bugs.",
+			"link": "https://www.typescriptlang.org/",
+			"logo": "",
+			"donated": false
+		},
+		{
+			"title": "Next.js",
+			"description": "We use Next.js to deploy our website as fast as possible.",
+			"link": "https://nextjs.org/",
+			"logo": "",
+			"donated": false
+		}
+	]
+}

website/src/app/[lang]/[region]/(website)/techstack/(sections)/hero.tsx

@@ -0,0 +1,26 @@
+import { WebsiteLanguage } from '@/i18n';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { Typography } from '@socialincome/ui';
+import { FontColor } from '@socialincome/ui/src/interfaces/color';
+
+export async function Hero({ lang }: { lang: WebsiteLanguage }) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-techstack'],
+	});
+
+	return (
+		<div className="mx-auto mb-8 mt-20 flex w-4/5 flex-col items-center justify-center md:mb-20 lg:w-3/5">
+			<div className="mb-8 text-center">
+				{translator.t<{ text: string; color?: FontColor }[]>('hero.title-1').map((title, index) => (
+					<Typography as="span" size="5xl" weight="medium" color={title.color} key={index}>
+						{title.text}{' '}
+					</Typography>
+				))}
+			</div>
+			<Typography size="2xl" className="mb-8 text-center">
+				{translator.t('hero.subtitle')}
+			</Typography>
+		</div>
+	);
+}

website/src/app/[lang]/[region]/(website)/techstack/(sections)/techcard.tsx

@@ -0,0 +1,60 @@
+import { Badge, Card, CardContent, CardHeader, CardTitle, Typography } from '@socialincome/ui';
+import Image from 'next/image';
+import Link from 'next/link';
+
+type TechCardTranslations = {
+	badgeDonated: string;
+};
+
+type TechCardProps = {
+	title: string;
+	description: string;
+	link: string;
+	logo: string;
+	donated: boolean;
+	translations: TechCardTranslations;
+};
+
+function getLogoSrc(logo: string) {
+	const image_base_path = '/assets/tech/';
+	return image_base_path.concat(logo);
+}
+
+export default function TechCard({ title, description, link, logo, donated, translations }: TechCardProps) {
+	return (
+		<Card className="hover:bg-primary max-w-lg rounded-lg p-6 shadow-none hover:bg-opacity-10">
+			<Link href={link} target="_blank" rel="noreferrer" className="flex flex-col gap-6 sm:flex-row">
+				{!!logo && (
+					<div className="w-fit basis-1/4 self-center">
+						<Image
+							src={getLogoSrc(logo)}
+							alt={title}
+							className="mx-auto w-1/2 rounded-sm sm:w-full"
+							width="48"
+							height="48"
+						/>
+					</div>
+				)}
+				<div className={'' + (!!logo ? 'w-fit basis-3/4' : '')}>
+					{donated && (
+						<Badge className="bg-accent hover:bg-accent text-primary text-md float-right -m-3 border-none">
+							<Typography size="md" weight="normal" className="p-1">
+								{translations.badgeDonated}
+							</Typography>
+						</Badge>
+					)}
+					<CardHeader className="p-0">
+						<CardTitle className="flex items-center justify-between">
+							<Typography size="2xl" weight="medium">
+								{title}
+							</Typography>
+						</CardTitle>
+					</CardHeader>
+					<CardContent className="my-4 p-0">
+						<Typography size="lg">{description}</Typography>
+					</CardContent>
+				</div>
+			</Link>
+		</Card>
+	);
+}

website/src/app/[lang]/[region]/(website)/techstack/(sections)/techlist.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import TechCard from '@/app/[lang]/[region]/(website)/techstack/(sections)/techcard';
+import { SpinnerIcon } from '@/components/logos/spinner-icon';
+import { useTranslator } from '@/hooks/useTranslator';
+import { WebsiteLanguage } from '@/i18n';
+import { Tabs, TabsList, TabsTrigger } from '@socialincome/ui';
+import { useState } from 'react';
+
+type TechEntryJSON = {
+	title: string;
+	description: string;
+	link: string;
+	logo: string;
+	donated: boolean;
+};
+
+export function TechList({ lang }: { lang: WebsiteLanguage }) {
+	const [isDonated, setIsDonated] = useState(false);
+
+	const translator = useTranslator(lang, 'website-techstack');
+	const techArray: TechEntryJSON[] | undefined = translator?.t('cards');
+
+	const handleTabChange = (value: string) => {
+		setIsDonated(value === 'donated');
+	};
+
+	if (!translator || !techArray) {
+		return (
+			<div className="mx-auto max-w-6xl">
+				<div className="flex justify-center pb-10">
+					<SpinnerIcon />
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="mx-auto max-w-6xl">
+			<div className="flex justify-center pb-10">
+				<Tabs defaultValue="tech" className="w-[400px]" onValueChange={handleTabChange}>
+					<TabsList className="bg-primary grid w-full grid-cols-2 bg-opacity-10">
+						<TabsTrigger value="tech">{translator?.t('tabs.tech-stack')}</TabsTrigger>
+						<TabsTrigger value="donated">{translator?.t('tabs.donated-tech')}</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
+			<div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-2">
+				{techArray
+					.filter((t) => !isDonated || t.donated)
+					.map((techEntry, index) => (
+						<TechCard
+							{...techEntry}
+							translations={{ badgeDonated: translator.t('badges.donated') || '' }}
+							key={index}
+						/>
+					))}
+			</div>
+		</div>
+	);
+}

website/src/app/[lang]/[region]/(website)/techstack/page.tsx

@@ -0,0 +1,12 @@
+import { DefaultPageProps } from '@/app/[lang]/[region]';
+import { Hero } from './(sections)/hero';
+import { TechList } from './(sections)/techlist';
+
+export default async function Page({ params: { lang } }: DefaultPageProps) {
+	return (
+		<div className="space-y-24">
+			<Hero lang={lang} />
+			<TechList lang={lang} />
+		</div>
+	);
+}