1import React from 'react'
2import Layout from '@theme/Layout'
3
4import { getArticlesData, ProcessedFile } from '../lib/articles'
5import { Cta } from '../components/molecules/cta/cta'
6import { Install } from '../components/organisms/install/install'
7import { Container } from '../components/atoms/container/container'
8import { Features } from '../components/organisms/features/features'
9import { Articles } from '../components/organisms/articles/articles'
10import { UseCases } from '../components/organisms/use-cases/use-cases'
11import { BeforeAndAfter } from '../components/organisms/before-and-after/before-and-after'
12import { HeroPlayground } from '../components/organisms/hero-playground/hero-playground'
13
14export default function LandingPage() {
15  const [articles, setArticles] = React.useState<ProcessedFile[]>([])
16
17  React.useEffect(() => {
18    getArticlesData().then((data) => {
19      setArticles(data)
20    })
21  }, [])
22
23  return (
24    <Layout
25      title='Spice.ai OSS - SQL Query & AI Compute Engine'
26      description='Spice is an open-source SQL query and AI compute engine, written in Rust, for building data-driven applications and AI agents. Features data federation, acceleration, RAG, and OpenAI-compatible APIs.'
27      wrapperClassName='tailwind'
28    >
29      <div className='bg-neutral-50 font-sans'>
30        <HeroPlayground />
31
32        <Container>
33          <Features />
34        </Container>
35
36        <BeforeAndAfter />
37
38        <Container>
39          <UseCases />
40        </Container>
41
42        <Container>
43          <Install />
44          <Articles data={articles} />
45        </Container>
46
47        <Cta />
48      </div>
49    </Layout>
50  )
51}
52

1import React from 'react'
2import Layout from '@theme/Layout'
3
4import { getArticlesData, ProcessedFile } from '../lib/articles'
5import { Cta } from '../components/molecules/cta/cta'
6import { Install } from '../components/organisms/install/install'
7import { Container } from '../components/atoms/container/container'
8import { Features } from '../components/organisms/features/features'
9import { Articles } from '../components/organisms/articles/articles'
10import { UseCases } from '../components/organisms/use-cases/use-cases'
11import { BeforeAndAfter } from '../components/organisms/before-and-after/before-and-after'
12import { HeroPlayground } from '../components/organisms/hero-playground/hero-playground'
13
14export default function LandingPage() {
15  const [articles, setArticles] = React.useState<ProcessedFile[]>([])
16
17  React.useEffect(() => {
18    getArticlesData().then((data) => {
19      setArticles(data)
20    })
21  }, [])
22
23  return (
24    <Layout
25      title='Spice.ai OSS - SQL Query & AI Compute Engine'
26      description='Spice is an open-source SQL query and AI compute engine, written in Rust, for building data-driven applications and AI agents. Features data federation, acceleration, RAG, and OpenAI-compatible APIs.'
27      wrapperClassName='tailwind'
28    >
29      <div className='bg-neutral-50 font-sans'>
30        <HeroPlayground />
31
32        <Container>
33          <Features />
34        </Container>
35
36        <BeforeAndAfter />
37
38        <Container>
39          <UseCases />
40        </Container>
41
42        <Container>
43          <Install />
44          <Articles data={articles} />
45        </Container>
46
47        <Cta />
48      </div>
49    </Layout>
50  )
51}
52