Merge pull request #67 from CDCgov/jw/cs-images

Add image and arrow icon to the top of case study pages

src/app/case-studies/_ui/ArrowBackIcon.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { Icon } from '@trussworks/react-uswds';
+
+// Next can't render the USWDS icons server side, which is why this gets its own file
+export const ArrowBackIcon = () => {
+  return (
+    <Icon.ArrowBack height={4} width={4} role="img" aria-label="Back arrow" />
+  );
+};

src/app/case-studies/_ui/index.tsx

@@ -2,16 +2,25 @@ import Link from 'next/link';
 import { Link as ExternalLink } from '@trussworks/react-uswds';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { ArrowBackIcon } from './ArrowBackIcon';
+import { InvitationCta } from '@/app/components/InvitationCta/InvitationCta';
+import {
+  RoundedImage,
+  RoundedImageProps,
+} from '@/app/components/RoundedImage/RoundedImage';
 
 interface ContainerProps {
   children: React.ReactNode;
 }
 
 const PageContainer = ({ children }: ContainerProps) => {
   return (
-    <div className="main ml-auto mr-auto flex items-center justify-center pb-20 lg:pl-[7.5rem] lg:pr-[7.5rem]">
-      {children}
-    </div>
+    <>
+      <div className="main ml-auto mr-auto flex items-center justify-center pb-20 lg:pl-[7.5rem] lg:pr-[7.5rem]">
+        {children}
+      </div>
+      <InvitationCta />
+    </>
   );
 };
 
@@ -27,14 +36,32 @@ const SectionContentContainer = ({ children }: ContainerProps) => {
   return <div className="flex flex-col gap-3">{children}</div>;
 };
 
+const HeadingContentContainer = ({ children }: ContainerProps) => {
+  return <div className="flex flex-col gap-[2.5rem]">{children}</div>;
+};
+
+const HeadingImageContainer = ({ children }: ContainerProps) => {
+  return (
+    <div className="flex flex-col gap-5">
+      <>
+        <ReturnToCaseStudiesLink />
+        <div className="h-[18.75rem] w-full overflow-hidden">{children}</div>
+      </>
+    </div>
+  );
+};
+
 const ReturnToCaseStudiesLink = () => {
   return (
-    <Link
-      className="font-['Public Sans'] text-base font-normal leading-relaxed text-[#3a7d95] underline"
-      href="/case-studies"
-    >
-      Return to all case studies
-    </Link>
+    <div className="flex flex-row items-center gap-2">
+      <ArrowBackIcon />
+      <Link
+        className="font-['Public Sans'] text-base font-normal leading-relaxed text-[#3a7d95] underline"
+        href="/case-studies"
+      >
+        Return to all case studies
+      </Link>
+    </div>
   );
 };
 
@@ -71,12 +98,26 @@ const ReadMore = ({ href, linkText }: { href: string; linkText: string }) => {
   );
 };
 
+const HeadingImage = (props: RoundedImageProps) => {
+  return (
+    <RoundedImage
+      width={300}
+      height={654}
+      priority
+      className="h-full w-full object-cover object-bottom"
+      {...props}
+    />
+  );
+};
+
 export {
   ContentContainer,
   PageContainer,
   SectionContentContainer,
-  ReturnToCaseStudiesLink,
+  HeadingContentContainer,
   Text,
   UnorderedList,
   ReadMore,
+  HeadingImageContainer,
+  HeadingImage,
 };

src/app/case-studies/cloud-hosting/page.tsx

@@ -1,22 +1,32 @@
+import { basePath } from '@/app/utils/constants';
 import {
   PageContainer,
   ContentContainer,
-  ReturnToCaseStudiesLink,
   SectionContentContainer,
   Text,
   UnorderedList,
+  HeadingContentContainer,
+  HeadingImageContainer,
+  HeadingImage,
 } from '../_ui';
 
 const CloudHosting = () => {
   return (
     <PageContainer>
       <ContentContainer>
         <section id="heading">
-          <ReturnToCaseStudiesLink />
-          <h1>
-            Improving public health data infrastructure through flexible, modern
-            approaches to cloud services
-          </h1>
+          <HeadingContentContainer>
+            <HeadingImageContainer>
+              <HeadingImage
+                src={`${basePath}/images/case-studies/image3.png`}
+                alt=""
+              />
+            </HeadingImageContainer>
+            <h1>
+              Improving public health data infrastructure through flexible,
+              modern approaches to cloud services
+            </h1>
+          </HeadingContentContainer>
         </section>
         <section id="challenge">
           <SectionContentContainer>

src/app/case-studies/dibbs-pipeline/page.tsx

@@ -1,23 +1,33 @@
 import {
   PageContainer,
   ContentContainer,
-  ReturnToCaseStudiesLink,
   SectionContentContainer,
   UnorderedList,
   Text,
   ReadMore,
+  HeadingContentContainer,
+  HeadingImageContainer,
+  HeadingImage,
 } from '../_ui';
+import { basePath } from '@/app/utils/constants';
 
 const DibbsPipeline = () => {
   return (
     <PageContainer>
       <ContentContainer>
         <section id="heading">
-          <ReturnToCaseStudiesLink />
-          <h1>
-            Creating a modular, cloud-based data processing pipeline for LA
-            County
-          </h1>
+          <HeadingContentContainer>
+            <HeadingImageContainer>
+              <HeadingImage
+                src={`${basePath}/images/case-studies/image1.png`}
+                alt=""
+              />
+            </HeadingImageContainer>
+            <h1>
+              Creating a modular, cloud-based data processing pipeline for LA
+              County
+            </h1>
+          </HeadingContentContainer>
         </section>
         <section id="challenge">
           <SectionContentContainer>

src/app/case-studies/dibbs-prototype/page.tsx

@@ -1,23 +1,33 @@
+import { basePath } from '@/app/utils/constants';
 import {
   PageContainer,
   ContentContainer,
-  ReturnToCaseStudiesLink,
   SectionContentContainer,
   Text,
   UnorderedList,
   ReadMore,
+  HeadingContentContainer,
+  HeadingImageContainer,
+  HeadingImage,
 } from '../_ui';
 
 const DibbsPrototype = () => {
   return (
     <PageContainer>
       <ContentContainer>
         <section id="heading">
-          <ReturnToCaseStudiesLink />
-          <h1>
-            Building a prototype for modernized public health infrastructure in
-            Virginia
-          </h1>
+          <HeadingContentContainer>
+            <HeadingImageContainer>
+              <HeadingImage
+                src={`${basePath}/images/case-studies/image4.png`}
+                alt=""
+              />
+            </HeadingImageContainer>
+            <h1>
+              Building a prototype for modernized public health infrastructure
+              in Virginia
+            </h1>
+          </HeadingContentContainer>
         </section>
         <section id="challenge">
           <SectionContentContainer>

src/app/case-studies/ecr-viewer/page.tsx

@@ -1,21 +1,31 @@
+import { basePath } from '@/app/utils/constants';
 import {
   ContentContainer,
+  HeadingContentContainer,
+  HeadingImageContainer,
   PageContainer,
-  ReturnToCaseStudiesLink,
   SectionContentContainer,
   Text,
   UnorderedList,
+  HeadingImage,
 } from '../_ui';
 
 const EcrViewer = () => {
   return (
     <PageContainer>
       <ContentContainer>
         <section id="heading">
-          <ReturnToCaseStudiesLink />
-          <h1>
-            Surfacing actionable insights from electronic case reporting data
-          </h1>
+          <HeadingContentContainer>
+            <HeadingImageContainer>
+              <HeadingImage
+                src={`${basePath}/images/case-studies/image2.png`}
+                alt=""
+              />
+            </HeadingImageContainer>
+            <h1>
+              Surfacing actionable insights from electronic case reporting data
+            </h1>
+          </HeadingContentContainer>
         </section>
         <section id="challenge">
           <SectionContentContainer>

src/app/case-studies/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { LinkButton } from '../components/LinkButton/LinkButton';
-import Image from 'next/image';
 import { basePath } from '../utils/constants';
 import React from 'react';
 import { useHeroInit } from '../hooks/useHeroInit';
+import { RoundedImage } from '../components/RoundedImage/RoundedImage';
 
 export default function CaseStudies() {
   useHeroInit({
@@ -34,22 +34,22 @@ export default function CaseStudies() {
               </LinkButton>
             </div>
             <div className="order-1 flex justify-start lg:order-2 lg:justify-end">
-              <Image
-                src={`${basePath}/images/placeholder.png`}
+              <RoundedImage
+                src={`${basePath}/images/case-studies/image1.png`}
                 width={480}
                 height={320}
-                alt="Placeholder"
+                alt=""
               />
             </div>
           </div>
           {/* Section 2 */}
           <div className="grid grid-cols-1 gap-10 lg:grid-cols-[min(30rem)_auto] lg:items-center">
             <div className="order-1 flex justify-start lg:order-1">
-              <Image
-                src={`${basePath}/images/placeholder.png`}
+              <RoundedImage
+                src={`${basePath}/images/case-studies/image2.png`}
                 width={480}
                 height={320}
-                alt="Placeholder"
+                alt=""
               />
             </div>
             <div className="order-2 lg:order-2 lg:items-center">
@@ -89,23 +89,23 @@ export default function CaseStudies() {
               </LinkButton>
             </div>
             <div className="order-1 flex justify-start lg:order-2 lg:ml-4">
-              <Image
-                src={`${basePath}/images/placeholder.png`}
+              <RoundedImage
+                src={`${basePath}/images/case-studies/image3.png`}
                 width={480}
                 height={320}
-                alt="Placeholder"
+                alt=""
               />
             </div>
           </div>
 
           {/* Section 4 */}
           <div className="grid grid-cols-1 gap-10 lg:grid-cols-[min(30rem)_42rem] lg:items-center">
             <div className="order-1 flex justify-start lg:order-1">
-              <Image
-                src={`${basePath}/images/placeholder.png`}
+              <RoundedImage
+                src={`${basePath}/images/case-studies/image4.png`}
                 width={480}
                 height={320}
-                alt="Placeholder"
+                alt=""
               />
             </div>
             <div className="order-2 lg:order-2">

src/app/components/InvitationCta/InvitationCta.tsx

@@ -6,11 +6,11 @@ import styles from './InvitationCta.module.scss';
 
 export const InvitationCta = () => {
   const content = {
-    title: 'Ready to get started?', // or whatever the default title is
+    title: 'Interested in getting started with DIBBs?',
     description:
-      'Learn more about how DIBBs can help your jurisdiction make the most of its data.', // default description
-    ctaText: 'Contact us', // default CTA text
-    ctaHref: '/engage-with-us', // default href
+      'Contact our team to learn more about how our products can help improve your data workflows',
+    ctaText: 'Contact us',
+    ctaHref: '/engage-with-us',
   };
 
   return (
@@ -21,13 +21,15 @@ export const InvitationCta = () => {
       )}
     >
       <GridContainer>
-        <div className="flex flex-col items-center justify-center gap-5 self-stretch">
-          <Heading className="self-stretch text-center">
-            {content.title}
-          </Heading>
-          <Paragraph className="self-stretch text-center">
-            {content.description}
-          </Paragraph>
+        <div className="flex flex-col items-center justify-center gap-6 self-stretch">
+          <div className='flex flex-col gap-1'>
+            <Heading className="self-stretch text-center">
+              {content.title}
+            </Heading>
+            <Paragraph className="self-stretch text-center font-extralight p-0 m-0">
+              {content.description}
+            </Paragraph>
+          </div>
           <LinkButton href={content.ctaHref} variant="transparent">
             {content.ctaText}
           </LinkButton>

src/app/components/RoundedImage/RoundedImage.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import Image, { ImageProps } from 'next/image';
+
+export type RoundedImageProps = ImageProps;
+
+export const RoundedImage = ({
+  src,
+  alt,
+  className,
+  ...props
+}: RoundedImageProps) => {
+  return (
+    <Image
+      className={classNames(
+        'inline-flex h-full w-full items-center justify-center rounded-br-[2.5rem] rounded-tl-[2.5rem] shadow',
+        className,
+      )}
+      src={src}
+      alt={alt}
+      {...props}
+    />
+  );
+};