1import React from 'react' 2import styled from 'styled-components' 3import {Flex, Image, Text} from 'rebass' 4 5const Card = styled(Flex)` 6 background-color: #f2f2f2ab; 7 box-shadow: 5px 5px 1px 1px ${(props) => props.theme.colors.red}; 8 border-radius: 2px; 9` 10 11const Desc = styled.p` 12 padding: 5px 0; 13 font-size: 16px; 14` 15 16const Title = styled(Text)` 17 font-size: 24px; 18 font-weight: 500; 19 text-shadow: 1px 2px 2px #f061df6e; 20` 21 22const Icon = styled(Image)` 23 width: 110px; 24 flex-shrink: 0; 25` 26 27const FeatureCard = ({icon, text, title}) => { 28 return ( 29 <Card alignItems='center' flexDirection={['column', 'row']} p={5} m={4}> 30 <Icon src={icon} /> 31 <Flex flexDirection='column' pl={[0, 4]} pt={2}> 32 <Title textAlign={['center', 'left']}>{title}</Title> 33 <Desc>{text}</Desc> 34 </Flex> 35 </Card> 36 ) 37} 38 39export default FeatureCard 40