feature(website): new layout small adjustments (#918)

socialincome-san · Oct 13, 2024 · 671a26e · 671a26e
1 parent 1e22206
commit 671a26e
Show file tree

Hide file tree

Showing 19 changed files with 35 additions and 22 deletions.
diff --git a/shared/locales/de/website-about-us.json b/shared/locales/de/website-about-us.json
@@ -99,7 +99,8 @@
 			"impact-measurement": "Impact Measurement",
 			"strategy": "Strategie",
 			"fundraising": "Fundraising",
-			"translations": "Übersetzungen"
+			"translations": "Übersetzungen",
+			"research": "Forschung"
 		},
 		"groups": {
 			"staff": {

diff --git a/shared/locales/de/website-common.json b/shared/locales/de/website-common.json
@@ -36,7 +36,7 @@
 		"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>.",
+		"text": "Wir verwenden <a href='/legal/privacy' class='underline'>Cookies</a>.",
 		"button-accept": "Akzeptieren",
 		"button-refuse": "Ablehnen"
 	}

diff --git a/shared/locales/en/website-about-us.json b/shared/locales/en/website-about-us.json
@@ -99,7 +99,8 @@
 			"impact-measurement": "Impact Measurement",
 			"strategy": "Strategy",
 			"fundraising": "Fundraising",
-			"translations": "Translations"
+			"translations": "Translations",
+			"research": "Research"
 		},
 		"groups": {
 			"staff": {

diff --git a/shared/locales/en/website-common.json b/shared/locales/en/website-common.json
@@ -36,7 +36,7 @@
 		"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>.",
+		"text": "We use <a href='/legal/privacy' class='underline'>cookies</a>.",
 		"button-accept": "Accept",
 		"button-refuse": "Refuse"
 	}

diff --git a/shared/locales/fr/website-about-us.json b/shared/locales/fr/website-about-us.json
@@ -99,7 +99,8 @@
 			"impact-measurement": "Mesure d’impact",
 			"strategy": "Stratégie",
 			"fundraising": "Recherche de fonds",
-			"translations": "Traductions"
+			"translations": "Traductions",
+			"research": "Recherche"
 		},
 		"groups": {
 			"staff": {

diff --git a/shared/locales/fr/website-common.json b/shared/locales/fr/website-common.json
@@ -36,7 +36,7 @@
 		"newsletter": "Newsletter"
 	},
 	"cookie-consent-banner": {
-		"text": "Pouvons-nous utiliser des cookies pour analyser le trafic et les performances de notre site web ? Nous ne collectons jamais de données personnelles. <a href='/legal/privacy' class='underline'>Politique de confidentialité.</a>.",
+		"text": "Nous utilisons des <a href='/legal/privacy' class='underline'>cookies</a>.",
 		"button-accept": "Accepter",
 		"button-refuse": "Refuser"
 	}

diff --git a/shared/locales/it/website-about-us.json b/shared/locales/it/website-about-us.json
@@ -98,7 +98,8 @@
 			"app-development": "Sviluppo dell'App",
 			"impact-measurement": "Misurazione dell'Impatto",
 			"strategy": "Strategia",
-			"translations": "Traduzioni"
+			"translations": "Traduzioni",
+			"research": "Ricerca"
 		},
 		"groups": {
 			"staff": {

diff --git a/shared/locales/it/website-common.json b/shared/locales/it/website-common.json
@@ -39,7 +39,7 @@
 		"about-us": "Chi Siamo"
 	},
 	"cookie-consent-banner": {
-		"text": "Ci permetti di utilizzare i cookie per analizzare il traffico e le prestazioni del nostro sito web? Non raccogliamo mai dati personali. <a href='/privacy' class='underline'>Informativa sulla Privacy</a>.",
+		"text": "Utilizziamo i <a href='/privacy' class='underline'>cookie</a>.",
 		"button-accept": "Accetto",
 		"button-refuse": "Rifiuto"
 	}

diff --git a/ui/src/components/button.tsx b/ui/src/components/button.tsx
@@ -18,7 +18,7 @@ const buttonVariants = cva(
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary-muted font-medium',
 				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive-muted font-medium',
-				outline: 'border border-input bg-background hover:bg-muted font-medium',
+				outline: 'border border-primary bg-background hover:bg-muted font-medium',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-muted font-medium',
 				ghost: 'hover:bg-muted font-normal',
 				link: 'text-primary underline-offset-4 hover:underline p-0 font-normal',

diff --git a/website/src/app/[lang]/[region]/(website)/(home)/(components)/contributors-carousel.tsx b/website/src/app/[lang]/[region]/(website)/(home)/(components)/contributors-carousel.tsx
@@ -19,8 +19,8 @@ function Portrait({ name, text, country, image }: PortraitProps) {
 				<Typography size="2xl" weight="normal" color="foreground">
 					{text}
 				</Typography>
-				<div className="flex">
-					<Image className="h-14 w-14 rounded-full bg-gray-50" src={image} alt={`${name} Image`} />
+				<div className="flex items-center">
+					<Image className="mr-4 h-14 w-14 rounded-full bg-gray-50" src={image} alt={`${name} Image`} />
 					<Typography size="sm" color="foreground">
 						{name}, {country}
 					</Typography>

diff --git a/website/src/app/[lang]/[region]/(website)/(home)/(components)/income-input.tsx b/website/src/app/[lang]/[region]/(website)/(home)/(components)/income-input.tsx
@@ -97,7 +97,7 @@ export function IncomeInput({ translations }: { translations: { buttonText: stri
 						)}
 					/>
 				</div>
-				<Button type="submit" className="mx-auto mt-10 hidden md:block">
+				<Button type="submit" className="mx-auto mt-10 md:block">
 					{translations.buttonText}
 				</Button>
 			</form>

diff --git a/website/src/app/[lang]/[region]/(website)/(home)/(sections)/overview.tsx b/website/src/app/[lang]/[region]/(website)/(home)/(sections)/overview.tsx
@@ -10,7 +10,7 @@ export async function Overview({ lang }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="mx-auto mb-16 flex w-4/5 flex-col items-center justify-center md:mb-48 lg:w-3/5">
+		<BaseContainer className="mx-auto mb-16 mt-8 flex w-4/5 flex-col items-center justify-center md:mb-48 md:mt-16 lg:w-3/5">
 			<Typography size="3xl" weight="medium" className="my-10 text-center">
 				{translator.t('section-2.title-1')}
 			</Typography>

diff --git a/website/src/app/[lang]/[region]/(website)/(home)/(sections)/testimonials.tsx b/website/src/app/[lang]/[region]/(website)/(home)/(sections)/testimonials.tsx
@@ -14,7 +14,7 @@ export async function Testimonials({ lang }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="my-16">
+		<BaseContainer className="my-40">
 			<ContributorsCarousel
 				portraits={[
 					{

diff --git a/website/src/app/[lang]/[region]/(website)/(home)/page.tsx b/website/src/app/[lang]/[region]/(website)/(home)/page.tsx
@@ -12,7 +12,7 @@ import { Overview } from './(sections)/overview';
 
 export default async function Page({ params: { lang, region } }: DefaultPageProps) {
 	return (
-		<div className="-mt-24 md:-mt-36">
+		<div className="-mb-28 -mt-24 md:-mt-36">
 			<HeroVideo lang={lang} region={region} />
 			<Overview lang={lang} region={region} />
 			<MonthlyIncome lang={lang} region={region} />

diff --git a/website/src/app/[lang]/[region]/(website)/about-us/(assets)/karin-berg.jpg b/website/src/app/[lang]/[region]/(website)/about-us/(assets)/karin-berg.jpg
diff --git a/website/src/app/[lang]/[region]/(website)/about-us/(assets)/marc-werner.jpg b/website/src/app/[lang]/[region]/(website)/about-us/(assets)/marc-werner.jpg
diff --git a/website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx b/website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx
@@ -11,10 +11,12 @@ import francoiseImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/fr
 import juanImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/juan.jpeg';
 import juliaImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/julia.jpeg';
 import kabeloImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/kabelo.jpeg';
+import karinImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/karin-berg.jpg';
 import kerrinImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/kerrin.jpeg';
 import larissaImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/larissa.jpeg';
 import lorenzoImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/lorenzo.jpg';
 import mabelImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/mabel.jpeg';
+import marcImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/marc-werner.jpg';
 import mariatuImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/mariatu.jpg';
 import marionImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/marion.jpeg';
 import matthewImage from '@/app/[lang]/[region]/(website)/about-us/(assets)/matthew.jpeg';
@@ -79,6 +81,8 @@ const groups: Group[] = [
 			{ name: 'Thomas Brenner', role: 'software-development', image: thomasImage },
 			{ name: 'Matthew Roberts', role: 'communications', image: matthewImage },
 			{ name: 'Françoise Légeret', role: 'translations', image: francoiseImage },
+			{ name: 'Karin Berg', role: 'app-development', image: karinImage },
+			{ name: 'Marc Werner', role: 'research', image: marcImage },
 		],
 	},
 	{

diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -1,10 +1,15 @@
 import { ContextProviders } from '@/components/providers/context-providers';
 import { getMetadata } from '@/metadata';
+import type { Viewport } from 'next';
 import { PropsWithChildren } from 'react';
 import './globals.css';
 
 export const generateMetadata = () => getMetadata('en', 'website-common');
 
+export const viewport: Viewport = {
+	themeColor: '#3373BB',
+};
+
 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html suppressHydrationWarning={true}>

diff --git a/website/src/components/tracking/cookie-consent-banner.tsx b/website/src/components/tracking/cookie-consent-banner.tsx
@@ -27,18 +27,18 @@ export function CookieConsentBanner({ translations }: CookieConsentBannerClientP
 	if (hideBanner) return null;
 
 	return (
-		<Card className="fixed bottom-2 left-2 right-2 mx-auto max-w-6xl shadow-xl md:left-4 md:right-4">
-			<CardContent className="flex flex-col space-y-2 p-4">
-				<Typography className="md:col-span-3">
+		<Card className="bg-background border-border fixed bottom-2 right-2 mx-auto w-fit max-w-6xl rounded-full px-4 md:right-4">
+			<CardContent className="flex flex-col space-y-2 p-4 md:h-full md:flex-row md:items-center md:justify-between">
+				<Typography className="md:col-span-3 md:mr-4 md:flex-1 md:self-center">
 					<Typography as="span" dangerouslySetInnerHTML={{ __html: translations.text }} />
 				</Typography>
-				<div className="flex space-x-2">
+				<div className="flex space-x-2 pb-1 md:h-full md:flex-none md:flex-row md:items-center md:justify-center md:self-center md:align-middle">
+					<Button variant="outline" onClick={() => setCookieConsent('denied')}>
+						{translations.buttonRefuse}
+					</Button>
 					<Button variant="outline" onClick={() => setCookieConsent('granted')}>
 						{translations.buttonAccept}
 					</Button>
-					<Button variant="destructive" onClick={() => setCookieConsent('denied')}>
-						{translations.buttonRefuse}
-					</Button>
 				</div>
 			</CardContent>
 		</Card>