refactor(website): styling cleanups for hero sections

.github/workflows/deployment.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     if: inputs.component == 'admin'
     env:
-      VITE_WEBSITE_BASE_URL: ${{ (inputs.project == 'social-income-prod' && 'https://prod.socialincome.org') || 'https://staging.socialincome.org' }}
+      VITE_WEBSITE_BASE_URL: ${{ (inputs.project == 'social-income-prod' && 'https://socialincome.org') || 'https://staging.socialincome.org' }}
       VITE_ADMIN_ALGOLIA_APPLICATION_ID: ${{ secrets.REACT_APP_ADMIN_ALGOLIA_APPLICATION_ID }}
       VITE_ADMIN_ALGOLIA_SEARCH_KEY: ${{ secrets.REACT_APP_ADMIN_ALGOLIA_SEARCH_KEY }}
     steps:

recipients_app/.vscode/launch.json

@@ -34,7 +34,7 @@
 			"program": "lib/main.dart",
 			"toolArgs": [
 				"--dart-define",
-				"SURVEY_BASE_URL=prod.socialincome.org",
+				"SURVEY_BASE_URL=socialincome.org",
 			]
 		}
 	]

shared/locales/de/website-about-us.json

@@ -5,13 +5,24 @@
 	"landing-page": {
 		"title": [
 			{
-				"text": "Etwas bewegen, nicht nur darüber sprechen. "
+				"text": "Wir hatten die Möglichkeit, nichts zu tun. "
 			},
 			{
-				"text": "Dies war der Anfang von Social Income.",
+				"text": "Wir haben uns dagegen entschieden.",
 				"color": "secondary"
 			}
-		]
+		],
+		"subtitle": "Die Verbesserung der Lebensbedingungen von Menschen in Armut sehen wir als unsere Verantwortung. Aus dieser Überzeugung heraus wurde Social Income ins Leben gerufen.",
+		"contact": "Kontakt",
+		"contact-title": "Schreib uns an",
+		"contact-email": "[email protected]",
+		"registration": "NGO Registrierung",
+		"registration-title": "Rechtsstatus",
+		"registration-foundation": "Social Income ist eine gemeinnützige Organisation, die 2019 nach schweizerischem Recht gegründet wurde und steuerbefreit ist.",
+		"registration-uid": "UID: ",
+		"registration-uid-nr": "CHE-289.611.695",
+		"registration-duns": "DUNS: ",
+		"registration-duns-nr": "48-045-6376"
 	},
 	"our-mission": {
 		"header": "Unsere Mission",

shared/locales/de/website-our-work.json

@@ -6,9 +6,10 @@
 		"twitter-image": "/assets/metadata/twitter/our-work-de.jpg"
 	},
 	"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.",
+		"title-1": "Veränderung von Mensch zu Mensch. ",
+		"title-2": "Von Telefon zu Telefon.",
+		"subtitle": "Social Income ist ein neuer Weg, um die Armut im Globalen Süden zu bekämpfen. Digital, effizent und zeitgemäss. ",
+		"watch": "Animationsvideo",
 		"vimeo-video-id": "488184818"
 	},
 	"how-it-works": {

shared/locales/en/website-about-us.json

@@ -5,13 +5,24 @@
 	"landing-page": {
 		"title": [
 			{
-				"text": "We wanted to act. We found a way to do it. "
+				"text": "We had the option to do nothing.  "
 			},
 			{
-				"text": "Social Income was born.",
+				"text": "We decided against it.",
 				"color": "secondary"
 			}
-		]
+		],
+		"subtitle": "We believe that improving the lives of people in need is not just a possibility but a responsibility. That's how Social Income was born.",
+		"contact": "Contact Us",
+		"contact-title": "Get in touch",
+		"contact-email": "[email protected]",
+		"registration": "NGO Registration",
+		"registration-title": "Legal status",
+		"registration-foundation": "Social Income is a non-profit organization founded under Swiss law in 2019 with tax exempt status.",
+		"registration-uid": "UID: ",
+		"registration-uid-nr": "CHE-289.611.695",
+		"registration-duns": "DUNS: ",
+		"registration-duns-nr": "48-045-6376"
 	},
 	"our-mission": {
 		"header": "Our Mission",
@@ -54,7 +65,7 @@
 		"header": "Flow of Funds",
 		"title": [
 			{
-				"text": "From Everywhere to the Global South "
+				"text": "From Everywhere to the Global South. "
 			},
 			{
 				"text": "Safe, Fast, and Direct.",

shared/locales/en/website-our-work.json

@@ -6,9 +6,10 @@
 		"twitter-image": "/assets/metadata/twitter/our-work-en.jpg"
 	},
 	"our-work": {
-		"title-1": "Our work is made possible by you. Make a ",
-		"title-2": "change with us.",
+		"title-1": "Change. From phone to phone. ",
+		"title-2": "It's in your hands.",
 		"subtitle": "Social Income is a new way to fight poverty in the Global South, creating real change, from human to human.",
+		"watch": "Watch Animation Video",
 		"vimeo-video-id": "433937157"
 	},
 	"how-it-works": {

ui/src/components/badge.tsx

@@ -11,7 +11,9 @@ const badgeVariants = cva(
 				default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary-muted',
 				secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary-muted',
 				destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive-muted',
-				outline: 'text-foreground',
+				muted: 'border-muted-foreground text-muted-foreground hover:bg-muted-foreground hover:text-muted',
+				outline:
+					'text-primary border-primary hover:bg-primary-muted hover:text-primary-foreground hover:border-primary-muted',
 			},
 		},
 		defaultVariants: {

ui/src/index.ts

@@ -16,6 +16,7 @@ export * from './components/input';
 export * from './components/label';
 export * from './components/menubar';
 export * from './components/navigation-menu';
+export * from './components/popover';
 export * from './components/radio-group';
 export * from './components/select';
 export * from './components/table';

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

@@ -1,8 +1,9 @@
 import { WebsiteLanguage } from '@/i18n';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Typography } from '@socialincome/ui';
+import { Badge, BaseContainer, Button, Popover, PopoverContent, PopoverTrigger, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Image from 'next/image';
+import Link from 'next/link';
 import changeGif from '../(assets)/change.gif';
 
 export default async function LandingPage({ lang }: { lang: WebsiteLanguage }) {
@@ -13,13 +14,88 @@ export default async function LandingPage({ lang }: { lang: WebsiteLanguage }) {
 
 	return (
 		<BaseContainer className="min-h-screen-navbar grid grid-cols-1 content-center items-center gap-16 md:grid-cols-5">
-			<p className="mx-auto max-w-lg md:col-span-3">
+			<div className="mx-auto max-w-lg space-y-5 md:col-span-3">
 				{translator.t<{ text: string; color?: FontColor }[]>('landing-page.title').map((title, index) => (
-					<Typography as="span" key={index} size="5xl" weight="bold" color={title.color}>
+					<Typography as="span" key={index} size="5xl" weight="bold" lineHeight="tight" color={title.color}>
 						{title.text}
 					</Typography>
 				))}
-			</p>
+				<Typography size="2xl" lineHeight="normal">
+					{translator.t('landing-page.subtitle')}
+				</Typography>
+				<div className="flex space-x-2 pt-5">
+					<div>
+						<Popover>
+							<PopoverTrigger>
+								<Badge variant="muted">
+									<Typography size="md" weight="normal" className="p-1">
+										{translator.t('landing-page.contact')}
+									</Typography>
+								</Badge>
+							</PopoverTrigger>
+							<PopoverContent>
+								<div className="space-y-2">
+									<Typography size="md" lineHeight="normal" weight="medium">
+										{translator.t('landing-page.contact-title')}
+									</Typography>
+									<Link href="mailto:[email protected]">
+										<Button variant="link" className="p-0">
+											<Typography size="md" lineHeight="normal" weight="normal">
+												{translator.t('landing-page.contact-email')}
+											</Typography>
+										</Button>
+									</Link>
+								</div>
+							</PopoverContent>
+						</Popover>
+					</div>
+					<div>
+						<Popover>
+							<PopoverTrigger>
+								<Badge variant="muted">
+									<Typography size="md" weight="normal" className="p-1">
+										{translator.t('landing-page.registration')}
+									</Typography>
+								</Badge>
+							</PopoverTrigger>
+							<PopoverContent>
+								<div className="space-y-2">
+									<Typography size="md" lineHeight="normal" weight="medium">
+										{translator.t('landing-page.registration-title')}
+									</Typography>
+									<Typography size="md" lineHeight="normal">
+										{translator.t('landing-page.registration-foundation')}
+									</Typography>
+									<div className="flex items-center space-x-1">
+										<Typography size="md" lineHeight="normal">
+											{translator.t('landing-page.registration-uid')}
+										</Typography>
+										<Link href="https://www.uid.admin.ch/Detail.aspx?uid_id=CHE-289.611.695&lang=en" target="_blank">
+											<Button variant="link" className="m-0 p-0">
+												<Typography size="md" lineHeight="normal" weight="normal">
+													{translator.t('landing-page.registration-uid-nr')}
+												</Typography>
+											</Button>
+										</Link>
+									</div>
+									<div className="flex items-center space-x-1">
+										<Typography size="md" lineHeight="normal">
+											{translator.t('landing-page.registration-duns')}
+										</Typography>
+										<Link href="https://www.dnb.com/duns/what-is-a-DUNS-number.html" target="_blank">
+											<Button variant="link" className="p-0">
+												<Typography size="md" lineHeight="normal" weight="normal">
+													{translator.t('landing-page.registration-duns-nr')}
+												</Typography>
+											</Button>
+										</Link>
+									</div>
+								</div>
+							</PopoverContent>
+						</Popover>
+					</div>
+				</div>
+			</div>
 			<Image
 				className="mx-auto w-full max-w-lg md:order-first md:col-span-2"
 				src={changeGif}

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

@@ -1,6 +1,5 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { HundredPercentModel } from '@/app/[lang]/[region]/(website)/about-us/(sections)/100-percent-model';
-import { Contact } from '@/app/[lang]/[region]/(website)/about-us/(sections)/contact';
 import { FlowOfFunds } from '@/app/[lang]/[region]/(website)/about-us/(sections)/flow-of-funds';
 import { OurMission } from '@/app/[lang]/[region]/(website)/about-us/(sections)/our-mission';
 import Team from '@/app/[lang]/[region]/(website)/about-us/(sections)/team';
@@ -19,7 +18,6 @@ export default async function Page({ params: { lang } }: DefaultPageProps) {
 			<HundredPercentModel lang={lang} />
 			<FlowOfFunds lang={lang} />
 			<Team lang={lang} />
-			<Contact lang={lang} />
 		</>
 	);
 }

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

@@ -1,12 +1,22 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
-import { SocialMediaButton } from '@/app/[lang]/[region]/(website)/about-us/(sections)/contact';
 import { SiFigma, SiGithub } from '@icons-pack/react-simple-icons';
+import { IconType } from '@icons-pack/react-simple-icons/types';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Typography } from '@socialincome/ui';
+import { BaseContainer, Button, Typography } from '@socialincome/ui';
 import Image from 'next/image';
 import Link from 'next/link';
 import anthonyImage from './anthony.jpg';
 
+function SocialMediaButton({ Icon, title, href }: { Icon: IconType; href: string; title: string }) {
+	return (
+		<Link href={href} target="_blank" className="flex flex-col">
+			<Button Icon={Icon} variant="ghost" size="lg">
+				{title}
+			</Button>
+		</Link>
+	);
+}
+
 export default async function Page({ params }: DefaultPageProps) {
 	const translator = await Translator.getInstance({
 		language: params.lang,