import React from 'react'
import { createUseStyles } from 'react-jss'
import PropTypes from 'prop-types'
import { TOKENS } from '.style'
const FeatureCard1 = (props) => {
const classes = useStyles()
return (
{props.title}
)
}
const useStyles = createUseStyles({
FeatureCard: {
width: '100%',
display: 'flex',
padding: TOKENS.DlSpaceSpaceUnit,
maxWidth: TOKENS.DlSizeSizeMaxwidth,
boxShadow: '5px 5px 10px 0px rgba(18, 18, 18, 0.1)',
alignItems: 'flex-start',
transition: '0.3s',
flexDirection: 'column',
justifyContent: 'flex-start',
'&:hover': {
transform: 'scale(1.02)',
},
},
text: {
marginBottom: TOKENS.DlSpaceSpaceTwounits,
},
image: {
width: TOKENS.DlSizeSizeMedium,
height: TOKENS.DlSizeSizeMedium,
objectFit: 'cover',
borderRadius: TOKENS.DlRadiusRadiusRadius4,
},
})
FeatureCard1.defaultProps = {
image_src:
'https://images.unsplash.com/photo-1512295767273-ac109ac3acfa?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDF8fHllbGxvdyUyMHRlY2h8ZW58MHx8fHwxNjI2MjU1NDk0&ixlib=rb-1.2.1&w=1000',
title: 'Lorem ipsum',
rootClassName: '',
image_alt: 'image',
}
FeatureCard1.propTypes = {
image_src: PropTypes.string,
title: PropTypes.string,
rootClassName: PropTypes.string,
image_alt: PropTypes.string,
}
export default FeatureCard1