import React, { FC } from 'react';
import { 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' flexGrow={1}>
          <HeroSection flexShrink={0} />
          <VStack as='main' flexGrow={1}>
            <BenefitsSection />
            <SocialProofSection />
          </VStack>
          <Footer />
        </VStack>
      </Container>
    </LandingThemeProvider>
  );
};

export default Page;