import { Box, Container, Heading, Text, Stack } from '@chakra-ui/react';
import { DownloadIcon } from '@chakra-ui/icons';
import Link from 'next/link';
import PlayStoreBadge from '@/components/PlayStoreBadge';
import AppStoreBadge from '@/components/AppStoreBadge';
export default function DownloadAppLinks() {
return (
<Box p={4}>
<Stack spacing={4} as={Container} maxW={'3xl'} alignItems={'center'}>
<Box
rounded={'full'}
background={'blue.500'}
w={20}
h={20}
display={'flex'}
justifyContent={'center'}
alignItems={'center'}>
<DownloadIcon color={'white'} w={10} h={10} />
</Box>
<Heading fontSize={'4xl'} align={'center'}>
Download our app
</Heading>
<Text align={'center'} color={'gray.600'} fontSize={'lg'}>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</Text>
<Stack direction={['column', 'row']} pt={6}>
<Link href={'/'} passHref>
<a target={'_blank'}>
<AppStoreBadge />
</a>
</Link>
<Link href={'/'} passHref>
<a target={'_blank'}>
<PlayStoreBadge />
</a>
</Link>
</Stack>
</Stack>
</Box>
);
}
import { Box, SimpleGrid, Icon, Text, Stack, Flex } from '@chakra-ui/react';
import { ChatIcon } from '@chakra-ui/icons';
// Replace test data with your own
const features = Array.apply(null, Array(3)).map(function (x, i) {
return {
id: i,
title: 'Lorem ipsum dolor sit amet',
text:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
};
});
export default function SimpleThreeColumns() {
return (
<Box p={4}>
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
{features.map((feature) => (
<Stack key={feature.id}>
<Flex
bg={'blue.400'}
w={8}
h={8}
align={'center'}
justify={'center'}
color={'white'}
rounded={'md'}
mb={1}>
<Icon as={ChatIcon} />
</Flex>
<Text fontWeight={600}>{feature.title}</Text>
<Text color={'gray.600'}>{feature.text}</Text>
</Stack>
))}
</SimpleGrid>
</Box>
);
}
import {
Box,
Container,
Heading,
SimpleGrid,
Icon,
Text,
Stack,
HStack,
VStack,
} from '@chakra-ui/react';
import { CheckIcon } from '@chakra-ui/icons';
// Replace test data with your own
const features = Array.apply(null, Array(8)).map(function (x, i) {
return {
id: i,
title: 'Lorem ipsum dolor sit amet',
text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.',
};
});
export default function GridListWithHeading() {
return (
<Box p={4}>
<Stack spacing={4} as={Container} maxW={'3xl'} textAlign={'center'}>
<Heading fontSize={'3xl'}>This is the headline</Heading>
<Text color={'gray.600'} fontSize={'xl'}>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</Text>
</Stack>
<Container maxW={'6xl'} mt={10}>
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={10}>
{features.map((feature) => (
<HStack key={feature.id} align={'top'}>
<Box color={'green.400'} px={2}>
<Icon as={CheckIcon} />
</Box>
<VStack align={'start'}>
<Text fontWeight={600}>{feature.title}</Text>
<Text color={'gray.600'}>{feature.text}</Text>
</VStack>
</HStack>
))}
</SimpleGrid>
</Container>
</Box>
);
}
Made on the Internet by Achim Rolle and Lazar Nikolov