1import { ArrowRightIcon } from '@heroicons/react/24/outline';
2
3import { Paragraph } from '../../atoms/paragraph/paragraph';
4import { Container } from '../../atoms/container/container';
5
6import { Button } from '../../atoms/button/button';
7import { Title } from '../../atoms/title/title';
8import { Icon } from '../../atoms/icon/icon';
9import { Logo } from '../../atoms/logo/logo';
10
11import { classNames } from '../../../lib/utils';
12
13import { Link, LinkProps } from '../../atoms/link/link';
14
15export const Cta = ({ className }: { className?: string }) => {
16 return (
17 <Container className='px-0'>
18 <section
19 className={classNames(
20 'my-20 flex flex-col overflow-hidden rounded-none sm:rounded-2xl lg:flex-row',
21 className
22 )}
23 >
24 <div className='bg-alpha-900 px-8 py-16 md:p-14 lg:w-7/12 xl:p-20'>
25 <Logo variant='white' />
26 <Title as='h2' variant='medium' className='my-14 text-neutral'>
27 Secure, highly-available access to data.{' '}
28 <span className='text-primary'>Ridiculously easy setup.</span> Super
29 fast data-grounded AI.
30 </Title>
31
32 <div className='flex items-center gap-6'>
33 <Button
34 href='https://docs.spiceai.org/installation'
35 target='_blank'
36 rel='noopener noreferrer'
37 variant='brand'
38 size='lg'
39 className='flex items-center gap-2'
40 >
41 <ArrowRightIcon className='h-6 w-6' />
42 Installation
43 </Button>
44 <Link
45 href='https://github.com/spiceai/spiceai'
46 target='_blank'
47 rel='noopener noreferrer'
48 className='group flex items-center gap-2'
49 >
50 <Icon
51 iconName='github'
52 width='40px'
53 height='40px'
54 className='fill-neutral transition-colors group-hover:fill-primary'
55 />
56 </Link>
57 </div>
58 </div>
59 <div className='flex flex-col justify-between gap-6 bg-alpha-800 px-8 py-16 md:p-14 lg:w-5/12 xl:p-20'>
60 <Paragraph variant='extralarge'>
61 “We have been looking for a way to accelerate queries from our
62 Databricks workspaces. Spice was the perfect solution, as it was
63 super simple to setup and it was easy to define and query
64 accelerated datasets without a lot of overhead.”
65 </Paragraph>
66
67 <div className='flex items-start justify-between gap-6'>
68 <div className='flex flex-col gap-2'>
69 <Title as='h5' variant='small' className='font-bold text-neutral'>
70 Andy Blyler
71 </Title>
72 <Paragraph className='text-neutral'>
73 Chief Data Officer at Barracuda
74 </Paragraph>
75 <img
76 src='img/barracuda.png'
77 alt='Barracuda'
78 width={180}
79 height={44}
80 className='relative right-1.5 mt-2 h-auto w-40'
81 />
82 </div>
83 <img
84 src='img/andy.png'
85 alt='Andy'
86 width={70}
87 height={70}
88 className='h-16 w-16 rounded-full'
89 />
90 </div>
91 </div>
92 </section>
93 </Container>
94 );
95};
96
1import { ArrowRightIcon } from '@heroicons/react/24/outline';
2
3import { Paragraph } from '../../atoms/paragraph/paragraph';
4import { Container } from '../../atoms/container/container';
5
6import { Button } from '../../atoms/button/button';
7import { Title } from '../../atoms/title/title';
8import { Icon } from '../../atoms/icon/icon';
9import { Logo } from '../../atoms/logo/logo';
10
11import { classNames } from '../../../lib/utils';
12
13import { Link, LinkProps } from '../../atoms/link/link';
14
15export const Cta = ({ className }: { className?: string }) => {
16 return (
17 <Container className='px-0'>
18 <section
19 className={classNames(
20 'my-20 flex flex-col overflow-hidden rounded-none sm:rounded-2xl lg:flex-row',
21 className
22 )}
23 >
24 <div className='bg-alpha-900 px-8 py-16 md:p-14 lg:w-7/12 xl:p-20'>
25 <Logo variant='white' />
26 <Title as='h2' variant='medium' className='my-14 text-neutral'>
27 Secure, highly-available access to data.{' '}
28 <span className='text-primary'>Ridiculously easy setup.</span> Super
29 fast data-grounded AI.
30 </Title>
31
32 <div className='flex items-center gap-6'>
33 <Button
34 href='https://docs.spiceai.org/installation'
35 target='_blank'
36 rel='noopener noreferrer'
37 variant='brand'
38 size='lg'
39 className='flex items-center gap-2'
40 >
41 <ArrowRightIcon className='h-6 w-6' />
42 Installation
43 </Button>
44 <Link
45 href='https://github.com/spiceai/spiceai'
46 target='_blank'
47 rel='noopener noreferrer'
48 className='group flex items-center gap-2'
49 >
50 <Icon
51 iconName='github'
52 width='40px'
53 height='40px'
54 className='fill-neutral transition-colors group-hover:fill-primary'
55 />
56 </Link>
57 </div>
58 </div>
59 <div className='flex flex-col justify-between gap-6 bg-alpha-800 px-8 py-16 md:p-14 lg:w-5/12 xl:p-20'>
60 <Paragraph variant='extralarge'>
61 “We have been looking for a way to accelerate queries from our
62 Databricks workspaces. Spice was the perfect solution, as it was
63 super simple to setup and it was easy to define and query
64 accelerated datasets without a lot of overhead.”
65 </Paragraph>
66
67 <div className='flex items-start justify-between gap-6'>
68 <div className='flex flex-col gap-2'>
69 <Title as='h5' variant='small' className='font-bold text-neutral'>
70 Andy Blyler
71 </Title>
72 <Paragraph className='text-neutral'>
73 Chief Data Officer at Barracuda
74 </Paragraph>
75 <img
76 src='img/barracuda.png'
77 alt='Barracuda'
78 width={180}
79 height={44}
80 className='relative right-1.5 mt-2 h-auto w-40'
81 />
82 </div>
83 <img
84 src='img/andy.png'
85 alt='Andy'
86 width={70}
87 height={70}
88 className='h-16 w-16 rounded-full'
89 />
90 </div>
91 </div>
92 </section>
93 </Container>
94 );
95};
96