Features
With cards
import { SVGProps } from 'react';
import {
Container,
Box,
chakra,
Text,
SimpleGrid,
Flex,
Link,
useColorModeValue
} from '@chakra-ui/react';
interface IFeature {
heading: string;
content: string;
icon: SVGProps<SVGElement>;
}
const features: IFeature[] = [
{
heading: 'Payments',
content: 'Choose from Stripe, Paddle, Braintree, or PayPal to launch your product quickly.',
icon: (
<svg
width={36}
height={36}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
></path>
</svg>
)
},
{
heading: 'Invoicing',
content: 'Webhooks are wired up to automatically email customers PDF receipts and invoices.',
icon: (
<svg
width={36}
height={36}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
></path>
</svg>
)
},
{
heading: 'API Included',
content: 'Roll your own API to easily connect with other apps or services. Pull in updates.',
icon: (
<svg
width={36}
height={36}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
)
}
];
const Features = () => {
return (
<Container maxW="6xl" p={{ base: 5, md: 10 }}>
<chakra.h3 fontSize="4xl" fontWeight="bold" mb={20} textAlign="center">
Everything your app needs and more
</chakra.h3>
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} placeItems="center" spacing={10} mb={4}>
{features.map((feature, index) => (
<Box
key={index}
bg={useColorModeValue('gray.100', 'gray.700')}
p={6}
rounded="lg"
textAlign="center"
pos="relative"
>
<Flex
p={2}
w="max-content"
color="white"
bgGradient="linear(to-br, #228be6, #15aabf)"
rounded="md"
marginInline="auto"
pos="absolute"
left={0}
right={0}
top="-1.5rem"
boxShadow="lg"
>
{feature.icon}
</Flex>
<chakra.h3 fontWeight="semibold" fontSize="2xl" mt={6}>
{feature.heading}
</chakra.h3>
<Text fontSize="md" mt={4}>
{feature.content}
</Text>
<Link href="#" mt={4} fontSize="sm" color="blue.400">
Learn more →
</Link>
</Box>
))}
</SimpleGrid>
</Container>
);
};
export default Features;
Simple 2 columns
import { Container, Box, chakra, Text, Icon, SimpleGrid } from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { MdOutlinePersonPin, MdPermDeviceInformation, MdOutlineFlashlightOn } from 'react-icons/md';
import { SiMinds } from 'react-icons/si';
import { IconType } from 'react-icons';
interface IFeature {
heading: string;
content: string;
icon: IconType;
}
const features: IFeature[] = [
{
heading: 'Learn with flashcards',
content:
'The main part of the learning process is using flashcards, you see a question, then you answer it.',
icon: MdOutlineFlashlightOn
},
{
heading: 'Never forget',
content: `With our latest SRS algorithm, you will never forget what you've learned. The more you remember something, the less often the system will ask you to review it.`,
icon: SiMinds
},
{
heading: 'Tiny bits of information',
content:
'Instead of showing you a wall of text that will take you a long time to read and then that you quickly forget, we show you tiny bits of information every day.',
icon: MdPermDeviceInformation
},
{
heading: 'Community',
content: `Keep your learning streak going, see stats of what you've learned and share it with others via your public profile. You can also join our private discord server!`,
icon: MdOutlinePersonPin
}
];
const Features = () => {
return (
<Container maxW="6xl" p={{ base: 5, md: 10 }}>
<chakra.h3 fontSize="4xl" fontWeight="bold" mb={3} textAlign="center">
Features
</chakra.h3>
<SimpleGrid columns={{ base: 1, md: 2 }} placeItems="center" spacing={16} mt={12} mb={4}>
{features.map((feature, index) => (
<Box key={index} textAlign="center">
<Icon as={feature.icon} w={10} h={10} color="blue.400" />
<chakra.h3 fontWeight="semibold" fontSize="2xl">
{feature.heading}
</chakra.h3>
<Text fontSize="md">{feature.content}</Text>
</Box>
))}
</SimpleGrid>
</Container>
);
};
export default Features;
