Add new background image for straight lines

estuary · Oct 14, 2024 · 82f2ceb · 82f2ceb
1 parent 65dbe17
commit 82f2ceb
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 55 deletions.
diff --git 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<HTMLDivElement>;
 
 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 (
-        <BackgroundImage
-            fluid={swoopingLines.imageData.childImageSharp.fluid}
-            backgroundColor="#04192b"
-            {...commonBackgroundImageProps}
-            {...rest}
-        >
-            {children}
-        </BackgroundImage>
+        <div className={container}>
+            <StaticImage
+                alt=""
+                src="../../images/lp-connector/real-time/Vector.png"
+                className={clsx(backgroundImage, swoopingLines)}
+                placeholder="blurred"
+                quality={100}
+                backgroundColor="#04192b"
+            />
+            <div className={className}>{children}</div>
+        </div>
     );
 };
 

diff --git 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
diff --git a/src/components/BlogBanner/index.tsx b/src/components/BlogBanner/index.tsx
@@ -13,16 +13,16 @@ interface BlogBanner {
 
 const BlogBanner = ({ title, button }: BlogBanner) => {
     return (
-        <StraightLinesBackground className={background}>
-            <div className={container}>
+        <div className={background}>
+            <StraightLinesBackground className={container}>
                 <div className={banner}>
                     {title}
                     <OutboundLinkFilled href={button.href} target="_blank">
                         {button.title}
                     </OutboundLinkFilled>
                 </div>
-            </div>
-        </StraightLinesBackground>
+            </StraightLinesBackground>
+        </div>
     );
 };
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -45,10 +45,10 @@ import {
     blogPostContent,
     blogPostContentWrapper,
     mainContent,
-    background,
     bigBuildPipelineBannerContainer,
     popularArticlesWrapper,
     bigBuildPipelineBannerSection,
+    bigBuildPipelineBannerWrapper,
     bigBuildPipelineBannerContainerLayout,
     leftColumnContainer,
     rightColumnContainer,
@@ -315,8 +315,10 @@ const BlogPostTemplate = ({ data: { post } }) => {
                     <PopularArticles />
                 </section>
                 <section className={bigBuildPipelineBannerSection}>
-                    <StraightLinesBackground className={background}>
-                        <div className={bigBuildPipelineBannerContainer}>
+                    <div className={bigBuildPipelineBannerWrapper}>
+                        <StraightLinesBackground
+                            className={bigBuildPipelineBannerContainer}
+                        >
                             <div
                                 className={
                                     bigBuildPipelineBannerContainerLayout
@@ -372,8 +374,8 @@ const BlogPostTemplate = ({ data: { post } }) => {
                                     See Pricing
                                 </OutboundLinkOutlined>
                             </div>
-                        </div>
-                    </StraightLinesBackground>
+                        </StraightLinesBackground>
+                    </div>
                 </section>
             </article>
             <BlogPostPopupModal />

diff --git 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
@@ -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;