Skip to content

Commit b9bebc7

Browse files
benjaminpenaolverabenjaminpenaolvera
authored
fixing text align for improve reading, bullets added for bennefits as sponsors avoiding redundant information (#2)
1 parent e4b3c54 commit b9bebc7

3 files changed

Lines changed: 60 additions & 38 deletions

File tree

‎public/i18n/es.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,17 +76,16 @@
7676
"jobsOfferBody1": "Las empresas y los asistentes se benefician de la oferta laboral ya sea que se enteren de sus vacantes por medio de diapositivas o en el momento del networking mientras conviven con empleados de su empresa (éste segundo medio siendo el más efectivo). Muchas de las personas que de alguna manera han sido parte de nuestra comunidad como asistentes han conocido a sus futuros y actuales empleadores en alguna de nuestras sesiones.",
7777
"sponsorBody": "Todo el dinero y apoyo recaudado por parte de los patrocinios es invertido para la mejora de los eventos bimestrales y la mejora de la calidad del contenido presentado, nignun miembro del Staff se beneficia económicamente de los apoyos, todas las tareas desempeñadas por parte del equipo son realizadas sin fines de lucro. Todo los ingresos se invierten de manera integra a favor de la comunidad.",
7878
"offer": "¿Qué ofrecemos a cambio?",
79-
"offerRights": "Los patrocinadores tienen derecho a:",
80-
"socialMentions": "Menciones en redes sociales.",
81-
"communityPagePosts": "Posts desde la página de la comunidad.",
82-
"sharePosts": "Compartir cierta cantidad de publicaciones en nuestras redes sociales.",
83-
"promoteContent": "Espacio de 5 minutos cada sesión para promover vacantes, eventos, etc.",
84-
"eventPresence": "Presencia al inicio y al final del evento así como en todos los flyers relativos a la sesión del mensual.",
85-
"benefitsNote": "Con el tiempo hemos notado que los beneficios a raíz del patrocinio son aún más efectivos cuando individuos (empleados) de las empresas también se involucran como parte de WDT ya que su mensaje llega de manera más orgánica.",
86-
"closingNote": "Para finalizar quisiéramos expresar que nos daría mucho gusto contar con su apoyo para seguir creciendo nuestra comunidad. 💙",
79+
"offerRights": "Los patrocinadores obtienen:",
80+
"socialMentions": "Menciones en redes sociales y posts desde nuestra página comunitaria.",
81+
"sharePosts": "Espacio para compartir publicaciones en nuestras redes sociales.",
82+
"promoteContent": "5 minutos en cada sesión para promover vacantes, eventos, etc.",
83+
"eventPresence": "Presencia destacada al inicio y final de cada evento, así como en todos los flyers de la sesión mensual.",
84+
"benefitsNote": "Nota: Hemos notado que los beneficios del patrocinio son más efectivos cuando empleados de las empresas también se involucran en WDT, ya que su mensaje llega de manera más orgánica.",
85+
"closingNote": "Agradecemos de antemano su apoyo para seguir creciendo nuestra comunidad. 💙",
8786
"communityHeader": "“Somos comunidad”",
8887
"note": "NOTA:",
8988
"adrianaReyes": " - Adriana Reyes.",
9089
"gallery": "Galeria"
9190
}
92-
}
91+
}

‎src/About.tsx‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Typography, Container, Avatar, List, ListItem, ListItemText } from '@mui/material'
1+
import { Typography, Container, Avatar, List, ListItem, ListItemText, ListItemIcon } from '@mui/material'
2+
import CircleIcon from '@mui/icons-material/Circle';
23
import { useTranslation } from 'react-i18next'
34
import main from './assets/images/main.jpg'
45
import { LazyLoadImage } from 'react-lazy-load-image-component'
@@ -32,58 +33,77 @@ import Footer from './Footer';
3233

3334
function About() {
3435
const { t } = useTranslation()
36+
const benefitsNote = t("aboutUs.benefitsNote");
37+
const noteText = benefitsNote.split(":")[0] + ":";
38+
const restOfText = benefitsNote.split(":").slice(1).join(":").trim();
39+
3540
return (
3641
<>
3742
<NavBar />
3843
<Container sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', pt: 5 }}>
39-
<Typography variant="h1" sx={{ mb: 3 }}>Web Dev Talks</Typography>
40-
<Typography sx={{ my: 3 }}>{t("aboutUs.quote")}<b>{t("aboutUs.adrianReyes")}</b></Typography>
44+
<Typography variant="h1" sx={{ mb: 3}}>Web Dev Talks</Typography>
45+
<Typography sx={{ my: 3, textAlign: 'justify' }}>{t("aboutUs.quote")}<b>{t("aboutUs.adrianReyes")}</b></Typography>
4146

4247
<Avatar variant="square" src={main} alt="" sx={{ width: '100%', height: '100%' }} />
4348

4449
<Typography variant="h2" sx={{ my: 5 }}>{t("aboutUs.whoIs")}</Typography>
45-
<Typography>{t("aboutUs.description")}</Typography>
46-
<Typography>{t("aboutUs.description2")}</Typography>
50+
<Typography sx={{ textAlign: 'justify', mb: 1 }}>{t("aboutUs.description")}</Typography>
51+
<Typography sx={{ textAlign: 'justify' }}>{t("aboutUs.description2")}</Typography>
52+
4753
<Typography variant="h2" sx={{ my: 3 }}>{t("aboutUs.motivationHeader")}</Typography>
48-
<Typography>{t("aboutUs.motivationBody1")}</Typography>
49-
<Typography>{t("aboutUs.motivationBody2")}</Typography>
54+
<Typography sx={{ textAlign: 'justify', mb: 1 }}>{t("aboutUs.motivationBody1")}</Typography>
55+
<Typography sx={{ textAlign: 'justify' }}>{t("aboutUs.motivationBody2")}</Typography>
56+
5057
<Typography variant="h2" sx={{ my: 3 }}>{t("aboutUs.dynamic")}</Typography>
51-
<Typography>{t("aboutUs.dynamicBody1")}</Typography>
52-
<Typography>{t("aboutUs.dynamicBody2")}</Typography>
58+
<Typography sx={{ textAlign: 'justify', mb: 1 }}>{t("aboutUs.dynamicBody1")}</Typography>
59+
<Typography sx={{ textAlign: 'justify' }}>{t("aboutUs.dynamicBody2")}</Typography>
5360

5461
<Avatar variant="square" src={image1} alt="" sx={{ width: '100%', height: '100%', my: 5 }} />
5562

5663
<Avatar variant="square" src={image8} alt="" sx={{ width: '100%', height: '100%', my: 5 }} />
5764

5865
<Typography variant="h2" sx={{ my: 3 }}>{t("aboutUs.socialImpact")}</Typography>
59-
<Typography>{t("aboutUs.socialImpactBody1")}</Typography>
66+
<Typography sx={{ textAlign: 'justify' }}>{t("aboutUs.socialImpactBody1")}</Typography>
67+
6068
<Typography variant="h2" sx={{ my: 3 }}>{t("aboutUs.jobsOffer")}</Typography>
61-
<Typography>{t("aboutUs.jobsOfferBody1")}</Typography>
69+
<Typography sx={{ textAlign: 'justify' }}>{t("aboutUs.jobsOfferBody1")}</Typography>
70+
6271
<Typography variant="h2" sx={{ my: 3 }}>{t("sponsorship.sponsor")}</Typography>
63-
<Typography>{t("aboutUs.sponsorBody")}</Typography>
72+
<Typography sx={{ textAlign: 'justify' }}>{t("aboutUs.sponsorBody")}</Typography>
73+
6474
<Typography variant="h2" sx={{ my: 3 }}>{t("aboutUs.offer")}</Typography>
65-
<Typography>{t("aboutUs.offerRights")}</Typography>
6675

6776
<List sx={{ width: '100%' }}>
6877
<ListItem>
78+
<ListItemIcon sx={{ minWidth: '20px', color: 'black' }}>
79+
<CircleIcon sx={{ fontSize: '8px' }} />
80+
</ListItemIcon>
6981
<ListItemText primary={t('aboutUs.socialMentions')}/>
7082
</ListItem>
7183
<ListItem>
72-
<ListItemText primary={t('aboutUs.communityPagePosts')}/>
73-
</ListItem>
74-
<ListItem>
84+
<ListItemIcon sx={{ minWidth: '20px', color: 'black' }}>
85+
<CircleIcon sx={{ fontSize: '8px' }} />
86+
</ListItemIcon>
7587
<ListItemText primary={t('aboutUs.sharePosts')}/>
7688
</ListItem>
7789
<ListItem>
90+
<ListItemIcon sx={{ minWidth: '20px', color: 'black' }}>
91+
<CircleIcon sx={{ fontSize: '8px' }} />
92+
</ListItemIcon>
7893
<ListItemText primary={t('aboutUs.promoteContent')}/>
7994
</ListItem>
8095
<ListItem>
96+
<ListItemIcon sx={{ minWidth: '20px', color: 'black' }}>
97+
<CircleIcon sx={{ fontSize: '8px' }} />
98+
</ListItemIcon>
8199
<ListItemText primary={t('aboutUs.eventPresence')}/>
82100
</ListItem>
83101
</List>
84102

85-
<Typography>{t("aboutUs.note")}</Typography>
86-
<Typography>{t("aboutUs.benefitsNote")}</Typography>
103+
<Typography sx={{ mb: 2 }}>
104+
<strong>{noteText}</strong> {restOfText}
105+
</Typography>
106+
87107
<Typography>{t("aboutUs.closingNote")}</Typography>
88108

89109
<Typography variant="h3" sx={{ my: 3 }}>{t("aboutUs.communityHeader")}</Typography>

‎src/Sponsorship.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,23 +77,26 @@ const Sponsorship = (): ReactElement => {
7777
<Box sx={{ display: 'flex', justifyContent: 'center', p: 5 }}>
7878
<Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '250px' }} />
7979
</Box>
80-
<Typography variant="body1" paragraph>{t("sponsorship.description1")}</Typography>
81-
<Typography variant="body1">{t("sponsorship.description2")}</Typography>
82-
<Typography variant="body1" paragraph>{t("sponsorship.description3")}</Typography>
80+
<Typography sx={{ textAlign: 'justify' }} variant="body1" paragraph>{t("sponsorship.description1")}</Typography>
81+
<Typography sx={{ textAlign: 'justify', mb: 1.5 }} variant="body1">{t("sponsorship.description2")}</Typography>
82+
<Typography sx={{ textAlign: 'justify' }} variant="body1" paragraph>{t("sponsorship.description3")}</Typography>
8383
<Box my={5}>
8484
<iframe width="100%" style={{ maxHeight: '600px', height: '60vw' }} src="https://www.youtube.com/embed/3kLz1Q0myiM" title="YouTube video player" allow="accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture" allowFullScreen></iframe>
8585
</Box>
8686

87-
<Typography variant="h2" sx={{ my: 8 }}>{t("sponsorship.attendeesTitle")}</Typography>
87+
<Typography variant="h2" sx={{ my: 8, textAlign: 'center' }}>{t("sponsorship.attendeesTitle")}</Typography>
8888
<Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
8989
<Box width={{ xs: '100%', sm: '75%', md: '50%' }} >
9090
<Pie data={data} />
9191
</Box>
9292
</Box>
93-
<Typography variant="h3" sx={{ my: 8 }}>Venues</Typography>
94-
<Typography variant="body1" paragraph>{t("sponsorship.venues")}</Typography>
95-
<Typography variant="h3" sx={{ my: 8 }}>{t("sponsorship.sponsorshipPlans")}</Typography>
96-
<Typography variant="body1" paragraph>{t("sponsorship.sponsorshipPlansBody")}</Typography>
93+
94+
<Typography variant="h3" sx={{ my: 8, textAlign: 'center' }}>Venues</Typography>
95+
<Typography sx={{ textAlign: 'justify' }} variant="body1" paragraph>{t("sponsorship.venues")}</Typography>
96+
97+
<Typography variant="h3" sx={{ mt: 8, mb: 3, textAlign: 'center' }}>{t("sponsorship.sponsorshipPlans")}</Typography>
98+
<Typography sx={{ textAlign: 'center' }} variant="body1" paragraph>{t("sponsorship.sponsorshipPlansBody")}</Typography>
99+
97100
<Grid container spacing={5}>
98101
<Grid item xs={12} md={6}>
99102
<Card variant="outlined">
@@ -227,7 +230,7 @@ const Sponsorship = (): ReactElement => {
227230
</Grid>
228231
</Grid>
229232

230-
<Typography variant="h3" sx={{ my: 4 }}>{t("sponsorship.costs")}</Typography>
233+
<Typography variant="h3" sx={{ my: 4, textAlign: 'center' }}>{t("sponsorship.costs")}</Typography>
231234

232235
<Grid container spacing={5}>
233236
<Grid item xs={12} md={6}>
@@ -316,7 +319,7 @@ const Sponsorship = (): ReactElement => {
316319
</Grid>
317320
</Grid>
318321

319-
<Typography variant="h3" sx={{ my: 8}}>{t('sponsorship.ourSponsors')}</Typography>
322+
<Typography variant="h3" sx={{ my: 8, textAlign: 'center' }}>{t('sponsorship.ourSponsors')}</Typography>
320323
<Grid container spacing={4} sx={{ mt: 8, alignItems: 'center', flexWrap: 'wrap', px: 4 }}>
321324
<Grid item xs={4} md={2} sx={{ display: 'flex', justifyContent: 'center', height: '100px', width: '100%' }}>
322325
<Avatar variant='square' src={communitySupporters} sx={{ height: '100%', width: '100%', '& img': { objectFit: 'contain' } }} />
@@ -337,7 +340,7 @@ const Sponsorship = (): ReactElement => {
337340
<Avatar variant='square' src={vauxoo} sx={{ height: '100%', width: '100%', '& img': { objectFit: 'contain' } }} />
338341
</Grid>
339342
</Grid>
340-
<Typography variant="h3" sx={{ my: 8}}>{t('sponsorship.ourPatreons')}</Typography>
343+
<Typography variant="h3" sx={{ my: 8, textAlign: 'center' }}>{t('sponsorship.ourPatreons')}</Typography>
341344
<Box sx={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' }}>
342345
<MaterialTooltip title="Alejandro Rebollar" sx={{ p: 4 }}>
343346
<Avatar src={alejandroRebollar} sx={{ height: '50px', width: '50px', m: 2 }} />

0 commit comments

Comments
 (0)