diff --git a/pages/solutions/[solution].tsx b/pages/solutions/[solution].tsx index 1cc3255d..6154e0d8 100644 --- a/pages/solutions/[solution].tsx +++ b/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({ /> + ) } diff --git a/public/images/solutions/download-section-bg.png b/public/images/solutions/download-section-bg.png new file mode 100644 index 00000000..f66569d6 Binary files /dev/null and b/public/images/solutions/download-section-bg.png differ diff --git a/src/components/page-sections/SolutionDownloadSection.tsx b/src/components/page-sections/SolutionDownloadSection.tsx new file mode 100644 index 00000000..81da14eb --- /dev/null +++ b/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 ( + +
+ +
+ + {innerSolution.bottomTitle} + + + {innerSolution.bottomDescription} + + +
+ + + + + + +
+
+
+
+ ) +} + +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'], +})) diff --git a/src/data/getSolutionsConfigs.tsx b/src/data/getSolutionsConfigs.tsx index 7ed5a271..76669325 100644 --- a/src/data/getSolutionsConfigs.tsx +++ b/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 = () => ({ @@ -38,6 +40,9 @@ export const getSolutionConfigs: () => Record = () => ({ 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',