Build Hero and Introduction components of signed-out homepage (#6101)

* build the Community section for homepages * remove luxon from app-project * Create layout for default home page * build the Hero and Introduction components * finalize Hero and Introduction * mark DefaultHome as a client component * fix ZooniverseLogotype test
zooniverse · Jun 4, 2024 · d89db9a · d89db9a
1 parent e552f31
commit d89db9a
Show file tree

Hide file tree

Showing 22 changed files with 435 additions and 62 deletions.
diff --git a/packages/app-root/public/assets/home-video-placeholder.jpg b/packages/app-root/public/assets/home-video-placeholder.jpg
diff --git a/packages/app-root/public/assets/home-video.mp4 b/packages/app-root/public/assets/home-video.mp4
diff --git a/packages/app-root/public/assets/home-video.webm b/packages/app-root/public/assets/home-video.webm
diff --git a/packages/app-root/src/components/HomePageContainer.js b/packages/app-root/src/components/HomePageContainer.js
@@ -3,7 +3,8 @@
 import { useContext } from 'react'
 import { Box } from 'grommet'
 import { PanoptesAuthContext } from '../contexts'
-import { CommunityContainer } from '@zooniverse/content'
+import { CommunityContainer, DefaultHome } from '@zooniverse/content'
+import { Loader } from '@zooniverse/react-components'
 
 export default function HomePageContainer({
   dailyZooPosts = [],
@@ -15,11 +16,11 @@ export default function HomePageContainer({
     <main>
       {isLoading ? (
         <Box height='100vh' align='center' justify='center'>
-          Loader goes here
+          <Loader />
         </Box>
       ) : (
-        <Box height='100vh' align='center' justify='center'>
-          <p>{user?.login ? 'Signed-in' : 'Signed-out'}</p>
+        <Box height={{ min: '100vh' }}>
+          {user?.login ? <p>Signed-in</p> : <DefaultHome />}
         </Box>
       )}
       <CommunityContainer

diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "@zooniverse/async-states": "~0.0.1",
-    "dayjs": "~1.11.11",
     "@zooniverse/react-components": "~1.13.0",
+    "dayjs": "~1.11.11",
     "i18next": "~23.11.1",
     "panoptes-client": "~5.6.0",
     "prop-types": "~15.8.1",

diff --git a/packages/lib-content/src/components/PageLayout/AboutLayout.js b/packages/lib-content/src/components/PageLayout/AboutLayout.js
@@ -0,0 +1,30 @@
+import { Box } from 'grommet'
+import ContainerBox from './ContainerBox.js'
+import AboutHeader from '../AboutHeader'
+
+function AboutLayout({ children }) {
+  return (
+    <>
+      <AboutHeader />
+      <main>
+        <Box
+          background={{
+            dark: 'dark-1',
+            light: 'light-1'
+          }}
+          align='center'
+        >
+          <ContainerBox
+            align='center'
+            background={{ dark: 'dark-3', light: 'neutral-6' }}
+            width='min(100%, 90rem)'
+          >
+            {children}
+          </ContainerBox>
+        </Box>
+      </main>
+    </>
+  )
+}
+
+export default AboutLayout
diff --git a/...ntent/src/components/PageLayout/layout.js → ...src/components/PageLayout/ContainerBox.js b/...ntent/src/components/PageLayout/layout.js → ...src/components/PageLayout/ContainerBox.js
@@ -1,6 +1,5 @@
-import { Box } from 'grommet'
 import styled, { css } from 'styled-components'
-import AboutHeader from '../AboutHeader'
+import { Box } from 'grommet'
 
 // elevation elements
 const ContainerBox = styled(Box)`
@@ -65,29 +64,4 @@ const ContainerBox = styled(Box)`
   }
 `
 
-function PageLayout({ children }) {
-  return (
-    <>
-      <AboutHeader />
-      <main>
-        <Box
-          background={{
-            dark: 'dark-1',
-            light: 'light-1'
-          }}
-          align='center'
-        >
-          <ContainerBox
-            align='center'
-            background={{ dark: 'dark-3', light: 'neutral-6' }}
-            width='min(100%, 90rem)'
-          >
-            {children}
-          </ContainerBox>
-        </Box>
-      </main>
-    </>
-  )
-}
-
-export default PageLayout
+export default ContainerBox
diff --git a/packages/lib-content/src/components/Stats/Stats.js b/packages/lib-content/src/components/Stats/Stats.js
@@ -11,8 +11,8 @@ const ClassificationsLabel = styled(Box)`
   background: linear-gradient(
     to right,
     rgba(240, 178, 0, 0.4) 0%,
-    rgba(240, 178, 0, 1) 25%,
-    rgba(240, 178, 0, 1) 75%,
+    rgba(209, 143, 54, 1) 25%,
+    rgba(209, 143, 54, 1) 75%,
     rgba(240, 178, 0, 0.4) 100%
   );
 `
@@ -31,13 +31,11 @@ const Stat = styled(Box)`
   overflow: hidden;
 
   &.classifications {
-    background: rgba(240, 178, 0, 0.1); // matches ClassfiicationsLabel
-    border: solid 1px ${props => props.theme.global.colors['neutral-2']};
+    background: rgba(240, 178, 0, 0.05);
   }
 
   &.volunteers {
     background: rgba(0, 93, 105, 0.1); // matches VolunteersLabel
-    border: solid 1px ${props => props.theme.global.colors['neutral-1']};
   }
 `
 
@@ -67,21 +65,21 @@ export default function Stats() {
 
   return (
     <Box gap='medium'>
-      <Stat className='classifications' round='8px' elevation='small'>
+      <Stat className='classifications' round='8px'>
         <Text
-          color={{ light: 'neutral-2' }}
+          color='neutral-2'
           size={numberFontSize}
           textAlign='center'
         >
           {classifications && <AnimatedNumber value={totalClassifications} />}
         </Text>
         <ClassificationsLabel>
-          <SpacedText color='white' weight='bold' textAlign='center'>
+          <SpacedText color='white' weight='bold' size='1.4rem' textAlign='center'>
             {t('AboutPage.ourMission.stats.one')}
           </SpacedText>
         </ClassificationsLabel>
       </Stat>
-      <Stat className='volunteers' round='8px' elevation='small'>
+      <Stat className='volunteers' round='8px'>
         <Text
           color={{ light: 'neutral-1', dark: 'accent-1' }}
           size={numberFontSize}
@@ -90,7 +88,7 @@ export default function Stats() {
           {volunteers && <AnimatedNumber value={totalVolunteers} />}
         </Text>
         <VolunteersLabel>
-          <SpacedText color='white' weight='bold' textAlign='center'>
+          <SpacedText color='white' weight='bold' size='1.4rem' textAlign='center'>
             {t('AboutPage.ourMission.stats.two')}
           </SpacedText>
         </VolunteersLabel>

diff --git a/packages/lib-content/src/index.js b/packages/lib-content/src/index.js
@@ -1,5 +1,6 @@
 export { default as About } from './screens/About/About.js'
 export { default as CommunityContainer } from './screens/Home/Community/CommunityContainer.js'
+export { default as DefaultHome } from './screens/Home/DefaultHome/DefaultHome.js'
 export { default as FAQ } from './screens/FAQ/FAQ.js'
 export { default as OurTeam } from './screens/OurTeam/OurTeam.js'
 export { default as Publications } from './screens/Publications/Publications.js'

diff --git a/packages/lib-content/src/screens/About/About.js b/packages/lib-content/src/screens/About/About.js
@@ -6,7 +6,7 @@ import Script from 'next/script'
 import { useState } from 'react'
 import styled from 'styled-components'
 
-import PageLayout from '../../components/PageLayout/layout.js'
+import AboutLayout from '../../components/PageLayout/AboutLayout.js'
 import DropdownNav from '../../components/DropdownNav/DropdownNav.js'
 import HeadingForAboutNav from '../../components/HeadingForAboutNav/HeadingForAboutNav.js'
 import MaxWidthContent from '../../components/MaxWidthContent/MaxWidthContent.js'
@@ -75,7 +75,7 @@ function AboutPage() {
           setWidgetLoaded(true)
         }}
       />
-      <PageLayout>
+      <AboutLayout>
         <MobileHeading level='1' size='1.5rem'>
           {t('AboutPage.title')}
         </MobileHeading>
@@ -169,7 +169,7 @@ function AboutPage() {
           </article>
           <Box />
         </StyledGrid>
-      </PageLayout>
+      </AboutLayout>
     </>
   )
 }

diff --git a/packages/lib-content/src/screens/FAQ/FAQ.js b/packages/lib-content/src/screens/FAQ/FAQ.js
@@ -4,7 +4,7 @@ import { Anchor, Box, Paragraph, Text } from 'grommet'
 import { Trans, useTranslation } from '../../translations/i18n.js'
 import styled from 'styled-components'
 
-import PageLayout from '../../components/PageLayout/layout.js'
+import AboutLayout from '../../components/PageLayout/AboutLayout.js'
 import MaxWidthContent from '../../components/MaxWidthContent/MaxWidthContent.js'
 import {
   MobileHeading,
@@ -33,7 +33,7 @@ function FAQPage() {
 
   return (
     <>
-      <PageLayout>
+      <AboutLayout>
         <MobileHeading level='1' size='1.5rem'>
           {t('FAQ.title')}
         </MobileHeading>
@@ -180,7 +180,7 @@ function FAQPage() {
             </StyledList>
           </MaxWidthContent>
         </Box>
-      </PageLayout>
+      </AboutLayout>
     </>
   )
 }

diff --git a/packages/lib-content/src/screens/Home/Community/blogPosts.mock.json b/packages/lib-content/src/screens/Home/Community/blogPosts.mock.json
@@ -0,0 +1,66 @@
+[
+  {
+    "id": 7269,
+    "title": "First Observations of the Zoo of Galaxies",
+    "excerpt": "<p>My name is Karen Masters, and I’m currently the lead scientist in the Galaxy Zoo science team. I’ve been involved in Galaxy Zoo (and a cheerleader for the Zooniverse) for well over a decade. As well as writing many scientific papers enabled by your classifications (thanks as always for those) I enjoy writing about science [&hellip;]</p>\n",
+    "created_at": "2024-05-03T07:39:00.000Z",
+    "url": "http://daily.zooniverse.org/2024/05/03/first-observations-of-the-zoo-of-galaxies/",
+    "imageSrc": ""
+  },
+  {
+    "id": 3386,
+    "title": "Navigating the Future: Zooniverse&#8217;s Frontend Codebase Migration and Design Evolution",
+    "excerpt": "<p>Dear Zooniverse Community, We&#8217;re pleased to update you on an important development as we undergo a migration to a new frontend codebase over the course of 2024-2025. This transition brings a fresh and improved experience to our platform. From a participant’s perspective, the primary changes involve project layout and styling, resulting in a more user-friendly [&hellip;]</p>\n",
+    "created_at": "2024-04-23T16:00:00.000Z",
+    "url": "http://blog.zooniverse.org/2024/04/23/navigating-the-future-zooniverses-frontend-codebase-migration-and-design-evolution/",
+    "imageSrc": "https://daily.zooniverse.org/wp-content/uploads/2014/07/51a318cae18f49172b09e1d3_1.jpg"
+  },
+  {
+    "id": 3395,
+    "title": "Zooniverse Wins White House Open Science Award",
+    "excerpt": "<p>I’m thrilled to share some exciting news with you all! Zooniverse, our beloved platform for people-powered research, has been honored by the White House Office of Science and Technology Policy (OSTP) as a champion of open science.  The OSTP Year of Open Science Recognition Challenge awarded five different projects, including Zooniverse, as ‘Champions of Open [&hellip;]</p>\n",
+    "created_at": "2024-04-17T17:00:00.000Z",
+    "url": "http://blog.zooniverse.org/2024/04/17/zooniverse-wins-white-house-open-science-award/",
+    "imageSrc": ""
+  },
+  {
+    "id": 7259,
+    "title": "A Treasure Trove of Discoveries Revealed in New Article by the Active Asteroids project on Zooniverse",
+    "excerpt": "<p>An exciting new publication unveils the first results of the Active Asteroids project on Zooniverse. Spearheaded by Colin Orion Chandler (DiRAC Institute, University of Washington) and a formidable team of researchers, this initiative has embarked on an audacious mission: to engage the public in uncovering the secrets of our solar system&#8217;s elusive active asteroids. These [&hellip;]</p>\n",
+    "created_at": "2024-03-18T17:07:17.000Z",
+    "url": "http://daily.zooniverse.org/2024/03/18/a-treasure-trove-of-discoveries-revealed-in-new-article-by-the-active-asteroids-project-on-zooniverse/",
+    "imageSrc": ""
+  },
+  {
+    "id": 7253,
+    "title": "Zooniverse Project Inspiring School Newspaper Article",
+    "excerpt": "<p>We love when volunteers reach out in the Daily Zooniverse Submissions &#8216;Talk&#8217; discussion forum with the multitude of ways Zooniverse projects have inspired them to do or create something new. And we love to highlight those stories here through the Daily Zoo. @Emilrave recently shared with us this article she wrote, published for her school [&hellip;]</p>\n",
+    "created_at": "2024-02-02T15:00:00.000Z",
+    "url": "http://daily.zooniverse.org/2024/02/02/zooniverse-project-inspiring-school-newspaper-article/",
+    "imageSrc": "https://daily.zooniverse.org/wp-content/uploads/2014/07/51a318cae18f49172b09e1d3_1.jpg"
+  },
+  {
+    "id": 7240,
+    "title": "New Zooniverse &#8211; Floating Forests Education Article Published!",
+    "excerpt": "<p>“A Citizen Science Approach to Teaching Climate Change in Introductory-level Undergraduate General Science Courses” is a new publication from the Floating Forests project! This work is a major milestone in our efforts to adapt Zooniverse participation to undergraduate classrooms. The article presents the development and evaluation of a classroom activity focused on the drivers and [&hellip;]</p>\n",
+    "created_at": "2024-01-19T15:00:00.000Z",
+    "url": "http://daily.zooniverse.org/2024/01/19/new-zooniverse-floating-forests-education-article-published/",
+    "imageSrc": ""
+  },
+  {
+    "id": 3374,
+    "title": "Snapshot Wisconsin Celebrates 50th Zooniverse Season!",
+    "excerpt": "<p>What is Snapshot Wisconsin? Snapshot Wisconsin is a community science project where the Wisconsin Department of Natural Resources (Wisconsin DNR) partners with volunteers to monitor wildlife using a statewide network of trail cameras. Volunteers host trail cameras, which are triggered by heat and movement, capturing pictures of passing animals. Located in the Great Lakes region [&hellip;]</p>\n",
+    "created_at": "2024-01-10T15:35:52.000Z",
+    "url": "http://blog.zooniverse.org/2024/01/10/snapshot-wisconsin-celebrates-50th-zooniverse-season/",
+    "imageSrc": ""
+  },
+  {
+    "id": 3371,
+    "title": "Happy New Year &amp; YouTube livestream this Thursday",
+    "excerpt": "<p>Happy New Year Everyone! We can’t thank you enough for making Zooniverse possible. Thank you, thank you, thank you!!!! We have so much to celebrate from 2023.&nbsp; We welcome you to join us this Thursday for a YouTube LiveStream from 2:15pm-3:15pm CST (8:15pm GMT; Friday 1:15am in India) celebrating Zooniverse 2023 Milestones as part of a [&hellip;]</p>\n",
+    "created_at": "2024-01-08T16:42:38.000Z",
+    "url": "http://blog.zooniverse.org/2024/01/08/happy-new-year-youtube-livestream-this-thursday/",
+    "imageSrc": "https://daily.zooniverse.org/wp-content/uploads/2014/07/51a318cae18f49172b09e1d3_1.jpg"
+  }
+]
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
@@ -0,0 +1,32 @@
+'use client'
+
+import { Box } from 'grommet'
+
+import ContainerBox from '../../../components/PageLayout/ContainerBox.js'
+import MaxWidthContent from '../../../components/MaxWidthContent/MaxWidthContent.js'
+import Introduction from './components/Introduction.js'
+import Hero from './components/Hero.js'
+
+export default function DefaultHome() {
+  return (
+    <Box
+      background={{
+        dark: 'dark-1',
+        light: 'light-1'
+      }}
+      align='center'
+    >
+      <Hero />
+      <ContainerBox
+        align='center'
+        background={{ dark: 'dark-3', light: 'neutral-6' }}
+        width='min(100%, 90rem)'
+        pad={{ horizontal: 'medium' }}
+      >
+        <MaxWidthContent>
+          <Introduction />
+        </MaxWidthContent>
+      </ContainerBox>
+    </Box>
+  )
+}
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.stories.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.stories.js
@@ -0,0 +1,8 @@
+import DefaultHome from './DefaultHome.js'
+
+export default {
+  title: 'Screens / Home / DefaultHome',
+  component: DefaultHome
+}
+
+export const Default = {}