diff --git a/src/assets/img/ascii-share--black.svg b/src/assets/img/ascii-share--black.svg new file mode 100644 index 0000000..18afa04 --- /dev/null +++ b/src/assets/img/ascii-share--black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/partners/osi-hero.svg b/src/assets/img/partners/osi-hero.svg index 4e46ba6..7067f3e 100644 --- a/src/assets/img/partners/osi-hero.svg +++ b/src/assets/img/partners/osi-hero.svg @@ -1 +1,23 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/CardCallout/CardCallout.styles.js b/src/components/CardCallout/CardCallout.styles.js index 5e21765..052ff65 100644 --- 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 index f34eaf2..67b0ee9 100644 --- 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 }) => ( - {title} + {title && {title}} + {body && {body}} diff --git a/src/components/ContentMaster/ContentMaster.styles.js b/src/components/ContentMaster/ContentMaster.styles.js index 4639344..5814de0 100644 --- 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 index 1351650..21af87f 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -52,13 +52,13 @@ const Header = () => { const isHome = path === '/'; return ( - + { {hasRegistrationEnded ? 'View Profile' : 'Start Hacking'} diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js index d73fc5b..41e9196 100644 --- 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 = () => { {hasRegistrationEnded ? ( <> - Registration is closed + ) : ( <> @@ -45,24 +52,8 @@ const Hero = () => { {hasRegistrationEnded && ( - - {`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.'} - - - {`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.`} @@ -71,23 +62,25 @@ const Hero = () => { - - - - - - + {!hasRegistrationEnded && ( + + + + + + + )} ); }; diff --git a/src/components/HeroSecondary/HeroSecondary.styles.js b/src/components/HeroSecondary/HeroSecondary.styles.js index 028ec0c..b1f2b4a 100644 --- 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 index 1ff1c13..5204198 100644 --- 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 ( - + - - + + {title} + + + {body} + + {cta && } - - - + {icon && ( + + + + )} {includeDivider && ( diff --git a/src/components/Sponsors/Sponsors.styles.js b/src/components/Sponsors/Sponsors.styles.js index 1e5f87f..3a95875 100644 --- 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 index d0c26c1..65ff88d 100644 --- 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 ( - {title && {title}} + {title && ( + + + + )} {sponsors.map((sponsor) => ( diff --git a/src/pages/index.js b/src/pages/index.js index 7453857..4c22129 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,7 +2,11 @@ import { useMemo } from 'react'; import styled, { useTheme } from 'styled-components'; import { events } from 'lib'; -import { registrationEnd, registrationStart } from 'lib/config'; +import { + registrationEnd, + registrationStart, + currentHacktoberfest, +} from 'lib/config'; import { asList } from 'lib/format'; import { partners, sponsors } from 'lib/sponsors'; @@ -20,6 +24,7 @@ import HomeIntro from 'components/HomeIntro'; import Section from 'components/Section'; import Events from 'components/Events'; import Sponsors from 'components/Sponsors'; +import asciiShare from 'assets/img/ascii-share--black.svg'; import Progress from 'components/Progress'; import CardCallout from 'components/CardCallout'; @@ -27,6 +32,10 @@ import SectionDivider from 'components/SectionDivider'; import asciiParticipation from 'assets/img/ascii-participation.svg'; import Glitch from 'components/Glitch'; import { trackingStartDate } from 'lib/participation'; +import Link from 'next/link'; +import SpotHeader from 'components/SpotHeader'; +import { StyledSectionSpacing } from 'styles/sharedStyles'; +import HeroSecondary from 'components/HeroSecondary'; export const StyledHome = styled.div` overflow: hidden; @@ -102,52 +111,67 @@ const Home = () => { return ( - - - - - + {hasRegistrationEnded ? ( + + ) : ( + + )} {!hasRegistrationEnded && ( <> -
- - - - {`September is prep time for Hacktoberfest. Spend September - getting a jump start on your four pull/merge requests by - tracking down projects to contribute to, adding the - ‘hacktoberfest’ tag to your own projects, or familiarizing - yourself with Git so you can hit the ground running when - Hacktoberfest begins on ${trackingStartDate}.`} - - - - -
+ + )} - +
+ + + + {`${ + hasRegistrationEnded + ? `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.` + : `September is prep time for Hacktoberfest. Spend September + getting a jump start on your four pull/merge requests by + tracking down projects to contribute to, adding the + ‘hacktoberfest’ tag to your own projects, or familiarizing + yourself with Git so you can hit the ground running when + Hacktoberfest begins on ${trackingStartDate}.` + }`} + + + + +
{!hasRegistrationEnded && ( <> +
@@ -201,109 +225,122 @@ const Home = () => { {hasRegistrationEnded ? ( <> -
- - - - Thank you to all our sponsors and - community partners, we ❤️ you! - - } - /> - - + - - `**${title}**`), - )} for their sponsorship of Hacktoberfest.`} +
+ + `**${title}**`), + )} for their sponsorship of Hacktoberfest. Thank you to ALL our Sponsors and Community Partners, we ❤️ you!`, + }} />
- - - + -
- - +
+ + + -
-
+
+ ) : ( -
- - - - - - - Events that bring the community together to learn and explore - are a cornerstone of Hacktoberfest. Save these dates and come - connect with other lovers of open source! - - - - - - - - -
+ <> +
+ + + + + + + Events that bring the community together to learn and + explore are a cornerstone of Hacktoberfest. Save these dates + and come connect with other lovers of open source! + + + + + + + + +
+ + )} - -
- + { - 'Open-source projects, maintained by community-minded coders, make the modern internet function. Supporting that essential work, and the folks behind it, is what Hacktoberfest is all about.\n\nDigitalOcean is proud to support open-source projects of all kinds. We offer credit grants to projects, assist with development, infrastructure, and testing, so open-source projects like yours can get a boost.' + 'Open-source projects, maintained by community-minded coders, make the modern internet function. Supporting that essential work, and the folks behind it, is what Hacktoberfest is all about.' } + DigitalOcean is proud to support open-source projects of all + kinds. We offer credit grants to projects, assist with + development, infrastructure, and testing, so open-source + projects like yours can get a boost.{' '} + + Learn more and apply now + +
+
+ You have skills that can help keep these projects continue + running—let’s get to it. + + } link={{ href: '/donate', children: 'Donate To Open Source Projects',