src/pages/business.js

import React, { useEffect } from "react"
import styled from "styled-components"
import { StaticQuery, graphql } from "gatsby"
import { Box, Text, Heading, Image, Flex, Button, Link } from "rebass"
import Download  from "react-feather/dist/icons/download"
import Swiper from "react-id-swiper"

import { isWindow } from "src/utils/checks"
import { Helmet } from "src/features/Helmet"
import { Layout } from "src/ui/Layout"
import { Container } from "src/ui/Container"


const BusinessPage = () => {
  useEffect(() => {
    if (isWindow()) {
      document.body.style = "overflow-x: hidden"
    }

    return () => {
      if (isWindow()) {
        document.body.style = "overflow-x: auto"
      }
    }
  })

  return (
    <StaticQuery
      query={query}
      render={({
        datoCmsBusinessPage: {
          title,
          description,
          button1Text,
          button1Link,
          featuresSectionTitle,
          featuresSectionDescription,
          featuresSectionImage: { url: featuresSectionImageUrl },
          features,
          subfeatures,
          callToActionSectionTitle,
          callToActionSectionDescription,
          callToActionSectionButtonText,
          callToActionSectionLink,
          reviews,
          additionalButtons,
        },
      }) => (
        <>
          <Helmet title={"Business page"} slider={true}></Helmet>
          <Layout>
            <Container>
              <Box pt={["6", "6", "6", "160px"]} pb={["6", "6", "6", "120px"]}>
                <Heading
                  mb={"6"}
                  as={"h1"}
                  fontWeight={"600"}
                  lineHeight={"140%"}
                  textAlign={"center"}
                  fontSize={["4", "4", "4", "7"]}
                >
                  {title && title}
                </Heading>
                <Heading
                  as={"h2"}
                  color={"#808080"}
                  fontWeight={"400"}
                  px={[0, 7, 10, 10]}
                  lineHeight={"140%"}
                  textAlign={"center"}
                  fontSize={["2", "2", "2", "4"]}
                >
                  {description && description}
                </Heading>
                <Flex
                  alignItems={"center"}
                  flexDirection={"column"}
                  mt={["6", "6", "6", "60px"]}
                >
                  <ActionButton variant="primary">
                    <a href={button1Link && button1Link}>
                      {button1Text && button1Text}
                    </a>
                  </ActionButton>
                  <Text
                    mt={"10px"}
                    color={"#808080"}
                    fontSize={["1", "1", "1", "2"]}
                  >
                    Lorem ipsum dolor*
                  </Text>
                </Flex>
              </Box>
              <Container px={["0", "0", "4", "4"]}>
                <FeatureFirst
                  pt={[4, 6, 7, 8]}
                  px={[2, 7, 9, 10]}
                  pb={[4, "210px", "210px", 8]}
                  mb={["240px", "240px", "330px", "90px"]}
                >
                  <Heading
                    as={"h2"}
                    px={[0, 0, 0, 10]}
                    fontWeight={"600"}
                    lineHeight={"140%"}
                    mb={["8", "8", "8", "60px"]}
                    fontSize={["5", "5", "5", "36px"]}
                  >
                    {featuresSectionTitle && featuresSectionTitle}
                  </Heading>
                  <Text
                    px={[0, 0, 0, 10]}
                    lineHeight={"140%"}
                    pb={["70px", "70px", "70px", "140px"]}
                    fontSize={["2", "2", "2", "18px"]}
                  >
                    {featuresSectionDescription && featuresSectionDescription}
                  </Text>
                  {features &&
                    features.map(({ title, body, id }) => (
                      <Box
                        key={id}
                        width={[1, 1, 1, 1 / 2]}
                        mb={["3", "3", "3", "45px"]}
                      >
                        <Heading
                          as={"h3"}
                          color={"red"}
                          fontWeight={"600"}
                          textAlign={"left"}
                          lineHeight={"140%"}
                          fontSize={["18px", "18px", "18px", "5"]}
                        >
                          {title}
                        </Heading>
                        <Text
                          textAlign={"left"}
                          lineHeight={"140%"}
                          fontSize={["2", "2", "2", "18px"]}
                        >
                          {body}
                        </Text>
                      </Box>
                    ))}
                  <FeatureBg src={featuresSectionImageUrl}></FeatureBg>
                </FeatureFirst>
                <Box mb={"100px"}>
                  {subfeatures &&
                    subfeatures.map(
                      ({
                        image: { url },
                        title,
                        body,
                        buttonText,
                        buttonLink,
                        id,
                      }) => (
                        <FeatureSecond
                          key={id}
                          alignItems={"center"}
                          justifyContent={"space-between"}
                        >
                          <FeatureImage src={url}></FeatureImage>
                          <Box width={[1, 1, 1, 1 / 2.5]} mb={"20px"}>
                            <Heading
                              as={"h3"}
                              color={"red"}
                              fontSize={"5"}
                              textAlign={"left"}
                              fontWeight={"600"}
                              lineHeight={"140%"}
                            >
                              {title}
                            </Heading>
                            <Text
                              textAlign={"left"}
                              lineHeight={"140%"}
                              fontSize={["2", "2", "2", "18px"]}
                              my={["22px", "22px", "22px", "22px", "60px"]}
                            >
                              {body}
                            </Text>
                            <ActionButton variant="primary">
                              <a href={buttonLink && buttonLink}>
                                {buttonText}
                              </a>
                            </ActionButton>
                          </Box>
                        </FeatureSecond>
                      )
                    )}
                </Box>
              </Container>
            </Container>
            {reviews && reviews.length > 0 && (
              <Box bg={"black"} color={"white"}>
                <Container py={"95px"}>
                  <Actions
                    flexWrap={"wrap"}
                    alignItems={"stretch"}
                    justifyContent={"space-between"}
                  >
                    <Flex
                      width={[1, 1, 1, 1 / 2]}
                      flexDirection={"column"}
                      alignItems={"flex-start"}
                      justifyContent={"space-between"}
                    >
                      <Box>
                        <Heading
                          as={"h3"}
                          mb={"2"}
                          fontSize={"7"}
                          fontWeight={"600"}
                        >
                          {/* Call to action block */}
                          {callToActionSectionTitle && callToActionSectionTitle}
                        </Heading>
                        <Text fontSize={"18px"}>
                          {callToActionSectionDescription &&
                            callToActionSectionDescription}
                        </Text>
                      </Box>

                      <StyledButton variant="primary">
                        <a
                          href={
                            callToActionSectionLink && callToActionSectionLink
                          }
                        >
                          {callToActionSectionButtonText &&
                            callToActionSectionButtonText}
                        </a>
                      </StyledButton>
                    </Flex>
                    <Box
                      width={[1, 1, 1, 1 / 3]}
                      mt={["45px", "45px", "45px", "0"]}
                      mb={["60px", "60px", "60px", "0"]}
                    >
                      <Swiper
                        {...swiperParams}
                        containerClass={"swiper-container swiper-custom"}
                      >
                        {reviews.map(
                          ({
                            title,
                            bodyNode: { childMarkdownRemark: html },
                            signature,
                            id,
                          }) => {
                            return (
                              <Box key={id}>
                                <Text
                                  fontWeight={"600"}
                                  fontSize={"18px"}
                                  mb={"28px"}
                                >
                                  {title}
                                </Text>
                                <Text
                                  mb={"12px"}
                                  fontSize={"18px"}
                                  fontWeight={"300"}
                                  lineHeight={"160%"}
                                  dangerouslySetInnerHTML={{
                                    __html: html.html,
                                  }}
                                >
                                </Text>
                                <Text
                                  mb={"24px"}
                                  fontSize={"2"}
                                  fontWeight={"500"}
                                >
                                  {signature}
                                </Text>
                              </Box>
                            )
                          }
                        )}
                      </Swiper>
                    </Box>
                  </Actions>
                </Container>
              </Box>
            )}
            <Flex
              py={"8"}
              flexWrap={"wrap"}
              alignItems={"center"}
              justifyContent={"center"}
            >
              {additionalButtons &&
                additionalButtons.map(({ title, id }) => (
                  <DownloadKit key={id} m={"3"} href="/">
                    <Download size={30} color="black"></Download>
                    <Text mt={"5"}>{title}</Text>
                  </DownloadKit>
                ))}
            </Flex>
          </Layout>
        </>
      )}
    />
  )
}

const query = graphql`
  {
    datoCmsBusinessPage {
      title
      description
      button1Text
      button1Link
      featuresSectionTitle
      featuresSectionDescription
      featuresSectionImage {
        id
        url
      }
      features {
        id
        title
        body
      }
      subfeatures {
        id
        title
        body
        buttonText
        buttonLink
        image {
          url
        }
      }
      callToActionSectionTitle
      callToActionSectionDescription
      callToActionSectionButtonText
      callToActionSectionLink
      reviews {
        title
        id
        author
        bodyNode {
          childMarkdownRemark {
            html
          }
        }
      }
      additionalButtons {
        id
        title
        link
      }
    }
  }
`

const ActionButton = styled(Button)`
  padding: 16px 24px;
`

const FeatureFirst = styled(Box)`
  background: #000;
  border-radius: 3px;
  color: #fff;
  position: relative;
  text-align: center;
`

const FeatureSecond = styled(Flex)`
  &:nth-child(odd) {
    flex-direction: row-reverse;
  }
`

const FeatureImage = styled(Image)`
  max-width: 300px;
  @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
    display: none;
  }
`

const FeatureBg = styled(Image)`
  position: absolute;
  bottom: 50px;
  right: -240px;
  max-width: 590px;
  @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
    bottom: -240px;
    left: calc(50% - 225px);
    max-width: 450px;
  }
  @media (max-width: ${({ theme }) => theme.breakpoints.s}) {
    bottom: -150px;
    max-width: 320px;
  }
`

const Actions = styled(Flex)`
  position: relative;
`

const StyledButton = styled(Button)`
  padding: 16px 24px;
  @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
    position: absolute;
    bottom: 0;
  }
`

const DownloadKit = styled(Link)`
  align-items: center;
  display: flex;
  flex-direction: column;
  border: solid 3px #000;
  border-radius: 2px;
  color: black;
  padding: 47px 42px;
  transition: all ease 0.3s;
  &:hover {
    background: #ff003d;
    border-color: #ff003d;
    color: #fff;
    svg {
      stroke: #fff;
    }
  }
`

const swiperParams = {
  lazy: true,
  pagination: {
    el: ".swiper-pagination",
    type: "bullets",
    clickable: true,
  },
  spaceBetween: 30,
}

export default BusinessPage