diff --git a/gatsby-node.js b/gatsby-node.js
new file mode 100644
index 0000000..b50cc44
--- /dev/null
+++ b/gatsby-node.js
@@ -0,0 +1,50 @@
+const path = require("path")
+
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
+  const clientPageTemplate = path.resolve(`src/templates/clientPage.js`)
+  // Query for markdown nodes to use in creating pages.
+  // You can query for whatever data you want to create pages for e.g.
+  // products, portfolio items, landing pages, etc.
+  // Variables can be added as the second function parameter
+  return graphql(`
+    query PastClients {
+      allPastClientsJson(filter: {live: {eq: true}}) {
+        edges {
+          node {
+            name
+            slug
+            heroText
+            logoSrc {
+              id
+              publicURL
+              childImageSharp {
+                gatsbyImageData
+              }
+            }
+            sections {
+              title
+              content
+            }
+          }
+        }
+      }
+    }
+  `, { limit: 1000 }).then(result => {
+    if (result.errors) {
+      throw result.errors
+    }
+
+    result.data.allPastClientsJson.edges.forEach(edge => {
+      let client = edge.node
+
+      return ( createPage({
+        path: `clients/${client.slug}`,
+        component: clientPageTemplate,
+        context: {
+          client: client
+        },
+      }))
+    })
+  })
+}
diff --git a/src/components/PastClients.js b/src/components/PastClients.js
index 84ed925..fe94e29 100644
--- a/src/components/PastClients.js
+++ b/src/components/PastClients.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { GatsbyImage } from "gatsby-plugin-image";
 import EmblaAutoScrollCarousel from "./embla/EmblaAutoScrollCarousel";
-import { graphql, useStaticQuery } from "gatsby";
+import { graphql, useStaticQuery, Link } from "gatsby";
 
 const OPTIONS = { slidesToScroll: "auto", loop: true };
 
@@ -9,7 +9,7 @@ const ClientLogo = ({alt, publicURL, childImageSharp}) => {
   if (childImageSharp) {
     return (
       <GatsbyImage
-        className="h-full xs:h-auto xs:w-full aspect-square rounded-2xl"
+        className="h-full xs:h-auto xs:w-full aspect-square"
         imgStyle={{
           objectFit: "contain",
         }}
@@ -19,22 +19,29 @@ const ClientLogo = ({alt, publicURL, childImageSharp}) => {
     )
   } else { // then it's an svg, see https://github.com/gatsbyjs/gatsby/issues/10297#issuecomment-464834529
     return (
-      <div className="rounded-2xl overflow-hidden">
-        <img className="rounded-2xl" style={{ height: "100%" }} src={publicURL} alt={alt} />
+      <div className="overflow-hidden h-full">
+        <img style={{ height: "100%" }} src={publicURL} alt={alt} />
       </div>
     )
   }
 }
 
-const PastClient = ({ name, logoSrc }) => {
+const PastClient = ({ name, logoSrc, slug, live }) => {
   const imgProps = {
     alt: `Logo of past client company, ${name}`,
     ...logoSrc,
   }
 
   return (
-    <div className="h-full xs:h-auto xs:w-full aspect-square overflow-hidden drop-shadow-lg">
-      { ClientLogo(imgProps) }
+    <div className="h-full xs:h-auto xs:w-full aspect-square overflow-hidden drop-shadow-lg rounded-2xl bg-white">
+      {live ? (
+        <Link to={`/clients/${slug}`}>
+          { ClientLogo(imgProps) }
+        </Link>
+      ) : (
+        ClientLogo(imgProps)
+      )}
+
     </div>
   )
 }
@@ -46,6 +53,8 @@ const PastClients = () => {
         edges {
           node {
             name
+            slug
+            live
             logoSrc {
               id
               publicURL
@@ -59,8 +68,8 @@ const PastClients = () => {
     }
   `)
 
-  const slides = queryData.allPastClientsJson.edges.map(({ node: { name, logoSrc } }) => (
-    PastClient({ name, logoSrc })
+  const slides = queryData.allPastClientsJson.edges.map(({ node: { name, logoSrc, slug, live } }) => (
+    PastClient({ name, logoSrc, slug, live })
   ))
 
   return (
diff --git a/src/components/client-pages/Hero.jsx b/src/components/client-pages/Hero.jsx
new file mode 100644
index 0000000..a5957f7
--- /dev/null
+++ b/src/components/client-pages/Hero.jsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ParallaxLayer } from '@react-spring/parallax';
+import { GatsbyImage } from "gatsby-plugin-image";
+
+const Hero = ({ client }) => {
+  const imgProps = {
+    alt: `Logo of past client company, ${client.name}`,
+    ...client.logoSrc,
+  }
+
+  return (
+    <div className={`flex flex-col min-h-dvh w-full justify-center items-center hero-${client.slug}`}>
+      <div className="flex flex-col items-center w-full">
+        {HeroImage(imgProps)}
+        <div className={`font-light m-auto mb-20 sm:text-xl text-center px-8 md:px-0 md:w-3/4 lg:w-1/2 2xl:w-1/3 `}>
+          {client.heroText.map(paragraph => {
+            return (
+              <p className="mb-5">
+                {paragraph}
+              </p>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const HeroImage = ({alt, publicURL, childImageSharp}) => {
+  if (childImageSharp) {
+    return (
+      <GatsbyImage
+        className="w-full md:w-1/2 lg:w-1/3 mx-auto"
+        imgStyle={{
+          objectFit: "scale-down",
+        }}
+        image={childImageSharp.gatsbyImageData}
+        alt={alt}
+      />
+    )
+  } else { // then it's an svg, see https://github.com/gatsbyjs/gatsby/issues/10297#issuecomment-464834529
+    return (
+      <img className="w-full sm:w-1/2 lg:w-1/3 mx-auto" src={publicURL} alt={alt} />
+    )
+  }
+}
+
+export default Hero;
diff --git a/src/components/layout/Layout.js b/src/components/layout/Layout.js
index 18f2478..f09be43 100644
--- a/src/components/layout/Layout.js
+++ b/src/components/layout/Layout.js
@@ -5,13 +5,13 @@ import AccessibilityWrapper from "./AccessibilityWrapper";
 
 const commonWidthClasses = "max-w-6xl mx-auto px-4 md:px-6 lg:px-8";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, fullWidth = false }) => {
   return (
     <>
       <AccessibilityWrapper>
         <Header className={commonWidthClasses} />
-        <main className={`${commonWidthClasses} text-black`}>{children}</main>
-        <Footer className={commonWidthClasses} />
+        <main className={`${fullWidth ? '' : commonWidthClasses} text-black`}>{children}</main>
+        <Footer className={`${fullWidth ? '' : commonWidthClasses}`}/>
       </AccessibilityWrapper>
     </>
   );
diff --git a/src/data/past-clients.json b/src/data/past-clients.json
index 9bc0eea..c2b6641 100644
--- a/src/data/past-clients.json
+++ b/src/data/past-clients.json
@@ -1,22 +1,180 @@
 [
   {
     "logoSrc": "../images/client-logos/walden.svg",
-    "name": "Walden Local"
+    "name": "Walden Local",
+    "slug": "walden",
+    "heroText": [
+      "Walden Local Meat works directly with small-acreage farmers throughout the North-East, providing locally-grown, sustainable, humanely-raised meat to families via their subscription share program."
+    ],
+    "sections": [
+      {
+        "title": "Challenge",
+        "content": [
+          [
+            "Thimble connected with Walden in late 2019, at a time when lengthening development cycles were leading Walden to feel unable to evolve the product offerings and core experience available its customers."
+          ],
+          [
+            "Thimble helped Walden overcome this slowdown by standardizing and simplifying its technology footprint. We helped assess their tech challenges and charted out how the business could adapt to run on a standard e-comm platform. We successfully worked through this migration, partnering with stakeholders to adapt the necessary parts of the business’ operations and member experience.",
+            "Leveraging these changes, we then worked with Walden to explore new product experiences for members, opening up new revenue streams while helping onboard industry-standard practices for testing, landing page optimization, data warehousing and dev ops."
+          ]
+        ]
+      },
+      {
+        "title": "Overcoming the Slowdown",
+        "content": [
+          [
+            "Walden’s supply chain starts directly with its farmers, stretching from processing & flash-freezing its meats to running its own warehouse and delivery fleet. It wasn’t clear internally whether the technology challenges Walden faced just reflected complexities inherent to the business, or if there was a better approach."
+          ],
+          [
+            "Thimble’s initial engagement was to dive directly into this question and help assess these options. We onboarded into the current custom tech solutions and built up to a detailed understanding of Walden’s unique and complex operations. We laid out ways to enable simpler, more standard architectures and the key parts of the company’s product experience and operation that would be needed to enable these standardizations."
+          ],
+          [
+            "From this, we laid out two main approaches to simplifying to the business: starting on the operations side, or starting with the e-commerce side. It was decided to opt for the e-comm first approach, on a headless BigCommerce architecture. This featured a main Walden-managed service running alongside BigCommerce, to support a few unique parts of Walden’s product and operations structure that were necessary to retain.",
+            "Walden was successfully migrated to this new architecture in October, 2021."
+          ]
+        ]
+      },
+      {
+        "title": "New Pastures",
+        "content": [
+          [
+            "With the new platform in place, we helped Walden start to flex the ability to test out new product offerings and revenue streams. We enabled Walden to allow for à la carte orders and offer holiday order experiences multiple times per year, in parallel to the base subscription. This was a significant win for the business to enable efforts to drive incremental revenue. Previously, the business could only offer one holiday order, Thanksgiving, once per year, in place of a subscription order, and had no other incremental purchase capabilities. Walden leveraged this flexibility and ultimately started running 4 holiday orders per year, in addition to growing its à la carte order revenue."
+          ],
+          [
+            "Having built in foundations for their new setup to be adaptable to change, we helped Walden experiment with changes to their core subscription product. We enabled Walden to have the offer certain meats like lamb as an upsell to customers, and later offer seafood in their core subscription. We also helped Walden offer sign-up discounts & promotions, shift to a structure where it could offer any product in its catalog via a subscription, and deliver a complete rebranding of the customer-facing site."
+          ],
+          [
+            "On the operations & customer experience side, we helped Walden continue to simplify by expanding and adapting the tools for these teams to be self-service. This included tools for areas like order management and delivery planning, with one example being a tool to plan for weather-based delivery delays."
+          ],
+          [
+            "In parallel, we introduced new tooling and infrastructure to help Walden modernize its marketing and analytics departments. We introduced their first A/B testing frameworks and new product analytics tools to enable Walden to take a data-driven approach to conversion optimization and landing page improvements. We helped Walden introduce a central data warehouse to its systems and adopt new tools for extracting and organizing their analytics."
+          ]
+        ]
+      }
+    ],
+    "live": true
   },
   {
-    "logoSrc": "../images/client-logos/glossier.svg",
-    "name": "Glossier"
+    "logoSrc": "../images/client-logos/glossier.png",
+    "name": "Glossier",
+    "slug": "glossier",
+    "heroText": [
+      "Glossier is a D2C brand that revolutionized the beauty industry with a refreshing ethos on beauty and a unique community-driven approach to marketing."
+    ],
+    "sections": [
+      {
+        "title": "Systems for Growth",
+        "content": [
+          [
+            "Thimble worked with Glossier from 2019 to 2022, at the time of the company’s meteoric growth to $100M+ in revenue.",
+            "In our work with Glossier, we helped add and extend fulfilment systems to support the company’s growth. We also led a cross-functional initiative across Finance, Data, and Tech to resolve challenges in running the company’s bookkeeping, delivering a reliable, audit-ready data pipeline, enabling new reconciliation processes and improvements to the company’s time to month close."
+          ]
+        ]
+      },
+      {
+        "title": "Fulfilment Technology",
+        "content": [
+          [
+            "Leading up to 2019, Glossier’s had been managing its operations and outgoing fulfilment on a relatively limited set of systems.",
+            "Thimble was brought on board to help and extend to these systems, to enable Glossier to continue to scale and reduce manual work."
+          ],
+          [
+            "Thimble initially embedded two engineers into the back-of-house tech team, working to add more automated integrations in to its fulfilment process.",
+            "We introduced Glossier’s first end-to-end integration to power its on-site inventory counts back to its 3PL systems. We then progressively extended these systems to continue to support Glossier’s growth, adding features to automate SKU selection, shipment planning, and more."
+          ],
+          [
+            "We played a key role in assessing, integrating, and launching with a new 3PL partner as part of Glossier’s international expansion in the UK.",
+            "We also worked on system readiness for peak season, testing and optimizing existing systems in ‘19 and ‘20, and helping to put a new, higher-volume set of fulfilment systems in place for peak season ‘21."
+          ]
+        ]
+      },
+      {
+        "title": "Finance Challenges",
+        "content": [
+          [
+            "In 2020, Glossier’s CFO flagged urgent needs to improve how the company’s accounting processes were coping with its top-line revenue growth.",
+            "This included driving a faster month-close, enabling the company to run an orders-to-cash reconciliation process, and ensuring the data & processes behind Glossier’s bookkeeping be demonstrably audit-ready.",
+            "With finance & accounting expertise built up in our work with Casper, Thimble was able to step in to help evaluate the challenges posed and possible solutions."
+          ],
+          [
+            "Thimble worked cross-functionally across Finance, Data, and Tech to build a deep understanding of Glossier’s financial processes and define ways to solve this challenge.",
+            "We then worked to build and deliver, within 6 months, a financial data pipeline that achieved the initial goals of being reliable, audit-ready, and able to support order to cash matching."
+          ],
+          [
+            "As we brought online initial parts of the data pipeline, we worked with Data & Finance to validate the pipeline’s reliability and assist in their work to shift processes to the new system.",
+            "We then leveraged the data and insights from this system to identify & resolve improvements across the company’s ordering and fulfilment systems, reducing financial and tax gaps and standardizing customer experience processes, which helped the finance team reduce the company’s month-close."
+          ]
+        ]
+      }
+    ],
+    "live": true
   },
   {
-    "logoSrc": "../images/client-logos/casper-logo.png",
-    "name": "Casper"
+    "logoSrc": "../images/client-logos/casper.svg",
+    "name": "Casper",
+    "slug": "casper",
+    "heroText": [
+      "Casper transformed buying a mattress into a fun and memorable experience. With an innovative approach to marketing and customer experience and as one of the first brands to skyrocket into hyper growth, Casper was for years the de facto standard-bearer of how to run a successful D2C brand.",
+      "Casper scaled to $500M+ in revenue within 6 years of launch and an IPO in 2020. The company was taken private in 2022."
+    ],
+    "sections": [
+      {
+        "title": "Hypergrowth",
+        "content": [
+          [
+            "Thimble worked with Casper during its hyper growth and pre-IPO phases.",
+            "We helped maintain and extend its fulfilment systems to support hyper growth, and to lay foundations to assist in getting the company IPO-ready.",
+            "We worked across tech & finance to help deliver Casper’s first ERP integration. We also helped Casper implement its first wholesale partnerships with Target and others. We worked with Casper on these systems across two engagements, in 2016-2017 and in 2018-2019 leading up to its IPO."
+          ]
+        ]
+      },
+      {
+        "title": "Maturing Fulfilment Systems",
+        "content": [
+          [
+            "When Thimble was initially brought on, Casper was looking for help fostering a pragmatic approach to maintaining its larger software applications through hyper growth.",
+            "We embedded directly in the team, working hand in hand to iteratively extend its main applications while improving code quality, application structure, and maintainability."
+          ],
+          [
+            "In this work, we worked to build and maintain features across the whole fulfilment domain, including features like planning the shipments for orders would be split into and where to fulfill from. We also managed integrations with warehouse partners and outgoing fulfilment providers. We also maintained customer service tools for managing orders."
+          ],
+          [
+            "In early 2017, we also worked to enable Casper’s first wholesale partnership, with Target. Using EDI via SPS Commerce, this work integrated wholesale orders into Casper’s fulfilment and accounting systems, logging, planning and then fulfilling these orders. We later expanded on this work to enable other retail relationships with Hudson Bay Company and Amazon."
+          ]
+        ]
+      },
+      {
+        "title": "IPO-Readiness",
+        "content": [
+          [
+            "In mid 2016, Casper began a number of initiatives to transition to being IPO-ready, including an aim to onboard an ERP.",
+            "Thimble played a key leadership role in this effort, helping Casper and its ERP partner successfully integrate an ERP in a modern tech stack."
+          ],
+          [
+            "Casper selected Oracle’s JD Edwards ERP (JDE) and an ERP consultancy for the project.",
+            "However, a clear roadmap of where and how to bring JDE into Casper’s existing e-comm and fulfilment systems was proving elusive, and implementation work was not yet able to begin.",
+            "We stepped in and worked cross-functionally with the finance department and the ERP consultants to turn the project around. In the initial work, we produced a detailed view of what data would be needed across all of Casper’s business transactions, for a successful integration. We built this view working closely with Finance to understand how Casper ran its current accounting processes. We then went step by step through each process with specialists from the ERP side to detail what entries would look like. We leveraged this work and our knowledge of Casper’s tech systems to lay out a roadmap to a successful first implementation, and then worked through each stage of the implementation to a successful launch.",
+            "In our second engagement with Casper we worked to further improve and expand these systems."
+          ]
+        ]
+      }
+    ],
+    "live": true
   },
   {
-    "logoSrc": "../images/client-logos/florence-logo.png",
-    "name": "Florence"
+    "logoSrc": "../images/client-logos/florence.webp",
+    "name": "Florence",
+    "slug": "florence",
+    "heroText": [],
+    "sections": [],
+    "live": false
   },
   {
-    "logoSrc": "../images/client-logos/felcana-logo.png",
-    "name": "Felcana"
+    "logoSrc": "../images/client-logos/felcana.png",
+    "name": "Felcana",
+    "slug": "felcana",
+    "heroText": [],
+    "sections": [],
+    "live": false
   }
 ]
diff --git a/src/images/client-logos/casper-logo.png b/src/images/client-logos/casper-logo.png
deleted file mode 100644
index 6f10ff7..0000000
Binary files a/src/images/client-logos/casper-logo.png and /dev/null differ
diff --git a/src/images/client-logos/casper.svg b/src/images/client-logos/casper.svg
new file mode 100644
index 0000000..aa64da4
--- /dev/null
+++ b/src/images/client-logos/casper.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400" xmlns="http://www.w3.org/2000/svg"><g fill="#1e306e" fill-rule="nonzero" transform="matrix(3.75 0 0 3.75 100 143)"><path d="m30 6.4c-4.6 0-8.1 3.3-8.1 8s3.5 8 8.1 8c2.2 0 3.9-1 4.6-1.8v1.6h3.6v-15.6h-3.6v1.6c-.7-.8-2.5-1.8-4.6-1.8m.1 12.7c-2.7 0-4.7-2.1-4.7-4.7s2.1-4.7 4.7-4.7 4.6 2.1 4.6 4.7-2 4.7-4.6 4.7m30.9-12.7c-2.1 0-3.7.8-4.7 1.8v-1.6h-3.5v23.8l3.5-.4v-9.5c1 1.1 2.7 1.8 4.7 1.8 4.8 0 8-3.1 8-8 0-4.8-3.2-7.9-8-7.9m-.1 12.7c-2.8 0-4.6-2-4.6-4.7s1.8-4.7 4.6-4.7 4.7 2 4.7 4.7c-.1 2.7-1.9 4.7-4.7 4.7m35.1-12.7c-2.2 0-3.4.8-4.1 1.8v-1.6h-3.5v15.6h3.5v-8.6c0-2.3 1.6-3.9 3.8-3.9h.3zm-17.6 0c-4.6 0-8.2 3.6-8.2 8s3.6 8 8.2 8c3.8 0 6.9-2.1 7.9-4.9h-4.2c-.5 1-1.8 1.7-3.7 1.7-2.3 0-4.1-1.6-4.5-3.6h12.5c.1-.4.1-.8.1-1.2 0-4.4-3.6-8-8.1-8m-4.3 6.1c.5-1.6 2.2-2.9 4.3-2.9 2 0 3.8 1.3 4.3 2.9zm-28.4-3c-.7 0-1.5.3-1.5 1.2 0 1 1 1.3 2.9 2 2.6 1 3.9 2.2 3.9 4.6 0 2.5-2.1 5.1-5.7 5.1s-5.5-2.7-5.6-4.9h3.4c.2 1 1 1.8 2.2 1.8 1.3 0 2.1-.9 2.1-1.9 0-.7-.3-1.5-2.5-2.1-2.4-.6-4.1-1.9-4.1-4.5 0-2.4 2.1-4.3 4.8-4.3 2.4 0 3.9 1.7 4.6 2.8l-2.9 1.3c-.4-.8-1-1.1-1.6-1.1"/><path d="m11.3 0c-6.4 0-11.3 5-11.3 11.2s4.9 11.2 11.3 11.2c4.1 0 7.9-2.2 9.6-5.3l-3.3-1.8c-1.3 2.3-3.5 3.6-6.3 3.6-2 0-4-.8-5.3-2.2-1.4-1.5-2.2-3.4-2.2-5.4s.8-3.9 2.2-5.4c1.3-1.4 3.2-2.2 5.3-2.2 2.2 0 3.5.7 4.4 1.4 1 .7 2 1.4 3.7 1.4 3.1 0 4.5-2.5 4.8-3.8l-3.5-.7c0 .1-.3 1.1-1.3 1.1-.5 0-.8-.2-1.5-.7-1.3-1.2-3-2.4-6.6-2.4"/></g></svg>
\ No newline at end of file
diff --git a/src/images/client-logos/felcana-logo.png b/src/images/client-logos/felcana-logo.png
deleted file mode 100644
index b4767d0..0000000
Binary files a/src/images/client-logos/felcana-logo.png and /dev/null differ
diff --git a/src/images/client-logos/felcana.png b/src/images/client-logos/felcana.png
new file mode 100644
index 0000000..e594340
Binary files /dev/null and b/src/images/client-logos/felcana.png differ
diff --git a/src/images/client-logos/florence-logo.png b/src/images/client-logos/florence-logo.png
deleted file mode 100644
index cc553c6..0000000
Binary files a/src/images/client-logos/florence-logo.png and /dev/null differ
diff --git a/src/images/client-logos/florence.webp b/src/images/client-logos/florence.webp
new file mode 100644
index 0000000..bb35af3
Binary files /dev/null and b/src/images/client-logos/florence.webp differ
diff --git a/src/images/client-logos/glossier.png b/src/images/client-logos/glossier.png
new file mode 100644
index 0000000..ff8f7ce
Binary files /dev/null and b/src/images/client-logos/glossier.png differ
diff --git a/src/images/client-logos/glossier.svg b/src/images/client-logos/glossier.svg
deleted file mode 100644
index 758031b..0000000
--- a/src/images/client-logos/glossier.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 652 652" style="enable-background:new 0 0 652 652;" xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="#fff"/>
-  <path d="M 169.08 293.647 C 165.834 277.576 154.876 266.133 134.91 265.97 L 134.017 265.97 C 111.291 266.133 94.41 277.171 85.481 293.647 C 80.693 302.413 78.176 312.721 78.176 323.759 C 78.176 344.942 90.352 358.335 105.854 362.068 C 108.856 362.799 111.94 363.123 115.024 363.123 C 118.759 363.123 122.087 362.799 125.17 362.068 C 131.744 360.527 136.777 357.361 140.754 352.734 L 140.754 361.176 C 140.754 361.257 140.754 361.418 140.835 361.5 C 140.998 361.825 141.322 362.068 141.729 362.068 L 155.12 362.068 C 155.282 362.068 155.445 361.988 155.607 361.906 C 155.851 361.744 156.013 361.581 156.094 361.257 L 165.347 315.318 C 165.428 314.993 165.347 314.668 165.184 314.425 C 165.022 314.181 164.697 314.019 164.373 314.019 L 130.446 314.019 C 129.959 314.019 129.553 314.345 129.471 314.83 L 126.956 327.25 C 126.956 327.331 126.956 327.331 126.956 327.411 C 126.956 327.574 126.956 327.655 127.037 327.818 C 127.2 328.141 127.525 328.385 127.93 328.385 L 144.975 328.385 C 141.322 338.125 132.8 346.728 119.327 346.728 C 105.691 346.728 97.169 337.232 97.169 321.081 C 97.169 310.529 100.659 300.708 106.747 293.566 C 112.671 286.586 121.112 282.203 131.096 282.203 C 140.511 282.203 146.03 286.342 149.683 293.566 C 150.656 295.433 151.467 297.38 152.117 299.411 C 152.36 299.896 152.847 300.14 153.334 299.978 L 168.593 296.082 C 168.675 296.082 168.755 296.001 168.918 296.001 C 169.242 295.838 169.486 295.433 169.405 295.027 L 169.08 293.647 Z M 206.415 266.944 C 206.415 266.376 205.929 265.97 205.441 265.97 L 189.939 265.97 C 189.451 265.97 189.046 266.295 188.965 266.782 L 183.609 293.647 L 170.136 360.85 C 170.054 361.013 170.136 361.257 170.216 361.418 C 170.38 361.825 170.785 362.068 171.191 361.988 L 186.693 361.988 C 186.855 361.988 187.098 361.906 187.179 361.825 C 187.423 361.744 187.585 361.5 187.667 361.257 L 201.222 293.566 L 206.497 267.026 C 206.415 267.026 206.415 267.026 206.415 266.944 Z M 254.789 293.647 C 251.787 292.916 248.702 292.51 245.618 292.592 C 241.56 292.592 237.988 292.916 234.58 293.647 C 228.005 295.108 222.486 298.111 216.723 303.387 C 208.282 311.26 204.629 321.324 204.629 334.229 C 204.629 347.621 212.583 358.66 226.3 362.068 C 229.304 362.799 232.387 363.205 235.471 363.123 C 239.531 363.123 243.183 362.799 246.51 362.068 C 253.084 360.606 258.603 357.604 264.366 352.329 C 272.807 344.455 276.46 334.392 276.46 321.487 C 276.46 308.094 268.425 297.056 254.789 293.647 Z M 252.598 341.453 C 248.945 346.079 243.913 348.757 237.014 348.757 C 228.735 348.757 223.298 342.265 223.298 331.632 C 223.298 324.327 225.003 318.646 228.491 314.263 C 232.145 309.637 237.176 306.958 244.076 306.958 C 252.354 306.958 257.792 313.451 257.792 324.084 C 257.792 331.388 256.088 337.07 252.598 341.453 Z M 334.573 303.469 C 332.22 299.004 326.863 295.351 320.695 293.647 C 318.178 292.916 315.581 292.592 312.903 292.592 C 309.899 292.592 306.815 292.916 303.893 293.647 C 293.99 296.245 288.229 303.306 288.229 313.451 C 288.229 322.541 294.397 327.818 302.676 331.632 C 310.629 335.284 314.769 337.718 314.769 341.696 C 314.769 346.566 310.549 348.757 305.761 348.757 C 299.104 348.757 294.316 344.78 292.287 338.125 C 292.206 337.882 291.962 337.638 291.718 337.557 C 291.476 337.476 291.15 337.476 290.906 337.557 L 277.839 342.752 C 277.433 342.914 277.19 343.238 277.19 343.644 C 277.19 343.726 277.19 343.726 277.19 343.807 C 279.463 352.734 286.362 359.715 295.29 362.068 C 298.05 362.799 300.891 363.205 303.649 363.205 C 306.977 363.205 310.306 362.88 313.552 362.068 C 324.265 359.553 331.407 352.329 331.407 339.423 C 331.407 329.927 324.102 325.301 316.799 322.054 C 312.01 319.864 304.623 317.834 304.623 313.127 C 304.623 309.231 307.707 307.039 311.523 307.039 C 315.175 307.039 319.314 308.662 321.83 312.234 C 321.992 312.477 322.318 312.64 322.641 312.64 C 322.805 312.64 323.048 312.558 323.129 312.477 L 334.005 304.848 L 334.086 304.766 C 334.655 304.442 334.817 303.955 334.573 303.469 Z M 378.483 293.647 C 375.967 292.916 373.369 292.592 370.691 292.592 C 367.444 292.592 364.442 292.998 361.681 293.647 C 351.78 296.245 346.017 303.306 346.017 313.451 C 346.017 322.541 352.186 327.818 360.464 331.632 C 368.499 335.284 372.557 337.718 372.557 341.696 C 372.557 346.566 368.338 348.757 363.549 348.757 C 356.893 348.757 352.104 344.78 350.076 338.044 C 349.832 337.557 349.264 337.313 348.777 337.557 L 335.791 342.752 C 335.385 342.914 335.142 343.238 335.142 343.644 C 335.142 343.726 335.142 343.726 335.142 343.807 C 337.414 352.653 344.312 359.633 353.241 361.988 C 356 362.718 358.841 363.123 361.681 363.123 C 365.253 363.123 368.499 362.799 371.583 362.068 C 382.298 359.553 389.44 352.329 389.44 339.423 C 389.44 329.927 382.135 325.301 374.83 322.054 C 370.042 319.864 362.656 317.834 362.656 313.127 C 362.656 309.231 365.741 307.039 369.555 307.039 C 373.207 307.039 377.346 308.662 379.781 312.153 C 380.106 312.558 380.675 312.721 381.16 312.396 L 392.199 304.686 C 392.524 304.442 392.687 303.874 392.443 303.469 C 390.008 299.004 384.651 295.351 378.483 293.647 Z M 423.773 293.647 L 408.27 293.647 C 407.865 293.647 407.458 293.891 407.296 294.377 L 393.904 360.85 C 393.904 360.932 393.904 361.013 393.904 361.094 C 393.904 361.662 394.392 362.068 394.878 362.068 L 410.379 362.068 C 410.867 362.068 411.192 361.825 411.354 361.338 L 424.746 294.703 L 424.746 294.621 C 424.746 294.377 424.665 294.133 424.422 293.891 C 424.26 293.728 424.016 293.647 423.773 293.647 Z M 478.314 293.647 C 475.392 292.916 472.389 292.51 469.386 292.592 C 465.815 292.592 462.406 292.998 459.241 293.647 C 439.518 297.95 427.506 314.75 427.506 332.85 C 427.506 348.515 436.19 358.822 448.851 361.988 C 451.773 362.718 454.777 363.123 457.861 363.042 C 461.676 363.042 465.166 362.718 468.331 361.988 C 478.152 359.796 485.376 354.114 492.03 344.78 C 492.193 344.537 492.193 344.293 492.112 344.049 C 492.03 343.807 491.869 343.563 491.625 343.482 L 479.369 337.395 C 479.207 337.313 479.126 337.313 478.963 337.313 C 478.639 337.313 478.396 337.476 478.233 337.718 C 473.2 344.78 467.358 348.757 459.322 348.757 C 450.068 348.757 445.037 342.508 445.037 335.446 L 445.037 333.337 L 495.035 333.337 C 495.196 333.337 495.44 333.255 495.521 333.174 C 495.765 333.093 495.926 332.85 495.926 332.606 C 496.414 330.902 497.713 325.95 497.713 320.026 C 497.713 307.364 491.057 296.894 478.314 293.647 Z M 448.365 320.026 C 451.287 312.964 458.348 307.039 467.114 307.039 C 475.961 307.039 480.019 311.502 480.587 320.026 L 448.365 320.026 Z M 554.284 308.906 C 554.446 308.988 554.689 309.068 554.851 309.068 C 555.015 309.068 555.258 308.988 555.338 308.906 C 555.501 308.825 555.663 308.662 555.745 308.419 L 560.857 295.271 C 560.939 295.189 560.939 295.027 560.939 294.865 C 560.939 294.459 560.696 294.133 560.29 293.972 L 559.316 293.647 C 557.124 292.916 555.258 292.592 552.011 292.592 C 549.414 292.592 546.897 292.916 544.462 293.647 C 539.269 295.189 534.318 298.436 529.854 303.874 L 531.719 294.865 C 531.719 294.784 531.719 294.703 531.719 294.621 C 531.719 294.377 531.639 294.133 531.396 293.891 C 531.233 293.728 530.989 293.566 530.666 293.647 L 515.162 293.647 C 514.676 293.647 514.27 293.972 514.188 294.459 L 501.04 360.932 C 501.04 361.013 501.04 361.013 501.04 361.094 C 501.04 361.257 501.04 361.338 501.121 361.5 C 501.284 361.825 501.608 362.068 502.015 362.068 L 517.516 362.068 C 517.679 362.068 517.923 361.988 518.003 361.906 C 518.246 361.744 518.409 361.581 518.49 361.338 L 523.279 337.8 C 527.5 316.211 539.511 307.688 548.278 307.688 C 550.631 307.606 552.66 308.094 554.284 308.906 Z M 419.146 267.026 C 413.384 267.026 409.162 271.245 409.162 276.684 C 409.162 282.122 413.384 286.342 419.146 286.342 C 424.908 286.342 429.129 282.122 429.129 276.684 C 429.129 271.245 424.908 267.026 419.146 267.026 Z M 555.177 344.049 C 549.414 344.049 545.193 348.271 545.193 353.708 C 545.193 357.28 547.06 360.364 549.982 362.068 C 551.442 362.88 553.228 363.367 555.095 363.367 C 557.043 363.367 558.747 362.88 560.208 362.068 C 563.212 360.364 565.078 357.199 564.997 353.708 C 565.16 348.271 560.939 344.049 555.177 344.049 Z" style="transform-origin: 321.589px 314.669px;"/>
-</svg>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 27ef07e..6924d7c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -194,3 +194,24 @@ section:before {
 .detail-container p {
   margin-bottom: 1.5rem;
 }
+
+.hero-walden {
+  @apply bg-walden-green;
+  @apply text-white;
+}
+
+.hero-casper {
+  @apply bg-white;
+}
+
+.hero-glossier {
+  @apply bg-white;
+}
+
+.hero-felcana {
+  @apply bg-white;
+}
+
+.hero-florence {
+  @apply bg-white;
+}
diff --git a/src/templates/clientPage.js b/src/templates/clientPage.js
new file mode 100644
index 0000000..4b11f89
--- /dev/null
+++ b/src/templates/clientPage.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import Hero from "../components/client-pages/Hero.jsx";
+import Layout from "../components/layout/Layout";
+
+export default function ClientPage({pageContext}) {
+  const { client } = pageContext
+
+  return (
+    <Layout fullWidth={true}>
+      <Hero client={client}></Hero>
+    </Layout>
+  )
+}