add download section

pages/solutions/[solution].tsx

@@ -13,6 +13,7 @@ import { FeaturedQuote } from '@src/components/FeaturedQuote'
 import { FooterVariant } from '@src/components/FooterFull'
 import { StandardPageSection } from '@src/components/layout/LayoutHelpers'
 import { getCaseStudyApps } from '@src/components/page-sections/CaseStudySection'
+import SolutionDownloadSection from '@src/components/page-sections/SolutionDownloadSection'
 import SolutionFeatureSection from '@src/components/page-sections/SolutionFeatureSection'
 import { BasicPageHero } from '@src/components/PageHeros'
 import SolutionProblem from '@src/components/SolutionProblem'
@@ -123,6 +124,7 @@ export default function Solution({
           />
         </StandardPageSection>
       </ColorModeProvider>
+      <SolutionDownloadSection slug={solution.slug} />
     </>
   )
 }

src/components/page-sections/SolutionDownloadSection.tsx

@@ -0,0 +1,77 @@
+import { Button, ConsoleIcon, DownloadIcon } from '@pluralsh/design-system'
+import Link from 'next/link'
+
+import styled from 'styled-components'
+
+import { getSolutionConfigs } from '@src/data/getSolutionsConfigs'
+
+import { EqualColumn } from '../layout/Columns'
+import { StandardPageSection } from '../layout/LayoutHelpers'
+import { ResponsiveText } from '../Typography'
+
+function SolutionDownloadSection({ slug }: { slug: string }) {
+  const innerSolution = getSolutionConfigs()[slug]
+
+  return (
+    <StandardPageSection className="flex items-center justify-center bg-fill-zero px-large lg:px-xxxxlarge">
+      <div className="relative  flex w-full items-center justify-center rounded-large border border-purple-300 p-xxxlarge lg:px-xxxxxlarge">
+        <Background />
+        <div className="z-10 max-w-[760px]">
+          <ResponsiveText
+            textStyles={{ '': 'mSubtitle1' }}
+            className=" mb-medium"
+          >
+            {innerSolution.bottomTitle}
+          </ResponsiveText>
+          <ResponsiveText textStyles={{ '': 'mBody2' }}>
+            {innerSolution.bottomDescription}
+          </ResponsiveText>
+
+          <div className=" mt-xxlarge flex flex-col items-stretch gap-medium lg:flex-row lg:items-center">
+            <EqualColumn>
+              <Button
+                large
+                as={Link}
+                href="/contact-sales"
+                startIcon={<ConsoleIcon />}
+              >
+                Book a demo
+              </Button>
+            </EqualColumn>
+            <EqualColumn>
+              <Button
+                large
+                as={Link}
+                secondary
+                outline
+                href="/contact-sales"
+                startIcon={<DownloadIcon />}
+              >
+                Download full e-book
+              </Button>
+            </EqualColumn>
+          </div>
+        </div>
+      </div>
+    </StandardPageSection>
+  )
+}
+
+export default SolutionDownloadSection
+
+const Background = styled.div(({ theme }) => ({
+  overflow: 'hidden',
+  content: '""',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  right: '0',
+  bottom: '0',
+  width: '100%',
+  height: '100%',
+  backgroundImage: `url(/images/solutions/download-section-bg.png)`,
+  backgroundPosition: 'center center',
+  backgroundSize: '100%',
+  backgroundRepeat: 'no-repeat',
+  backgroundColor: theme.colors['fill-two'],
+}))

src/data/getSolutionsConfigs.tsx

@@ -28,6 +28,8 @@ export type SolutionConfig = {
   upperFeatures: SolutionFeatureConfig[]
   lowerFeatures: SolutionFeatureConfig[]
   problems: ProblemConfig[]
+  bottomTitle: string
+  bottomDescription: string
 }
 
 export const getSolutionConfigs: () => Record<string, SolutionConfig> = () => ({
@@ -38,6 +40,9 @@ export const getSolutionConfigs: () => Record<string, SolutionConfig> = () => ({
     upperFeaturesTitle: 'Strategic deployment in healthcare',
     lowerFeaturesTitle:
       'Innovations in Kubernetes fleet management for healthcare',
+    bottomTitle: 'A path forward for healthcare digital infrastructure',
+    bottomDescription:
+      "The healthcare industry's adoption of Kubernetes fleet management solutions represents a forward-thinking approach to managing digital infrastructure. Learn more in the full e-book.",
     upperFeatures: [
       {
         title: 'Enhanced security and compliance',