add landing page content and attempt to re-use theme card component

NASA-IMPACT · Nov 20, 2023 · cd31898 · cd31898
1 parent 8c8a132
commit cd31898
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/overrides/components/theme-cards.tsx b/overrides/components/theme-cards.tsx
@@ -11,6 +11,7 @@ import { focusStyle } from "../common/style";
 
 export interface ContentsPropType {
   storyIds: string[];
+  variation: string;
 }
 
 const CardWrapper = styled(Hug)`
@@ -49,7 +50,8 @@ const PrimaryColorH3 = styled.h2`
   margin: ${glsp(1.5)} 0;
 `
 
-export default function ThemeCards({storyIds}: ContentsPropType) {
+export default function ThemeCards({storyIds, variation}: ContentsPropType) {
+
 
   const relatedData = Object.keys(stories)
   .map((key) => stories[key].data)
@@ -62,8 +64,8 @@ export default function ThemeCards({storyIds}: ContentsPropType) {
         <ThemeCardImageWrapper>
           <img src={t.media.src} alt={t.media.alt} />
         </ThemeCardImageWrapper>
-        <p>{t.description}</p>
-        <ThemeLink to={t.id}>View more</ThemeLink>
+        { (variation !== 'nodesc') && <p>{t.description}</p>}
+        <ThemeLink to={`/stories/${t.id}`}>View more</ThemeLink>
       </ThemeCard>
     </li>
   ))

diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
@@ -12,6 +12,8 @@ import Partners from "./partners";
 import Keypoints from "./keypoints";
 import { ArrowLink } from "./arrow-link";
 
+import ThemeLandingPage from "../theme/content/component";
+
 const HomeContent = styled(Hug)`
   padding: ${variableGlsp(2.5, 0)};
   grid-row-gap: ${variableGlsp(2)};
@@ -44,6 +46,7 @@ const ActionsBlock = styled.div`
   grid-column: 1 / -1;
   display: flex;
   justify-content: center;
+  flex-direction:column;
 `;
 
 const InfoCallout = styled(Hug)`
@@ -85,39 +88,59 @@ const InfoCalloutHeadline = styled.div`
   }
 `;
 
+const ThemesTitleBlock = styled(ActionsBlock)`
+  grid-column: 1 / -2;
+  flex-direction:row;
+  justify-content:space-around;
+  margin-bottom:-4rem;
+`
+
 export default function HomeComponent() {
   return (
     <>
       <HomeContent>
         <IntroHeadline>
-          <VarHeading size="xxlarge">Welcome</VarHeading>
+          <VarHeading size="xxlarge">
+            Multiple agencies,
+            <br/>
+            many interconnected systems,
+            <br/>
+            one planet.
+          </VarHeading>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae tortor commodo lorem sodales rhoncus. Pellentesque eu elit hendrerit, tempus lectus vitae, sagittis ligula. Nullam ac massa et urna pulvinar varius vel id est. Suspendisse pharetra, odio ac finibus fringilla, mi urna porttitor sem, sed efficitur lectus enim sodales felis. Proin sapien nibh, euismod ac nulla at, blandit facilisis elit.
+            The Earth Information Center consolidates data and insights on how Earth is changing from across the U.S. federal government.
+            Earth.gov is also the gateway to other interagency cooperative efforts for our planet, like the U.S. Greenhouse Gas Center.
+            Discover how these data are being used to prepare for climate change, and mitigate, adapt and respond to environmental challenges across the country.
           </p>
-          <ArrowLink to="/stories/intro-us-ghg-center">
-            Introduction to EIC
+          <ArrowLink to="/about">
+            What is the EIC?
           </ArrowLink>
         </IntroHeadline>
-        {/* <Keypoints /> */}
-        <ActionsBlock>
-          <Button
-            forwardedAs={NavLink}
-            to="/data-catalog"
-            size="xlarge"
-            variation="primary-fill"
-          >
-            Browse the Data Catalog <CollecticonArrowRight />
-          </Button>
+        <ActionsBlock> 
+          <ThemesTitleBlock>
+            <VarHeading size="medium">
+              Nine themes, one Earth
+            </VarHeading>
+            <Button
+              forwardedAs={NavLink}
+              to="/stories"
+              size="medium"
+              variation="primary-fill"
+            >
+              Explore the themes <CollecticonArrowRight />
+            </Button>
+          </ThemesTitleBlock>
+          <ThemeLandingPage variation="nodesc"/>
         </ActionsBlock>
       </HomeContent>
       <InfoCallout>
         <InfoCalloutInner>
           <InfoCalloutHeadline>
             <VarHeading size="xlarge">
-              Joining forces for a better future
+              Joining forces for a better tomorrow. 
             </VarHeading>
             <p>
-            Praesent pellentesque, tellus eget lobortis iaculis, mauris ante euismod quam, sit amet dignissim lorem est ac mauris. Etiam euismod fringilla laoreet. Nam quam erat, pellentesque non iaculis vel, dignissim ac tellus. Nam urna tortor, blandit vitae arcu sed, vestibulum ultrices urna.
+              The Earth Information Center is grateful for the support and expertise of our valued, multi-agency collaborators: EPA, FEMA, NASA, NOAA, USAID, USDA and USGS.
             </p>
           </InfoCalloutHeadline>
           <Partners variation="positive" size="big" />

diff --git a/overrides/theme/content/component.tsx b/overrides/theme/content/component.tsx
@@ -9,10 +9,10 @@ const themeData = Object.keys(stories)
   .map((key) => stories[key].data)
   .filter((story) => themeLandingPageIds.includes(story.id));
 
-export default function ThemeLandingPage() {
+export default function ThemeLandingPage({variation=""}) {
   return (
     <Fold>
-      <ThemeCards storyIds={themeLandingPageIds} />
+      <ThemeCards storyIds={themeLandingPageIds} variation={variation} />
     </Fold>
   );
 }
diff --git a/overrides/theme/hero/component.tsx b/overrides/theme/hero/component.tsx
@@ -4,7 +4,7 @@ import PageHero from "$veda-ui-scripts/components/common/page-hero";
 export default function Hero() {
   return (
     <PageHero
-      title="Nine thematic areas, one earth"
+      title="Nine themes, one Earth."
       description=""
     />
   );