Create customers page

gatsby-node.ts

@@ -23,7 +23,7 @@ const companyUpdatesPostTemplate = path.resolve(
 );
 const blogTemplate = path.resolve('./src/templates/blog/index.tsx');
 
-const caseStudyTemplate = path.resolve('./src/layouts/CaseStudy/index.tsx');
+const caseStudyTemplate = path.resolve('./src/templates/case-study/index.tsx');
 
 const connectorTemplate = path.resolve('./src/templates/connector/index.tsx');
 const connectionTemplate = path.resolve('./src/templates/connection.tsx');

src/components/BlogPopularArticles/index.tsx

@@ -1,7 +1,7 @@
 import { graphql, useStaticQuery } from 'gatsby';
 import * as React from 'react';
-import AuthorBlogPostCard from '../AuthorBlogPostCard';
-import { container } from './styles.module.less';
+import Card from '../Grid/Card';
+import Grid from '../Grid';
 
 export const PopularArticles = () => {
     const { popularArticles } = useStaticQuery(graphql`
@@ -67,12 +67,10 @@ export const PopularArticles = () => {
     `);
 
     return (
-        <ul className={container}>
+        <Grid>
             {popularArticles?.nodes?.map((article: any) => (
-                <li key={article.id}>
-                    <AuthorBlogPostCard data={article} />
-                </li>
+                <Card key={article.id} data={article} footerTag="Article" />
             ))}
-        </ul>
+        </Grid>
     );
 };

src/components/BlogPostCard/styles.module.less

@@ -18,6 +18,7 @@
   text-align: center;
   font-size: 16pt;
   font-weight: 600;
+  margin-bottom: auto;
 }
 
 .blogsPostCard {

src/components/BlogPostProcessor/index.tsx

@@ -1,10 +1,16 @@
+import clsx from 'clsx';
 import * as React from 'react';
 
-export const ProcessedPost = ({ body }: { body: string }) => {
-    // return (JSON.stringify(body,null,4))
+export const ProcessedPost = ({
+    body,
+    className,
+}: {
+    body: string;
+    className?: string;
+}) => {
     return (
         <div
-            className="dynamic-html"
+            className={clsx('dynamic-html', className)}
             dangerouslySetInnerHTML={{ __html: body }}
         />
     );

src/components/Breadcrumbs/styles.module.less

@@ -6,10 +6,6 @@
     padding-top: 40px;
     padding-bottom: 40px;
 
-    @media (max-width: 809px) {
-        padding: 40px 0 20px;
-    }
-
     @media (max-width: 768px) {
         display: none;
     }

src/components/CustomersPage/CaseStudies/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
+import Container from '../../Container';
+import Grid from '../../Grid';
+import Card from '../../Grid/Card';
+import ButtonFilled from '../../LinksAndButtons/ButtonFilled';
+import { sectionTitle } from '../styles.module.less';
+
+const CaseStudies = () => {
+    const {
+        allStrapiCaseStudy: { nodes: caseStudies },
+    } = useStaticQuery(graphql`
+        query GetCaseStudies {
+            allStrapiCaseStudy {
+                nodes {
+                    title: Title
+                    description: Description
+                    slug: Slug
+                    id
+                    hero: Logo {
+                        alternativeText
+                        localFile {
+                            childImageSharp {
+                                gatsbyImageData(
+                                    quality: 100
+                                    placeholder: BLURRED
+                                    height: 172
+                                    layout: FULL_WIDTH
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    `);
+
+    const caseStudiesWithPrefixedSlugs = caseStudies.map((post) => ({
+        ...post,
+        slug: `customers/${post.slug}/`,
+    }));
+
+    const [visiblePosts, setVisiblePosts] = useState(9);
+
+    const handleShowMore = () => {
+        setVisiblePosts((prevVisiblePosts) => prevVisiblePosts + 9);
+    };
+
+    return (
+        <section className={defaultWrapperGrey}>
+            <Container isVertical>
+                <h2 className={sectionTitle}>CASE STUDIES</h2>
+                <Grid>
+                    {caseStudiesWithPrefixedSlugs
+                        .slice(0, visiblePosts)
+                        .map((caseStudy) => (
+                            <Card
+                                key={caseStudy.id}
+                                data={caseStudy}
+                                footerTag="Case study"
+                                hasImgBackground
+                            />
+                        ))}
+                </Grid>
+                {visiblePosts < caseStudiesWithPrefixedSlugs.length ? (
+                    <ButtonFilled onClick={handleShowMore}>
+                        Show more
+                    </ButtonFilled>
+                ) : null}
+            </Container>
+        </section>
+    );
+};
+
+export default CaseStudies;

src/components/CustomersPage/Hero/index.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { IStaticImageProps } from 'gatsby-plugin-image/dist/src/components/static-image.server';
+import Container from '../../Container';
+import HeroSectionDetails from '../../HeroSectionDetails';
+import ContactUsCta from '../../HeroSectionActions/ContactUsCta';
+import { wrapper } from './styles.module.less';
+
+const commonProps: Partial<IStaticImageProps> = {
+    placeholder: 'blurred',
+    loading: 'eager',
+};
+
+const Hero = () => (
+    <section className={wrapper}>
+        <Container>
+            <HeroSectionDetails
+                title={
+                    <>
+                        ESTUARY FLOW <span>POWERS ORGANIZATIONS WORLDWIDE</span>
+                    </>
+                }
+                description="See how our customers build with Estuary Flow to solve their challanges."
+                ctaButtons={<ContactUsCta linkVariant="filled" />}
+            />
+            <StaticImage
+                src="../../../images/customers-page/hero-image.png"
+                alt="Estuary - ETL tool"
+                quality={100}
+                placeholder="blurred"
+                loading="eager"
+            />
+        </Container>
+        <h2>FEATURED CUSTOMERS</h2>
+        <ul>
+            <li key="coalesce">
+                <StaticImage
+                    src="../../../images/customer-logos/coalesce.png"
+                    alt="Coalesce logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="flashpack">
+                <StaticImage
+                    src="../../../images/customer-logos/flashpack.svg"
+                    alt="Flash Pack logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="shp">
+                <StaticImage
+                    src="../../../images/customer-logos/shp.svg"
+                    alt="SHP logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="fenestra">
+                <StaticImage
+                    src="../../../images/customer-logos/fenestra.png"
+                    alt="Fenestra logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="deep-sync">
+                <StaticImage
+                    src="../../../images/customer-logos/deep-sync.png"
+                    alt="Deep Sync logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="excess-telecom">
+                <StaticImage
+                    src="../../../images/customer-logos/excess-telecom.png"
+                    alt="Excess Telecom logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="flock-freight">
+                <StaticImage
+                    src="../../../images/customer-logos/flock-freight.png"
+                    alt="Flock Freight logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="launch-metrics">
+                <StaticImage
+                    src="../../../images/customer-logos/launch-metrics.png"
+                    alt="Launch Metrics logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="chili-piper">
+                <StaticImage
+                    src="../../../images/customer-logos/chili-piper.png"
+                    alt="Chili Piper logo"
+                    {...commonProps}
+                />
+            </li>
+            <li key="revunit">
+                <StaticImage
+                    src="../../../images/customer-logos/revunit.png"
+                    alt="Revunit logo"
+                    {...commonProps}
+                />
+            </li>
+        </ul>
+    </section>
+);
+
+export default Hero;