1import { Paragraph } from '../../atoms/paragraph/paragraph';
2import { Title } from '../../atoms/title/title';
3import { Link } from '../../atoms/link/link';
4
5export const Feature = ({
6  title,
7  description,
8  docsLink,
9}: {
10  title: string;
11  description: string;
12  docsLink?: string;
13}) => {
14  return (
15    <div className='flex flex-col items-start gap-4 rounded-sm border border-alpha-150 px-6 py-10 md:gap-10 md:px-10 bg-neutral shadow-box'>
16      <Squares />
17      <Title as='h3' variant={'small'} className='line-clamp-2'>
18        {title}
19      </Title>
20      <Paragraph>{description}</Paragraph>
21      {docsLink && (
22        <Link
23          className='hover:text-primary-500'
24          href={docsLink}
25          target='_blank'
26          rel='noopener noreferrer'
27        >
28          Docs
29        </Link>
30      )}
31    </div>
32  );
33};
34
35const Squares = ({ width = 24, height = 24 }) => (
36  <svg
37    xmlns='http://www.w3.org/2000/svg'
38    width={width}
39    height={height}
40    viewBox='0 0 24 24'
41    fill='none'
42  >
43    <path
44      d='M6.42857 9.75L2.25 12L6.42857 14.25M6.42857 9.75L12 12.75L17.5714 9.75M6.42857 9.75L2.25 7.5L12 2.25L21.75 7.5L17.5714 9.75M17.5714 9.75L21.75 12L17.5714 14.25M17.5714 14.25L21.75 16.5L12 21.75L2.25 16.5L6.42857 14.25M17.5714 14.25L12 17.25L6.42857 14.25'
45      stroke='#F37721'
46      strokeWidth='1.5'
47      strokeLinecap='round'
48      strokeLinejoin='round'
49    />
50  </svg>
51);
52

1import { Paragraph } from '../../atoms/paragraph/paragraph';
2import { Title } from '../../atoms/title/title';
3import { Link } from '../../atoms/link/link';
4
5export const Feature = ({
6  title,
7  description,
8  docsLink,
9}: {
10  title: string;
11  description: string;
12  docsLink?: string;
13}) => {
14  return (
15    <div className='flex flex-col items-start gap-4 rounded-sm border border-alpha-150 px-6 py-10 md:gap-10 md:px-10 bg-neutral shadow-box'>
16      <Squares />
17      <Title as='h3' variant={'small'} className='line-clamp-2'>
18        {title}
19      </Title>
20      <Paragraph>{description}</Paragraph>
21      {docsLink && (
22        <Link
23          className='hover:text-primary-500'
24          href={docsLink}
25          target='_blank'
26          rel='noopener noreferrer'
27        >
28          Docs
29        </Link>
30      )}
31    </div>
32  );
33};
34
35const Squares = ({ width = 24, height = 24 }) => (
36  <svg
37    xmlns='http://www.w3.org/2000/svg'
38    width={width}
39    height={height}
40    viewBox='0 0 24 24'
41    fill='none'
42  >
43    <path
44      d='M6.42857 9.75L2.25 12L6.42857 14.25M6.42857 9.75L12 12.75L17.5714 9.75M6.42857 9.75L2.25 7.5L12 2.25L21.75 7.5L17.5714 9.75M17.5714 9.75L21.75 12L17.5714 14.25M17.5714 14.25L21.75 16.5L12 21.75L2.25 16.5L6.42857 14.25M17.5714 14.25L12 17.25L6.42857 14.25'
45      stroke='#F37721'
46      strokeWidth='1.5'
47      strokeLinecap='round'
48      strokeLinejoin='round'
49    />
50  </svg>
51);
52