1import { Paragraph } from '../../atoms/paragraph/paragraph'
2import { Title } from '../../atoms/title/title'
3import { UseCase } from '../../molecules/use-case/use-case'
4import { dataUseCases } from './data'
5import { UseCasesMobile } from './use-cases-mobile'
6
7export const UseCases = () => {
8  return (
9    <section
10      id='use-cases'
11      className='mt-20 rounded-2xl border border-alpha-150 bg-alpha-50 p-8 pb-24 shadow-box md:p-16 xl:p-20'
12    >
13      <Title as='h2' variant={'medium'} className='mb-6'>
14        Use-Cases
15      </Title>
16
17      <Paragraph className='mb-6 md:max-w-3xl'>
18        Spice powers data apps and AI agents with federated SQL, vector search, LLM memory,
19        real-time data acceleration, observability, and integration across modern and legacy
20        systems.
21      </Paragraph>
22
23      <div className='hidden grid-cols-2 gap-6 lg:grid'>
24        {dataUseCases.map((useCase, index) => (
25          <UseCase key={index} useCaseData={useCase} />
26        ))}
27      </div>
28
29      <UseCasesMobile />
30    </section>
31  )
32}
33

1import { Paragraph } from '../../atoms/paragraph/paragraph'
2import { Title } from '../../atoms/title/title'
3import { UseCase } from '../../molecules/use-case/use-case'
4import { dataUseCases } from './data'
5import { UseCasesMobile } from './use-cases-mobile'
6
7export const UseCases = () => {
8  return (
9    <section
10      id='use-cases'
11      className='mt-20 rounded-2xl border border-alpha-150 bg-alpha-50 p-8 pb-24 shadow-box md:p-16 xl:p-20'
12    >
13      <Title as='h2' variant={'medium'} className='mb-6'>
14        Use-Cases
15      </Title>
16
17      <Paragraph className='mb-6 md:max-w-3xl'>
18        Spice powers data apps and AI agents with federated SQL, vector search, LLM memory,
19        real-time data acceleration, observability, and integration across modern and legacy
20        systems.
21      </Paragraph>
22
23      <div className='hidden grid-cols-2 gap-6 lg:grid'>
24        {dataUseCases.map((useCase, index) => (
25          <UseCase key={index} useCaseData={useCase} />
26        ))}
27      </div>
28
29      <UseCasesMobile />
30    </section>
31  )
32}
33