import React from 'react'
import { Inter } from 'next/font/google'
import { Container, Content, Navbar, Nav, Button, Stack, FlexboxGrid, Col } from 'rsuite'


const CallToAction: React.FC = () => {
  return (
    <Content style={{
      padding: 64,
      background: "linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 32%, rgba(247,247,250,0) 100%)"
    }}>
      <Stack
        direction='column'
        spacing={32}
        alignItems='flex-start'
      >
          {/* Image de background qui est un tableur */}
        <div style={{
          zIndex: -1,
          position: 'absolute',
          top: '0',
          left: '0',
          width: '100%',
          height: '500px',
          backgroundImage: 'url(background.png)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          filter: 'blur(1px)',
        }}></div>

        <Stack.Item>
          <h1>SpreadSheet<br />Programmable<br />Interface</h1>
        </Stack.Item>

        <Stack.Item>
          <p
            style={{
              fontSize: "1.2rem",
              fontWeight: 400,
              lineHeight: 1.5,
              color: "#000"
            }}
          >
            Accelerate your development.<br />
            Transform any online spreadsheet<br />
            into an API in just few click
          </p>
        </Stack.Item>

        <Stack.Item>
          <Button appearance='primary'>Get Started</Button>
        </Stack.Item>
      </Stack>
    </Content>
  )
}


export default CallToAction