{"version":3,"sources":["webpack:///./src/components/MainHeroTitle.js","webpack:///./src/components/LinesFromBottom.js","webpack:///./src/components/publishers/EntrepreneurChallenge.js","webpack:///./src/pages/brands/stackagency.js","webpack:///./src/components/styles/OutlinedText.js","webpack:///./src/components/sections/BrandsStackAgencyStatic.js","webpack:///./src/components/styles/animations.js","webpack:///./src/components/HeroLanding.js"],"names":["Wrapper","styled","div","TitleWrapper","props","theme","titleWidth","mediaMedium","MainHeroTitle","children","label","link","cleanTitle","as","Title","Headline80","attrs","Line1","span","linesSkew","color","brandColor3","Line2","Line3","LinesFromBottom","black1","overflow","marginTopMobile","marginTop","paddingTop","Grid","white","Decoration","ContainerRelative","Container","EntrepreneurChallenge","title1","title2","OutlinedText","fill","stroke","component","AsyncSection","loadable","StackMedia","title","description","static","Outline","textBlack1","size","inline","Element","styles","display","style","BrandsStackAgencyStatic","images","useStaticQuery","section","image","landingDesktop","href","imageMobile","landingMedia","bottomMargins","wrapperOverflow","keyFrames","SlideInBottom","mediaTransform","imageRatio","imageWidth","imageMaxWidth","topPadding","bottomPadding","imageTranslate","imageMarginTop","mediaImgMargins","bottomSize","mediaImgWidth","bottomSizeBottomMedia","gatsbyWidth","margins","FadeSlideInTopRight","keyframes","SlideInRight","FadeSlideInRight","SlideInLeft","SlideInTop","FlyBy","WobbleFrames","FadeInBottomFrames","MoveInBottom","active","translateFrom","FadeInBottom","css","FadeInRight","FadeInLeft","FadeIn","FadeInRightSmall","FadeInLeftSmall","mediaDesktop","topLargePadding","bottomPaddingMedia","Display","hasMobileImage","animationPre","imageBottom","imageSize","DesktopImage","Image","Bottom","Space","bottomSizeMedia","SubTitle","Eyebrows20","ImageMedia","mediaImgHeight","mediaCss","Blur","blurheight","blurPosition","blurHeightLarge","HomeLanding","animationComponent","noBottom","blurImage","setActive","useState","handleLoad","onLoad","fluid","childImageSharp","bottom","position"],"mappings":"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","file":"component---src-pages-brands-stackagency-js-60ba91fa65bbcfb37b5d.js","sourcesContent":["import React from \"react\";\nimport { Headline80 } from \"./styles/Headings\";\nimport PrimaryButton from \"./PrimaryButton\";\nimport styled from \"styled-components\";\nimport { mediaMedium } from \"./styles/variables\";\n\nconst Wrapper = styled.div`\n  position: relative;\n  z-index: 4;\n`;\n\nconst TitleWrapper = styled.div`\n  max-width: ${(props) => props.theme.titleWidth ?? \"570px\"};\n  margin-bottom: 22px;\n  text-transform: uppercase;\n\n  @media (${mediaMedium}) {\n    margin-bottom: 40px;\n  }\n`;\n\nconst MainHeroTitle = ({ children, label, link, cleanTitle, theme, as }) => {\n  const Title = cleanTitle ? \"div\" : Headline80;\n  return (\n    <Wrapper>\n      <TitleWrapper theme={theme}>\n        <Title as=\"h1\">{children}</Title>\n      </TitleWrapper>\n\n      {label && <PrimaryButton attrs={link}>{label}</PrimaryButton>}\n    </Wrapper>\n  );\n};\n\nexport default MainHeroTitle;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { linesSkew, mediaMedium } from \"./styles/variables\";\nimport { brandColor3 } from \"./styles/Colors\";\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: 100%;\n  padding-top: 100%;\n  pointer-events: none;\n`;\n\nconst Line1 = styled.span`\n  @media (${mediaMedium}) {\n    pointer-events: none;\n    position: absolute;\n    width: 100%;\n    height: 150%;\n    transform: skewY(${linesSkew});\n    border-bottom: 1px solid;\n    border-right: 1px solid;\n    border-color: ${(props) => props.color ?? brandColor3};\n    top: -8px;\n    right: -23px;\n  }\n`;\n\nconst Line2 = styled(Line1)`\n  @media (${mediaMedium}) {\n    top: 18px;\n    right: -8px;\n  }\n`;\n\nconst Line3 = styled(Line1)`\n  @media (${mediaMedium}) {\n    top: 44px;\n    right: 7px;\n  }\n`;\n\nconst LinesFromBottom = ({ color }) => {\n  return (\n    <Wrapper>\n      <Line1 color={color} />\n      <Line2 color={color} />\n      <Line3 color={color} />\n    </Wrapper>\n  );\n};\n\nexport default LinesFromBottom;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"../styles/Container\";\nimport { black1, white } from \"../styles/Colors\";\nimport { Headline80 } from \"../styles/Headings\";\nimport OutlinedText from \"../styles/OutlinedText\";\nimport { mediaMedium } from \"../styles/variables\";\nimport LinesFromBottom from \"../LinesFromBottom\";\n\nconst Wrapper = styled.div`\n  background: ${black1};\n  overflow: ${(props) => props?.theme?.overflow ?? 'hidden'};\n  margin-top: ${(props) => props?.theme?.marginTopMobile ?? '-60px'};\n  padding-top: 80px;\n  \n  \n  @media (${mediaMedium}) {\n    margin-top: ${(props) => props?.theme?.marginTop ?? 0}px;\n    padding-top: ${(props) => props?.theme?.paddingTop ?? 0}px;\n  }\n`;\n\nconst Grid = styled.div`\n  padding: 88px 0;\n\n  @media (${mediaMedium}) {\n    padding: 144px 0 146px;\n    display: grid;\n    grid-template-columns: calc(100% * 6 / 12);\n    grid-column-gap: 24px;\n  }\n`;\n\nconst Title = styled(Headline80)`\n  color: ${white};\n  margin-bottom: 58px;\n\n  @media (${mediaMedium}) {\n    margin-bottom: 65px;\n  }\n`;\n\nconst Decoration = styled.div`\n  display: none;\n\n  @media (${mediaMedium}) {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    right: calc(100% * 1.5 / 12);\n    bottom: -8%;\n  }\n\n  @media (min-width: 890px) {\n    bottom: 4%;\n  }\n\n  @media (min-width: 950px) {\n    bottom: 18%;\n  }\n\n  @media (min-width: 1050px) {\n    bottom: 400px;\n  }\n`;\n\nconst ContainerRelative = styled(Container)`\n  position: relative;\n`;\n\nconst EntrepreneurChallenge = ({children, title1, title2, theme}) => {\n  return (\n    <Wrapper theme={theme}>\n      <ContainerRelative>\n        <Decoration>\n          <LinesFromBottom />\n        </Decoration>\n        <Grid>\n          <div>\n            <Title as={\"div\"}>\n              {title1}{\" \"}\n              <OutlinedText\n                fill={\"transparent\"}\n                stroke={white}\n                component={Headline80}\n                as={\"span\"}\n              >\n                {title2}\n              </OutlinedText>\n            </Title>\n            {children}\n          </div>\n        </Grid>\n      </ContainerRelative>\n    </Wrapper>\n  );\n};\n\nexport default EntrepreneurChallenge;\n","import React from \"react\";\nimport Layout from \"../../components/Layout\";\nimport Seo from \"../../components/Seo\";\nimport loadable from \"@loadable/component\";\nimport LazyLoadSection from \"../../components/LazyLoadSection\";\nimport StaticSection from \"../../components/sections/BrandsStackAgencyStatic\";\n\nconst AsyncSection = loadable(() =>\n  import(\"../../components/sections/BrandsStackAgencyDefer\")\n);\n\nconst StackMedia = () => (\n  <Layout>\n    <Seo\n      title=\"StackAgency for Brands\"\n      description=\"Connecting brands with highly engaged audiences through sponsored content\"\n    />\n\n    <LazyLoadSection static={<StaticSection />}>\n      <AsyncSection />\n    </LazyLoadSection>\n  </Layout>\n);\n\nexport default StackMedia;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { textBlack1, white } from \"./Colors\";\nimport { mediaMedium } from \"./variables\";\n\nconst Outline = styled.span`\n  color: ${(props) => props.color ?? textBlack1};\n  -webkit-text-fill-color: ${(props) => props.fill ?? white};\n  -webkit-text-stroke-width: ${(props) => props.size ?? \"1px\"};\n  -webkit-text-stroke-color: ${(props) =>\n    props.stroke ?? props.color ?? textBlack1};\n\n  @media (${mediaMedium}) {\n    -webkit-text-stroke-width: ${(props) => props.size ?? \"2px\"};\n  }\n`;\n\nconst OutlinedText = ({\n  color,\n  fill,\n  stroke,\n  size,\n  as,\n  component,\n  children,\n  inline\n}) => {\n  const Element = component ?? \"<span />\";\n  const styles = inline ? { display: \"inline\" } : {};\n\n  return (\n    <Element style={styles} as={as}>\n      <Outline color={color} fill={fill} stroke={stroke} size={size}>\n        {children}\n      </Outline>\n    </Element>\n  );\n};\n\nexport default OutlinedText;\n","import React from 'react'\nimport { graphql, useStaticQuery } from 'gatsby'\nimport {  white } from '../styles/Colors'\nimport { SlideInBottom } from '../styles/animations'\nimport OutlinedText from '../styles/OutlinedText'\nimport { Headline80 } from '../styles/Headings'\nimport HomeLanding from '../HeroLanding'\nimport EntrepreneurChallenge from '../publishers/EntrepreneurChallenge'\nimport { Body24 } from '../styles/BodyTypes'\n\nconst BrandsStackAgencyStatic = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      landingDesktop: file(relativePath: { eq: \"stackagency/Ipad_12_NYP_content.png\" }) {\n        childImageSharp {\n          fluid(quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp_noBase64\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      landingMedia: file(relativePath: { eq: \"stackagency/Ipad_12_NYP_content.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 911, maxHeight: 1012, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp_noBase64\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      landingMedia: file(relativePath: { eq: \"stackagency/Ipad_12_NYP_content.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 911, maxHeight: 1012, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp_noBase64\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `)\n\n  return (\n    <div style={{overflow: 'hidden'}}>\n      <HomeLanding\n        section=\"STACKAGENCY FOR BRANDS\"\n        image={images.landingDesktop}\n        link={{\n          attrs: {\n            href: \"mailto:agency@stackcommerce.com?subject=STACKAGENCY%20For%20Publishers\",\n            as: 'a',\n          },\n          label: 'Get Started'\n        }}\n        cleanTitle\n        imageMobile={images.landingMedia}\n        bottomMargins=\"-35%\"\n        theme={{\n          wrapperOverflow      : 'visible',\n          titleWidth           : '820px',\n          keyFrames            : SlideInBottom,\n          mediaTransform       : 'translateX(-12px)',\n          imageRatio           : '110%',\n          imageWidth           : '140%',\n          imageMaxWidth        : '140vw',\n          topPadding           : '98px',\n          bottomPadding        : '240px',\n          imageTranslate       : 'translate(calc(100% * 3.9 / 12), calc(100% * 2.8 / 12))',\n          imageMarginTop       : 0,\n          mediaImgMargins      : '0 auto',\n          bottomSize           : '0',\n          mediaImgWidth        : '90%',\n          bottomSizeBottomMedia: '0',\n          gatsbyWidth          : '880px',\n        }}\n      >\n        <Headline80>\n          CONNECTING BRANDS WITH HIGHLY ENGAGED AUDIENCES\n          <OutlinedText component={Headline80} as=\"span\">\n            THROUGH SPONSORED CONTENT\n          </OutlinedText>\n        </Headline80>\n      </HomeLanding>\n\n\n      <EntrepreneurChallenge\n        title1=\"WHY\"\n        title2=\"STACKAGENCY?\"\n        theme={{\n          marginTopMobile: '110px'\n        }}\n      >\n        <Body24 theme={{ color: white, margins: '0 0 4.2rem' }}>\n          StackAgency has partnered with the world’s leading publications to\n          be\n          your one-stop shop for performance marketing and commerce\n          content\n          opportunities. We offer guaranteed evergreen and promotional coverage\n          on major mass-media publications, brokered on a fixed-fee basis.\n        </Body24>\n        <Body24 theme={{ color: white, margins: '4.2rem 0 0' }}>\n          You’ll be able to scale exclusive, custom campaigns and boost reach\n          with efficiency and very little lift, thanks to our turnkey solution\n          that includes support from concept to completion. Our experts have\n          decades of experience in performance-focused content marketing and are\n          supported by StackCommerce’s industry-leading team. With partner\n          relationships built on results, our execution and accountability is\n          unmatched.\n        </Body24>\n      </EntrepreneurChallenge>\n\n    </div>\n  )\n}\n\nexport default BrandsStackAgencyStatic\n","import styled, { keyframes, css } from \"styled-components\";\n\nexport const FadeSlideInTopRight = keyframes`\n  0% {\n    transform: translateY(-20%) translateX(20%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(0) translateX(0);\n    opacity: 1;\n  }\n`;\n\nexport const SlideInRight = keyframes`\n  0% {\n    transform: translateX(30%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n`;\n\nexport const FadeSlideInRight = keyframes`\n  0% {\n    transform: translateX(30%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n`;\n\nexport const SlideInLeft = keyframes`\n  0% {\n    transform: translateX(-30%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n`;\n\nexport const SlideInBottom = keyframes`\n  0% {\n    transform: translateY(20%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport const SlideInTop = keyframes`\n  0% {\n    transform: translateY(-20%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport const FlyBy = keyframes`\n  0% {\n    transform: translateY(20%) translateX(-20%);\n  }\n  100% {\n    transform: translateY(0) translateX(0);\n  }\n`;\n\nexport const FadeInFrames = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const WobbleFrames = keyframes`\n  0% {\n    -webkit-transform: none;\n    transform: none\n  }\n  15% {\n    transform: translate3d(0, -15%, 0);\n  }\n  30% {\n    transform: translate3d(0, 10%, 0);\n  }\n  45% {\n    transform: translate3d(0, -15%, 0);\n  }\n  60% {\n    transform: translate3d(0, 0%, 0);\n  }\n  75% {\n    transform: translate3d(0, -15%, 0);\n  }\n  100% {\n    transform: none\n  }\n`;\n\nexport const FadeInBottomFrames = keyframes`\n  0% {\n    transform: translateY(20%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const MoveInBottom = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform;\n  transform: translateY(\n    ${(props) => (props.active ? 0 : props.translateFrom ?? 20)}%\n  );\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n`;\n\nexport const FadeInBottom = styled.div`\n  transform: translateY(20%);\n  opacity: 0;\n  animation: ${(props) =>\n    props.active\n      ? css`\n          ${FadeInBottomFrames} 0.8s ease forwards 0.1s\n        `\n      : \"none\"};\n`;\n\nexport const FadeInRight = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : 20)}%);\n`;\n\nexport const FadeInLeft = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform, opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : -70)}%);\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;\n\nexport const FadeIn = styled.div`\n  transition: ease 0.8s;\n  transition-property: opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;\n\nexport const FadeInSmall = styled(FadeInBottom)`\n  transform: translateY(${(props) => (props.active ? 0 : 20)}%);\n`;\n\nexport const FadeInRightSmall = styled(FadeInRight)`\n  transform: translateX(${(props) => (props.active ? 0 : 50)}%);\n`;\n\nexport const FadeInLeftSmall = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform, opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : -20)}%);\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;","import React, { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { black1, white } from \"./styles/Colors\";\nimport { mediaDesktop, mediaMedium } from \"./styles/variables\";\nimport MainHeroTitle from \"./MainHeroTitle\";\nimport Container from \"./styles/Container\";\nimport { Eyebrows20 } from \"./styles/Eyebrows\";\nimport Image from \"./Image\";\n\nconst ContainerRelative = styled(Container)`\n  position: relative;\n  padding-top: 43px;\n\n  @media (${mediaMedium}) {\n    padding-top: ${(props) => props.theme.topPadding ?? \"38px\"};\n    padding-bottom: ${(props) => props.theme.bottomPadding ?? \"240px\"};\n  }\n\n  @media (${mediaDesktop}) {\n    padding-top: ${(props) => props.theme.topLargePadding ?? \"38px\"};\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  z-index: 1;\n  max-width: 100vw;\n  background-color: ${white};\n  overflow: ${(props) => props.theme.wrapperOverflow ?? \"hidden\"};\n  padding-bottom: ${(props) => props.theme.bottomPaddingMedia ?? \"0px\"};\n\n  @media (${mediaMedium}) {\n    padding-bottom: 0;\n  }\n`;\n\nconst Display = styled.div`\n  width: ${(props) => props.theme.imageWidth ?? \"100vw\"};\n  max-width: ${(props) => props.theme.imageMaxWidth ?? \"100vw\"};\n  transform: ${(props) => props.theme.mediaTransform ?? \"translateX(-20px)\"};\n  margin-top: ${(props) => props.theme.imageMarginTop ?? \"64px\"};\n  ${(props) => (props.hasMobileImage ? \"display: none;\" : \"\")};\n\n  .gatsby-image-wrapper {\n    opacity: ${(props) => (props.active ? 1 : 0)};\n    ${(props) => props.theme.animationPre ?? \"\"}\n    animation: ${(props) =>\n      props.theme.keyFrames && props.active\n        ? css`\n            ${props.theme.keyFrames}\n          `\n        : \"none\"}\n      0.9s ease both 0.5s;\n  }\n\n  @media (${mediaMedium}) {\n    ${(props) => (props.theme.styles ? props.theme.styles : \"\")};\n    ${(props) => (props.hasMobileImage ? \"display: block;\" : \"\")};\n    position: absolute;\n    right: 0;\n    border: 0;\n    bottom: ${(props) => props.theme.imageBottom ?? \"0\"};\n    transform: ${(props) =>\n      props.theme.imageTranslate ??\n      \"translate(calc(100% * 4 / 12), calc(100% * 2 / 12))\"};\n    z-index: 1;\n    width: ${(props) => props.theme.imageSize ?? \"calc(100% * 10 / 12)\"};\n\n    .gatsby-image-wrapper {\n      margin-right: 0;\n      margin-left: auto;\n\n      ${(props) =>\n        props.theme.gatsbyWidth\n          ? `max-width: ${props.theme.gatsbyWidth} !important; max-height: none !important`\n          : \"\"};\n    }\n  }\n`;\n\nconst DesktopImage = styled(Image)`\n  display: block;\n  width: 100%;\n`;\n\nconst Bottom = styled.div`\n  background-color: ${(props) => props.color};\n  margin-top: ${(props) => props.marginTop ?? \"0\"};\n  position: relative;\n  z-index: 1;\n\n  @media (min-width: 720px) {\n    margin-top: ${(props) => `calc(${props.marginTop}/1.5)` ?? \"0\"};\n  }\n\n  @media (${mediaMedium}) {\n    z-index: initial;\n    margin: 0;\n  }\n`;\n\nconst Space = styled.div`\n  padding-top: ${(props) => props.theme.bottomSizeMedia ?? \"0\"};\n  padding-bottom: ${(props) => props.theme.bottomSizeBottomMedia ?? \"93px\"};\n\n  @media (${mediaMedium}) {\n    display: block;\n    width: 100%;\n    padding-top: ${(props) => props.theme.bottomSize ?? \"104px\"};\n  }\n`;\n\nconst SubTitle = styled(Eyebrows20)`\n  margin: 0 0 28px;\n`;\n\nconst ImageMedia = styled(Image)`\n  pointer-events: none;\n  max-width: ${(props) => props.theme.mediaImgWidth ?? \"100%\"} !important;\n  max-height: ${(props) => props.theme.mediaImgHeight ?? \"100%\"} !important;\n  width: 100%;\n  margin: ${(props) => props.theme.mediaImgMargins ?? \"40px 0 0\"};\n  ${(props) => props.theme.mediaCss ?? \"\"};\n  z-index: 2;\n  transform: ${(props) => props.theme.mediaTransform ?? \"none\"};\n\n  opacity: ${(props) => (props.active ? 1 : 0)};\n  ${(props) => props.theme.animationPre ?? \"\"}\n  animation: ${(props) =>\n    props.theme.keyFrames && props.active\n      ? css`\n          ${props.theme.keyFrames}\n        `\n      : \"none\"}\n      0.9s ease both 0.5s;\n\n  @media (${mediaMedium}) {\n    max-width: 90% !important;\n    max-height: none !important;\n    display: none;\n  }\n`;\n\nconst Blur = styled.div`\n  z-index: 2;\n  width: 100%;\n  height: ${(props) => props.theme.blurheight ?? 30}px;\n  position: absolute;\n  bottom: ${(props) => props.theme.blurPosition ?? 0};\n  right: -25%;\n  background: linear-gradient(\n    0deg,\n    rgba(245, 245, 245, 0.95) 0%,\n    rgba(245, 245, 245, 0.9) 20%,\n    rgba(245, 245, 245, 0) 100%\n  );\n\n  @media (${mediaMedium}) {\n    height: ${(props) => props.theme.blurHeightLarge ?? 110}px;\n  }\n`;\n\nconst HomeLanding = ({\n  animationComponent,\n  link,\n  image,\n  imageMobile,\n  theme,\n  cleanTitle,\n  children,\n  section,\n  bottomMargins,\n  noBottom,\n  blurImage\n}) => {\n  const hasMobileImage = !!imageMobile;\n\n  const [active, setActive] = useState(false);\n\n  const handleLoad = () => {\n    setActive(true);\n  };\n\n  return (\n    <Wrapper theme={theme}>\n      <ContainerRelative theme={theme}>\n        {section && <SubTitle as=\"span\">{section}</SubTitle>}\n        <MainHeroTitle\n          cleanTitle={cleanTitle}\n          theme={theme}\n          link={link.attrs ?? null}\n          label={link.label}\n        >\n          {children}\n        </MainHeroTitle>\n        {!animationComponent && image && (\n          <Display\n            theme={theme}\n            active={active}\n            hasMobileImage={hasMobileImage}\n          >\n            <DesktopImage\n              onLoad={handleLoad}\n              theme={theme}\n              fluid={image.childImageSharp.fluid}\n            />\n          </Display>\n        )}\n\n        {animationComponent && animationComponent}\n      </ContainerRelative>\n\n      {!animationComponent && imageMobile && (\n        <ImageMedia\n          active={active}\n          onLoad={handleLoad}\n          theme={theme}\n          fluid={image.childImageSharp.fluid}\n        />\n      )}\n\n      {!noBottom && (\n        <Bottom\n          marginTop={bottomMargins}\n          color={theme && theme.bottom ? theme.bottom : black1}\n        >\n          <Container>\n            <Space theme={theme} />\n          </Container>\n        </Bottom>\n      )}\n      {blurImage && (\n        <Container style={{ position: \"relative\" }}>\n          <Blur theme={theme} />\n        </Container>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default HomeLanding;\n"],"sourceRoot":""}