Message to attend office hours under curation directory

client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.module.css

@@ -0,0 +1,4 @@
+.banner {
+  background: #fff;
+  border: 1px solid #b7eb8f !important;
+}

client/modules/datafiles/src/projects/ProjectBanner/ProjectCurationBanner.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Alert } from 'antd';
+import { WarningOutlined } from '@ant-design/icons';
+import styles from './ProjectCurationBanner.module.css';
+
+export const CurationInfoBanner: React.FC = () => {
+  const [visible, setVisible] = React.useState(() => {
+    return localStorage.getItem('curationBannerDismissed') !== 'true';
+  });
+
+  const handleClose = () => {
+    localStorage.setItem('curationBannerDismissed', 'true');
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div style={{ marginBottom: '10px' }}>
+      <Alert
+        type="warning"
+        banner
+        closable
+        showIcon
+        icon={<WarningOutlined style={{ color: '#52c41a' }} />}
+        onClose={handleClose}
+        className={styles.banner}
+        message={
+          <span>
+            We encourage you to attend{' '}
+            <a
+              href="https://www.designsafe-ci.org/facilities/virtual-office-hours/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              virtual office hours
+            </a>{' '}
+            to meet with a data curator before starting curation and
+            publication.
+          </span>
+        }
+      />
+    </div>
+  );
+};

client/modules/datafiles/src/projects/index.ts

@@ -10,6 +10,7 @@ export {
   BaseGithubFileListing,
 } from './ProjectGithubFileListing/ProjectGithubFileListing';
 export { ProjectNavbar } from './ProjectNavbar/ProjectNavbar';
+export { CurationInfoBanner } from './ProjectBanner/ProjectCurationBanner';
 export { ProjectPipeline } from './ProjectPipeline/ProjectPipeline';
 export { EmptyProjectFileListing } from './EmptyProjectFileListing';
 export {

client/src/datafiles/layouts/projects/ProjectCurationLayout.tsx

@@ -5,6 +5,7 @@ import {
   ProjectGithubTransfer,
   ProjectNavbar,
   RelateDataModal,
+  CurationInfoBanner,
 } from '@client/datafiles';
 import { DatafilesBreadcrumb } from '@client/common-components';
 import { useProjectDetail } from '@client/hooks';
@@ -178,6 +179,11 @@ export const ProjectCurationLayout: React.FC = () => {
           </span>
         )}
       </div>
+      {localStorage.getItem('curationBannerDismissed') !== 'true' && (
+        <div style={{ marginTop: '20px' }}>
+          <CurationInfoBanner />
+        </div>
+      )}
       <DatafilesBreadcrumb
         initialBreadcrumbs={[
           { path: `/projects/${projectId}/curation`, title: projectId },