Add FAQ link to About page

client/src/components/AboutCard/AboutCard.tsx

@@ -6,7 +6,7 @@ import {hyphenizeString} from '../../../cypress/integration/common/helpers';
 
 // the "body" section is the child object to allow for html versus just text
 interface AboutCardProps {
-  imgSrc: string;
+  imgSrc?: string;
   header: string;
   size: 'small' | 'large';
   linkText?: string;
@@ -25,10 +25,10 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
       <Grid tablet={{col: true}} gap={'lg'} className={(props.className || '')}>
         <Grid row className={'j40-aboutcard-lg-card'}>
           <Grid tablet={{col: 3}} className={'j40-aboutpage-image-container'}>
-            <img
+            {props.imgSrc && <img
               className={'j40-aboutcard-image'}
               alt={props.header}
-              src={props.imgSrc}/>
+              src={props.imgSrc}/>}
           </Grid>
 
           <Grid tablet={{col: 9}} data-cy={`${hyphenizeString(props.header)}-block`}>

client/src/data/copy/about.tsx

@@ -5,6 +5,7 @@ import {FormattedMessage} from 'gatsby-plugin-intl';
 import {italicFn, linkFn} from './common';
 
 export const EXEC_ORDER_LINK = 'https://www.federalregister.gov/documents/2021/02/01/2021-02177/tackling-the-climate-crisis-at-home-and-abroad#:~:text=Sec.%20223.%20Justice40,40-percent%20goal.';
+export const FAQS_LINK = 'https://www.whitehouse.gov/wp-content/uploads/2022/02/CEQ-CEJST-QandA.pdf';
 
 export const PAGE = defineMessages({
   TILE: {
@@ -45,6 +46,12 @@ export const PAGE = defineMessages({
     `,
     description: 'Navigate to the About page. This is the third heading description',
   },
+  HEADING_3: {
+    id: 'about.page.sub.header.3.text',
+    defaultMessage: 'Still have questions?',
+    description: 'Navigate to the About page. This is the fourth heading',
+  },
+
 });
 
 export const HEADING_1 = {
@@ -66,6 +73,18 @@ export const HEADING_1 = {
     }}
   />,
 };
+export const HEADING_3 = {
+  DESCRIPTION_1:
+  <FormattedMessage
+    id={'about.page.sub.header.3.text.1'}
+    defaultMessage={`Please navigate to to our <link1>frequently asked questions</link1> to find the answers you are looking for.
+    `}
+    description={'Navigate to the About page. This is the second heading description'}
+    values={{
+      link1: linkFn(FAQS_LINK, false, true),
+    }}
+  />,
+};
 
 export const HEADING_2 = {
   DESCRIPTION_2:

client/src/intl/en.json

@@ -79,6 +79,14 @@
     "defaultMessage": "Read more about the Justice40 Initiative in President Biden’s <link1>Executive Order 14008</link1> on <italictag>Tackling the Climate Crisis at Home and Abroad</italictag>.",
     "description": "about page sub header text"
   },
+  "about.page.sub.header.3.text": {
+    "defaultMessage": "Still have questions?",
+    "description": "Navigate to the About page. This is the fourth heading"
+  },
+  "about.page.sub.header.3.text.1": {
+    "defaultMessage": "Please navigate to to our <link1>frequently asked questions</link1> to find the answers you are looking for.",
+    "description": "Navigate to the About page. This is the second heading description"
+  },
   "about.page.title.text": {
     "defaultMessage": "About",
     "description": "Navigate to the About page. This is the about page title text"

client/src/pages/about.tsx

@@ -45,6 +45,7 @@ const AboutPage = ({location}: IAboutPageProps) => {
           <PublicEngageButton />
         </section>
 
+        {/* Section 1 */}
         <AboutCardsContainer>
           <AboutCard
             size={'large'}
@@ -61,6 +62,8 @@ const AboutPage = ({location}: IAboutPageProps) => {
           </AboutCard>
         </AboutCardsContainer>
 
+
+        {/* Section 2 */}
         <AboutCardsContainer>
           <AboutCard
             size={'large'}
@@ -76,6 +79,20 @@ const AboutPage = ({location}: IAboutPageProps) => {
             </>
           </AboutCard>
         </AboutCardsContainer>
+
+        {/* Section 3 */}
+        <AboutCardsContainer>
+          <AboutCard
+            size={'large'}
+            header={intl.formatMessage(ABOUT_COPY.PAGE.HEADING_3)}>
+            <>
+              <p>
+                {ABOUT_COPY.HEADING_3.DESCRIPTION_1}
+              </p>
+            </>
+          </AboutCard>
+        </AboutCardsContainer>
+
       </J40MainGridContainer>
 
       <J40MainGridContainer

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -483,6 +483,53 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </div>
         </div>
       </div>
+      <div
+        class="grid-row grid-gap-lg j40-aboutcard-container "
+        data-testid="grid"
+      >
+        <div
+          class="grid-gap-lg tablet:grid-col"
+          data-testid="grid"
+        >
+          <div
+            class="grid-row j40-aboutcard-lg-card"
+            data-testid="grid"
+          >
+            <div
+              class="tablet:grid-col-3 j40-aboutpage-image-container"
+              data-testid="grid"
+            />
+            <div
+              class="tablet:grid-col-9"
+              data-cy="still-have-questions?-block"
+              data-testid="grid"
+            >
+              <div
+                class="grid-row"
+                data-testid="grid"
+              >
+                <h2>
+                  Still have questions?
+                </h2>
+                <p>
+                  Please navigate to to our 
+                  <a
+                    class="usa-link usa-link--external"
+                    data-cy=""
+                    href="https://www.whitehouse.gov/wp-content/uploads/2022/02/CEQ-CEJST-QandA.pdf"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    frequently asked questions
+                  </a>
+                   to find the answers you are looking for.
+    
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       class="j40-main-grid-blue-bk "