Skip to content

Commit

Permalink
feature(website): about-me page layout changes and new german transla…
Browse files Browse the repository at this point in the history 
…tions (#657)
  • Loading branch information
@ssandino
ssandino authored Nov 28, 2023
1 parent e6d029b commit b189716
Show file tree
Hide file tree
Showing 9 changed files with 170 additions and 57 deletions.
99 changes: 86 additions & 13 deletions shared/locales/de/website-about-us.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,115 @@
"metadata": {
"title": "Wer wir sind | Social Income"
},
"section-1": {
"title-1": "Etwas bewegen, nicht nur darüber sprechen. ",
"title-2": "Dies war der Anfang von Social Income."
"landing-page": {
"title": [
{
"text": "Etwas bewegen, nicht nur darüber sprechen. "
},
{
"text": "Dies war der Anfang von Social Income.",
"color": "secondary"
}
]
},
"our-mission": {
"header": "Unsere Mission",
"title": [
{
"text": "Einen persönlichen Beitrag leisten zur "
},
{
"text": "Bekämpfung der globalen Armut.",
"color": "secondary"
}
],
"subtitle": "Viele Menschen aus wohlhabenden Ländern möchten sich für globale Gerechtigkeit engagieren. Allerdings wissen sie nicht immer wie und wo.",
"paragraphs": [
"Dabei macht es die sich rasant ausbreitende Nutzung von Mobile Banking so einfach und günstig wie nie zuvor, Geld direkt an bedürftige Menschen zu überweisen.",
"Social Income nutzt dieses Potenzial, indem zwei Ansätze der Vermögensverteilung kombiniert werden. Der erste Ansatz basiert auf der Idee eines bedingungslosen Grundeinkommens: ein vielversprechender Weg zu einer gerechteren Welt.",
"Der zweite Ansatz besteht in direkten Bargeldtransfers an Menschen, die in extremer Armut leben. So hat die Forschung gezeigt, dass diejenigen, die direkte finanzielle Hilfe erhalten, nicht nur selbst profitieren, sondern diese Mittel lokal, verantwortungsvoll und nachhaltig investieren.",
"Kontinuierliche und langfristig angelegte Geldüberweisungen an Menschen in Not können also nachweislich und signifikant die Armut reduzieren. Wir machen uns dies zunutze, indem wir Bargeld direkt an die Empfänger*innen schicken: von Mensch zu Mensch, denn in vielen der ärmsten Ländern der Welt gibt es keine solide soziale Infrastruktur.",
"Und das auf eine radikal transparente Weise, die es uns ermöglicht, die hohen Verwaltungskosten zu umgehen, die normalerweise mit solchen Projekten verbunden sind."
]
},
"100-percent-model": {
"header": "100% Model",
"title": [
{
"text": "Spenden für Menschen in Armut. "
},
{
"text": "Nicht für Adminkosten.",
"color": "secondary"
}
],
"subtitle": "Wir sind der Meinung, dass 100% der wieder­kehrenden Spenden Menschen in Not zugute kommen sollen.",
"paragraphs": [
"Wir haben einen Weg gefunden, dieses Versprechen einzulösen: Unsere Betriebskosten und Finanzierungsaufwendungen werden durch philanthropische Zuschüsse und institutionelle Spenden gedeckt.",
"Dank dieser Unterstützung können wir garantieren, dass 100 % der Beiträge unserer individuellen Spender*innen bei den Empfänger:innen ankommt."
]
},
"flow-of-funds": {
"header": "Geldfluss",
"title": [
{
"text": "Von überall bis in den Globalen Süden. "
},
{
"text": "Sicher, schnell und direkt.",
"color": "secondary"
}
],
"subtitle": "Spenden werden sicher in der stabilsten Währung der Welt aufbewahrt: Schweizer Franken.",
"text": "Monatlich überweisen wir Geld auf unsere Konten bei lokalen Banken in den Ländern, in denen wir aktiv sind. Anschliessend zahlen wir das Geld direkt auf die Mobiltelefone von bedürftigen Menschen mittels Mobile Money aus.",
"paragraphs": [
"Monatlich überweisen wir Geld auf unsere Konten bei lokalen Banken in den Ländern, in denen wir aktiv sind. Anschliessend zahlen wir das Geld direkt auf die Mobiltelefone von bedürftigen Menschen mittels Mobile Money aus."
],
"vimeo-video-id": "840215695"
},
"team": {
"header": "Unser Team",
"title-1": "Wir verhelfen Social Income ",
"title-2": "zur Realität.",
"title": [
{
"text": "Wir verhelfen Social Income "
},
{
"text": "zur Realität.",
"color": "secondary"
}
],
"roles": {
"finance": "Finanzen",
"operations": "Betrieb",
"marketing": "Marketing",
"communications": "Kommunikation",
"co-president": "Co-Präsident:in",
"founder": "Gründer",
"founder": "Gründungsdirektor",
"board-member": "Vorstandsmitglied",
"software-development": "Softwareentwicklung",
"app-development": "App-Entwicklung",
"impact-measurement": "Impact Measurement"
},
"groups": {
"staff": {
"name": "Mitarbeiter:innen",
"description": "Unsere Mitarbeiter:innen vor Ort in Sierra Leone."
"name": "Örtliche Mitarbeitende",
"subtitle": "Sie leiten den Betrieb und dessen Weiterentwicklung im Auszahlungsland.",
"description": "Das lokale Personal bietet zuverlässige Unterstützung für Partner:innen und Empfänger:innen. Ihre Erkenntnisse fliessen in die von uns entwickelten Tools ein. Sie werden mit einem fairen lokalen Gehalt vergütet."
},
"volunteers": {
"name": "Freiwillige",
"description": "Die Menschen, die alles möglich machen."
"name": "Aktive Freiwillige",
"subtitle": "Die Menschen, die grosszügig ihre Zeit und Fähigkeiten zur Verfügung stellen, um alles möglich zu machen.",
"description": "Die Leitung von Social Income erfordert vielfältige Fähigkeiten. Diese engagierten Fachleute, die freiwillig die Initiative voranbringen und mit ihrem Einsatz und ihrer effektiven Teamarbeit, machen alles erst möglich."
},
"board": {
"name": "Vorstand",
"description": "Die Aufsichtspersonen der Organisation."
"subtitle": "Verantwortlich für die Einhaltung ethischer Standards und interner Richtlinien.",
"description": "Der Vorstand ist für die Aufsicht über die Organisation zuständig. Die Mitglieder werden für eine Amtszeit von vier Jahren gewählt. Ihre spezifischen Aufsichtspflichten sind in den Statuten und dem Organisationsreglement festgelegt. "
},
"special-thanks": {
"name": "Besonderer Dank",
"description": "Diese Personen haben sich großzügig ehrenamtlich eingesetzt und zu Social Income beigetragen."
"name": "Ehemalige Freiwillige",
"subtitle": "Diese Individuen haben durch ihren ehrenamtlichen Einsatz Social Income massgeblich geprägt.",
"description": "Freiwillige, die mehr als drei Monate inaktiv sind, werden als ehemalige betrachtet, bis sie ihre Mitarbeit wieder aufnehmen. Dieses Vorgehen ermöglicht es uns, die wirkliche Grösse unserer Organisation transparent und präzise darzustellen."
}
}
}
Expand Down
38 changes: 22 additions & 16 deletions shared/locales/en/website-about-us.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,32 +37,34 @@
"header": "100% Model",
"title": [
{
"text": "Zero overhead costs. "
"text": "Donations are for people in need. "
},
{
"text": "Our pledge to you.",
"text": "Not to pay overhead costs.",
"color": "secondary"
}
],
"subtitle": "We believe that 100% of our contributors’ recurring donations should go to our recipients.",
"paragraphs": [
"We believe that 100% of our contributors’ donations should go to our recipients. To maintain this promise, all our operating costs and financial expenses are covered by philanthropic grants and institutional donations.",
"Thanks to this support, we can guarantee that 100% of the money from our individual contributors reaches our recipients.",
"Additionally, we receive various in-kind support from organizations, such as <a href='https://www.google.com/nonprofits/' class='underline' target='_blank'>Google Non-profit</a> or <a href='https://lineto.com/' class='underline' target='_blank'>Lineto</a> (Unica77 font). Thank you!"
"To maintain this promise, our operating costs and financial expenses are covered by philanthropic grants and institutional donations.",
"Thanks to this support, we can guarantee that 100% of the recurring donations reaches our recipients."
]
},
"flow-of-funds": {
"header": "Flow of Funds",
"title": [
{
"text": "Social Income payments are sent directly to "
"text": "From Everywhere to the Global South "
},
{
"text": "recipients’ mobile phones.",
"text": "Safe, Fast, and Direct.",
"color": "secondary"
}
],
"subtitle": "Donations are safely stored in the most stable currency in the world: Swiss Francs.",
"text": "Every month we transfer just enough money to local banks in the countries where we are active. We then distribute Social Incomes with the help of mobile money directly to the phones of beneficiaries.",
"paragraphs": [
"We receive contributions from all over the world. They are safely stored in our bank account, in the most stable currency in the world: Swiss Francs. Every month we transfer just enough money to local banks in the countries where we are active. We then distribute Social Incomes with the help of mobile money directly to the phones of beneficiaries."
"Every month we transfer just enough money to local banks in the countries where we are active. We then distribute Social Incomes with the help of mobile money directly to the phones of beneficiaries."
],
"vimeo-video-id": "840215695"
},
Expand All @@ -83,7 +85,7 @@
"marketing": "Marketing",
"communications": "Communications",
"co-president": "Co-President",
"founder": "Founder",
"founder": "Founding Director",
"board-member": "Board Member",
"software-development": "Software Development",
"app-development": "App Development",
Expand All @@ -92,20 +94,24 @@
},
"groups": {
"staff": {
"name": "Staff",
"description": "Our local staff in Sierra Leone."
"name": "Local Staff",
"subtitle": "Working in the field, ensuring that recipients and partners have a reliable point of contact.",
"description": "The local staff manages local operations and offers support to partners and recipients. Their insights are re-integrated into the technological tools we develop. They are compensated with a fair local salary."
},
"volunteers": {
"name": "Volunteers",
"description": "The people who make it all happen."
"name": "Active Volunteers",
"subtitle": "The people who generously contribute their time and skills to make everything possible.",
"description": "Running Social Income requires a diverse range of skills. These dedicated professionals who volunteer bring everything to life and manage an entire NGO through their commitment and effective teamwork."
},
"board": {
"name": "Board of Association",
"description": "The overseers of the organization."
"subtitle": "Responsible for compliance with ethical standards and internal guidelines.",
"description": "The board is responsible for the supervision of the organization. Members are elected for a term of four years. Their specific supervisory duties are defined in the statutes and organizational regulations."
},
"special-thanks": {
"name": "Special Thanks",
"description": "These individuals have volunteered and made generous contributions towards Social Income."
"name": "Former Volunteers",
"subtitle": "These individuals have significantly shaped Social Income through their voluntary efforts.",
"description": "Volunteers who are inactive for more than three months are considered former until they resume their participation. This approach allows us to transparently and accurately represent the true size of our organization."
}
}
},
Expand Down
Binary file added website/src/app/[lang]/[region]/(website)/about-us/(assets)/pranav.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 11 additions & 3 deletions website/src/app/[lang]/[region]/(website)/about-us/(sections)/100-percent-model.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,18 @@ export async function HundredPercentModel({ lang }: { lang: WebsiteLanguage }) {
</Typography>
))}
</p>
<div>
<div className="flex flex-col space-y-4">
<div className="grid grid-cols-1 gap-8 md:grid-cols-3 lg:gap-16">
<Typography
size="2xl"
weight="medium"
className="hyphens-manual"
dangerouslySetInnerHTML={{ __html: translator.t('100-percent-model.subtitle') }}
/>
<div className="flex flex-col space-y-4 md:col-span-2">
{translator.t<string[]>('100-percent-model.paragraphs').map((text, index) => (
<Typography dangerouslySetInnerHTML={{ __html: text }} key={index} size="lg" />
<Typography key={index} size="lg">
{text}
</Typography>
))}
</div>
</div>
Expand Down
30 changes: 23 additions & 7 deletions website/src/app/[lang]/[region]/(website)/about-us/(sections)/flow-of-funds.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,29 @@ export async function FlowOfFunds({ lang }: { lang: WebsiteLanguage }) {
</Typography>
))}
</p>
<div className="mb-8 flex flex-col space-y-4 lg:mb-16">
{translator.t<string[]>('flow-of-funds.paragraphs').map((text, index) => (
<Typography dangerouslySetInnerHTML={{ __html: text }} key={index} size="lg" />
))}
</div>
<div className="mx-auto w-full max-w-3xl">
<VimeoVideo videoId={translator.t('flow-of-funds.vimeo-video-id')} />

<div className="grid grid-cols-1 gap-8 md:grid-cols-3 lg:gap-16">
<div className="space-y-5">
<div>
<Typography size="2xl" weight="medium">
{translator.t('flow-of-funds.subtitle')}
</Typography>
</div>
<div>
<Typography size="xl" weight="normal">
{translator.t('flow-of-funds.text')}
</Typography>
</div>
</div>
<div className="md:col-span-2">
<div className="flex flex-col space-y-4">
<div className="mx-auto w-full max-w-3xl">
<div className="aspect-video overflow-hidden rounded-xl">
<VimeoVideo videoId={translator.t('flow-of-funds.vimeo-video-id')} />
</div>
</div>
</div>
</div>
</div>
</BaseContainer>
);
Expand Down
6 changes: 3 additions & 3 deletions website/src/app/[lang]/[region]/(website)/about-us/(sections)/our-mission.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ export async function OurMission({ lang }: { lang: WebsiteLanguage }) {
</Typography>
))}
</p>
<div className="grid gap-8 lg:grid-cols-3 lg:gap-16">
<Typography size="2xl" weight="semibold">
<div className="grid grid-cols-1 gap-8 md:grid-cols-3 lg:gap-16">
<Typography size="2xl" weight="medium">
{translator.t('our-mission.subtitle')}
</Typography>
<div className="flex flex-col space-y-4 lg:col-span-2">
<div className="flex flex-col space-y-4 md:col-span-2">
{translator.t<string[]>('our-mission.paragraphs').map((text, index) => (
<Typography key={index} size="lg">
{text}
Expand Down
36 changes: 23 additions & 13 deletions website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import marionImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/mario
import michaelImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/michael.jpeg';
import mikolajImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/mikolaj.jpeg';
import patrikImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/patrik.jpeg';
import pranavImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/pranav.jpg';
import reneImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/rene.jpeg';
import riccardoImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/riccardo.jpg';
import sandinoImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/sandino.jpg';
Expand All @@ -33,6 +34,7 @@ import { Translator } from '@socialincome/shared/src/utils/i18n';
import { BaseContainer, FontSize, Typography } from '@socialincome/ui';
import { FontColor } from '@socialincome/ui/src/interfaces/color';
import classNames from 'classnames';
import _ from 'lodash';
import { StaticImport } from 'next/dist/shared/lib/get-img-props';
import Image from 'next/image';

Expand Down Expand Up @@ -71,6 +73,8 @@ const groups: Group[] = [
{ name: 'Verena Zaiser', role: 'app-development', image: verenaImage },
{ name: 'András Heé', role: 'software-development', image: andrasImage },
{ name: 'Carlos Badilla', role: 'impact-measurement', image: carlosImage },
{ name: 'Larissa dos Santos Lima', role: 'communications', image: larissaImage },
{ name: 'Pranav Chatur', role: 'software-development', image: pranavImage },
],
},
{
Expand All @@ -96,8 +100,7 @@ const groups: Group[] = [
{ name: 'Alexandre Milan', role: 'software-development', image: alexandreImage },
{ name: 'Patrik Sopran', role: 'app-development', image: patrikImage },
{ name: 'Anders Nordhag', role: 'communications', image: andersImage },
{ name: 'Larissa dos Santos Lima', role: 'communications', image: larissaImage },
{ name: 'Ajla Murati', role: 'strategy', image: ajlaImage },
{ name: 'Ajla Murati', role: 'operations', image: ajlaImage },
{ name: 'Simon Bühler', role: 'communications', image: simonImage },
{ name: 'Sarah Mekni', role: 'strategy', image: sarahImage },
{ name: 'Lorenzo Garovi', role: 'strategy', image: lorenzoImage },
Expand All @@ -112,26 +115,33 @@ export default async function Team({ lang }: { lang: WebsiteLanguage }) {
<Typography as="h3" size="xl" color="muted-foreground" className="mb-4">
{translator.t('team.header')}
</Typography>
<p className="mb-8 lg:mb-16">
<Typography size="4xl" weight="bold">
{translator.t<{ text: string; color?: FontColor }[]>('team.title').map((title, index) => (
<Typography as="span" key={index} size="4xl" weight="bold" color={title.color}>
<Typography as="span" key={index} color={title.color}>
{title.text}
</Typography>
))}
</p>
<div className="mt-16 space-y-20">
</Typography>
<div className="mt-10 space-y-16">
{groups.map((group, index1) => (
<div key={index1}>
<Typography size="3xl" weight="bold">
<Typography size="3xl" weight="bold" className="py-8">
{translator.t(`team.groups.${group.name}.name`)}
</Typography>
<Typography size="md" className="mb-8">
{translator.t(`team.groups.${group.name}.description`)}
</Typography>
<div className="grid grid-cols-1 gap-8 md:grid-cols-3 lg:gap-16">
<Typography size="xl" weight="medium">
{translator.t(`team.groups.${group.name}.subtitle`)}
</Typography>
<div className="md:col-span-2">
<Typography size="lg" className="mb-8">
{translator.t(`team.groups.${group.name}.description`)}
</Typography>
</div>
</div>
<ul
role="list"
className={classNames(
'grid lg:mx-0 lg:max-w-none',
'grid pt-6 lg:mx-0 lg:max-w-none',
{
'grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-7': group.size === 'sm',
},
Expand All @@ -143,14 +153,14 @@ export default async function Team({ lang }: { lang: WebsiteLanguage }) {
},
)}
>
{group.people.map((person: Person, index2) => (
{_.sortBy(group.people, 'name').map((person: Person, index2) => (
<li key={index2} className="flex flex-col">
<Image
className="aspect-[5/6] w-full rounded-2xl object-cover transition-transform duration-300 hover:scale-105"
src={person.image}
alt={`${person.name} image`}
/>
<Typography as="h3" size={group.size} weight="semibold" lineHeight="tight" className="mt-6">
<Typography as="h3" size={group.size} weight="medium" lineHeight="tight" className="mt-6">
{person.name}
</Typography>
<Typography
Expand Down
2 changes: 1 addition & 1 deletion ...[lang]/[region]/(website)/transparency/finances/[currency]/charts/transparency-charts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function TransparencyCharts({
lang,
currency,
}: ContributionStatsProps) {
const translator = useTranslator(lang, 'website-transparency');
const translator = useTranslator(lang, 'website-finances');

return (
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
Expand Down
2 changes: 1 addition & 1 deletion website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/section-3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { CountryCard, CountryCardList } from './section-3-cards';
export async function Section3({ params, contributionStats }: SectionProps) {
const translator = await Translator.getInstance({
language: params.lang,
namespaces: ['countries', 'website-transparency'],
namespaces: ['countries', 'website-finances'],
});
const totalContributionsByCountry = contributionStats.totalContributionsByCountry as {
country: string;
Expand Down

0 comments on commit b189716

Please sign in to comment.