diff --git a/.veda/ui b/.veda/ui index 3e3734a9e..d78db829f 160000 --- a/.veda/ui +++ b/.veda/ui @@ -1 +1 @@ -Subproject commit 3e3734a9e02ee982dd8d39a2db3dc5d92ba8b65e +Subproject commit d78db829f20ded29218fe1047f1493955bb82480 diff --git a/overrides/components/hyperwall-cta.tsx b/overrides/components/hyperwall-cta.tsx new file mode 100644 index 000000000..2645d60af --- /dev/null +++ b/overrides/components/hyperwall-cta.tsx @@ -0,0 +1,114 @@ +import React from "$veda-ui/react"; +import { + Fold, + FoldBody, +} from "$veda-ui-scripts/components/common/fold"; +import styled from "$veda-ui/styled-components"; +import Hug from "$veda-ui-scripts/styles/hug"; +import { glsp, media } from "$veda-ui/@devseed-ui/theme-provider"; +import { ExpandLink } from "./expand-link"; +import { StyledVarHeading } from "../common/style"; +import { Button } from "$veda-ui/@devseed-ui/button"; +import HyperwallImg from "../home/media/hyperwall-image1.png"; + +const BottomContent = styled(Hug)` + display: flex; + gap: ${glsp(2)}; + flex-flow: column; + width: ${({width}) => width || '100%'}; + margin: auto; + + ${media.mediumDown` + width: 100% + `} +`; + +const InfoImageContent = styled.div` + display: flex; + flex-flow: row; + background-color: black; + color: #ffffff; + width: 100%; + height: 300px; + position: relative; // Make sure this is relative for positioning pseudo-elements + overflow: hidden; // Ensures that the pseudo-element respects the container's border-radius + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url(${HyperwallImg}); + background-position: right bottom; + background-repeat: no-repeat; + background-size: cover; + filter: blur(4px); + z-index: 1; // Ensure this is behind the content + } + + div { + display: flex; + flex-flow: column; + gap: ${glsp()}; + padding-left: ${glsp(3)}; + padding-right: ${glsp()}; + justify-content: center; + z-index: 2; // Ensure content is above the blurred background + position: relative; + background: linear-gradient( + to right, + rgba(0,0,0,1), + rgba(0,0,0,0.9), + rgba(0,0,0,0)); + } + + a { + width: 18.5rem; + z-index: 2; // Ensure links are above the blurred background + position: relative; + } + grid-column: full-start / full-end; + + ${media.largeUp` + grid-column: content-2 / content-12; + height: 350px; + `} +`; + + +export default function HyperwallCTA({ + width + }: + { + width?: string + }) { + return ( + <Fold> + <FoldBody> + <BottomContent width={width}> + <InfoImageContent> + <div> + <StyledVarHeading size="small" as="h2"> + Live Earth Dashboard + </StyledVarHeading> + <span> + An interactive way to explore what's happening on Earth right now + </span> + <Button + forwardedAs="a" + href="/stories/hyperwall" + size="medium" + radius="square" + variation="primary-fill" + > + Visit the Live Earth Dashboard + </Button> + </div> + </InfoImageContent> + </BottomContent> + </FoldBody> + </Fold> + ) +}; \ No newline at end of file diff --git a/overrides/components/page-footer/component.tsx b/overrides/components/page-footer/component.tsx index 5d91ed21f..6a36af1c1 100644 --- a/overrides/components/page-footer/component.tsx +++ b/overrides/components/page-footer/component.tsx @@ -27,6 +27,7 @@ import { useMediaQuery } from "$veda-ui-scripts/utils/use-media-query"; import Partners from "../../home/partners"; import BrandLogo from "../header-brand/logo.svg"; import { AccessibilityMenuItem } from "../../common/style"; +import { CollecticonExpandTopRight } from '$veda-ui/@devseed-ui/collecticons'; const FooterInner = styled.div` display: flex; @@ -81,6 +82,7 @@ const CreditsInfo = styled.div` gap: ${glsp(0.25)}; p { text-align: right; + margin-top: ${glsp(1.0)}; } `; @@ -112,6 +114,19 @@ const DisclaimerModalFooter = styled(ModalFooter)` margin-top: ${glsp(2)}; `; +const AccessbilityStatementLink = styled.a` + color: ${themeVal("color.link")} !important; + text-decoration: underline; + text-underline-offset: 2px; + display: inline-flex; + align-items: center; + margin-top: ${glsp(0.5)}; + + > svg { + margin-left: ${glsp(0.5)}; + } +`; + const DISCLAIMER_MODALS_DISMISSED_KEY = "disclaimerModalsDismissedKey"; const EXPLORE_PATH = "/explore"; @@ -294,26 +309,31 @@ export default function PageFooter(props) { </FooterContent> <FooterContacts> <div> - <a href="/"> - <LogoWrapper> - <img src={BrandLogo} alt="Earth.gov" /> - </LogoWrapper> - <span>By</span> <strong>{process.env.APP_TITLE}</strong>{" "} - <span>on</span>{" "} - <time dateTime={String(nowDate.getFullYear())}> - {nowDate.getFullYear()} - </time> - </a> - {" • "} - <Tip - content={`Released on ${format( - new Date(+props.appBuildTime), - "PPPP" - )} (veda-ui v${props.appUiVersion})`} - > - <span>v{props.appVersion}</span> - </Tip> - </div> + <div> + <a href="/"> + <LogoWrapper> + <img src={BrandLogo} alt="Earth.gov" /> + </LogoWrapper> + <span>By</span> <strong>{process.env.APP_TITLE}</strong>{" "} + <span>on</span>{" "} + <time dateTime={String(nowDate.getFullYear())}> + {nowDate.getFullYear()} + </time> + </a> + {" • "} + <Tip + content={`Released on ${format( + new Date(+props.appBuildTime), + "PPPP" + )} (veda-ui v${props.appUiVersion})`} + > + <span>v{props.appVersion}</span> + </Tip> + </div> + <AccessbilityStatementLink href="https://www.nasa.gov/accessibility/" target='_blank' rel='noopener'> + Our commitment to accessibility<CollecticonExpandTopRight /> + </AccessbilityStatementLink> + </div> <CreditsInfo> <TintBox> <Partners variation="positive" size="small" /> diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx index c2292fabf..a8275fcb7 100644 --- a/overrides/home/component.tsx +++ b/overrides/home/component.tsx @@ -17,6 +17,7 @@ import { variableGlsp } from "$veda-ui-scripts/styles/variable-utils"; import ThemeCards from "../components/theme-cards"; import { themeLandingPageIds } from "../common/story-data"; import VisitGHG from "../components/visit-ghg"; +import HyperwallCTA from "../components/hyperwall-cta"; import Partners from "./partners"; @@ -105,6 +106,7 @@ export default function HomeComponent() { <Partners size="small" top={4} /> </IntroHeadline> </HomeDescription> + <HyperwallCTA width="82%"/> <VisitGHG width="82%"/> </GradientWrapper> <Fold> diff --git a/overrides/home/media/hyperwall-image1.png b/overrides/home/media/hyperwall-image1.png new file mode 100644 index 000000000..56289cea9 Binary files /dev/null and b/overrides/home/media/hyperwall-image1.png differ diff --git a/package.json b/package.json index 46690e72e..07c6e6536 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veda-config", "description": "Configuration for Veda", - "version": "0.1.1", + "version": "0.1.2", "source": "./.veda/ui/app/index.html", "license": "Apache-2.0", "scripts": { diff --git a/stories/external_headers/earthrise.webp b/stories/external_headers/earthrise.webp new file mode 100644 index 000000000..6343d6fbc Binary files /dev/null and b/stories/external_headers/earthrise.webp differ diff --git a/stories/locfeature.HYPER.mdx b/stories/locfeature.HYPER.mdx index 71085af9e..e4acf5180 100644 --- a/stories/locfeature.HYPER.mdx +++ b/stories/locfeature.HYPER.mdx @@ -30,6 +30,11 @@ import contentArray from './locfeature.HYPER/carousel_content.json'; <Block type='wide'> <Figure> - <Carousel items={contentArray} /> + <Embed + style={{ + width:"100%", + height:"calc(95vw * 9/32)" + }} + src="https://svs.gsfc.nasa.gov/webapps/hyperweb/index.html" /> </Figure> </Block> \ No newline at end of file diff --git a/stories/teach.ALL.stem_group.mdx b/stories/teach.ALL.stem_group.mdx index c6556ab27..72287fe0f 100644 --- a/stories/teach.ALL.stem_group.mdx +++ b/stories/teach.ALL.stem_group.mdx @@ -25,5 +25,5 @@ import CardGallery from "./components/card_gallery"; <CardGallery title={"STEM Resources"} - storyIds={["stem_resources","climate_kids", "earth_observatory", "globe_k13_learning"]} /> + storyIds={["stem_resources","climate_kids", "earth_observatory", "globe_k13_learning","earthrise"]} /> diff --git a/stories/teach.K12.earthrise.mdx b/stories/teach.K12.earthrise.mdx new file mode 100644 index 000000000..e985d49f9 --- /dev/null +++ b/stories/teach.K12.earthrise.mdx @@ -0,0 +1,29 @@ +--- +featuredOn: + - teach +id: "earthrise" +name: Earthrise Newsletter +description: "Through Earthrise, elevate Earth and climate science in your classroom with STEM resources from NASA and our federal partners." +theme: true +asLink: + url: https://www.nasa.gov/stem-content/earthrise/ +media: + src: ::file ./external_headers/earthrise.webp + alt: " + View of Earth from space, centered over North America. Stylized text at the bottom reads: 'Earthrise' and underneath that 'Elevating Earth and Climate Science in the Classroom.' + " + author: + name: "NASA" + url: "https://nasa.gov" +pubDate: 2024-03-26 +taxonomy: + - name: Teaching Resource + values: + - STEM +--- + +<Block type="wide"> + <Prose> + link out + </Prose> +</Block> \ No newline at end of file