Skip to content

Commit

Permalink
style: landing and common styles (#982)
Browse files Browse the repository at this point in the history 
* Improved layouts in the landing page, added new components, unified width to max 1600px, added all the subpages into the section box, improved navbar lang and switch. Header and footer to 100%. Added more margins to sections, created new "Projects" section, removed unnecessary elements, etc.

* Reduced vocdoni logo size

* Translations and added FAQ (from 1 to 45)

* F/landing review (#984)

* fix: Alert icon spacing (#976)

* changed alert success green, icon centred and gap between icon and text, closes #893

* refs #893 There's no need for a wrapping box...

---------

Co-authored-by: Òscar Casajuana <[email protected]>

* fix: proper body background color (#979)

* fix: subscription should be protected for non org members (#977)

* fix: revert dashboard route change

* fix: signup form not properly reset after signup

closes #953

* review 1.0

* fixed issue margin between sections

* fix issue linter

* projects btn

* fixed accesibility issues

* fixed issue responsive

---------

Co-authored-by: gerouvi <[email protected]>
Co-authored-by: Òscar Casajuana <[email protected]>
Co-authored-by: Gerard <[email protected]>

---------

Co-authored-by: gerouvi <[email protected]>
Co-authored-by: Òscar Casajuana <[email protected]>
Co-authored-by: Gerard <[email protected]>
  • Loading branch information
@jpaulet @gerouvi @elboletaire
4 people authored Feb 12, 2025
1 parent 9cb9a2c commit b7fd336
Show file tree
Hide file tree
Showing 23 changed files with 1,343 additions and 716 deletions.
161 changes: 63 additions & 98 deletions src/components/Home/Benefits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,112 +5,77 @@ const Benefits = () => {
const { t } = useTranslation()

return (
<>
<Box position='relative'>
<Box position='absolute' display={{ base: 'none', xl: 'block' }} opacity='0.5' width='150px' top='350px'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6436e8ff4a93d8291f122d65_Vector4.png' />
<Box as='section' id='benefits' width='full' mx='auto' mb={{ base: '100px', lg: '160px' }}>
<Text
fontSize={{ base: '40px', xl: '46px' }}
lineHeight={{ base: '36px', xl: '50px' }}
fontWeight='bold'
textAlign='center'
mb={'30px'}
fontFamily='basier'
>
{t('home.benefits.title')}
</Text>
<Text mb={'60px'} maxW={'90%'} mx='auto' textAlign='center' fontFamily='basier' fontSize='20px' lineHeight='28px'>
{t('home.benefits.subtitle_1')}
</Text>

<Flex flexWrap='wrap' justifyContent='center' maxW='1240px' mx='auto' gap={'30px'}>
<Card variant='benefits'>
<Image
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6436e915e43ce706c7d17313_Vector5.png'
position='absolute'
top='2%'
bottom='0%'
left='auto'
right='9%'
role='none'
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a3e8913631fd48de5_card-feature-img-control.png'
/>
</Box>
<Box
position='absolute'
display={{ base: 'none', xl: 'block' }}
opacity='0.5'
transform='scale(-1, -1)'
width='135px'
bottom='120px'
right='15px'
>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6436e8ff4a93d8291f122d65_Vector4.png' />
<CardHeader>{t('home.benefits.card_1.title')}</CardHeader>
<CardBody>{t('home.benefits.card_1.description')}</CardBody>
</Card>

<Card variant='benefits'>
<Image
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6436e915e43ce706c7d17313_Vector5.png'
position='absolute'
top='2%'
bottom='0%'
left='auto'
right='9%'
role='none'
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a7812b3fd5db1d246_card-feature-img-agile.png'
/>
</Box>
<Box as='section' id='benefits'>
<Box
width='full'
m='0 auto'
maxW='1920px'
px={{
base: '10px',
sm: '20px',
md: '80px',
}}
mb={{ base: '75px', lg: '100px' }}
>
<Text
fontSize={{ base: '40px', xl: '60px' }}
lineHeight={{ base: '36px', xl: '78px' }}
fontWeight='bold'
textAlign='center'
mb={'30px'}
fontFamily='basier'
>
{t('home.benefits.title')}
</Text>
<Text
mb={'60px'}
maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}
mx='auto'
textAlign='center'
fontFamily='basier'
fontSize='20px'
>
{t('home.benefits.subtitle_1')}
</Text>

<Flex flexWrap='wrap' justifyContent='center' maxW='1240px' mx='auto' gap={'30px'}>
<Card variant='benefits'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a3e8913631fd48de5_card-feature-img-control.png' />
<CardHeader>{t('home.benefits.card_1.title')}</CardHeader>
<CardBody>{t('home.benefits.card_1.description')}</CardBody>
</Card>
<CardHeader>{t('home.benefits.card_2.title')}</CardHeader>
<CardBody>{t('home.benefits.card_2.description')}</CardBody>
</Card>

<Card variant='benefits'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a7812b3fd5db1d246_card-feature-img-agile.png' />
<CardHeader>{t('home.benefits.card_2.title')}</CardHeader>
<CardBody>{t('home.benefits.card_2.description')}</CardBody>
</Card>

<Card variant='benefits'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29ae37bf52a3ec72b34_card-feature-img-privacy.png' />
<CardHeader>{t('home.benefits.card_3.title')}</CardHeader>
<CardBody>{t('home.benefits.card_3.description')}</CardBody>
</Card>
<Card variant='benefits'>
<Image
role='none'
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29ae37bf52a3ec72b34_card-feature-img-privacy.png'
/>
<CardHeader>{t('home.benefits.card_3.title')}</CardHeader>
<CardBody>{t('home.benefits.card_3.description')}</CardBody>
</Card>

<Card variant='benefits'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a2fc101547d4ca362_card-feature-img-anonymous.png' />
<CardHeader>{t('home.benefits.card_4.title')}</CardHeader>
<CardBody>{t('home.benefits.card_4.description')}</CardBody>
</Card>
<Card variant='benefits'>
<Image
role='none'
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a2fc101547d4ca362_card-feature-img-anonymous.png'
/>
<CardHeader>{t('home.benefits.card_4.title')}</CardHeader>
<CardBody>{t('home.benefits.card_4.description')}</CardBody>
</Card>

<Card variant='benefits'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a2c93ed6cd6d1faf0_card-feature-img-guarantee.png' />
<CardHeader>{t('home.benefits.card_5.title')}</CardHeader>
<CardBody>{t('home.benefits.card_5.description')}</CardBody>
</Card>
<Card variant='benefits'>
<Image
role='none'
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a2c93ed6cd6d1faf0_card-feature-img-guarantee.png'
/>
<CardHeader>{t('home.benefits.card_5.title')}</CardHeader>
<CardBody>{t('home.benefits.card_5.description')}</CardBody>
</Card>

<Card variant='benefits'>
<Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29ad60f67fa065d02bd_card-feature-img-accesible.png' />
<CardHeader>{t('home.benefits.card_6.title')}</CardHeader>
<CardBody>{t('home.benefits.card_6.description')}</CardBody>
</Card>
</Flex>
</Box>
</Box>
</Box>
</>
<Card variant='benefits'>
<Image
role='none'
src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29ad60f67fa065d02bd_card-feature-img-accesible.png'
/>
<CardHeader>{t('home.benefits.card_6.title')}</CardHeader>
<CardBody>{t('home.benefits.card_6.description')}</CardBody>
</Card>
</Flex>
</Box>
)
}

Expand Down
202 changes: 103 additions & 99 deletions src/components/Home/Clients.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,111 +16,115 @@ const Clients = () => {

return (
<>
<Text textAlign='center' mb={'40px'} fontFamily='basier' fontSize='23px' fontWeight='400'>
<Text textAlign='center' mb={'40px'} fontFamily='basier' fontSize='18px' fontWeight='400'>
{t('home.clients_title')}
</Text>
<ClientsGrid />
</>
)
}

export const ClientsGrid = (props: GridProps) => (
<Grid
as='section'
maxWidth={'1400px'}
mx='auto'
mb={{ base: '45px', lg: '60px' }}
px={{
base: 2,
sm: 4,
lg: 6,
}}
gridTemplateColumns={{ base: 'repeat(5, 1fr)', md: 'repeat(10, 1fr)' }}
justifyContent={'end'}
w='full'
{...props}
>
<Card variant='client'>
<CardHeader>
<Image src={barca} h={'40px'} />
</CardHeader>
<CardBody>
<Text as='span'>F.C. Barcelona</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={omnium} h={'57px'} />
</CardHeader>
<CardBody>
<Text as='span'>Omnium Cultural</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={berga} h={'41px'} />
</CardHeader>
<CardBody>
<Text as='span'>Ajuntament Berga</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={bisbal} h={'33px'} />
</CardHeader>
<CardBody>
<Text as='span'>Ajuntament la Bisbal</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={coec} h={'20px'} />
</CardHeader>
<CardBody>
<Text as='span'>COEC</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={erc} h={'32px'} />
</CardHeader>
<CardBody>
<Text as='span'>Esquerra Republicana</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={bellpuig} h={'33px'} />
</CardHeader>
<CardBody>
<Text as='span'>Ajuntament Bellpuig</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={ticanoia} h={'18px'} />
</CardHeader>
<CardBody>
<Text as='span'>TIC Anoia</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={decidim} h={'30px'} />
</CardHeader>
<CardBody>
<Text as='span'>Decidim</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={bloock} h={'17px'} />
</CardHeader>
<CardBody>
<Text as='span'>Bloock</Text>
</CardBody>
</Card>
</Grid>
)
export const ClientsGrid = (props: GridProps) => {
const { t } = useTranslation()

return (
<Grid
as='section'
maxWidth={'1400px'}
mx='auto'
mb={{ base: '40px', lg: '80px' }}
px={{
base: 2,
sm: 4,
lg: 6,
}}
gridTemplateColumns={{ base: 'repeat(5, 1fr)', md: 'repeat(10, 1fr)' }}
justifyContent={'end'}
w='full'
{...props}
>
<Card variant='client'>
<CardHeader>
<Image src={barca} h={'40px'} alt={t('alt.images.barca')} />
</CardHeader>
<CardBody>
<Text as='span'>F.C. Barcelona</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={omnium} h={'57px'} alt={t('alt.images.omnium')} />
</CardHeader>
<CardBody>
<Text as='span'>Omnium Cultural</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={berga} h={'41px'} alt={t('alt.images.berga')} />
</CardHeader>
<CardBody>
<Text as='span'>Ajuntament Berga</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={bisbal} h={'33px'} alt={t('alt.images.bisbal')} />
</CardHeader>
<CardBody>
<Text as='span'>Ajuntament la Bisbal</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={coec} h={'20px'} alt={t('alt.images.coec')} />
</CardHeader>
<CardBody>
<Text as='span'>COEC</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={erc} h={'32px'} alt={t('alt.images.esquerra')} />
</CardHeader>
<CardBody>
<Text as='span'>Esquerra Republicana</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={bellpuig} h={'33px'} alt={t('alt.images.bellpuig')} />
</CardHeader>
<CardBody>
<Text as='span'>Ajuntament Bellpuig</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={ticanoia} h={'18px'} alt={t('alt.images.ticanoia')} />
</CardHeader>
<CardBody>
<Text as='span'>TIC Anoia</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={decidim} h={'30px'} alt={t('alt.images.decidim')} />
</CardHeader>
<CardBody>
<Text as='span'>Decidim</Text>
</CardBody>
</Card>
<Card variant='client'>
<CardHeader>
<Image src={bloock} h={'17px'} alt={t('alt.images.bloock')} />
</CardHeader>
<CardBody>
<Text as='span'>Bloock</Text>
</CardBody>
</Card>
</Grid>
)
}

export default Clients
Loading

2 comments on commit b7fd336

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://vocdoni-app-stg.netlify.app as production
🚀 Deployed on https://67ac7c06bf60081677a135e8--vocdoni-app-stg.netlify.app

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://vocdoni-app-dev.netlify.app as production
🚀 Deployed on https://67ac7c08ddcf7713293cd50b--vocdoni-app-dev.netlify.app

Please sign in to comment.