feature(website): update sdg goals section on new landing page (#894)

website/sentry.server.config.ts

@@ -4,15 +4,21 @@
 
 import * as Sentry from '@sentry/nextjs';
 
-Sentry.init({
-	dsn: 'https://3ab06c73c11cd615db9df59b15786025@o4507045017026560.ingest.us.sentry.io/4507045018992640',
+console.log('Sentry is initializing');
+console.log(process.env.NODE_ENV);
+if (process.env.NODE_ENV === 'development') {
+	console.log('Sentry is disabled in development mode');
+} else {
+	Sentry.init({
+		dsn: 'https://3ab06c73c11cd615db9df59b15786025@o4507045017026560.ingest.us.sentry.io/4507045018992640',
 
-	// Adjust this value in production, or use tracesSampler for greater control
-	tracesSampleRate: 1,
+		// Adjust this value in production, or use tracesSampler for greater control
+		tracesSampleRate: 1,
 
-	// Setting this option to true will print useful information to the console while you're setting up Sentry.
-	debug: false,
+		// Setting this option to true will print useful information to the console while you're setting up Sentry.
+		debug: false,
 
-	// Uncomment the line below to enable Spotlight (https://spotlightjs.com)
-	// spotlight: process.env.NODE_ENV === 'development',
-});
+		// Uncomment the line below to enable Spotlight (https://spotlightjs.com)
+		// spotlight: process.env.NODE_ENV === 'development',
+	});
+}

website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx

@@ -57,8 +57,8 @@ export function IncomeInput() {
 								<Input
 									type="number"
 									className={classNames(
-										'bg-background w-full border-none text-right text-5xl text-white opacity-40 focus-visible:opacity-100 focus-visible:ring-0',
-										'[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', // hide arrows
+										'bg-background h-full w-full border-none text-right text-5xl text-white opacity-40 focus-visible:opacity-100 focus-visible:ring-0',
+										'[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', // hide input number arrows
 									)}
 									{...field}
 								/>

website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx

@@ -10,7 +10,7 @@ type ApproachCardProps = {
 	}[];
 };
 
-export async function Approach({ lang, region }: DefaultParams) {
+export async function Approach({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2'],

website/src/app/[lang]/[region]/v2/(home)/(sections)/explainer-video.tsx

@@ -4,7 +4,7 @@ import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 
-export async function ExplainerVideo({ lang, region }: DefaultParams) {
+export async function ExplainerVideo({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2', 'website-videos'],
@@ -13,7 +13,7 @@ export async function ExplainerVideo({ lang, region }: DefaultParams) {
 	return (
 		<BaseContainer className="mx-auto flex w-full flex-col py-32 text-center sm:w-3/4 md:w-2/3">
 			<Typography size="3xl" weight="medium">
-				{translator.t<{ text: string; color?: FontColor }[]>('section-4.title-1').map((title, index) => (
+				{translator.t<{ text: string; color?: FontColor }[]>('section-4.title-1').map((title) => (
 					<Typography as="span" key={title.text} color={title.color}>
 						{title.text}
 					</Typography>

website/src/app/[lang]/[region]/v2/(home)/(sections)/faq.tsx

@@ -18,7 +18,7 @@ type FaqQuestion = {
 	}[];
 };
 
-export async function Faq({ lang, region }: DefaultParams) {
+export async function Faq({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2'],

website/src/app/[lang]/[region]/v2/(home)/(sections)/mobile-illustration.tsx

@@ -5,7 +5,7 @@ import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Image from 'next/image';
 import MobilesImg from '../(assets)/mobilesImgData.png';
 
-export async function MobileIllustration({ lang, region }: DefaultParams) {
+export async function MobileIllustration({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2'],

website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx

@@ -3,7 +3,7 @@ import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 
-export async function Overview({ lang, region }: DefaultParams) {
+export async function Overview({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2'],

website/src/app/[lang]/[region]/v2/(home)/(sections)/quotes.tsx

@@ -3,7 +3,7 @@ import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer } from '@socialincome/ui';
 import { CarouselCardProps, QuotesCarousel } from '../(components)/quotes-carousel';
 
-export async function Quotes({ lang, region }: DefaultParams) {
+export async function Quotes({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2', 'common'],

website/src/app/[lang]/[region]/v2/(home)/(sections)/recipient-selection.tsx

@@ -5,7 +5,7 @@ import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Image from 'next/image';
 import YellowBlueDots from '../(assets)/yellowBlueDotsImgData.png';
 
-export async function RecipientSelection({ lang, region }: DefaultParams) {
+export async function RecipientSelection({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2'],

website/src/app/[lang]/[region]/v2/(home)/(sections)/sdg-goals.tsx

@@ -0,0 +1,51 @@
+import { DefaultParams } from '@/app/[lang]/[region]';
+import sdgLogo from '@/app/[lang]/[region]/(website)/(home)/(assets)/sdg-logo.svg';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { Typography } from '@socialincome/ui';
+import { FontColor } from '@socialincome/ui/src/interfaces/color';
+import Image from 'next/image';
+import Town from '../(assets)/sdg-town.jpg';
+
+export async function SDGGoals({ lang }: DefaultParams) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-home2'],
+	});
+
+	return (
+		<div
+			className="flex flex-col bg-cover bg-center pb-64 pt-20 md:pb-80"
+			style={{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.0)), url(${Town.src})` }}
+		>
+			<Typography
+				color="primary-foreground"
+				className="mx-auto mt-8 w-3/4 text-center md:mt-16"
+				size="4xl"
+				weight="medium"
+			>
+				{translator.t<{ text: string; color?: FontColor }[]>('section-10.title-1').map((title, index) => (
+					<Typography as="span" key={index} color={title.color}>
+						{title.text}{' '}
+					</Typography>
+				))}
+			</Typography>
+			<Image className="mx-auto mt-8 w-96 max-w-[75%]" src={sdgLogo} alt="Sustainable Development Goals Logo" />
+			<div className="mx-auto -mb-6 flex w-4/5 max-w-xl pt-20 text-center text-xl text-white md:pt-40 md:text-2xl">
+				<div className="bg-primary flex h-72 flex-1 -rotate-6 flex-col items-center justify-between py-4 md:h-96">
+					<div />
+					<Typography weight="medium" className="w-3/4">
+						{translator.t('section-10.sdg-1-title')}
+					</Typography>
+					<Typography size="sm">{translator.t('section-10.sdg-1')}</Typography>
+				</div>
+				<div className="bg-accent -ml-6 mt-12 flex h-72 flex-1 rotate-2 flex-col items-center justify-between py-4 md:h-96">
+					<div />
+					<Typography weight="medium" className="w-3/4">
+						{translator.t('section-10.sdg-10-title')}
+					</Typography>
+					<Typography size="sm">{translator.t('section-10.sdg-10')}</Typography>
+				</div>
+			</div>
+		</div>
+	);
+}

website/src/app/[lang]/[region]/v2/(home)/(sections)/testimonials.tsx

@@ -12,7 +12,7 @@ type PortraitProps = {
 	image: string | StaticImport;
 };
 
-export async function Testimonials({ lang, region }: DefaultParams) {
+export async function Testimonials({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-home2', 'common'],

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

@@ -1,18 +1,14 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { Approach } from '@/app/[lang]/[region]/v2/(home)/(sections)/approach';
 import { Quotes } from '@/app/[lang]/[region]/v2/(home)/(sections)/quotes';
-import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { SDGGoals } from '@/app/[lang]/[region]/v2/(home)/(sections)/sdg-goals';
 import { ExplainerVideo } from './(sections)/explainer-video';
 import { HeroVideo } from './(sections)/hero-video';
 import { MobileIllustration } from './(sections)/mobile-illustration';
 import { MonthlyIncome } from './(sections)/monthly-income';
 import { Overview } from './(sections)/overview';
 
 export default async function Page({ params: { lang, region } }: DefaultPageProps) {
-	const translator = await Translator.getInstance({
-		language: lang,
-		namespaces: ['website-(home)', 'website-videos'],
-	});
 	return (
 		<>
 			<HeroVideo lang={lang} region={region} />
@@ -25,7 +21,7 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 			<Quotes lang={lang} region={region} />
 			{/*<RecipientSelection lang={lang} region={region} />*/}
 			{/*<Testimonials lang={lang} region={region} />*/}
-			{/*<Sdgoals lang={lang} region={region} />*/}
+			<SDGGoals lang={lang} region={region} />
 			{/*<Journal lang={lang} region={region} />*/}
 		</>
 	);