From 82f2cebfe0507118dff08af4a04e8cef09959742 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 14 Oct 2024 16:31:47 -0300 Subject: [PATCH] Add new background image for straight lines --- .../StraightLinesBackground.tsx | 51 ++++++++----------- .../BackgroundImages/styles.module.less | 1 - src/components/BackgroundImages/utils.ts | 4 -- src/components/BlogBanner/index.tsx | 8 +-- src/components/Connectors/styles.module.less | 1 - src/components/Homepage/SectionFive/styles.ts | 3 +- src/components/Homepage/SectionNine/styles.ts | 3 +- .../Homepage/SectionSeven/styles.ts | 3 +- .../Homepage/SectionThree/styles.ts | 7 ++- src/templates/blog-post/index.tsx | 12 +++-- src/templates/blog-post/styles.module.less | 5 +- src/templates/blog/styles.module.less | 5 +- 12 files changed, 48 insertions(+), 55 deletions(-) delete mode 100644 src/components/BackgroundImages/utils.ts diff --git a/src/components/BackgroundImages/StraightLinesBackground.tsx b/src/components/BackgroundImages/StraightLinesBackground.tsx index 73293889..4560ee00 100644 --- a/src/components/BackgroundImages/StraightLinesBackground.tsx +++ b/src/components/BackgroundImages/StraightLinesBackground.tsx @@ -1,43 +1,32 @@ -import { graphql, useStaticQuery } from 'gatsby'; import React from 'react'; +import clsx from 'clsx'; +import { StaticImage } from 'gatsby-plugin-image'; +import { + container, + backgroundImage, + swoopingLines, +} from './styles.module.less'; -import BackgroundImage, { - IBackgroundImageProps, -} from 'gatsby-background-image'; - -import { commonBackgroundImageProps } from './utils'; - -type StraightLinesBackgroundProps = IBackgroundImageProps & { +type StraightLinesBackgroundProps = { children?: React.ReactNode; } & React.HTMLAttributes; const StraightLinesBackground = ({ children, - ...rest + className, }: StraightLinesBackgroundProps) => { - const swoopingLines = useStaticQuery(graphql` - query { - imageData: file( - relativePath: { eq: "lp-connector/real-time/Vector.png" } - ) { - childImageSharp { - fluid(quality: 90, maxWidth: 1356) { - ...GatsbyImageSharpFluid_withWebp_noBase64 - } - } - } - } - `); - return ( - - {children} - +
+ +
{children}
+
); }; diff --git a/src/components/BackgroundImages/styles.module.less b/src/components/BackgroundImages/styles.module.less index 9b7b2f96..696127f5 100644 --- a/src/components/BackgroundImages/styles.module.less +++ b/src/components/BackgroundImages/styles.module.less @@ -1,7 +1,6 @@ @import '../../globalStyles/sections.module.less'; .container { - .sectionTopBottomPadding; position: relative; } diff --git a/src/components/BackgroundImages/utils.ts b/src/components/BackgroundImages/utils.ts deleted file mode 100644 index 70539a18..00000000 --- a/src/components/BackgroundImages/utils.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const commonBackgroundImageProps = { - fadeIn: false, - critical: true, -}; diff --git a/src/components/BlogBanner/index.tsx b/src/components/BlogBanner/index.tsx index 1ba3d3ce..daf7f71b 100644 --- a/src/components/BlogBanner/index.tsx +++ b/src/components/BlogBanner/index.tsx @@ -13,16 +13,16 @@ interface BlogBanner { const BlogBanner = ({ title, button }: BlogBanner) => { return ( - -
+
+
{title} {button.title}
-
- + +
); }; diff --git a/src/components/Connectors/styles.module.less b/src/components/Connectors/styles.module.less index 9e4b542d..808fabc0 100644 --- a/src/components/Connectors/styles.module.less +++ b/src/components/Connectors/styles.module.less @@ -3,7 +3,6 @@ .container { .globalMaxWidth; .sectionTopBottomPadding; - padding-top: 0; } .connectorIndexHeader { diff --git a/src/components/Homepage/SectionFive/styles.ts b/src/components/Homepage/SectionFive/styles.ts index 1f8efa14..f2656737 100644 --- a/src/components/Homepage/SectionFive/styles.ts +++ b/src/components/Homepage/SectionFive/styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; -import { globalMaxWidth } from '../../../globalStyles'; +import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} + ${sectionTopBottomPadding} display: flex; justify-content: center; diff --git a/src/components/Homepage/SectionNine/styles.ts b/src/components/Homepage/SectionNine/styles.ts index f6cc7670..df5e308d 100644 --- a/src/components/Homepage/SectionNine/styles.ts +++ b/src/components/Homepage/SectionNine/styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; -import { globalMaxWidth } from '../../../globalStyles'; +import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} + ${sectionTopBottomPadding} h2 { font-size: 2.5rem; diff --git a/src/components/Homepage/SectionSeven/styles.ts b/src/components/Homepage/SectionSeven/styles.ts index 5074a613..992354b5 100644 --- a/src/components/Homepage/SectionSeven/styles.ts +++ b/src/components/Homepage/SectionSeven/styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; -import { globalMaxWidth } from '../../../globalStyles'; +import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} + ${sectionTopBottomPadding} padding-right: 0; display: flex; diff --git a/src/components/Homepage/SectionThree/styles.ts b/src/components/Homepage/SectionThree/styles.ts index 52714621..aef9c77d 100644 --- a/src/components/Homepage/SectionThree/styles.ts +++ b/src/components/Homepage/SectionThree/styles.ts @@ -1,8 +1,13 @@ import styled from 'styled-components'; -import { LinkOutlined, globalMaxWidth } from '../../../globalStyles'; +import { + LinkOutlined, + globalMaxWidth, + sectionTopBottomPadding, +} from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} + ${sectionTopBottomPadding} display: flex; flex-direction: column; diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx index 07b2df00..ae9c6ad8 100644 --- a/src/templates/blog-post/index.tsx +++ b/src/templates/blog-post/index.tsx @@ -45,10 +45,10 @@ import { blogPostContent, blogPostContentWrapper, mainContent, - background, bigBuildPipelineBannerContainer, popularArticlesWrapper, bigBuildPipelineBannerSection, + bigBuildPipelineBannerWrapper, bigBuildPipelineBannerContainerLayout, leftColumnContainer, rightColumnContainer, @@ -315,8 +315,10 @@ const BlogPostTemplate = ({ data: { post } }) => {
- -
+
+
{ See Pricing
-
- + +
diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less index 709c57d9..d9e07227 100644 --- a/src/templates/blog-post/styles.module.less +++ b/src/templates/blog-post/styles.module.less @@ -135,6 +135,7 @@ .blogPostHeaderWrapper { .globalMaxWidth; + .sectionTopBottomPadding; display: flex; flex-direction: row; @@ -337,12 +338,14 @@ } } -.background { +.bigBuildPipelineBannerWrapper { border-radius: 24px; overflow: hidden; } .bigBuildPipelineBannerContainer { + border-radius: 24px; + overflow: hidden; padding: 48px 90px; max-width: 1356px; margin-left: auto; diff --git a/src/templates/blog/styles.module.less b/src/templates/blog/styles.module.less index a5446652..95f62cfa 100644 --- a/src/templates/blog/styles.module.less +++ b/src/templates/blog/styles.module.less @@ -5,7 +5,6 @@ .sectionTopBottomPadding; display: flex; align-items: center; - padding-top: 0; @media (max-width: 810px) { flex-direction: column-reverse; @@ -88,9 +87,7 @@ .blogsIndexBody { .globalMaxWidth; - - padding-top: 2rem; - display: grid; + .sectionTopBottomPadding; padding-top: 2rem; display: grid;