1import React from 'react'
2import { Title } from '../../atoms/title/title'
3import { Button } from '../../atoms/button/button'
4import { Container } from '../../atoms/container/container'
5import { Paragraph } from '../../atoms/paragraph/paragraph'
6import { Breakdown } from '../../atoms/breakdown/breakdown'
7
8export const HeroPlayground = () => {
9  return (
10    <section className='relative pt-10 md:pt-12'>
11      <Container>
12        <div className='relative z-10 overflow-hidden rounded-lg border border-alpha-150 bg-neutral px-6 py-8 shadow-box md:px-20 md:pb-14 md:pt-20'>
13          <Title
14            as='h1'
15            variant={'large'}
16            className='mx-auto mb-6 mt-7 md:mt-0 md:text-center xl:max-w-[1020px]'
17          >
18            Build <span className='text-primary'>AI apps and agents</span>
19            <br /> that work.
20          </Title>
21
22          <Paragraph className='mb-6 md:text-center'>
23            Build with confidence, knowing your AI  is accurate and grounded in fast, relevant data.
24          </Paragraph>
25
26          <Paragraph className='mb-6 md:text-center'>
27            Spice is an open-source SQL query and AI-inference engine, built in Rust, for developers.
28          </Paragraph>
29
30          <div className='mb-14 grid grid-cols-2 items-center justify-center gap-3 md:flex'>
31            <Button
32              href='/#install-cli'
33              rel='noopener noreferrer'
34              variant={'primary'}
35              className='border border-alpha-900 hover:border-primary'
36            >
37              Installation
38            </Button>
39            <Button
40              href='https://docs.spiceai.org'
41              target='_blank'
42              rel='noopener noreferrer'
43              variant={'secondary'}
44            >
45              Documentation
46            </Button>
47          </div>
48
49          {/* <HeroPlaygroundOptions /> */}
50          <Breakdown />
51
52          <div className='hidden pt-14 md:block'>
53            <Paragraph variant={'large'} className='mb-4 text-center font-bold'>
54              Powered by
55            </Paragraph>
56            <div className='flex items-center justify-center gap-10'>
57              <img
58                src={'/img/apache-arrow.svg'}
59                alt='Apache Arrow Logo'
60                className='h-20 w-auto object-contain'
61              />
62              <img
63                src={'/img/apache-datafusion.svg'}
64                alt='Apache DataFusion Logo'
65                className='h-10 w-auto object-contain'
66              />
67              <img
68                src={'/img/duckdb.svg'}
69                alt='DuckDB Logo'
70                className='h-20 w-auto object-contain'
71              />
72            </div>
73          </div>
74        </div>
75      </Container>
76
77      <Background />
78    </section>
79  )
80}
81
82const Background = () => {
83  return (
84    <div className='absolute left-0 top-0 hidden h-[95%] w-full md:block'>
85      <div className='flex h-full w-full flex-wrap gap-4 overflow-hidden'>
86        {Array.from({ length: 130 }).map((_, index) => (
87          <Line key={index} />
88        ))}
89      </div>
90      <div className='absolute bottom-0 left-0 h-40 w-full bg-gradient-to-t from-neutral-50' />
91    </div>
92  )
93}
94
95const Line = () => {
96  return <div className='h-full w-px bg-alpha-50' />
97}
98

1import React from 'react'
2import { Title } from '../../atoms/title/title'
3import { Button } from '../../atoms/button/button'
4import { Container } from '../../atoms/container/container'
5import { Paragraph } from '../../atoms/paragraph/paragraph'
6import { Breakdown } from '../../atoms/breakdown/breakdown'
7
8export const HeroPlayground = () => {
9  return (
10    <section className='relative pt-10 md:pt-12'>
11      <Container>
12        <div className='relative z-10 overflow-hidden rounded-lg border border-alpha-150 bg-neutral px-6 py-8 shadow-box md:px-20 md:pb-14 md:pt-20'>
13          <Title
14            as='h1'
15            variant={'large'}
16            className='mx-auto mb-6 mt-7 md:mt-0 md:text-center xl:max-w-[1020px]'
17          >
18            Build <span className='text-primary'>AI apps and agents</span>
19            <br /> that work.
20          </Title>
21
22          <Paragraph className='mb-6 md:text-center'>
23            Build with confidence, knowing your AI  is accurate and grounded in fast, relevant data.
24          </Paragraph>
25
26          <Paragraph className='mb-6 md:text-center'>
27            Spice is an open-source SQL query and AI-inference engine, built in Rust, for developers.
28          </Paragraph>
29
30          <div className='mb-14 grid grid-cols-2 items-center justify-center gap-3 md:flex'>
31            <Button
32              href='/#install-cli'
33              rel='noopener noreferrer'
34              variant={'primary'}
35              className='border border-alpha-900 hover:border-primary'
36            >
37              Installation
38            </Button>
39            <Button
40              href='https://docs.spiceai.org'
41              target='_blank'
42              rel='noopener noreferrer'
43              variant={'secondary'}
44            >
45              Documentation
46            </Button>
47          </div>
48
49          {/* <HeroPlaygroundOptions /> */}
50          <Breakdown />
51
52          <div className='hidden pt-14 md:block'>
53            <Paragraph variant={'large'} className='mb-4 text-center font-bold'>
54              Powered by
55            </Paragraph>
56            <div className='flex items-center justify-center gap-10'>
57              <img
58                src={'/img/apache-arrow.svg'}
59                alt='Apache Arrow Logo'
60                className='h-20 w-auto object-contain'
61              />
62              <img
63                src={'/img/apache-datafusion.svg'}
64                alt='Apache DataFusion Logo'
65                className='h-10 w-auto object-contain'
66              />
67              <img
68                src={'/img/duckdb.svg'}
69                alt='DuckDB Logo'
70                className='h-20 w-auto object-contain'
71              />
72            </div>
73          </div>
74        </div>
75      </Container>
76
77      <Background />
78    </section>
79  )
80}
81
82const Background = () => {
83  return (
84    <div className='absolute left-0 top-0 hidden h-[95%] w-full md:block'>
85      <div className='flex h-full w-full flex-wrap gap-4 overflow-hidden'>
86        {Array.from({ length: 130 }).map((_, index) => (
87          <Line key={index} />
88        ))}
89      </div>
90      <div className='absolute bottom-0 left-0 h-40 w-full bg-gradient-to-t from-neutral-50' />
91    </div>
92  )
93}
94
95const Line = () => {
96  return <div className='h-full w-px bg-alpha-50' />
97}
98