You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.0 KiB
71 lines
2.0 KiB
import { Stack, Heading, Text, Box, Flex } from '@chakra-ui/react'
|
|
|
|
import ResponsiveImage from '../components/ResponsiveImage'
|
|
import SEO from '../components/SEO'
|
|
|
|
import {
|
|
getAbout,
|
|
getTeamMembersWithImages,
|
|
IAbout,
|
|
ITeamMemberWithImage,
|
|
login,
|
|
} from '../lib/api'
|
|
|
|
const Team: React.FC<{
|
|
data: { about: IAbout; teamMembers: ITeamMemberWithImage[] }
|
|
}> = ({ data }) => {
|
|
const { about, teamMembers } = data
|
|
return (
|
|
<>
|
|
<SEO title="work" />
|
|
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
|
|
<Flex wrap="wrap">
|
|
<Box w="50%">
|
|
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
|
|
El team
|
|
</Heading>
|
|
</Box>
|
|
<Box w="50%" pt="6rem">
|
|
<Text fontWeight="300" lineHeight="1.9" pb="2rem">
|
|
{about.texto_team}
|
|
</Text>
|
|
<Stack wrap="wrap" direction="row" justify="space-between" mb="6rem">
|
|
{teamMembers.map((member) => (
|
|
<Box key={member.nombre} w="calc(50% - 2rem)" fontWeight="300">
|
|
<Box>
|
|
<ResponsiveImage
|
|
url={`avatar/${member.avatar_file}`}
|
|
alt={`Foto de ${member.nombre}`}
|
|
w="100%"
|
|
h="100%"
|
|
borderRadius="primary"
|
|
mb="1rem"
|
|
/>
|
|
</Box>
|
|
<Heading as="h3" fontSize="xl" mb="1rem">
|
|
{member.nombre}
|
|
</Heading>
|
|
<Text fontSize="md">
|
|
<i>“{member.cita}”</i>
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Flex>
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Team
|
|
|
|
export async function getStaticProps() {
|
|
await login()
|
|
|
|
const about = await getAbout()
|
|
const teamMembers = await getTeamMembersWithImages()
|
|
|
|
return { props: { data: { about: about.data, teamMembers } } }
|
|
}
|