Features
import {
Container,
SimpleGrid,
Image,
Flex,
Heading,
Text,
Stack,
StackDivider,
Icon,
useColorModeValue,
} from '@chakra-ui/react';
import {
IoAnalyticsSharp,
IoLogoBitcoin,
IoSearchSharp,
} from 'react-icons/io5';
import { ReactElement } from 'react';
interface FeatureProps {
text: string;
iconBg: string;
icon?: ReactElement;
}
const Feature = ({ text, icon, iconBg }: FeatureProps) => {
return (
<Stack direction={'row'} align={'center'}>
<Flex
w={8}
h={8}
align={'center'}
justify={'center'}
rounded={'full'}
bg={iconBg}>
{icon}
</Flex>
<Text fontWeight={600}>{text}</Text>
</Stack>
);
};
export default function SplitWithImage() {
return (
<Container maxW={'5xl'} py={12}>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={10}>
<Stack spacing={4}>
<Text
textTransform={'uppercase'}
color={'blue.400'}
fontWeight={600}
fontSize={'sm'}
bg={useColorModeValue('blue.50', 'blue.900')}
p={2}
alignSelf={'flex-start'}
rounded={'md'}>
Our Story
</Text>
<Heading>A digital Product design agency</Heading>
<Text color={'gray.500'} fontSize={'lg'}>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
</Text>
<Stack
spacing={4}
divider={
<StackDivider
borderColor={useColorModeValue('gray.100', 'gray.700')}
/>
}>
<Feature
icon={
<Icon as={IoAnalyticsSharp} color={'yellow.500'} w={5} h={5} />
}
iconBg={useColorModeValue('yellow.100', 'yellow.900')}
text={'Business Planning'}
/>
<Feature
icon={<Icon as={IoLogoBitcoin} color={'green.500'} w={5} h={5} />}
iconBg={useColorModeValue('green.100', 'green.900')}
text={'Financial Planning'}
/>
<Feature
icon={
<Icon as={IoSearchSharp} color={'purple.500'} w={5} h={5} />
}
iconBg={useColorModeValue('purple.100', 'purple.900')}
text={'Market Analysis'}
/>
</Stack>
</Stack>
<Flex>
<Image
rounded={'md'}
alt={'feature image'}
src={
'https://images.unsplash.com/photo-1554200876-56c2f25224fa?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
}
objectFit={'cover'}
/>
</Flex>
</SimpleGrid>
</Container>
);
}
import { ReactElement } from 'react';
import { Box, SimpleGrid, Icon, Text, Stack, Flex } from '@chakra-ui/react';
import { FcAssistant, FcDonate, FcInTransit } from 'react-icons/fc';
interface FeatureProps {
title: string;
text: string;
icon: ReactElement;
}
const Feature = ({ title, text, icon }: FeatureProps) => {
return (
<Stack>
<Flex
w={16}
h={16}
align={'center'}
justify={'center'}
color={'white'}
rounded={'full'}
bg={'gray.100'}
mb={1}>
{icon}
</Flex>
<Text fontWeight={600}>{title}</Text>
<Text color={'gray.600'}>{text}</Text>
</Stack>
);
};
export default function SimpleThreeColumns() {
return (
<Box p={4}>
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
<Feature
icon={<Icon as={FcAssistant} w={10} h={10} />}
title={'Lifetime Support'}
text={
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore...'
}
/>
<Feature
icon={<Icon as={FcDonate} w={10} h={10} />}
title={'Unlimited Donations'}
text={
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore...'
}
/>
<Feature
icon={<Icon as={FcInTransit} w={10} h={10} />}
title={'Instant Delivery'}
text={
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore...'
}
/>
</SimpleGrid>
</Box>
);
}
import { ReactNode } from 'react';
import {
Stack,
Container,
Box,
Flex,
Text,
Heading,
SimpleGrid,
} from '@chakra-ui/react';
export default function StatsGridWithImage() {
return (
<Box bg={'gray.800'} position={'relative'}>
<Flex
flex={1}
zIndex={0}
display={{ base: 'none', lg: 'flex' }}
backgroundImage="url('/templates/stats-grid-with-image.png')"
backgroundSize={'cover'}
backgroundPosition="center"
backgroundRepeat="no-repeat"
position={'absolute'}
width={'50%'}
insetY={0}
right={0}>
<Flex
bgGradient={'linear(to-r, gray.800 10%, transparent)'}
w={'full'}
h={'full'}
/>
</Flex>
<Container maxW={'7xl'} zIndex={10} position={'relative'}>
<Stack direction={{ base: 'column', lg: 'row' }}>
<Stack
flex={1}
color={'gray.400'}
justify={{ lg: 'center' }}
py={{ base: 4, md: 20, xl: 60 }}>
<Box mb={{ base: 8, md: 20 }}>
<Text
fontFamily={'heading'}
fontWeight={700}
textTransform={'uppercase'}
mb={3}
fontSize={'xl'}
color={'gray.500'}>
Technology
</Text>
<Heading
color={'white'}
mb={5}
fontSize={{ base: '3xl', md: '5xl' }}>
21st century agriculture
</Heading>
<Text fontSize={'xl'} color={'gray.400'}>
The NewLife™ technology allows you to monitor your crops and get
complete insights at real time. The proprietary
software/hardware ecosystem prevents your plants from getting
neglected.
</Text>
</Box>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={10}>
{stats.map((stat) => (
<Box key={stat.title}>
<Text
fontFamily={'heading'}
fontSize={'3xl'}
color={'white'}
mb={3}>
{stat.title}
</Text>
<Text fontSize={'xl'} color={'gray.400'}>
{stat.content}
</Text>
</Box>
))}
</SimpleGrid>
</Stack>
<Flex flex={1} />
</Stack>
</Container>
</Box>
);
}
const StatsText = ({ children }: { children: ReactNode }) => (
<Text as={'span'} fontWeight={700} color={'white'}>
{children}
</Text>
);
const stats = [
{
title: '10+',
content: (
<>
<StatsText>Software modules</StatsText> for detailed monitoring and
real-time analytics
</>
),
},
{
title: '24/7',
content: (
<>
<StatsText>Analytics</StatsText> enabled right in your dashboard without
history limitations
</>
),
},
{
title: '13%',
content: (
<>
<StatsText>Farms</StatsText> in North America has chosen NewLife™ as
their management solution
</>
),
},
{
title: '250M+',
content: (
<>
<StatsText>Plants</StatsText> currently connected and monitored by the
NewLife™ software
</>
),
},
];
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>
);
}
import {
Box,
VStack,
Button,
Flex,
Divider,
chakra,
Grid,
GridItem,
Container,
} from '@chakra-ui/react';
import {} from '@chakra-ui/react';
interface FeatureProps {
heading: string;
text: string;
}
const Feature = ({ heading, text }: FeatureProps) => {
return (
<GridItem>
<chakra.h3 fontSize="xl" fontWeight="600">
{heading}
</chakra.h3>
<chakra.p>{text}</chakra.p>
</GridItem>
);
};
export default function gridListWithCTA() {
return (
<Box as={Container} maxW="7xl" mt={14} p={4}>
<Grid
templateColumns={{
base: 'repeat(1, 1fr)',
sm: 'repeat(2, 1fr)',
md: 'repeat(2, 1fr)',
}}
gap={4}>
<GridItem colSpan={1}>
<VStack alignItems="flex-start" spacing="20px">
<chakra.h2 fontSize="3xl" fontWeight="700">
Medium length title
</chakra.h2>
<Button colorScheme="green" size="md">
Call To Action
</Button>
</VStack>
</GridItem>
<GridItem>
<Flex>
<chakra.p>
Provide your customers a story they would enjoy keeping in mind
the objectives of your website. Pay special attention to the tone
of voice.
</chakra.p>
</Flex>
</GridItem>
</Grid>
<Divider mt={12} mb={12} />
<Grid
templateColumns={{
base: 'repeat(1, 1fr)',
sm: 'repeat(2, 1fr)',
md: 'repeat(4, 1fr)',
}}
gap={{ base: '8', sm: '12', md: '16' }}>
<Feature
heading={'First Feature'}
text={'Short text describing one of you features/service'}
/>
<Feature
heading={'Second Feature'}
text={'Short text describing one of you features/service'}
/>
<Feature
heading={'Third Feature'}
text={'Short text describing one of you features/service'}
/>
<Feature
heading={'Fourth Feature'}
text={'Short text describing one of you features/service'}
/>
</Grid>
</Box>
);
}
import {
Box,
Button,
Container,
Flex,
Heading,
Icon,
Stack,
Text,
useColorModeValue,
} from '@chakra-ui/react';
import { ReactElement } from 'react';
import {
FcAbout,
FcAssistant,
FcCollaboration,
FcDonate,
FcManager,
} from 'react-icons/fc';
interface CardProps {
heading: string;
description: string;
icon: ReactElement;
href: string;
}
const Card = ({ heading, description, icon, href }: CardProps) => {
return (
<Box
maxW={{ base: 'full', md: '275px' }}
w={'full'}
borderWidth="1px"
borderRadius="lg"
overflow="hidden"
p={5}>
<Stack align={'start'} spacing={2}>
<Flex
w={16}
h={16}
align={'center'}
justify={'center'}
color={'white'}
rounded={'full'}
bg={useColorModeValue('gray.100', 'gray.700')}>
{icon}
</Flex>
<Box mt={2}>
<Heading size="md">{heading}</Heading>
<Text mt={1} fontSize={'sm'}>
{description}
</Text>
</Box>
<Button variant={'link'} colorScheme={'blue'} size={'sm'}>
Learn more
</Button>
</Stack>
</Box>
);
};
export default function gridListWith() {
return (
<Box p={4}>
<Stack spacing={4} as={Container} maxW={'3xl'} textAlign={'center'}>
<Heading fontSize={{ base: '2xl', sm: '4xl' }} fontWeight={'bold'}>
Short heading
</Heading>
<Text color={'gray.600'} fontSize={{ base: 'sm', sm: 'lg' }}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
obcaecati ut cupiditate pariatur, dignissimos, placeat amet officiis.
</Text>
</Stack>
<Container maxW={'5xl'} mt={12}>
<Flex flexWrap="wrap" gridGap={6} justify="center">
<Card
heading={'Heading'}
icon={<Icon as={FcAssistant} w={10} h={10} />}
description={
'Lorem ipsum dolor sit amet catetur, adipisicing elit.'
}
href={'#'}
/>
<Card
heading={'Heading'}
icon={<Icon as={FcCollaboration} w={10} h={10} />}
description={
'Lorem ipsum dolor sit amet catetur, adipisicing elit.'
}
href={'#'}
/>
<Card
heading={'Heading'}
icon={<Icon as={FcDonate} w={10} h={10} />}
description={
'Lorem ipsum dolor sit amet catetur, adipisicing elit.'
}
href={'#'}
/>
<Card
heading={'Heading'}
icon={<Icon as={FcManager} w={10} h={10} />}
description={
'Lorem ipsum dolor sit amet catetur, adipisicing elit.'
}
href={'#'}
/>
<Card
heading={'Heading'}
icon={<Icon as={FcAbout} w={10} h={10} />}
description={
'Lorem ipsum dolor sit amet catetur, adipisicing elit.'
}
href={'#'}
/>
</Flex>
</Container>
</Box>
);
}
Support us
Made on the Internet by Achim Rolle and Contributors