diff --git a/config/heal/home/SlideData.ts b/config/heal/home/SlideData.ts index ecfebea..f337808 100644 --- a/config/heal/home/SlideData.ts +++ b/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!', }, diff --git a/config/heal/home/resourceCalloutData.ts b/config/heal/home/resourceCalloutData.ts index d1f3864..a30cad2 100644 --- a/config/heal/home/resourceCalloutData.ts +++ b/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', }, ], }, diff --git a/public/icons/HealIcons/Icon-Analyses-Nav.svg b/public/icons/HealIcons/Icon-Analyses-Nav.svg new file mode 100644 index 0000000..2a60bea --- /dev/null +++ b/public/icons/HealIcons/Icon-Analyses-Nav.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/Home/Assets/Icons/Icon-Analyses.svg b/public/icons/HealIcons/Icon-Analyses.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Analyses.svg rename to public/icons/HealIcons/Icon-Analyses.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Arrow.svg b/public/icons/HealIcons/Icon-Arrow.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Arrow.svg rename to public/icons/HealIcons/Icon-Arrow.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Discovery.svg b/public/icons/HealIcons/Icon-Discovery.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Discovery.svg rename to public/icons/HealIcons/Icon-Discovery.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Hdd.svg b/public/icons/HealIcons/Icon-Hdd.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Hdd.svg rename to public/icons/HealIcons/Icon-Hdd.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Help.svg b/public/icons/HealIcons/Icon-Help.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Help.svg rename to public/icons/HealIcons/Icon-Help.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Link-Arrow.svg b/public/icons/HealIcons/Icon-Link-Arrow.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Link-Arrow.svg rename to public/icons/HealIcons/Icon-Link-Arrow.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Profile.svg b/public/icons/HealIcons/Icon-Profile.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Profile.svg rename to public/icons/HealIcons/Icon-Profile.svg diff --git a/src/lib/Home/Assets/Icons/Icon-Workspaces.svg b/public/icons/HealIcons/Icon-Workspaces.svg similarity index 100% rename from src/lib/Home/Assets/Icons/Icon-Workspaces.svg rename to public/icons/HealIcons/Icon-Workspaces.svg diff --git a/public/images/createdby.png b/public/images/ctds-logo.png similarity index 100% rename from public/images/createdby.png rename to public/images/ctds-logo.png diff --git a/public/images/footer-nih-logo.png b/public/images/footer-nih-logo.png new file mode 100644 index 0000000..50e59d9 Binary files /dev/null and b/public/images/footer-nih-logo.png differ diff --git a/public/images/logo.png b/public/images/nih-logo.png similarity index 100% rename from public/images/logo.png rename to public/images/nih-logo.png diff --git a/src/lib/HealNav/HealFooter.stories.tsx b/src/lib/HealNav/HealFooter.stories.tsx new file mode 100644 index 0000000..f895329 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; +export const Default: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.getByTestId('heal-footer')).toBeInTheDocument(); + }, +}; diff --git a/src/lib/HealNav/HealFooter.tsx b/src/lib/HealNav/HealFooter.tsx new file mode 100644 index 0000000..ce574ef --- /dev/null +++ b/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 ( + + ); +}; + +export default HealFooter; diff --git a/src/lib/HealNav/HealHeader.stories.tsx b/src/lib/HealNav/HealHeader.stories.tsx new file mode 100644 index 0000000..8b4c3db --- /dev/null +++ b/src/lib/HealNav/HealHeader.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within } from '@storybook/test'; +import HealHeader from './HealHeader'; + +const meta = { + title: 'HomePage/HealHeader', + component: HealHeader, +} satisfies Meta; + +export default meta; +type Story = StoryObj; +export const Default: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.getByTestId('heal-header')).toBeInTheDocument(); + }, +}; diff --git a/src/lib/HealNav/HealHeader.tsx b/src/lib/HealNav/HealHeader.tsx new file mode 100644 index 0000000..610299c --- /dev/null +++ b/src/lib/HealNav/HealHeader.tsx @@ -0,0 +1,87 @@ +import Image from 'next/image'; +import nihLogo from '../../../public/images/nih-logo.png'; +import discoveryIcon from '../../../public/icons/HealIcons/Icon-Discovery.svg'; +import workspacesIcon from '../../../public/icons/HealIcons/Icon-Workspaces.svg'; +import analysesIconNav from '../../../public/icons/HealIcons/Icon-Analyses-Nav.svg'; +import profileIcon from '../../../public/icons/HealIcons/Icon-Profile.svg'; +import helpIcon from '../../../public/icons/HealIcons/Icon-Help.svg'; + +const navLinks = [ + { + text: 'Discovery', + icon: discoveryIcon, + iconClassNames: 'fill-current', + href: 'https://healdata.org', + }, + { + text: 'Workspaces', + icon: workspacesIcon, + iconClassNames: 'fill-current', + href: 'https://healdata.org', + }, + { + text: 'Example Analyses', + icon: analysesIconNav, + iconClassNames: 'fill-current', + href: 'https://healdata.org', + }, + { + text: 'Profile', + icon: profileIcon, + iconClassNames: 'fill-current', + href: 'https://healdata.org', + }, + { + text: 'Help', + icon: helpIcon, + iconClassNames: '', + href: 'https://healdata.org', + }, +]; + +const generateLinkClassNames = (i: number) => { + let classNames = 'flex hover:underline items-center '; + classNames += + i === navLinks.length - 1 + ? 'border-l-1 ml-4 lg:ml-3 pl-2 mr-1 lg:mr-6 sm:mt-0' + : 'mr-2 sm:mt-0'; + return classNames; +}; + +const HealHeader: React.FC = () => { + return ( +
+
+
+
+ + NIH HEAL INITIATIVE +
+ HEAL Data Platform +
+ + +
+ {navLinks.map((link, i) => ( + + + {link.text} + + ))} +
+
+
+
+ ); +}; + +export default HealHeader; diff --git a/src/lib/Home/Components/CarouselBanner/CarouselBanner.tsx b/src/lib/Home/Components/CarouselBanner/CarouselBanner.tsx index c2482d1..2455ac3 100644 --- a/src/lib/Home/Components/CarouselBanner/CarouselBanner.tsx +++ b/src/lib/Home/Components/CarouselBanner/CarouselBanner.tsx @@ -38,7 +38,7 @@ const CarouselBanner: React.FC = () => { overflow-hidden px-[10%] md:px-[33%] relative" - aria-live="polite" + aria-live={isPlaying ? 'polite' : 'off'} aria-label="Carousel banner displaying slides" >
diff --git a/src/lib/Home/Components/CarouselBanner/Slide.tsx b/src/lib/Home/Components/CarouselBanner/Slide.tsx index ef0bf9c..ce9a138 100644 --- a/src/lib/Home/Components/CarouselBanner/Slide.tsx +++ b/src/lib/Home/Components/CarouselBanner/Slide.tsx @@ -1,4 +1,4 @@ -import ArrowIconSVG from '../../Assets/Icons/Icon-Arrow.svg'; +import ArrowIconSVG from '../../../../../public/icons/HealIcons/Icon-Arrow.svg'; import styles from './CarouselAnimations.module.css'; type SlideProps = { @@ -30,7 +30,10 @@ const Slide: React.FC = ({ }; return ( -
+
{ return (
{
diff --git a/src/lib/Home/Components/HealButtonLink/HealButtonLink.tsx b/src/lib/Home/Components/HealButtonLink/HealButtonLink.tsx index 966d2e8..03234c3 100644 --- a/src/lib/Home/Components/HealButtonLink/HealButtonLink.tsx +++ b/src/lib/Home/Components/HealButtonLink/HealButtonLink.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import ArrowIconSVG from '../../Assets/Icons/Icon-Arrow.svg'; +import ArrowIconSVG from '../../../../../public/icons/HealIcons/Icon-Arrow.svg'; interface ButtonLinkProps { /** HREF for Button Link */ diff --git a/src/lib/Home/Components/Hero/Hero.tsx b/src/lib/Home/Components/Hero/Hero.tsx index b9d344b..c02ca4b 100644 --- a/src/lib/Home/Components/Hero/Hero.tsx +++ b/src/lib/Home/Components/Hero/Hero.tsx @@ -23,7 +23,7 @@ const Hero: React.FC = () => {

is a single web interface which allows visitors to discover, access, and analyze data generated by HEAL Studies. diff --git a/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx b/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx index 561b07d..0d24d79 100644 --- a/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx +++ b/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx @@ -8,24 +8,44 @@ import photoDivider5 from './../../Assets/Images/photo-divider-5.webp'; const PhotoDivider: React.FC = () => { return ( -

-
-
- -
-
- -
-
- -
-
- -
-
- -
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
); }; diff --git a/src/lib/Home/Components/QuickLinks/QuickLinks.tsx b/src/lib/Home/Components/QuickLinks/QuickLinks.tsx index d36601c..38059b5 100644 --- a/src/lib/Home/Components/QuickLinks/QuickLinks.tsx +++ b/src/lib/Home/Components/QuickLinks/QuickLinks.tsx @@ -7,7 +7,7 @@ const QuickLinks: React.FC = () => { return (
Quick Links diff --git a/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx b/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx index 51f57da..60418ae 100644 --- a/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx +++ b/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx @@ -5,7 +5,7 @@ import Background from '../../Assets/Images/background.webp'; /** UI component for displaying a quote and attribution */ const QuoteSpotlight: React.FC = () => { return ( -
+
{ +const HealLandingPage = () => { return ( - -
- - - - - - -
- +
+ + + + + + + + +
); }; -export const getServerSideProps: GetServerSideProps< - NavPageLayoutProps -> = async () => { - return { - props: { - ...(await getNavPageLayoutPropsFromConfig()), - }, - }; -}; - export default HealLandingPage; diff --git a/tailwind.config.js b/tailwind.config.js index 12157da..92aab63 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,7 +15,8 @@ module.exports = { theme: { extend: { backgroundImage: { - 'carousel-gradient': 'linear-gradient(90.11deg, #532565 10.07%, #982568 30.02%, #981F32 49.97%, #BF362E 94.85%, #E07C3E 99.84%)', + 'carousel-gradient': + 'linear-gradient(90.11deg, #532565 10.07%, #982568 30.02%, #981F32 49.97%, #BF362E 94.85%, #E07C3E 99.84%)', }, colors: { heal: { @@ -31,7 +32,9 @@ module.exports = { medium_gray: '#818A91', light_gray: '#DDDDDD', blue: '#0044B3', + blue_accent: '#81C5FF', background: '#262663', + dark_background: '#111111', carousel_button: '#98203f', }, midrc: {