feat(homepageHeader): initial commit

config/heal/home/SlideData.ts

@@ -1,14 +1,14 @@
-import IconHdd from '../../../src/lib/Home/Assets/Icons/Icon-Hdd.svg';
-import IconAnalyses from '../../../src/lib/Home/Assets/Icons/Icon-Analyses.svg';
+import IconHdd from '../../../public/icons/HealIcons/Icon-Hdd.svg';
+import IconAnalyses from '../../../public/icons/HealIcons/Icon-Analyses.svg';
 
 export const slideData = [
   {
-    href: 'https://www.askjeeves.com',
+    href: 'https://healdata.org',
     icon: IconHdd,
     text: 'View the latest studies who have shared their data!',
   },
   {
-    href: 'https://www.spacejam.com/1996/',
+    href: 'https://healdata.org',
     icon: IconAnalyses,
     text: 'Explore example analyses!',
   },

config/heal/home/resourceCalloutData.ts

@@ -2,22 +2,22 @@ export const resourceCalloutsData = [
   {
     title: 'Resources for HEAL Investigators',
     links: [
-      { title: 'Select a Repository', href: 'https://www.spacejam.com/1996/' },
+      { title: 'Select a Repository', href: 'https://healdata.org' },
       {
         title: 'Register Your Study',
-        href: 'https://www.spacejam.com/1996/cmp/pressbox/pressboxframes.html',
+        href: 'https://healdata.org',
       },
       {
         title: 'Submit Study-Level Metadata',
-        href: 'https://www.spacejam.com/1996/cmp/lineup/lineupframes.html',
+        href: 'https://healdata.org',
       },
       {
         title: 'Submit Variable-Level Metadata',
-        href: 'https://www.spacejam.com/1996/cmp/junior/juniorframes.html',
+        href: 'https://healdata.org',
       },
       {
         title: 'Link Data to the HEAL Platform',
-        href: 'https://www.spacejam.com/1996/cmp/souvenirs/souvenirsframes.html',
+        href: 'https://healdata.org',
       },
     ],
   },
@@ -26,24 +26,24 @@ export const resourceCalloutsData = [
     links: [
       {
         title: 'Browse Studies and Data',
-        href: 'https://www.spacejam.com/1996/cmp/jamcentral/jamcentralframes.html',
+        href: 'https://healdata.org',
       },
       {
         title: 'Request Access to Workspaces',
-        href: 'https://www.spacejam.com/1996/cmp/bball/bballframes.html',
+        href: 'https://healdata.org',
       },
       {
         title: 'Explore Example Analyses',
-        href: 'https://www.spacejam.com/1996/cmp/tunes/tunesframes.html',
+        href: 'https://healdata.org',
       },
       {
         title: 'View answers to FAQs',
-        href: 'https://www.spacejam.com/1996/cmp/jump/jumpframes.html',
+        href: 'https://healdata.org',
       },
       {
         title:
           'Watch tutorial videos to learn how to interact with the HEAL Platform',
-        href: 'https://www.spacejam.com/1996/cmp/behind/behindframes.html',
+        href: 'https://healdata.org',
       },
     ],
   },

src/lib/HealNav/HealFooter.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, expect } from '@storybook/test';
+import HealFooter from './HealFooter';
+
+const meta = {
+  title: 'HomePage/HealFooter',
+  component: HealFooter,
+} satisfies Meta<typeof HealFooter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('heal-footer')).toBeInTheDocument();
+  },
+};

src/lib/HealNav/HealFooter.tsx

@@ -0,0 +1,99 @@
+import Image from 'next/image';
+import gen3Logo from '../../../public/images/gen3.png';
+import ctdsLogo from '../../../public/images/ctds-logo.png';
+import footerNihLogo from '../../../public/images/footer-nih-logo.png';
+
+const HealFooter: React.FC = () => {
+  return (
+    <footer
+      data-testid="heal-footer"
+      className="bg-heal-dark_background min-h-[212px] text-white "
+    >
+      <div className="container mx-auto px-6 py-12 flex justify-between">
+        <div className="flex flex-wrap max-w-[400px] text-sm">
+          <div className="mb-3">
+            <a
+              href="https://ctds.uchicago.edu/gen3"
+              className="hover:opacity-85"
+            >
+              <Image
+                src={gen3Logo}
+                alt="GEN3"
+                className="w-[20%] sm:w-[58px] border-r-1 border-heal-blue_accent pr-2 sm:pr-3 inline"
+              />
+            </a>
+            <a href="https://ctds.uchicago.edu/" className="hover:opacity-85">
+              <Image
+                src={ctdsLogo}
+                alt="Center for Translational Data Science at the University of Chicago"
+                className="w-[40%] sm:w-[105px] border-r-1 border-heal-blue_accent px-2 sm:px-3 inline"
+              />
+            </a>
+            <a href="https://heal.nih.gov/" className="hover:opacity-85">
+              <Image
+                src={footerNihLogo}
+                alt="NIH HEAL INITIATIVE"
+                className="w-[20%] sm:w-[45px] pl-2 sm:pl-3 inline"
+              />
+            </a>
+          </div>
+          <div>
+            The HEAL Data Platform is funded by the NIH HEAL Initiative. NIH
+            HEAL Initiative and Helping to End Addiction Long-term are service
+            marks of the U.S. Department of Health and Human Services.
+          </div>
+          <div className="mt-3">
+            <a
+              href="https://healdata.org"
+              className="underline hover:opacity-85"
+            >
+              NIH HEAL Initiative
+            </a>
+            <span className="hidden md:inline">&nbsp;|&nbsp;</span>
+            <a
+              href="https://healdata.org"
+              className="underline hover:opacity-85 block sm:inline mt-3 sm:mt-0"
+            >
+              HHS Responsible Disclosure Form
+            </a>
+          </div>
+        </div>
+
+        <div className="block md:flex justify-between max-w-[225px] ml-8 md:ml-0 md:mr-8">
+          <div className="flex-wrap mr-14 mb-8 md:mb-0">
+            <div className="mb-3 font-bold">PLATFORM</div>
+            <ul className="text-sm">
+              <li>
+                <a className="hover:underline" href="https://healdata.org/">
+                  About HEAL
+                </a>
+              </li>
+              <li>
+                <a className="hover:underline" href="https://healdata.org/">
+                  Contact Us
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="flex-wrap">
+            <div className="mb-3 font-bold">HELP</div>
+            <ul className="text-sm">
+              <li>
+                <a className="hover:underline" href="https://healdata.org/">
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a className="hover:underline" href="https://healdata.org/">
+                  FAQ
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default HealFooter;