add Lush to partners

weareinreach · May 23, 2024 · 9607a2d · 9607a2d
1 parent b8cbeab
commit 9607a2d
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 47 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -1,6 +1,6 @@
 {
     "about": {
-        "campaign": "This trans-led digital campaign organized by <Link1>InReach</Link1> and <Link2>GLAAD</Link2> aims to showcase positive stories from the diverse trans masculine community and increase access to safe, verified resources through the <Link3>free InReach App</Link3>.",
+        "campaign": "This trans-led digital campaign organized by <Link href='https://www.inreach.org' target='_blank' rel='noopener noreferrer'>InReach</Link> and <Link href='https://www.glaad.org' target='_blank' rel='noopener noreferrer'>GLAAD</Link> aims to showcase positive stories from the diverse trans masculine community and increase access to safe, verified resources through the <Link href='https://app.inreach.org' target='_blank' rel='noopener noreferrer'>free InReach App</Link>.",
         "hollister": "<Title>And special thanks to <Link>The Hollister Confidence Fund</Link> for their support.</Title>",
         "stats": {
             "stat1-text": "of trans men and trans masculine youth have considered suicide.",
@@ -10,6 +10,7 @@
             "stat3-text": "of the U.S. trans population identify as trans men.",
             "stat3-title": "36%"
         },
+        "supporting-funders": "Supporting Funders",
         "supporting-partners": "Supporting Partners",
         "trans-people": "Trans people are everywhere. This campaign includes stories from trans men and trans masculine adults across the country."
     },
@@ -183,4 +184,4 @@
         "thank-you": "<strong>Thank you for sharing your story!</strong><br/>Assuming your submission meets our participant eligibility criteria, we will add your story to our campaign website shortly. In the meantime, be sure to follow @weareinreach on social media for updates and download our campaign social media toolkit to share the campaign.<br/><br/>If you have any questions, please email marketing@inreach.org."
     },
     "vercel": "Powered by Vercel"
-}
+}
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -1,6 +1,6 @@
 {
     "about": {
-        "campaign": "Esta campaña digital por personas trans organizada por <Link1>InReach</Link1> y <Link2>GLAAD</Link2> tiene como objetivo mostrar historias positivas de la comunidad trans masculina diversa y aumentar el acceso a recursos seguros y verificados a través de la <Link3>aplicación gratuita InReach</Link3>.",
+        "campaign": "Esta campaña digital por personas trans organizada por <Link href='https://www.inreach.org' target='_blank' rel='noopener noreferrer'>InReach</Link> y <Link href='https://www.glaad.org' target='_blank' rel='noopener noreferrer'>GLAAD</Link> tiene como objetivo mostrar historias positivas de la comunidad trans masculina diversa y aumentar el acceso a recursos seguros y verificados a través de la <Link href='https://app.inreach.org' target='_blank' rel='noopener noreferrer'>aplicación gratuita InReach</Link>.",
         "hollister": "<Title>Y un agradecimiento especial a <Link>The Hollister Confidence Fund</Link> por su apoyo.</Title>",
         "stats": {
             "stat1-text": "de hombres trans y jóvenes trans masculinos han considerado el suicidio.",
@@ -10,6 +10,7 @@
             "stat3-text": "de la población trans de EE. UU. se identifica como hombre trans.",
             "stat3-title": "36%"
         },
+        "supporting-funders": "Financiado por",
         "supporting-partners": "Socios que Apoyan",
         "trans-people": "Las personas trans están en todas partes. Esta campaña incluye historias de hombres trans y adultos transmasculinos por todo el país."
     },
@@ -183,4 +184,4 @@
         "thank-you": "<strong>¡Gracias por compartir tu historia!</strong>Suponiendo que lo que has enviado cumple con nuestros criterios de elegibilidad de participantes, agregaremos tu historia al sitio web de nuestra campaña en breve. Mientras tanto, asegúrate de seguir @weareinreach en las redes sociales para obtener actualizaciones y descargar nuestro kit de herramientas de redes sociales de la campaña para compartir la campaña.<br/><br/>Si tienes alguna pregunta, envía un correo electrónico a marketing@inreach.org."
     },
     "vercel": "Con la tecnología de Vercel"
-}
+}
diff --git a/src/data/partners.ts b/src/data/partners.ts
@@ -5,6 +5,7 @@ import Hollister from '~public/assets/partners/hollister.png'
 import ImmigrationEquality from '~public/assets/partners/immigrationEquality.png'
 import KYLP from '~public/assets/partners/kylp_t.png'
 import LambdaLegal from '~public/assets/partners/lambaLegal_t.png'
+import Lush from '~public/assets/partners/lush.png'
 import MTPC from '~public/assets/partners/mtpc.png'
 import NQAPIA from '~public/assets/partners/nqapia_t.png'
 import OasisLegal from '~public/assets/partners/oasisLegal.png'
@@ -14,14 +15,15 @@ import TAVA from '~public/assets/partners/tava.png'
 
 export const partnerImages = {
 	glaad: Glaad,
-	lambdaLegal: LambdaLegal,
-	sage: Sage,
-	immigrationEquality: ImmigrationEquality,
-	nqapia: NQAPIA,
 	hollister: Hollister,
+	immigrationEquality: ImmigrationEquality,
 	kylp: KYLP,
+	lambdaLegal: LambdaLegal,
+	lush: Lush,
 	mtpc: MTPC,
+	nqapia: NQAPIA,
 	oasisLegal: OasisLegal,
+	sage: Sage,
 	standWithTrans: StandWithTrans,
 	tava: TAVA,
 }

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -17,6 +17,7 @@ import {
 import { type GetStaticProps } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
+import Link from 'next/link'
 import { Trans, useTranslation } from 'next-i18next'
 
 import { Banner } from '~/components/Banner/Banner'
@@ -74,13 +75,14 @@ const useStyles = createStyles((theme) => ({
 		justifyItems: 'center',
 	},
 	partnerHollister: {
-		width: rem(600),
+		maxWidth: '80vw',
+		width: rem(400),
 		[theme.fn.smallerThan('md')]: {
-			width: rem(400),
-		},
-		[theme.fn.smallerThan('xs')]: {
-			width: rem(200),
+			width: rem(300),
 		},
+		// [theme.fn.smallerThan('xs')]: {
+		// 	width: rem(200),
+		// },
 	},
 }))
 const AboutPage = () => {
@@ -111,9 +113,8 @@ const AboutPage = () => {
 						<Trans
 							i18nKey='about.campaign'
 							components={{
-								Link1: <a href='https://www.inreach.org' target='_blank' rel='noopener noreferrer'></a>,
-								Link2: <a href='https://www.glaad.org' target='_blank' rel='noopener noreferrer'></a>,
-								Link3: <a href='https://app.inreach.org' target='_blank' rel='noopener noreferrer'></a>,
+								// @ts-expect-error props are passed in from json string
+								Link: <Link />,
 							}}
 						/>
 					</Text>
@@ -133,11 +134,13 @@ const AboutPage = () => {
 				<Title order={2} mb={40}>
 					{t('about.supporting-partners')}
 				</Title>
-				<Grid grow mx='auto' gutter={20}>
-					{partners &&
-						partners.map(({ id, href, name, order, tag }) => {
+				<Grid grow mx='auto' gutter={20} mb={40}>
+					{Boolean(partners?.length) &&
+						partners?.map(({ id, href, name, tag }) => {
 							const image = getPartnerImage(tag)
-							if (!image) return null
+							if (!image) {
+								return null
+							}
 							return (
 								<Grid.Col
 									key={id}
@@ -157,33 +160,43 @@ const AboutPage = () => {
 						})}
 				</Grid>
 
-				<Trans
-					i18nKey='about.hollister'
-					components={{
-						Title: (
-							<Text my={40} ta='center' mx={{ lg: 0, base: 10, xs: 50, [em(450)]: 60 }} fw={500} fz={20}>
-								.
-							</Text>
-						),
-						Link: (
-							<a
-								href='https://www.hollisterco.com/shop/us/purpose'
-								target='_blank'
-								rel='noopener noreferrer'
-							></a>
-						),
-					}}
-				/>
-				<Center>
-					<AspectRatio
-						ratio={partnerImages.hollister.width / partnerImages.hollister.height}
-						className={classes.partnerHollister}
-					>
-						<a href='https://www.hollisterco.com/shop/us/purpose' target='_blank' rel='noopener noreferrer'>
-							<Image src={partnerImages.hollister} alt='The Hollister Confidence Fund' fill />
-						</a>
-					</AspectRatio>
-				</Center>
+				<Title order={2} mb={40}>
+					{t('about.supporting-funders')}
+				</Title>
+				<Grid grow mx='auto' gutter={20} w='100%'>
+					<Grid.Col span={6}>
+						<Center inline w='100%' h='100%'>
+							<AspectRatio
+								ratio={partnerImages.hollister.width / partnerImages.hollister.height}
+								className={classes.partnerHollister}
+							>
+								<a
+									href='https://www.hollisterco.com/shop/us/purpose'
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Image src={partnerImages.hollister} alt='The Hollister Confidence Fund' fill />
+								</a>
+							</AspectRatio>
+						</Center>
+					</Grid.Col>
+					<Grid.Col span={6}>
+						<Center inline w='100%' h='100%'>
+							<AspectRatio
+								ratio={partnerImages.lush.width / partnerImages.lush.height}
+								className={classes.partnerHollister}
+							>
+								<a
+									href='https://www.lush.com/us/en_us/a/how-lush-gives-back'
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Image src={partnerImages.lush} alt='LUSH Retail' fill />
+								</a>
+							</AspectRatio>
+						</Center>
+					</Grid.Col>
+				</Grid>
 			</Flex>
 		</>
 	)