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 ( + + + + +
+ + Live Earth Dashboard + + + An interactive way to explore what's happening on Earth right now + + +
+ + + + + ) +}; \ 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) {
- - - Earth.gov - - By {process.env.APP_TITLE}{" "} - on{" "} - - - {" • "} - - v{props.appVersion} - -
+
+ + + Earth.gov + + By {process.env.APP_TITLE}{" "} + on{" "} + + + {" • "} + + v{props.appVersion} + +
+ + Our commitment to accessibility + + 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() { + 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';
- +
\ 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"; + 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 +--- + + + + link out + + \ No newline at end of file