import { Button, Flex, Heading, Image, Stack, Text } from '@chakra-ui/react';
export default function SplitScreen() {
return (
<Stack minH={'100vh'} direction={{ base: 'column', md: 'row' }}>
<Flex p={8} flex={1} align={'center'} justify={'center'}>
<Stack spacing={4} w={'full'} maxW={'lg'}>
<Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
This is the{' '}
<Text as={'span'} color={'blue.500'}>
main headline
</Text>
</Heading>
<Text fontSize={{ base: 'md', lg: 'lg' }} color={'gray.500'}>
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={{ base: 'column', md: 'row' }} spacing={4}>
<Button colorScheme={'blue'}>Primary Action</Button>
<Button>Secondary Action</Button>
</Stack>
</Stack>
</Flex>
<Flex flex={1}>
<Image
alt={'Login Image'}
objectFit={'cover'}
src={
'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
}
/>
</Flex>
</Stack>
);
}
import {
Box,
Container,
Heading,
Text,
Stack,
Image,
useBreakpointValue,
} from '@chakra-ui/react';
import Link from 'next/link';
import PlayStoreBadge from '@/components/PlayStoreBadge';
import AppStoreBadge from '@/components/AppStoreBadge';
export default function DownloadAppLinks() {
return (
<Container
maxW={'7xl'}
p={4}
display={'flex'}
alignItems={'center'}
flexDirection={['column', 'column', 'row']}>
<Stack spacing={4}>
<Heading textAlign={['center', 'center', 'left']} fontSize={'4xl'}>
Download our app
</Heading>
<Text
textAlign={['center', 'center', 'left']}
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
justifyContent={['center', 'center', 'left']}
direction={'row'}
pt={6}>
<Link href={'/'} passHref>
<a target={'_blank'}>
<AppStoreBadge />
</a>
</Link>
<Link href={'/'} passHref>
<a target={'_blank'}>
<PlayStoreBadge />
</a>
</Link>
</Stack>
</Stack>
<Box p={[0, 0, 10]} pt={[20, 20, 0]}>
<Image
style={{
transform: useBreakpointValue([
'rotate(-45deg)',
'rotate(-45deg)',
'rotate(0deg)',
]),
}}
alt={'Device'}
w={'100%'}
fit={'contain'}
src={'/images/device.png'}
/>
</Box>
</Container>
);
}
import { Box, Heading, Container, Text, Button, Stack } from '@chakra-ui/react';
export default function TextWithCallToAction() {
return (
<Container maxW={'5xl'}>
<Stack as={Box} textAlign={'center'} py={8} px={4} spacing={6}>
<Heading size={'2xl'}>
This is the{' '}
<Text as={'span'} color={'blue.500'}>
main headline
</Text>
</Heading>
<Text fontSize={'xl'} color={'gray.500'}>
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.
</Text>
<Stack
direction={{ base: 'column', md: 'row' }}
spacing={4}
width={'full'}
justifyContent={'center'}>
<Button colorScheme={'blue'}>Primary Action</Button>
<Button>Secondary Action</Button>
</Stack>
</Stack>
</Container>
);
}
import {
Box,
Button,
Image,
Text,
VStack,
useBreakpointValue,
} from '@chakra-ui/react';
export default function WithBackgroundImage() {
const heroHeight = useBreakpointValue({ base: '250px', md: '400px' });
const ctaSize = useBreakpointValue({ base: 'md', md: 'lg' });
const heroTextSize = useBreakpointValue({ base: '2xl', md: '4xl' });
const heroTextPaddingX = useBreakpointValue({ base: '1rem', md: '3.5rem' });
return (
<Box w={'full'} pos={'relative'} h={heroHeight}>
<Image
src={'https://placeimg.com/1000/480/tech/grayscale'}
alt={'hero image'}
w={'100%'}
h={'100%'}
objectFit={'cover'}
/>
<VStack
align={'start'}
pos={'absolute'}
top={'0'}
h={'100%'}
justifyContent={'center'}
spacing={6}
px={heroTextPaddingX}
bg={
'linear-gradient(0.25turn, rgba(49, 130, 206, 0.7),rgba(49, 130, 206, 0.6), rgba(0,0,0,0))'
}
maxW={{ base: 'sm', sm: 'md', md: 'lg' }}>
<Text
color={'white'}
fontWeight={700}
lineHeight={1.2}
fontSize={heroTextSize}>
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
tempor
</Text>
<Button colorScheme={'orange'} size={ctaSize}>
Call to action text
</Button>
</VStack>
</Box>
);
}
import {
SimpleGrid,
Flex,
Heading,
Container,
Text,
Button,
Stack,
} from '@chakra-ui/react';
export default function WithImage() {
return (
<Container maxW={'6xl'}>
<SimpleGrid py={8} px={4} spacing={6} columns={{ base: 1, md: 2 }}>
<Stack spacing={8} maxW={{ md: 'xl' }}>
<Heading size={'2xl'}>
This is the{' '}
<Text as={'span'} color={'blue.500'}>
main headline
</Text>
</Heading>
<Text fontSize={'xl'} color={'gray.500'}>
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.
</Text>
<Stack direction={{ base: 'column', md: 'row' }} spacing={4}>
<Button colorScheme={'blue'}>Primary Action</Button>
<Button>Secondary Action</Button>
</Stack>
</Stack>
<Flex alignItems={'center'} justifyContent={'center'}>
<img
src={'https://via.placeholder.com/400x250'}
width={400}
height={250}
/>
</Flex>
</SimpleGrid>
</Container>
);
}
Made on the Internet by Achim Rolle and Lazar Nikolov