diff --git a/shared/locales/de/website-common.json b/shared/locales/de/website-common.json index ae24a9097..fc947ca6f 100644 --- a/shared/locales/de/website-common.json +++ b/shared/locales/de/website-common.json @@ -8,13 +8,15 @@ "how-it-works-description": "Untertitel...", "contributors": "Spender:innen", "contributors-description": "Wer ist dabei?", - + "recipients": "Empfänger:innen", + "recipients-description": "Subtitle...", + "whats-next": "Was kommt als nächstes?", + "whats-next-description": "Subtitle...", "transparency": "Transparenz", "finances": "Finanzen", "finances-description": "Untertitel...", "recipient-selection": "Selektion der Empfänger:innen", "recipient-selection-description": "Untertitel...", - "my-profile": "Mein Profil" } } diff --git a/shared/locales/de/website-our-work.json b/shared/locales/de/website-our-work.json index 5af648e36..1e46e3f50 100644 --- a/shared/locales/de/website-our-work.json +++ b/shared/locales/de/website-our-work.json @@ -1,11 +1,88 @@ { - "section-our-work": { + "our-work": { "title-1": "Wir bauen das Fundament für echte Veränderung. ", "title-2": "Zeitgemäss. Digital. Gemeinsam.", + "subtitle": "Social Income ist ein neuer Weg, um die Armut im globalen Süden zu bekämpfen. Einfach, effizient und digital.", "vimeo-video-id": "488184818" }, - "section-how-it-works": { - "title": "Ein solidarischer Beitrag, von Mensch zu Mensch. So einfach.", - "subtitle": "Mach einen Unterschied in weniger als 1 Minute." + "how-it-works": { + "header": "So funkioniert's", + "title-1": "Ein solidarischer Beitrag, von Mensch zu Mensch. ", + "title-2": "So einfach.", + "subtitle": "Mach einen Unterschied in weniger als 1 Minute.", + "item-1": "Individuelle Beiträge werden zu 100% an Empfänger:innen ausbezahlt", + "item-2": "Flexible Zahlungspläne. Modifiziere oder kündige jederzeit", + "item-3": "Social Income-Überweisungen werden direkt auf die Mobiltelefone der Empfänger:innen transferiert", + "item-4": "Die Höhe des ausbezahlten Betrags basiert auf dem Durchschnittssalär, wo die Empfänger:innen leben." + }, + "contributors": { + "header-1": "Spender:innen", + "title-1": "Menschen aus allen Lebensschichten leisten einen Beitrag.", + "text-1": "Wir erhalten u.a. regelmässige individuelle Spenden von Angestellten aus folgenden Organisationen und Unternehmen:", + "header-2": "Wieso Mitmachen?", + "title-2": "Ein Ziel. Mehr soziale Gerechtigkeit.", + "text-2": "Menschen, die 1% ihres Einkommens an Social Income spenden, haben ganz unterschiedliche Beweggründe:", + "portraits": { + "carlos": "Wir leben in einer Welt voller Möglichkeiten. Lasst uns dieses Privileg teilen.", + "vanja": "Ein grossartiges Beispiel dafür, wie sich Wohlstand umverteilen lässt, basierend auf Solidarität und ermöglicht durch die heutige Technologie.", + "ruben": "Ich unterstütze Social Income nicht nur, weil es einfach ist, sondern weil die Forschung gezeigt hat, dass der Ansatz extrem effektiv ist.", + "han": "Die Frage ist nicht, warum man sich engagieren sollte, sondern vielmehr, warum man es bleiben lässt. Social Income ist eine dringende Notwendigkeit in unserer Gesellschaft.", + "claudia": "Die heutige globale Ungleichheit ist die Folge jahrhundertelanger ungleicher Fortschritte. Social Income ist ein neuer Weg, diese Ungleichheit anzugehen." + } + }, + "recipients": { + "header": "Empfänger:innen", + "title-1": "Wir arbeiten dort, wo wir die grösste Wirkung entfalten können. ", + "title-2": "Sierra Leone.", + "subtitle": "Seit März 2020, erhalten alle Empfänger:innen in Sierra Leone 30 US Dollar pro Monat, garantiert für drei Jahre.", + "our-criteria": "Unsere Kriterien", + "item-1": { + "title": "Land mit niedrigem Einkommen", + "text": "Wir starteten in Sierra Leone, einem der ärmsten Länder der Welt. Hier kann eine kleine Spende viel bewirken.", + "caption": "Das Durchschnittseinkommen in Sierra Leone beträgt USD 42.5 pro Monat – Weltbank, 2022 (BNE pro Kopf, Atlas-Methode und Kaufkraftparität)" + }, + "item-2": { + "title": "Einkommensschwache Communities", + "text": "Für die Auswahl der Empfänger:innen arbeiten wir mit lokalen NGOs zusammen, die besonders marginalisierte Bevölkerungsgruppen unterstützen.", + "caption": "Partner: Aurora Foundation, Jamil & Nyanga Jaward Foundation, Reachout Salone, Equal Rights Alliance, Polio B&S Organisation, Freetown City Council" + }, + "item-3": { + "title": "Alter und Geschlechterparität", + "text": "Die Empfänger:innen müssen älter als 16 Jahre sein. Wir garantieren ausserdem ein ausgeglichenes Geschlechterverhältnis.", + "caption": "" + }, + "voices": "Stimmen", + "portraits": { + "kai": "Ich brauche Social Income um meine Finanzen zu verwalten. Mit der ersten Überweisung konnte ich mir neue Krücken kaufen, die ich seither benutze.", + "aminata": "Fürs tägliche Brot zerkleinere ich Steine zu Kies. Es ist harte Arbeit und mit dem Lohn ist es nicht leicht, vier Kinder grosszuziehen. Ich möchte mich für die monatliche Unterstützung bedanken.", + "gbassay": "Social Income ermöglichte es mir, Schulmaterial zu kaufen und meine Kinder zur Schule zu schicken. Danke für alles, was ihr getan habt, um zu helfen.", + "lamin": "Social Income hilft sowohl mir als auch meiner ganzen Familie.", + "onikeh": "Social Income hat mir enorm geholfen. Es dient als Quelle, aus der wir zusätzliche Kraft für unser tägliches Leben schöpfen können. Es ist ein grossartiges Gefühl, dass uns Menschen unterstützen und an unsere Träume glauben.", + "neneh": "Ich brauche mein monatliches Social Income um in mein kleines Unternehmen zu investieren und um das Mittagessen an der Schule meiner Kinder zu bezahlen. Es macht mich so glücklich, ich könnte weinen." + } + }, + "whats-next": { + "header": "Was kommt als Nächstes?", + "title-1": "Wir gehen die Dinge ", + "title-2": "Schritt für Schritt an.", + "subtitle": "Das langfristige Ziel von Social Income besteht darin, für bedürftige Menschen ein globales System der Wohlstands(um)verteilung zu kreieren – basierend auf freiwilligen Spender*innen aus aller Welt. Das Projekt ist ambitioniert. Für die Skalierung braucht es entsprechend Zeit.", + "timeline": { + "item-1": { + "title": "März 2020", + "text": "In der Pilotphase zahlten wir die ersten Beiträge an eine kleine Gemeinschaft in Freetown, Sierra Leone." + }, + "item-2": { + "title": "September 2021", + "text": "In der Entwicklungsphase erhöhten wir die Anzahl der Empfänger:innen und verbesserten den Zahlungsprozess." + }, + "item-3": { + "title": "Januar 2022", + "text": "Seit Beginn dieses Jahres können wir Social Income kontinuierlich für immer mehr Empfänger:innen und Spender:innen ausrollen." + }, + "item-4": { + "title": "Anstehend: Wirkungsmessung", + "text": "Um die Wirksamkeit von Social Income messbar zu machen, haben wir eine Methode und eine Reihe an quantitativen und qualitativen Indikatoren entwickelt. Momentan sammeln wir Daten und optimieren unsere Vorgehensweise mit Hilfe der Empfänger:innen." + } + } } } diff --git a/shared/locales/en/website-common.json b/shared/locales/en/website-common.json index c4a1d6174..7fce0e18b 100644 --- a/shared/locales/en/website-common.json +++ b/shared/locales/en/website-common.json @@ -10,13 +10,13 @@ "contributors-description": "Subtitle...", "recipients": "Recipients", "recipients-description": "Subtitle...", - + "whats-next": "What's next?", + "whats-next-description": "Subtitle...", "transparency": "Transparency", "finances": "Finanzen", "finances-description": "Subtitle...", "recipient-selection": "Recipient Selection", "recipient-selection-description": "Subtitle...", - "my-profile": "My Profile" } } diff --git a/shared/locales/en/website-home.json b/shared/locales/en/website-home.json index 9653b5a7d..e91cd7b5b 100644 --- a/shared/locales/en/website-home.json +++ b/shared/locales/en/website-home.json @@ -136,5 +136,10 @@ "description": "Reduce inequality within and among countries.", "paragraph-1": "Reducing inequalities and ensuring that no one is left behind is integral to achieving the Sustainable Development Goals. Despite some positive signs toward reducing inequality in some dimensions (e.g reducing relative income inequality in some countries and preferential trade status benefiting lower-income countries), many inequalities continue to persist or are even increasing." } + }, + "section-7": { + "title-1": "We are proud that we’ve been ", + "title-2": "recognized.", + "subtitle": "Social Income has received funding and support from various accelerator and development programs, including the following organisations:" } } diff --git a/shared/locales/en/website-our-work.json b/shared/locales/en/website-our-work.json index 0aae689a3..ea43d0552 100644 --- a/shared/locales/en/website-our-work.json +++ b/shared/locales/en/website-our-work.json @@ -1,24 +1,89 @@ { - "section-our-work": { + "our-work": { "title-1": "Our work is made possible by you. Make a ", "title-2": "change with us.", + "subtitle": "Social Income is a new way to fight poverty in the Global South, creating real change, from human to human.", "vimeo-video-id": "433937157" }, - "section-how-it-works": { - "title": "From you to someone in need. This is solidarity.", + "how-it-works": { + "header": "How it works", + "title-1": "From you to someone in need. ", + "title-2": "This is solidarity.", + "text": "We are convinced that people in poverty know best how to improve their living conditions.", "subtitle": "Make a difference in under a minute.", "item-1": "100% of individual contributions are paid out to recipients", "item-2": "Flexible payment schedules. Adjust or cancel anytime", "item-3": "Social Income payments are sent directly to recipients’ mobile phones.", "item-4": "The amount disbursed is determined by the average salary where recipients live." }, - "section-contributors": { + "contributors": { "header-1": "Contributors", "title-1": "People from all walks of life contribute.", "text-1": "We receive, amongst others, regular individual contributions from employees at the following organisations and companies:", - "header-2": "Why contribute?", "title-2": "One goal. Greater social justice.", - "text-2": "Our contributors want to help people for a variety of reasons. Here are just a few driving forces behind the humanitarians who contribute their 1% to Social Income:" + "text-2": "Our contributors want to help people for a variety of reasons. Here are just a few driving forces behind the humanitarians who contribute their 1% to Social Income:", + "portraits": { + "carlos": "We are living in a world of opportunities, let's make sure we share this privilege with everyone else.", + "vanja": "It’s a great example of redistribution of wealth based on solidarity and enabled by today's technology.", + "ruben": "I contribute to Social Income not only because it's simple, but because research has shown it's extremely effective.", + "han": "The question is not why to get involved, but how to possibly abide not doing so. Social Income is an urgent necessity in contemporary society.", + "claudia": "Today's global inequality is the consequence of centuries of unequal progress. Social Income is a new way to address this." + } + }, + "recipients": { + "header": "Recipients", + "title-1": "We work where we can make an impact. ", + "title-2": "Sierra Leone.", + "subtitle": "As of March 2020, recipients in Sierra Leone each get USD 30 per month, guaranteed for three years.", + "our-criteria": "Our criteria", + "item-1": { + "title": "Low-Income Country", + "text": "We've started helping recipients in Sierra Leone, one of the poorest countries on Earth. There, a small donation can go a long way.", + "caption": "Average income in Sierra Leone is USD 42.5 per month – World Bank, 2022 (GNI per capita, Atlas method and PPP)" + }, + "item-2": { + "title": "Low-Income Community", + "text": "For the selection of recipients, we collaborate with local NGOs who support vulnerable and disadvantaged communities.", + "caption": "Partners: Aurora, Jamil & Nyanga Jaward, Reachout Salone, Equal Rights Alliance, Polio B&S Organisation, Freetown City Council" + }, + "item-3": { + "title": "Age and Gender Parity", + "text": "Recipients have to be older than 16 years old. We also strive for gender equality among recipients.", + "caption": "" + }, + "voices": "Voices", + "portraits": { + "kai": "I use Social Income to help manage my finances. With the first payment I received, I was able to buy new crutches that I’ve used ever since.", + "aminata": "I crush stones into gravel for a living. This is hard work with a salary that doesn’t make it easy to raise four children with. I just want to say thank you for the monthly support.", + "gbassay": "Social Income made it possible for me to buy school supplies and send my child to school. Thank you for everything you’ve done to help!", + "lamin": "Social Income helps both me and my entire family.", + "onikeh": "Social Income has helped me immensely. It serves as an extra source of strength to draw from in our everyday lives. It feels amazing to have people support and believe in your dreams.", + "neneh": "I use my monthly Social Income to invest in my small business and pay for lunch for my kids at school. It makes me so happy I could cry!" + } + }, + "whats-next": { + "header": "What's next?", + "title-1": "We take things ", + "title-2": "one step at a time.", + "subtitle": "Social Income’s long-term goal is to create a global system of wealth redistribution for people in need, with the help of contributors from all around the world. Like any ambitious project, it takes time to scale.", + "timeline": { + "item-1": { + "title": "March 2020", + "text": "We started our Pilot Phase and paid out the first installments to a small community in Freetown, Sierra Leone." + }, + "item-2": { + "title": "September 2021", + "text": "We started our Development Phase and optimized our payment process." + }, + "item-3": { + "title": "January 2022", + "text": "We reached our Public Phase and have since been progressively rolling out Social Income to recipients and contributors on a larger scale." + }, + "item-4": { + "title": "Upcoming: Impact Measurement", + "text": "We have established a method and a set of qualitative and quantitative criteria to measure the project’s impact. We are now collecting essential data and refining our method with the help of our recipients." + } + } } } diff --git a/ui/src/components/typography/typography.tsx b/ui/src/components/typography/typography.tsx index a9a21fc4d..5f339233b 100644 --- a/ui/src/components/typography/typography.tsx +++ b/ui/src/components/typography/typography.tsx @@ -7,10 +7,10 @@ import IntrinsicElements = React.JSX.IntrinsicElements; export type FontSize = Extract; const FONT_SIZE_MAP: { [key in FontSize]: string } = { - '5xl': 'text-5xl lg:text-6xl lg:tracking-tight xl:text-7xl', - '4xl': 'text-4xl lg:text-4xl lg:tracking-tight xl:text-5xl', - '3xl': 'text-3xl lg:text-3xl lg:tracking-tight', - '2xl': 'text-2xl tracking-tight', + '5xl': 'text-5xl', + '4xl': 'text-4xl', + '3xl': 'text-3xl', + '2xl': 'text-2xl', xl: 'text-xl', lg: 'text-lg', md: 'text-base', @@ -18,34 +18,42 @@ const FONT_SIZE_MAP: { [key in FontSize]: string } = { xs: 'text-xs', }; -const FONT_WEIGHTS = ['normal', 'medium', 'bold'] as const; +const FONT_WEIGHTS = ['normal', 'medium', 'semibold', 'bold'] as const; export type FontWeight = (typeof FONT_WEIGHTS)[number]; const FONT_WEIGHT_MAP: { [key in FontWeight]: string } = { normal: 'font-normal', medium: 'font-medium', + semibold: 'font-semibold', bold: 'font-bold', }; const FONT_COLOR_MAP: { [key in FontColor]: string } = { + background: 'text-background', foreground: 'text-foreground', + 'si-yellow': 'text-si-yellow', + primary: 'text-primary', 'primary-foreground': 'text-primary-foreground', + secondary: 'text-secondary', 'secondary-foreground': 'text-secondary-foreground', + accent: 'text-accent', 'accent-foreground': 'text-accent-foreground', + destructive: 'text-destructive', 'destructive-foreground': 'text-destructive-foreground', + muted: 'text-muted', 'muted-foreground': 'text-muted-foreground', + popover: 'text-popover', 'popover-foreground': 'text-popover-foreground', - 'card-foreground': 'text-card-foreground', }; const LINE_HEIGHTS = ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'] as const; export type LineHeight = (typeof LINE_HEIGHTS)[number]; const LINE_HEIGHT_MAP: { [key in LineHeight]: string } = { - none: 'xs:leading-none sm:leading-none md:leading-none lg:leading-none xl:leading-none', - tight: 'xs:leading-tight sm:leading-tight md:leading-tight lg:leading-tight xl:leading-tight', - snug: 'xs:leading-snug sm:leading-snug md:leading-snug lg:leading-snug xl:leading-snug', - normal: 'xs:leading-normal sm:leading-normal md:leading-normal lg:leading-normal xl:leading-normal', - relaxed: 'xs:leading-relaxed sm:leading-relaxed md:leading-relaxed lg:leading-relaxed xl:leading-relaxed', - loose: 'xs:leading-loose sm:leading-loose md:leading-loose lg:leading-loose xl:leading-loose', + none: 'leading-none', + tight: 'leading-tight', + snug: 'leading-snug', + normal: 'leading-normal', + relaxed: 'leading-relaxed', + loose: 'leading-loose', }; type ElementType = keyof Pick; diff --git a/ui/src/interfaces/color.ts b/ui/src/interfaces/color.ts index 5c4d373a6..4667048ce 100644 --- a/ui/src/interfaces/color.ts +++ b/ui/src/interfaces/color.ts @@ -33,13 +33,20 @@ export type Color = (typeof COLORS)[number]; export type FontColor = Extract< Color, | 'foreground' + | 'background' + | 'si-yellow' + | 'primary' | 'primary-foreground' + | 'secondary' | 'secondary-foreground' - | 'accent-foreground' + | 'destructive' | 'destructive-foreground' + | 'muted' | 'muted-foreground' + | 'accent' + | 'accent-foreground' + | 'popover' | 'popover-foreground' - | 'card-foreground' >; export type BackgroundColor = Extract< diff --git a/website/src/app/[lang]/[country]/(website)/(home)/(assets)/deza.svg b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/deza.svg new file mode 100644 index 000000000..edeb18dd1 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/deza.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/app/[lang]/[country]/(website)/(home)/house.gif b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/house.gif similarity index 100% rename from website/src/app/[lang]/[country]/(website)/(home)/house.gif rename to website/src/app/[lang]/[country]/(website)/(home)/(assets)/house.gif diff --git a/website/src/app/[lang]/[country]/(website)/(home)/(assets)/innosuisse.svg b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/innosuisse.svg new file mode 100644 index 000000000..1e646c683 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/innosuisse.svg @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/app/[lang]/[country]/(website)/(home)/(assets)/lia.svg b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/lia.svg new file mode 100644 index 000000000..07be8831c --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/lia.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/app/[lang]/[country]/(website)/(home)/sdg-logo.svg b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/sdg-logo.svg similarity index 100% rename from website/src/app/[lang]/[country]/(website)/(home)/sdg-logo.svg rename to website/src/app/[lang]/[country]/(website)/(home)/(assets)/sdg-logo.svg diff --git a/website/src/app/[lang]/[country]/(website)/(home)/(assets)/whatsapp.svg b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/whatsapp.svg new file mode 100644 index 000000000..d28889e44 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/(home)/(assets)/whatsapp.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/app/[lang]/[country]/(website)/(home)/page.tsx b/website/src/app/[lang]/[country]/(website)/(home)/page.tsx index 0d3a4c4e1..02193c817 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/page.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/page.tsx @@ -6,6 +6,7 @@ import Section3 from './section-3'; import Section4 from './section-4'; import Section5 from './section-5'; import Section6 from './section-6'; +import Section7 from './section-7'; export default async function Page(props: DefaultPageProps) { const translator = await Translator.getInstance({ language: props.params.lang, namespaces: 'website-home' }); @@ -26,6 +27,7 @@ export default async function Page(props: DefaultPageProps) { + ); } diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-1.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-1.tsx index 7043c87c2..334a5d128 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-1.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-1.tsx @@ -10,21 +10,19 @@ export default async function Section1({ params }: DefaultPageProps) { }); return ( - -
-
- - {translator.t('section-1.title-1')} - - {translator.t('section-1.title-2')} - - {translator.t('section-1.title-3')} + +
+ + {translator.t('section-1.title-1')} + + {translator.t('section-1.title-2')} -
-
- {translator.t('section-1.income-text')} - -
+ {translator.t('section-1.title-3')} + +
+
+ {translator.t('section-1.income-text')} +
); diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-2.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-2.tsx index 268eb1d48..32a77ca2d 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-2.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-2.tsx @@ -4,7 +4,7 @@ import { VimeoVideoComponent } from '@/components/VimeoVideoComponent'; import { PlayCircleIcon } from '@heroicons/react/24/outline'; import { BaseContainer, Dialog, DialogContent, DialogTrigger, Typography } from '@socialincome/ui'; import Image from 'next/image'; -import houseGif from './house.gif'; +import houseGif from './(assets)/house.gif'; type Section2Props = { vimeoVideoId: number; @@ -18,38 +18,39 @@ type Section2Props = { export default function Section2({ vimeoVideoId, translations }: Section2Props) { return ( - -
-
- - {translations.title1} - - - {translations.title2} - - - {translations.subtitle1} - -
-
- - - House Animation for Video Preview - - - {translations.videoButton} - - - - - - -
+ +
+ + {translations.title1} + + + {translations.title2} + + + {translations.subtitle1} + +
+
+ + + House Animation for Video Preview + + + {translations.videoButton} + + + + + +
); diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-3.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-3.tsx index 36334f39a..a71cd4268 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-3.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-3.tsx @@ -3,11 +3,9 @@ import { BaseContainer, Typography } from '@socialincome/ui'; export default function Section3({ params }: DefaultPageProps) { return ( - -
-
- Who should, if not us here in Switzerland? -
+ +
+ Who should, if not us here in Switzerland?
); diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-4.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-4.tsx index 0a8176203..485801adc 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-4.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-4.tsx @@ -9,26 +9,24 @@ export default async function Section4({ params }: DefaultPageProps) { }); return ( - -
-

- - {translator.t('section-4.title-1')} - - - {translator.t('section-4.title-2')} - -

-
- - {translator.t('section-4.subtitle')} - -
- {translator.t('section-4.paragraph-1')} - {translator.t('section-4.paragraph-2')} - {translator.t('section-4.paragraph-3')} - {translator.t('section-4.paragraph-4')} -
+ +

+ + {translator.t('section-4.title-1')} + + + {translator.t('section-4.title-2')} + +

+
+ + {translator.t('section-4.subtitle')} + +
+ {translator.t('section-4.paragraph-1')} + {translator.t('section-4.paragraph-2')} + {translator.t('section-4.paragraph-3')} + {translator.t('section-4.paragraph-4')}
diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-5-card.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-5-card.tsx index a94309383..7effbb39e 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-5-card.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-5-card.tsx @@ -67,7 +67,7 @@ export function SectionCard({ titles, items = [], paragraphs = [], articles = []
{article.author} - {article.title} + {article.title}
))} @@ -83,7 +83,7 @@ export function SectionCard({ titles, items = [], paragraphs = [], articles = [] {faqs.map((faq, index) => (
- {faq.question} + {faq.question}
))} diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-5.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-5.tsx index 77e8c7c0f..c6ea5197b 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-5.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-5.tsx @@ -10,153 +10,154 @@ export default async function Section5({ params }: DefaultPageProps) { }); return ( - -
- - {translator?.t('section-5.title')} - -
- + + + {translator?.t('section-5.title')} + +
+ - + - -
+
); diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-6-card.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-6-card.tsx index 196a4f567..102423bab 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-6-card.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-6-card.tsx @@ -11,7 +11,7 @@ import { Typography, } from '@socialincome/ui'; import Image from 'next/image'; -import sdgLogo from './sdg-logo.svg'; +import sdgLogo from './(assets)/sdg-logo.svg'; type SectionCardProps = { title: string; @@ -23,15 +23,15 @@ export function SectionCard({ title, description, paragraphs = [] }: SectionCard return ( - + - + {title}
-
+
{description} diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-6.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-6.tsx index e363a1d72..db17ba575 100644 --- a/website/src/app/[lang]/[country]/(website)/(home)/section-6.tsx +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-6.tsx @@ -10,28 +10,26 @@ export default async function Section6({ params }: DefaultPageProps) { }); return ( - -
-

- - {translator.t('section-6.title-1')} - - - {translator.t('section-6.title-2')} - -

-
- - -
+ +

+ + {translator.t('section-6.title-1')} + + + {translator.t('section-6.title-2')} + +

+
+ +
); diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-7-carousel.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-7-carousel.tsx new file mode 100644 index 000000000..a9d18f99b --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-7-carousel.tsx @@ -0,0 +1,48 @@ +'use client'; + +import { Carousel, CarouselContent } from '@socialincome/ui'; +import Image from 'next/image'; + +import { useScreenSize } from '@/hooks/useScreenSize'; +import dezaSVG from './(assets)/deza.svg'; +import innosuissseSVG from './(assets)/innosuisse.svg'; +import liaSVG from './(assets)/lia.svg'; +import whatsappSVG from './(assets)/whatsapp.svg'; + +export function Section7Carousel() { + const screenSize = useScreenSize(); + + const logos = [ + { logo: liaSVG, name: 'LIA' }, + { logo: whatsappSVG, name: 'WhatsApp' }, + { logo: innosuissseSVG, name: 'Innosuisse' }, + { logo: dezaSVG, name: 'DEZA' }, + ]; + + let slidesToScroll; + switch (screenSize) { + case 'xs': + slidesToScroll = 1; + break; + default: + slidesToScroll = 2; + break; + } + + return ( + + {logos.map((entry, index) => ( + + {`${entry.name} + + ))} + + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/(home)/section-7.tsx b/website/src/app/[lang]/[country]/(website)/(home)/section-7.tsx new file mode 100644 index 000000000..77ea20e05 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/(home)/section-7.tsx @@ -0,0 +1,28 @@ +import { DefaultPageProps } from '@/app/[lang]/[country]'; +import { Section7Carousel } from '@/app/[lang]/[country]/(website)/(home)/section-7-carousel'; +import { Translator } from '@socialincome/shared/src/utils/i18n'; +import { BaseContainer, Typography } from '@socialincome/ui'; + +export default async function Section7({ params }: DefaultPageProps) { + const translator = await Translator.getInstance({ + language: params.lang, + namespaces: ['website-home'], + }); + + return ( + +

+ + {translator.t('section-7.title-1')} + + + {translator.t('section-7.title-2')} + +

+ + {translator.t('section-7.subtitle')} + + + + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/about-us/section-1.tsx b/website/src/app/[lang]/[country]/(website)/about-us/section-1.tsx index 84566799b..4afb12d2b 100644 --- a/website/src/app/[lang]/[country]/(website)/about-us/section-1.tsx +++ b/website/src/app/[lang]/[country]/(website)/about-us/section-1.tsx @@ -18,7 +18,7 @@ export default async function Section1({ params }: DefaultPageProps) { {translator?.t('section-1.title-1')} - + {translator?.t('section-1.title-2')}
diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/aminata.jpeg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/aminata.jpeg new file mode 100644 index 000000000..46fe956c2 Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/aminata.jpeg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/carlos.jpg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/carlos.jpg new file mode 100644 index 000000000..a64faf63d Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/carlos.jpg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/claudia.jpg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/claudia.jpg new file mode 100644 index 000000000..1e59fba3e Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/claudia.jpg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/double-quotes.svg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/double-quotes.svg new file mode 100644 index 000000000..febda5d55 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/double-quotes.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/gbassay.jpeg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/gbassay.jpeg new file mode 100644 index 000000000..314e7bc8a Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/gbassay.jpeg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/han.jpg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/han.jpg new file mode 100644 index 000000000..0075818c6 Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/han.jpg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/kai.jpg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/kai.jpg new file mode 100644 index 000000000..5237213ec Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/kai.jpg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/lamin.jpeg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/lamin.jpeg new file mode 100644 index 000000000..c2db2e178 Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/lamin.jpeg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/map-africa.svg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/map-africa.svg new file mode 100644 index 000000000..be3838e7e --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/map-africa.svg @@ -0,0 +1,773 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/neneh.jpeg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/neneh.jpeg new file mode 100644 index 000000000..20ecc3d3f Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/neneh.jpeg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/onikeh.jpeg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/onikeh.jpeg new file mode 100644 index 000000000..10fa49fdd Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/onikeh.jpeg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/ruben.jpg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/ruben.jpg new file mode 100644 index 000000000..09d6e6945 Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/ruben.jpg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(assets)/vanja.jpg b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/vanja.jpg new file mode 100644 index 000000000..697acee01 Binary files /dev/null and b/website/src/app/[lang]/[country]/(website)/our-work/(assets)/vanja.jpg differ diff --git a/website/src/app/[lang]/[country]/(website)/our-work/section-contributors-carousel.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors-orgs-carousel.tsx similarity index 70% rename from website/src/app/[lang]/[country]/(website)/our-work/section-contributors-carousel.tsx rename to website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors-orgs-carousel.tsx index 297a67536..0c533d138 100644 --- a/website/src/app/[lang]/[country]/(website)/our-work/section-contributors-carousel.tsx +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors-orgs-carousel.tsx @@ -3,15 +3,15 @@ import { useScreenSize } from '@/hooks/useScreenSize'; import { Carousel, CarouselContent } from '@socialincome/ui'; import Image from 'next/image'; -import epflSVG from './(assets)/epfl.svg'; -import govSVG from './(assets)/gov.svg'; -import mckinseySVG from './(assets)/mckinsey.svg'; -import microsoftSVG from './(assets)/microsoft.svg'; -import r17SVG from './(assets)/r17.svg'; -import srgSVG from './(assets)/srg.svg'; -import unSVG from './(assets)/un.svg'; +import epflSVG from '../(assets)/epfl.svg'; +import govSVG from '../(assets)/gov.svg'; +import mckinseySVG from '../(assets)/mckinsey.svg'; +import microsoftSVG from '../(assets)/microsoft.svg'; +import r17SVG from '../(assets)/r17.svg'; +import srgSVG from '../(assets)/srg.svg'; +import unSVG from '../(assets)/un.svg'; -export function SectionContributorsCarousel() { +export function ContributorsOrgsCarousel() { const screenSize = useScreenSize(); const companyLogos = [ @@ -48,7 +48,7 @@ export function SectionContributorsCarousel() { showDots > {companyLogos.map((entry, index) => ( - + {`${entry.name} ))} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors-people-carousel.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors-people-carousel.tsx new file mode 100644 index 000000000..83627aad7 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors-people-carousel.tsx @@ -0,0 +1,73 @@ +'use client'; + +import { useScreenSize } from '@/hooks/useScreenSize'; +import { MapPinIcon } from '@heroicons/react/24/solid'; +import { Card, CardContent, CardFooter, CardHeader, Carousel, CarouselContent, Typography } from '@socialincome/ui'; +import { StaticImport } from 'next/dist/shared/lib/get-img-props'; +import Image from 'next/image'; +import doubleQuotesSVG from '../(assets)/double-quotes.svg'; + +type PortraitProps = { + name: string; + text: string; + country: string; + image: string | StaticImport; +}; + +function Portrait({ name, text, country, image }: PortraitProps) { + return ( + + + Double quotes + + + {text} + + + {`${name} +
+ {name} +
+ + {country} +
+
+ + + ); +} + +export function ContributorsPeopleCarousel({ portraits }: { portraits: PortraitProps[] }) { + const screenSize = useScreenSize(); + + let slidesToScroll; + switch (screenSize) { + case 'xs': + slidesToScroll = 1; + break; + case 'sm': + case 'md': + slidesToScroll = 2; + break; + default: + slidesToScroll = 3; + break; + } + + return ( + + {portraits.map((portrait, index) => ( + + + + ))} + + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors.tsx new file mode 100644 index 000000000..2f18dc0f5 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/contributors.tsx @@ -0,0 +1,84 @@ +import { DefaultPageProps } from '@/app/[lang]/[country]'; +import { ContributorsOrgsCarousel } from '@/app/[lang]/[country]/(website)/our-work/(sections)/contributors-orgs-carousel'; +import { ContributorsPeopleCarousel } from '@/app/[lang]/[country]/(website)/our-work/(sections)/contributors-people-carousel'; +import { Translator } from '@socialincome/shared/src/utils/i18n'; +import { BaseContainer, Typography } from '@socialincome/ui'; +import carlosImg from '../(assets)/carlos.jpg'; +import claudiaImage from '../(assets)/claudia.jpg'; +import hanImage from '../(assets)/han.jpg'; +import rubenImage from '../(assets)/ruben.jpg'; +import vanjaImg from '../(assets)/vanja.jpg'; + +export async function Contributors({ params }: DefaultPageProps) { + const translator = await Translator.getInstance({ + language: params.lang, + namespaces: ['countries', 'website-our-work'], + }); + + return ( + +
+ + {translator.t('contributors.header-1')} + + + {translator.t('contributors.title-1')} + + + {translator.t('contributors.text-1')} + + +
+ +
+ + {translator.t('contributors.header-2')} + + + {translator.t('contributors.title-2')} + + + {translator.t('contributors.text-2')} + + +
+ + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/how-it-works.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/how-it-works.tsx new file mode 100644 index 000000000..691370bec --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/how-it-works.tsx @@ -0,0 +1,53 @@ +import { DefaultPageProps } from '@/app/[lang]/[country]'; +import { CheckCircleIcon } from '@heroicons/react/24/outline'; +import { Translator } from '@socialincome/shared/src/utils/i18n'; +import { BaseContainer, Typography } from '@socialincome/ui'; +import _ from 'lodash'; +import Image from 'next/image'; +import phonesGif from '../(assets)/phones-2.gif'; + +export async function HowItWorks({ params }: DefaultPageProps) { + const translator = await Translator.getInstance({ + language: params.lang, + namespaces: ['website-our-work'], + }); + + return ( + +
+ + {translator.t('how-it-works.header')} + +

+ + {translator.t('how-it-works.title-1')} + + + {translator.t('how-it-works.title-2')} + +

+ {translator.t('how-it-works.text')} +
+
+ Change animation +
+ + {translator.t('how-it-works.subtitle')} + +
    + {_.range(1, 5).map((i) => ( +
  • + + {translator.t(`how-it-works.item-${i}`)} +
    • + ))} +
+
+
+ + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/our-work.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/our-work.tsx new file mode 100644 index 000000000..3e738f287 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/our-work.tsx @@ -0,0 +1,42 @@ +import { DefaultPageProps } from '@/app/[lang]/[country]'; +import { VimeoVideoComponent } from '@/components/VimeoVideoComponent'; +import { Translator } from '@socialincome/shared/src/utils/i18n'; +import { BaseContainer, Dialog, DialogContent, DialogTrigger, Typography } from '@socialincome/ui'; +import Image from 'next/image'; +import phonesGif from '../(assets)/phones-1.gif'; + +export async function OurWork({ params }: DefaultPageProps) { + const translator = await Translator.getInstance({ + language: params.lang, + namespaces: ['website-our-work'], + }); + + return ( + + + + Change animation +
+

+ + {translator?.t('our-work.title-1')} + + + {translator?.t('our-work.title-2')} + +

+ {translator.t('our-work.subtitle')} +
+ + + + + + + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/recipients-carousel.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/recipients-carousel.tsx new file mode 100644 index 000000000..a4bd9d9b5 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/recipients-carousel.tsx @@ -0,0 +1,62 @@ +'use client'; + +import { MapPinIcon } from '@heroicons/react/24/solid'; +import { Card, Carousel, CarouselContent, Typography } from '@socialincome/ui'; +import { StaticImport } from 'next/dist/shared/lib/get-img-props'; +import Image from 'next/image'; +import doubleQuotesSVG from '../(assets)/double-quotes.svg'; + +type PortraitProps = { + name: string; + text: string; + image: string | StaticImport; + country: string; +}; + +function Portrait({ name, text, country, image }: PortraitProps) { + return ( + +
+ {`${name} +
+
+ double quotes + + {text} + +
+ {name} +
+ + + {country} + +
+
+
+ + ); +} + +export function RecipientsCarousel({ portraits }: { portraits: PortraitProps[] }) { + return ( + + {portraits.map((portrait, index) => ( + + + + ))} + + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/recipients.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/recipients.tsx new file mode 100644 index 000000000..6eb0d796f --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/recipients.tsx @@ -0,0 +1,115 @@ +import { DefaultPageProps } from '@/app/[lang]/[country]'; +import mapAfrica from '@/app/[lang]/[country]/(website)/our-work/(assets)/map-africa.svg'; +import { RecipientsCarousel } from '@/app/[lang]/[country]/(website)/our-work/(sections)/recipients-carousel'; +import { CheckCircleIcon } from '@heroicons/react/24/outline'; +import { Translator } from '@socialincome/shared/src/utils/i18n'; +import { BaseContainer, Typography } from '@socialincome/ui'; +import _ from 'lodash'; +import Image from 'next/image'; +import aminataImg from '../(assets)/aminata.jpeg'; +import gbassayImg from '../(assets)/gbassay.jpeg'; +import kaiImg from '../(assets)/kai.jpg'; +import laminImg from '../(assets)/lamin.jpeg'; +import nenehImg from '../(assets)/neneh.jpeg'; +import onikehImg from '../(assets)/onikeh.jpeg'; + +export async function Recipients({ params }: DefaultPageProps) { + const translator = await Translator.getInstance({ + language: params.lang, + namespaces: ['countries', 'website-our-work'], + }); + + return ( + +
+ + {translator.t('recipients.header')} + +

+ + {translator.t('recipients.title-1')} + + + {translator.t('recipients.title-2')} + +

+ {translator.t('recipients.subtitle')} +
+ +
+ Change animation +
+ + {translator.t('recipients.our-criteria')} + +
    + {_.range(1, 4).map((i) => ( +
  • + +
    + + {translator.t(`recipients.item-${i}.title`)} + + {translator.t(`recipients.item-${i}.text`)} + + {translator.t(`recipients.item-${i}.caption`)} + +
    +
    • + ))} +
+
+
+ +
+ + {translator.t('recipients.voices')} + + +
+ + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/(sections)/whats-next.tsx b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/whats-next.tsx new file mode 100644 index 000000000..ef35b7fb0 --- /dev/null +++ b/website/src/app/[lang]/[country]/(website)/our-work/(sections)/whats-next.tsx @@ -0,0 +1,93 @@ +import { DefaultPageProps } from '@/app/[lang]/[country]'; +import { CheckIcon, ListBulletIcon } from '@heroicons/react/24/solid'; +import { Translator } from '@socialincome/shared/src/utils/i18n'; +import { BaseContainer, Typography } from '@socialincome/ui'; +import classNames from 'classnames'; + +export async function WhatsNext({ params }: DefaultPageProps) { + const translator = await Translator.getInstance({ + language: params.lang, + namespaces: ['website-our-work'], + }); + + const timeline = [ + { + title: translator.t('whats-next.timeline.item-1.title'), + text: translator.t('whats-next.timeline.item-1.text'), + Icon: CheckIcon, + iconColor: 'text-green-500', + }, + { + title: translator.t('whats-next.timeline.item-2.title'), + text: translator.t('whats-next.timeline.item-2.text'), + Icon: CheckIcon, + iconColor: 'text-green-500', + }, + { + title: translator.t('whats-next.timeline.item-3.title'), + text: translator.t('whats-next.timeline.item-3.text'), + Icon: CheckIcon, + iconColor: 'text-green-500', + }, + { + title: translator.t('whats-next.timeline.item-4.title'), + text: translator.t('whats-next.timeline.item-4.text'), + Icon: ListBulletIcon, + iconColor: 'text-secondary', + }, + ]; + + return ( + +
+ + {translator.t('whats-next.header')} + +

+ + {translator.t('whats-next.title-1')} + + + {translator.t('whats-next.title-2')} + +

+ {translator.t('whats-next.subtitle')} +
+ +
    + {timeline.map(({ Icon, iconColor, title, text }, index) => ( +
  • +
    + {index !== timeline.length - 1 ? ( +
    • + ))} +
+ + ); +} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/page.tsx b/website/src/app/[lang]/[country]/(website)/our-work/page.tsx index 914526110..6e9fe3846 100644 --- a/website/src/app/[lang]/[country]/(website)/our-work/page.tsx +++ b/website/src/app/[lang]/[country]/(website)/our-work/page.tsx @@ -1,14 +1,18 @@ import { DefaultPageProps } from '@/app/[lang]/[country]'; -import { SectionContributors } from './section-contributors'; -import { SectionHowItWorks } from './section-how-it-works'; -import { SectionOurWork } from './section-our-work'; +import { Contributors } from './(sections)/contributors'; +import { HowItWorks } from './(sections)/how-it-works'; +import { OurWork } from './(sections)/our-work'; +import { Recipients } from './(sections)/recipients'; +import { WhatsNext } from './(sections)/whats-next'; export default async function Page(props: DefaultPageProps) { return ( <> - - - + + + + + ); } diff --git a/website/src/app/[lang]/[country]/(website)/our-work/section-contributors.tsx b/website/src/app/[lang]/[country]/(website)/our-work/section-contributors.tsx deleted file mode 100644 index 541d0f45a..000000000 --- a/website/src/app/[lang]/[country]/(website)/our-work/section-contributors.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { DefaultPageProps } from '@/app/[lang]/[country]'; -import { SectionContributorsCarousel } from '@/app/[lang]/[country]/(website)/our-work/section-contributors-carousel'; -import { Translator } from '@socialincome/shared/src/utils/i18n'; -import { BaseContainer, Typography } from '@socialincome/ui'; - -export async function SectionContributors({ params }: DefaultPageProps) { - const translator = await Translator.getInstance({ - language: params.lang, - namespaces: ['website-our-work'], - }); - - return ( - -
- - {translator.t('section-contributors.header-1')} - - - {translator.t('section-contributors.title-1')} - - - {translator.t('section-contributors.text-1')} - - -
- -
- - {translator.t('section-contributors.header-2')} - - - {translator.t('section-contributors.title-2')} - - - {translator.t('section-contributors.text-2')} - -
- - ); -} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/section-how-it-works.tsx b/website/src/app/[lang]/[country]/(website)/our-work/section-how-it-works.tsx deleted file mode 100644 index 77ceadceb..000000000 --- a/website/src/app/[lang]/[country]/(website)/our-work/section-how-it-works.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { DefaultPageProps } from '@/app/[lang]/[country]'; -import { CheckCircleIcon } from '@heroicons/react/24/outline'; -import { Translator } from '@socialincome/shared/src/utils/i18n'; -import { BaseContainer, Typography } from '@socialincome/ui'; -import _ from 'lodash'; -import Image from 'next/image'; -import phonesGif from './(assets)/phones-2.gif'; - -export async function SectionHowItWorks({ params }: DefaultPageProps) { - const translator = await Translator.getInstance({ - language: params.lang, - namespaces: ['website-our-work'], - }); - - return ( - -
- - {translator.t('section-how-it-works.title')} - -
- Change animation -
- - {translator.t('section-how-it-works.subtitle')} - -
    - {_.range(1, 5).map((i) => ( -
  • - - {translator.t(`section-how-it-works.item-${i}`)} -
    • - ))} -
-
-
-
- - ); -} diff --git a/website/src/app/[lang]/[country]/(website)/our-work/section-our-work.tsx b/website/src/app/[lang]/[country]/(website)/our-work/section-our-work.tsx deleted file mode 100644 index 850eefe38..000000000 --- a/website/src/app/[lang]/[country]/(website)/our-work/section-our-work.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { DefaultPageProps } from '@/app/[lang]/[country]'; -import { VimeoVideoComponent } from '@/components/VimeoVideoComponent'; -import { Translator } from '@socialincome/shared/src/utils/i18n'; -import { BaseContainer, Dialog, DialogContent, DialogTrigger, Typography } from '@socialincome/ui'; -import Image from 'next/image'; -import phonesGif from './(assets)/phones-1.gif'; - -export async function SectionOurWork({ params }: DefaultPageProps) { - const translator = await Translator.getInstance({ - language: params.lang, - namespaces: ['website-our-work'], - }); - - return ( - - - - Change animation -

- - {translator?.t('section-our-work.title-1')} - - - {translator?.t('section-our-work.title-2')} - -

- - - - - - - ); -} diff --git a/website/src/components/navbar/navbar.tsx b/website/src/components/navbar/navbar.tsx index 5fdd52cd5..1f2cefe44 100644 --- a/website/src/components/navbar/navbar.tsx +++ b/website/src/components/navbar/navbar.tsx @@ -49,6 +49,11 @@ export default async function Navbar({ lang, country, supportedLanguages }: Navb href: `/${lang}/${country}/our-work#recipients`, description: translator.t('navigation.recipients-description'), }, + { + title: translator.t('navigation.whats-next'), + href: `/${lang}/${country}/our-work#whats-next`, + description: translator.t('navigation.whats-next-description'), + }, ], }, {