import React, { FC } from 'react';
import { Box, Container, VStack } from '@chakra-ui/react';
import {
  BenefitsSection,
  Footer,
  HeroSection,
  SocialProofSection,
} from '../../components/landing';
import { LandingThemeProvider } from '../../containers';

const Page: FC = () => {
  return (
    <LandingThemeProvider>
      <Container
        w='full'
        maxWidth='container.xl'
        minH='100vh'
        padding={0}
        bg='white'
        centerContent
      >
        <VStack w='full' h='full' alignItems='stretch'>
          <HeroSection flexShrink={0} />
          <Box flexGrow={1}>
            <VStack as='main'>
              <BenefitsSection />
              <SocialProofSection />
            </VStack>
          </Box>
          <Footer />
        </VStack>
      </Container>
    </LandingThemeProvider>
  );
};

export default Page;
