Update content for end of Hacktoberfest 24 (#89)

* Update dependencies (minor) Upgrading /home/runner/work/hacktoberfest-2022/hacktoberfest-2022/package.json next ^14.2.14 → ^14.2.15 Installing dependencies... > hacktoberfest-2022@0.1.0 prepare > node .husky/install.mjs changed 4 packages, and audited 187 packages in 6s 53 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Done * Update dependencies (major) Upgrading /home/runner/work/hacktoberfest-2022/hacktoberfest-2022/package.json next ^14.2.15 → ^15.0.0 Installing dependencies... > hacktoberfest-2022@0.1.0 prepare > node .husky/install.mjs added 11 packages, changed 5 packages, and audited 198 packages in 6s 56 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Done * Update for end of 2024 Hacktoberfest * Pull value from config --------- Co-authored-by: hacktoberfest-team <support@hacktoberfest.com>
Hacktoberfest · Oct 30, 2024 · 92b55bc · 92b55bc
1 parent 96e0d83
commit 92b55bc
Show file tree

Hide file tree

Showing 12 changed files with 299 additions and 193 deletions.
diff --git a/src/assets/img/ascii-share--black.svg b/src/assets/img/ascii-share--black.svg
diff --git a/src/assets/img/partners/osi-hero.svg b/src/assets/img/partners/osi-hero.svg
diff --git a/src/components/CardCallout/CardCallout.styles.js b/src/components/CardCallout/CardCallout.styles.js
@@ -64,6 +64,14 @@ export const StyledCardCalloutTitle = styled.h2`
   }
 `;
 
+export const StyledCardCalloutBody = styled.p`
+  ${body16}
+
+  ${mQ(bp.desktop)} {
+    ${body20}
+  }
+`;
+
 export const StyledCardBackground = styled.div`
   inset: var(--offset);
   background-color: ${({ theme }) => theme.colors.green};

diff --git a/src/components/CardCallout/index.js b/src/components/CardCallout/index.js
@@ -4,17 +4,19 @@ import {
   StyledCardCalloutImage,
   StyledCardCalloutContent,
   StyledCardCalloutTitle,
+  StyledCardCalloutBody,
   StyledCardCalloutContainer,
   StyledCardBackground,
 } from './CardCallout.styles';
 import ButtonMain from 'components/ButtonMain';
 
-const CardCallout = ({ title, link }) => (
+const CardCallout = ({ title, body, link }) => (
   <StyledCardCallout>
     <StyledCardBackground />
     <StyledCardCalloutContainer>
       <StyledCardCalloutContent>
-        <StyledCardCalloutTitle>{title}</StyledCardCalloutTitle>
+        {title && <StyledCardCalloutTitle>{title}</StyledCardCalloutTitle>}
+        {body && <StyledCardCalloutBody>{body}</StyledCardCalloutBody>}
         <ButtonMain {...link} />
       </StyledCardCalloutContent>
     </StyledCardCalloutContainer>

diff --git a/src/components/ContentMaster/ContentMaster.styles.js b/src/components/ContentMaster/ContentMaster.styles.js
@@ -74,7 +74,7 @@ export const StyledContentMasterBody = styled.div`
 
     ${mQ(bp.desktop)} {
       ${({ $size }) => $size === 'xl2' && body24};
-      ${({ $size }) => $size === 'xl' && body20};
+      ${({ $size }) => $size === 'xl' && body24};
       ${({ $size }) => $size === 'lg' && body24};
       ${({ $size }) => $size === 'md' && body20};
       ${({ $size }) => $size === 'sm' && body16};

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -52,13 +52,13 @@ const Header = () => {
   const isHome = path === '/';
 
   return (
-    <StyledHeader $isHome={isHome} $isOpen={open}>
+    <StyledHeader $isHome={isHome && !hasRegistrationEnded} $isOpen={open}>
       <StyledHeaderContainer>
         <StyledHeaderLogo>
           <Link href="/">
             <img
               src={
-                isHome && !open
+                isHome && !hasRegistrationEnded && !open
                   ? hacktoberfestLogoGreen.src
                   : hacktoberfestLogoBeige.src
               }
@@ -87,7 +87,11 @@ const Header = () => {
             <ButtonMain
               href="/auth"
               passHref
-              variant={isHome ? 'primary-black' : 'secondary-pink'}
+              variant={
+                isHome && !hasRegistrationEnded
+                  ? 'primary-black'
+                  : 'secondary-pink'
+              }
             >
               {hasRegistrationEnded ? 'View Profile' : 'Start Hacking'}
             </ButtonMain>

diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
@@ -17,8 +17,11 @@ import ContentMaster from 'components/ContentMaster';
 import { StyledSectionSpacing } from 'styles/sharedStyles';
 import { sponsors } from 'lib/sponsors';
 import { asList } from 'lib/format';
+import Type from 'components/type';
+import { useTheme } from 'styled-components';
 
 const Hero = () => {
+  const theme = useTheme();
   const hasRegistrationEnded = useMemo(
     () => new Date() >= new Date(registrationEnd),
     [],
@@ -32,7 +35,11 @@ const Hero = () => {
             <StyledHeroTitle>
               {hasRegistrationEnded ? (
                 <>
-                  Registration is <strong>closed</strong>
+                  <Type
+                    prefix=">"
+                    prefixColor={theme.colors.pink}
+                    text="Registration is closed"
+                  />
                 </>
               ) : (
                 <>
@@ -45,24 +52,8 @@ const Hero = () => {
             {hasRegistrationEnded && (
               <StyledHeroSubtitle>
                 <StyledSectionSpacing>
-                  <ContentMaster
-                    size="xl2"
-                    align="center"
-                    links={[
-                      {
-                        id: 'join-the-discord-hero',
-                        href: 'http://discord.gg/hacktoberfest',
-                        children: 'Join the Discord',
-                      },
-                    ]}
-                  >
-                    {`Thank you for contributing to open source this month. Open source couldn’t survive without the dynamic duo of project maintainers and volunteers like you. **Hacktoberfest ${currentHacktoberfest}** has officially ended.\n\n` +
-                      'But don’t let that stop you from contributing to open source all year long. We look forward to seeing you next year! Be sure to [sign up for updates](https://www.digitalocean.com/open-source/hacktoberfest#stay-up-to-date) to get the latest announcements about future Hacktoberfest events.\n\n' +
-                      'Keep your connection to open source strong! Join other members of the open-source community in lively discussion on the Hacktoberfest Discord.'}
-                  </ContentMaster>
-
                   <ContentMaster size="xl2" align="center">
-                    {`A special thank you to the great folks at ${asList(sponsors.map(({ title }) => `${title}`))} for their sponsorship of Hacktoberfest. Thank you to ALL our Sponsors and Community Partners, we ❤️ you!`}
+                    {`Thank you for contributing to open source this month. Open source couldn’t survive without the dynamic duo of project maintainers and volunteers like you. **Hacktoberfest #${currentHacktoberfest}** has officially ended.`}
                   </ContentMaster>
                 </StyledSectionSpacing>
               </StyledHeroSubtitle>
@@ -71,23 +62,25 @@ const Hero = () => {
         </StyledHeroContainer>
       </StyledHero>
 
-      <StyledHeroDivider>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1440"
-          height="144"
-          viewBox="0 0 1440 144"
-          fill="none"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M214 1.87085e-05V80H285V109H419V80L627 80V19.5091L763.086 19.5091V80H889.801V55.3599L1003.94 55.3599V110.233L1073.44 110.233V29.7522L1256 29.7522V3.44969e-06L1440 1.87085e-05V144H0V0L214 1.87085e-05ZM627 144V80.2358L763 80.2358V144L627 144Z"
-            fill="#183717"
-          />
-          <path d="M419 80L285 80V50L419 50V80Z" fill="#183717" />
-        </svg>
-      </StyledHeroDivider>
+      {!hasRegistrationEnded && (
+        <StyledHeroDivider>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1440"
+            height="144"
+            viewBox="0 0 1440 144"
+            fill="none"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M214 1.87085e-05V80H285V109H419V80L627 80V19.5091L763.086 19.5091V80H889.801V55.3599L1003.94 55.3599V110.233L1073.44 110.233V29.7522L1256 29.7522V3.44969e-06L1440 1.87085e-05V144H0V0L214 1.87085e-05ZM627 144V80.2358L763 80.2358V144L627 144Z"
+              fill="#183717"
+            />
+            <path d="M419 80L285 80V50L419 50V80Z" fill="#183717" />
+          </svg>
+        </StyledHeroDivider>
+      )}
     </>
   );
 };

diff --git a/src/components/HeroSecondary/HeroSecondary.styles.js b/src/components/HeroSecondary/HeroSecondary.styles.js
@@ -41,21 +41,22 @@ export const StyledHeroSecondary = styled.div`
 
 export const StyledHeroSecondaryContainer = styled.div`
   display: flex;
-  justify-content: space-between;
   gap: 40px;
   flex-direction: column;
   align-items: center;
   padding: 144px 0 138px;
+  justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-between' : 'center')};
+  text-align: ${({ $hasIcon }) => ($hasIcon ? 'left' : 'center')};
 
   ${mQ(bp.desktop)} {
     flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
     gap: 64px;
-    padding: 190px 0 50px;
+    padding: ${({ $hasIcon }) => ($hasIcon ? '190px 0 50px' : '288px 0 148px')};
   }
 `;
 
 export const StyledHeroSecondaryContent = styled.div`
-  max-width: 765px;
+  max-width: ${({ $hasIcon }) => ($hasIcon ? '768px' : '1240px')};
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -64,7 +65,7 @@ export const StyledHeroSecondaryContent = styled.div`
   z-index: 5;
 
   ${mQ(bp.desktop)} {
-    align-items: flex-start;
+    align-items: ${({ $hasIcon }) => ($hasIcon ? 'flex-start' : 'center')};
   }
 `;
 
@@ -87,6 +88,16 @@ export const StyledHeroSecondaryTitle = styled.h1`
   }
 `;
 
+export const StyledHeroSecondarybody = styled.div`
+  max-width: 694px;
+  margin: 0 auto;
+  color: white;
+
+  strong {
+    color: ${({ theme }) => theme.colors.pink};
+  }
+`;
+
 export const StyledHeroSecondaryImage = styled.div`
   max-width: 252px;
   margin: 0 auto;

diff --git a/src/components/HeroSecondary/index.js b/src/components/HeroSecondary/index.js
@@ -4,27 +4,43 @@ import {
   StyledHeroSecondaryContainer,
   StyledHeroSecondaryContent,
   StyledHeroSecondaryTitle,
+  StyledHeroSecondarybody,
   StyledHeroSecondaryImage,
 } from './HeroSecondary.styles';
 import ButtonMain from 'components/ButtonMain';
 import { useTheme } from 'styled-components';
 import SectionDivider from 'components/SectionDivider';
 import Glitch from 'components/Glitch';
+import ContentMaster from 'components/ContentMaster';
 
 const HeroSecondary = (props) => {
-  const { title, icon, cta, reverse = false, includeDivider = true } = props;
+  const {
+    title,
+    body,
+    icon,
+    cta,
+    reverse = false,
+    includeDivider = true,
+  } = props;
   const theme = useTheme();
   return (
-    <StyledHeroSecondary>
+    <StyledHeroSecondary $hasIcon={!!icon}>
       <Container>
-        <StyledHeroSecondaryContainer $reverse={reverse}>
-          <StyledHeroSecondaryContent>
+        <StyledHeroSecondaryContainer $hasIcon={!!icon} $reverse={reverse}>
+          <StyledHeroSecondaryContent $hasIcon={!!icon}>
             <StyledHeroSecondaryTitle>{title}</StyledHeroSecondaryTitle>
+            <StyledHeroSecondarybody>
+              <ContentMaster align="center" size="md">
+                {body}
+              </ContentMaster>
+            </StyledHeroSecondarybody>
             {cta && <ButtonMain {...cta} />}
           </StyledHeroSecondaryContent>
-          <StyledHeroSecondaryImage>
-            <Glitch image={icon} />
-          </StyledHeroSecondaryImage>
+          {icon && (
+            <StyledHeroSecondaryImage>
+              <Glitch image={icon} />
+            </StyledHeroSecondaryImage>
+          )}
         </StyledHeroSecondaryContainer>
       </Container>
       {includeDivider && (

diff --git a/src/components/Sponsors/Sponsors.styles.js b/src/components/Sponsors/Sponsors.styles.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { body18 } from 'themes/typography';
+import { headline32, headline56 } from 'themes/typography';
 import {
   breakpoints as bp,
   determineMediaQuery as mQ,
@@ -10,48 +10,47 @@ export const StyledSponsors = styled.div`
   ${({ $centered }) => $centered && 'text-align: center;'}
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 60px;
+  max-width: 1125px;
+  width: 100%;
+  margin: 0 auto;
 `;
 
-export const StyledSponsorsTitle = styled.div`
-  ${body18}
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 3.6px;
-  color: ${({ theme }) => theme.colors.darkGreen};
+export const StyledSponsorsTitle = styled.h2`
+  ${({ $large }) => ($large ? headline56 : headline32)};
+  color: white;
 `;
 
 export const StyledSponsorsList = styled.div`
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 16px;
   justify-content: center;
-
-  ${mQ(bp.desktop)} {
-    gap: 32px;
-    ${({ $centered }) => !$centered && 'justify-content: flex-start;'}
-  }
+  gap: 60px 40px;
+  flex-wrap: wrap;
 
   a {
     line-height: 0;
-    min-width: ${({ $large }) => ($large ? '100%' : 'calc(50% - 16px)')};
+    display: block;
+    width: 100%;
+    background-color: white;
+    padding: 46px 24px;
 
-    ${mQ(bp.largePhone)} {
-      min-width: initial;
+    ${mQ(bp.tablet)} {
+      width: calc((100% / 2) - 40px);
     }
 
-    background-color: white;
-    border-radius: 30px;
-    padding: 14px 24px;
+    ${mQ(bp.desktop)} {
+      width: calc((100% / 3) - 40px);
+    }
 
     img {
       height: ${({ $large }) => ($large ? '30px' : '20px')};
+      max-width: 210px;
+      object-fit: contain;
       width: auto;
       filter: brightness(0);
 
       ${mQ(bp.desktop)} {
-        height: ${({ $large }) => ($large ? '48px' : '32px')};
+        height: 50px;
       }
     }
   }

diff --git a/src/components/Sponsors/index.js b/src/components/Sponsors/index.js
@@ -1,15 +1,28 @@
+import Type from 'components/type';
 import {
   StyledSponsors,
   StyledSponsorsTitle,
   StyledSponsorsList,
 } from './Sponsors.styles';
+import { useTheme } from 'styled-components';
 
 const Sponsors = (props) => {
+  const theme = useTheme();
   const { title, sponsors, centered, large } = props;
 
   return (
     <StyledSponsors $centered={centered}>
-      {title && <StyledSponsorsTitle>{title}</StyledSponsorsTitle>}
+      {title && (
+        <StyledSponsorsTitle $large={large}>
+          <Type
+            text={title}
+            backgroundColor="transparent"
+            cursorColor={theme.colors.green}
+            prefix=">"
+            prefixColor={theme.colors.pink}
+          />
+        </StyledSponsorsTitle>
+      )}
       <StyledSponsorsList $centered={centered} $large={large}>
         {sponsors.map((sponsor) => (
           <a key={sponsor.title} {...sponsor.link}>