lifelog.be/components/Hero/Hero.tsx at main · digitalbase/lifelog.be · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, { FunctionComponent } from 'react';
import { FaTwitter } from 'react-icons/fa';
import { Box, Button, Heading, Img, Link, Stack, Text, useColorModeValue as mode } from '@chakra-ui/react';

const Hero: FunctionComponent = () => {

    return (
        <Box as="section" bg={mode('gray.50', 'gray.800')} pt="16" pb="16">
            <Box maxW={{ base: 'xl', md: '7xl' }} mx="auto" px={{ base: '6', md: '8' }}>
                <Stack direction={{ base: 'column', lg: 'row' }} spacing={{ base: '3rem', lg: '2rem' }} mt="8" align={{ lg: 'center' }} justify="space-between">
                    <Box pos="relative" w={{ base: 'full', lg: '560px' }} h={{ base: 'auto', lg: '560px' }}>
                        <Box pos="absolute" w="100%" h="100%" top="-4" left="-4" bg={mode('gray.200', 'gray.700')} />
                        <Img
                            w="full"
                            pos="relative"
                            h={{ lg: '100%' }}
                            objectFit="cover"
                            src="https://ucarecdn.com/de234bd9-ccb9-46a6-8af2-67a30d4a3f92/-/scale_crop/560x560/center/-/quality/best/-/format/auto/_DSC0320Edit.jpg"
                            alt="Picture of me in Portugal, 2018"
                        />
                    </Box>
                    <Box flex="1" maxW={{ lg: '540px' }}>
                        <Text size="xs" textTransform="uppercase" fontWeight="semibold" color={mode('blue.600', 'blue.300')} letterSpacing="wide">
                            Lifelog.be
                        </Text>
                        <Heading as="h1" size="3xl" color={mode('blue.600', 'blue.300')} mt="8" fontWeight="extrabold" letterSpacing="tight">
                            Hello! I'm Gijs
                        </Heading>
                        <Text color={mode('gray.600', 'gray.400')} mt="4" fontSize="lg" fontWeight="medium">
                            On this page I write about <a href={'https://www.prezly.com/'}>running a company</a> and other things related to the web.
                        </Text>
                        <Text color={mode('gray.600', 'gray.400')} mt="4" fontSize="lg" fontWeight="medium">
                            I love to build stuff like this blog, JS/TS glue code and stuff in the real world.
                        </Text>
                        <Stack direction={{ base: 'column', md: 'row' }} spacing="4" mt="8">
                            <Button as="a" href="https://www.twitter.com/digitalbase" target="_blank" size="lg" minW="210px" colorScheme="blue" height="14" px="8" leftIcon={<Box as={FaTwitter} fontSize="2xl"  />}>
                                Contact
                            </Button>
                            <Button
                                size="lg"
                                as="a"
                                href={"/about"}
                                bg="white"
                                color="gray.900"
                                _hover={{ bg: 'gray.50' }}
                                height="14"
                                px="8"
                                shadow="base"
                            >
                                About me
                            </Button>
                        </Stack>
                        <Text mt="8" color={mode('gray.600', 'gray.400')}>
                            This page was built using <Link href="https://nextjs.org/" textDecoration="underline">Next.js</Link>, <Link href="https://chakra-ui.com/" textDecoration="underline">ChakraUI</Link> and <Link href="https://www.prezly.com/developers" textDecoration="underline">Prezly SDK</Link>.{' '}
                            <Link href="https://github.com/digitalbase/lifelog.be" textDecoration="underline">
                                See the code
                            </Link>
                        </Text>
                    </Box>

                </Stack>
            </Box>
        </Box>
    );
};

export default Hero;