{"version":3,"sources":["webpack:///./src/components/sections/BrandsIndexStatic.js","webpack:///./src/pages/brands/index.js","webpack:///./src/components/styles/TextHighlight.js"],"names":["BrandsIndexStatic","images","useStaticQuery","link","label","attrs","to","state","from","as","Link","theme","animationPre","keyFrames","SlideInRight","imageRatio","bottomSize","imageTranslate","gatsbyWidth","animationComponent","Images","fill","component","Headline80","padding","lineColor","white","title","titleElement","color","background","black1","DeferSection","loadable","IndexPage","description","static","Text","styled","strong","props","brandColor3","mediaMedium","TextHighlight","children"],"mappings":"0HAAA,qIAoGeA,IAzFW,KACxB,MAAMC,EAASC,yBAAe,cAqC9B,OACE,oCACE,kBAAC,IAAD,CACEC,KAAM,CACJC,MAAO,UACPC,MAAO,CAAEC,GAAI,wBAAyBC,MAAO,CAAEC,KAAM,SAAWC,GAAIC,SAEtEC,MAAO,CACLC,aAAc,yCACdC,UAAWC,IACXC,WAAY,SACZC,WAAY,MACZC,eACE,wDACFC,YAAa,SAEfC,mBAAoB,kBAAC,IAAD,CAAsBC,OAAQnB,KAdpD,qBAgBoB,6BAClB,kBAAC,IAAD,CAAcoB,KAAK,cAAcC,UAAWC,IAAYd,GAAG,QAA3D,aAKF,kBAAC,IAAD,CACEe,QAAQ,eACRC,UAAWC,IACXC,MAAM,YACNC,aAAa,MAEb,qDAC0B,IACxB,kBAAC,IAAD,CAAejB,MAAO,CAAEkB,MAAOH,IAAOI,WAAYC,MAAlD,eAEiB,IAJnB,sFAQA,oHAEkB,IAChB,kBAAC,IAAD,CAAepB,MAAO,CAAEkB,MAAOH,IAAOI,WAAYC,MAAlD,wBAEiB,IALnB,+D,kCCvFR,4FAOA,MAAMC,EAAeC,kBAAS,CAAD,uJAAC,IAC5B,sEAD2B,uMAIvBC,EAAY,IAChB,kBAAC,IAAD,KACE,kBAAC,IAAD,CACEP,MAAM,uCACNQ,YAAY,kIAGd,kBAAC,IAAD,CAAiBC,OAAQ,kBAAC,IAAD,OACvB,kBAACJ,EAAD,QAKSE,a,kCCxBf,6DAKA,MAAMG,EAAOC,IAAOC,OAAV,2DAAGD,CAAH,qMAGEE,IAAD,uBAAWA,EAAM7B,MAAMkB,aAAvB,QAAgCE,KACTS,IAAD,uBAAWA,EAAM7B,MAAMmB,kBAAvB,QAAqC,OAC/CW,IAQXC,KAgBGC,IARO,EAAGhC,QAAOiC,cAE5B,kBAACP,EAAD,CAAM1B,MAAOA,GACX,8BAAOiC","file":"component---src-pages-brands-index-js-691588edac68159439d4.js","sourcesContent":["import React from \"react\";\nimport { graphql, Link, useStaticQuery } from \"gatsby\";\nimport HomeLanding from \"../HeroLanding\";\nimport OutlinedText from \"../styles/OutlinedText\";\nimport { Headline80 } from \"../styles/Headings\";\nimport BlackHeroWithRightLines from \"../BlackHeroWithRightLines\";\nimport { black1, white } from \"../styles/Colors\";\nimport TextHighlight from \"../styles/TextHighlight\";\nimport { SlideInRight } from \"../styles/animations\";\nimport LandingGridAnimation from \"../LandingGridAnimation\";\n\nconst BrandsIndexStatic = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      one: file(relativePath: { eq: \"49-brands-landing-1.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      two: file(relativePath: { eq: \"49-brands-landing-2.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      three: file(relativePath: { eq: \"49-brands-landing-3.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      four: file(relativePath: { eq: \"49-brands-landing-4.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <>\n      <HomeLanding\n        link={{\n          label: \"Sign Up\",\n          attrs: { to: \"/contact/?smopt=brand\", state: { from: \"brand\" }, as: Link }\n        }}\n        theme={{\n          animationPre: \"opacity: 0;transform: translateY(60%);\",\n          keyFrames: SlideInRight,\n          imageRatio: \"68.78%\",\n          bottomSize: \"0px\",\n          imageTranslate:\n            \"translate(calc(100% * 3.6 / 12), calc(100% * 2 / 12))\",\n          gatsbyWidth: \"900px\"\n        }}\n        animationComponent={<LandingGridAnimation Images={images} />}\n      >\n        Product discovery <br />\n        <OutlinedText fill=\"transparent\" component={Headline80} as=\"span\">\n          At Scale\n        </OutlinedText>\n      </HomeLanding>\n\n      <BlackHeroWithRightLines\n        padding=\"80px 0 160px\"\n        lineColor={white}\n        title=\"EXPERTISE\"\n        titleElement=\"h2\"\n      >\n        <p>\n          Tap into our network of{\" \"}\n          <TextHighlight theme={{ color: white, background: black1 }}>\n            1k+ premium\n          </TextHighlight>{\" \"}\n          publishers to tell your brand’s story to hundreds of millions of\n          future customers.\n        </p>\n        <p>\n          Whether you're an emerging brand, an established company, or somewhere\n          in between, our{\" \"}\n          <TextHighlight theme={{ color: white, background: black1 }}>\n            marketplace platform\n          </TextHighlight>{\" \"}\n          helps you drive unparalleled sales and brand awareness.\n        </p>\n      </BlackHeroWithRightLines>\n    </>\n  );\n};\n\nexport default BrandsIndexStatic;\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/BrandsIndexStatic\";\n\nconst DeferSection = loadable(() =>\n  import(\"../../components/sections/BrandsIndexDefer\")\n);\n\nconst IndexPage = () => (\n  <Layout>\n    <Seo\n      title=\"Marketplace & Ad Platform for Brands\"\n      description=\"StackCommerce helps brands sell more and target users with our solutions: marketplace listings, editorial exposure, and more.\"\n    />\n\n    <LazyLoadSection static={<StaticSection />}>\n      <DeferSection />\n    </LazyLoadSection>\n  </Layout>\n);\n\nexport default IndexPage;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { black1, brandColor3 } from \"./Colors\";\nimport { mediaMedium } from \"./variables\";\n\nconst Text = styled.strong`\n  font-weight: 800;\n  position: relative;\n  color: ${(props) => props.theme.color ?? black1};\n  box-shadow: inset 0 -0.325em ${(props) => props.theme.background ?? \"red\"},\n    inset 0 -0.525em ${brandColor3};\n  display: inline;\n\n  span {\n    position: relative;\n    z-index: 2;\n  }\n\n  @media (${mediaMedium}) {\n    &:before {\n      height: 8px;\n      bottom: 9px;\n    }\n  }\n`;\n\nconst TextHighlight = ({ theme, children }) => {\n  return (\n    <Text theme={theme}>\n      <span>{children}</span>\n    </Text>\n  );\n};\n\nexport default TextHighlight;\n"],"sourceRoot":""}