1import { Button } from '../../atoms/button/button'
2import { Paragraph } from '../../atoms/paragraph/paragraph'
3import { Title } from '../../atoms/title/title'
4import { UseCaseData } from '../../organisms/use-cases/data'
5
6export const UseCase = ({ useCaseData }: { useCaseData: UseCaseData }) => {
7  return (
8    <div className='group flex h-[368px] flex-col items-start justify-between gap-6 rounded-sm border border-alpha-150 bg-neutral px-10 py-14 transition-colors hover:bg-neutral hover:shadow-box lg:h-auto lg:bg-transparent'>
9      <div>
10        <Title as='h4' variant={'small'} className='line-clamp-2'>
11          {useCaseData.title}
12        </Title>
13        <Paragraph className='mt-6 line-clamp-5'>{useCaseData.description}</Paragraph>
14      </div>
15      <Button
16        variant={'secondary'}
17        href={useCaseData.buttonLink}
18        className='w-full bg-alpha-900 text-neutral lg:w-auto lg:bg-transparent lg:text-alpha-900 lg:group-hover:bg-primary lg:group-hover:text-primary-foreground'
19      >
20        <span className='line-clamp-1'>{useCaseData.buttonText}</span>
21      </Button>
22    </div>
23  )
24}
25

1import { Button } from '../../atoms/button/button'
2import { Paragraph } from '../../atoms/paragraph/paragraph'
3import { Title } from '../../atoms/title/title'
4import { UseCaseData } from '../../organisms/use-cases/data'
5
6export const UseCase = ({ useCaseData }: { useCaseData: UseCaseData }) => {
7  return (
8    <div className='group flex h-[368px] flex-col items-start justify-between gap-6 rounded-sm border border-alpha-150 bg-neutral px-10 py-14 transition-colors hover:bg-neutral hover:shadow-box lg:h-auto lg:bg-transparent'>
9      <div>
10        <Title as='h4' variant={'small'} className='line-clamp-2'>
11          {useCaseData.title}
12        </Title>
13        <Paragraph className='mt-6 line-clamp-5'>{useCaseData.description}</Paragraph>
14      </div>
15      <Button
16        variant={'secondary'}
17        href={useCaseData.buttonLink}
18        className='w-full bg-alpha-900 text-neutral lg:w-auto lg:bg-transparent lg:text-alpha-900 lg:group-hover:bg-primary lg:group-hover:text-primary-foreground'
19      >
20        <span className='line-clamp-1'>{useCaseData.buttonText}</span>
21      </Button>
22    </div>
23  )
24}
25