From e37955def2bf4e645bdae5a2be4781405f282b03 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Fri, 9 Jun 2023 12:03:49 +0200 Subject: [PATCH 01/30] Add what we do page --- src/components/PageLayout.tsx | 92 +++++++++++++ src/pages/what-we-do.tsx | 253 ++++++++++++++++++++++++++++++++++ 2 files changed, 345 insertions(+) create mode 100644 src/components/PageLayout.tsx create mode 100644 src/pages/what-we-do.tsx diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx new file mode 100644 index 0000000..ab54513 --- /dev/null +++ b/src/components/PageLayout.tsx @@ -0,0 +1,92 @@ +import { SEOType } from '../types/commonTypes'; +import { styled } from '@linaria/react'; +import SEO from './SEO'; +import { bannerContent } from '../config'; +import TopBanner from './ui/TopBanner'; +import { appTheme, media, ThemeProvider, tmSelectors } from '../themes'; +import { Header, HeaderBg } from './ui/styled/DesktopMenu.styled'; +import LandingNavigation from './LandingNavigation'; +import LandingFooter from './ui/LandingFooter'; +import { FOOTER_CONTENT } from '../content/landing'; +import { useEffect, useState } from 'react'; + +const Container = styled.div` + position: relative; + align-items: center; + -webkit-font-smoothing: antialiased; + transition: all 0.25s ease-in-out; + main { + background: ${appTheme.light.colors.pageBackground}; + overflow-x: hidden; + padding-top: 136px; + align-items: center; + width: 100%; + ${tmSelectors.dark} { + background: ${appTheme.dark.colors.pageBackground}; + } + } + min-width: 320px; +`; + +type Props = React.PropsWithChildren<{ + seo: SEOType; +}>; + +const ContentContainer = styled.div` + margin: 0 auto; + max-width: 952px; + ${media.brp1792} { + max-width: 790px; + } + ${media.brp1440} { + max-width: 870px; + } + ${media.brp1280} { + max-width: 714px; + } + ${media.brp1024} { + max-width: 544px; + } + ${media.brp768} { + max-width: 312px; + } +`; + +const PageLayout = ({ children, seo }: Props) => { + const [isVisible, setIsVisible] = useState(true); + const [prevScrollPos, setPrevScrollPos] = useState(0); + useEffect(() => { + const handleScroll = () => { + const currentScrollPos = window.pageYOffset; + + // setIsVisible(prevScrollPos > currentScrollPos || currentScrollPos < 600); + setPrevScrollPos(currentScrollPos); + }; + + window.addEventListener('scroll', handleScroll); + + return () => window.removeEventListener('scroll', handleScroll); + }, [prevScrollPos]); + + return ( + + +
+ + + +
+ +
+ {children} + +
+ + + ); +}; + +export default PageLayout; diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx new file mode 100644 index 0000000..e6eab1a --- /dev/null +++ b/src/pages/what-we-do.tsx @@ -0,0 +1,253 @@ +import { styled } from '@linaria/react'; +import type { NextPage } from 'next'; + +import PageLayout from '../components/PageLayout'; +import { appTheme, media, tmSelectors } from '../themes'; + +const WhatWeDoContainer = styled.section` + position: relative; + width: 100%; +`; + +const WhatWeDoContentSection = styled.section` + z-index: 1; + padding: 42px 0px 0px; + width: 100%; + min-width: min-content; + max-width: 100%; + ${media.brp1792} { + padding: 40px 0px 0px; + } + ${media.brp1280} { + padding: 32px 0px 0px; + } + ${media.brp1024} { + padding: 16px 0px 0px; + } + ${media.brp768} { + padding: 16px 0px 0px; + } +`; + +const WhatWeDoTitle = styled.h1` + font-weight: 400; + font-size: 57px; + line-height: 125%; + padding-bottom: 32px; + + background: ${appTheme.light.colors.titleBg}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + ${tmSelectors.dark} { + background: ${appTheme.dark.colors.titleBg}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + ${media.brp1440} { + font-size: 48px; + line-height: 125%; + } + ${media.brp1280} { + font-size: 40px; + line-height: 125%; + } + ${media.brp768} { + font-size: 33px; + line-height: 125%; + } + ${media.brp360} { + font-size: 28px; + line-height: 125%; + padding-bottom: 24px; + } +`; + +const WhatWeDoParagraph = styled.p` + font-weight: 300; + font-size: 23px; + line-height: 140%; + letter-spacing: 0.03em; + color: ${appTheme.light.colors.font150}; + + padding-bottom: 16px; + + ${media.brp1440} { + font-size: 19px; + line-height: 150%; + } + ${media.brp1280} { + font-size: 16px; + line-height: 150%; + } + ${media.brp768} { + font-size: 14px; + line-height: 150%; + } + ${tmSelectors.dark} { + color: ${appTheme.dark.colors.font250}; + } +`; + +const WhatWeDoSectionTitle = styled.h2` + font-weight: 400; + font-size: 28px; + line-height: 140%; + + padding-top: 16px; + padding-bottom: 8px; + + background: ${appTheme.light.colors.titleBg}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + ${tmSelectors.dark} { + background: ${appTheme.dark.colors.titleBg}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + ${media.brp1280} { + font-size: 23px; + line-height: 140%; + } + ${media.brp768} { + font-size: 20px; + line-height: 150%; + } + ${media.brp360} { + font-size: 19px; + line-height: 150%; + padding-top: 8px; + } +`; + +const HeroPictureSection = styled.section` + position: absolute; + width: 100%; +`; + +const HeroPictureWrapper = styled.section` + --k: 1; + position: absolute; + right: -14%; + top: 0; + margin-top: calc(var(--k)* -420px); + margin-right: calc(var(--k)* -875px); + & .light { + display: block; + } + & .dark { + display: none; + } + + ${tmSelectors.dark} { + & .light { + display: none; + } + & .dark { + display: block; + } + } + transform-origin: top right; + transform: scale(var(--k)); + ${media.brp1440} { + --k: 0.9; + } + ${media.brp1280} { + --k: 0.8; + } + ${media.brp1024} { + --k: 0.6; + right: -100px + } + + + ${media.brp768} { + display: none; + } +`; + +const HeroMobilePictureWrapper = styled.section` + position: absolute; + right: 0; + top: 0; + display: none; + margin-top: -208px; + margin-right: -255px; + & .light { + display: block; + } + & .dark { + display: none; + margin-right: -20px; + } + + ${tmSelectors.dark} { + & .light { + display: none; + } + & .dark { + display: block; + } + } + ${media.brp768} { + display: block; + } +`; + +const Link = styled.a` + text-decoration: underline; + text-decoration-color: ${appTheme.light.colors.font150}; + ${tmSelectors.dark} { + text-decoration-color: ${appTheme.dark.colors.font250}; + } +` + +const CTAWrapper = styled.div` + margin-top: 40px; + ${media.brp1024} { + margin-top: 16px; + } +`; + +const WhatWeDo: NextPage = () => { + return ( + + + + What we do + + The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. + + + As an early-stage non-profit, we provide open-source engineering software which advances the Ethereum ecosystem. Our ultimate goal is to ensure that Ethereum continues to deliver a top-quality, reliable developer experience as part of its software development platform, both today and in the future. We believe that by doing so, we can help Ethereum and the broader decentralized movement achieve their full potential and create a world where increased autonomy and choice are available to millions of people. + + + A Developer-Focused Approach to Growing the Infinite Garden + + + Developers are essential to the continued success of the Ethereum platform, and we are committed to empowering them through two distinct approaches. + + + Our first approach is to provide open-source developer tools to meet current engineering needs. Through our Hardhat suite of products, we equip developers with the necessary tools to succeed in the present. + + + Our second approach focuses on the larger open-source ecosystem and the meta-infrastructure necessary for its continued evolution. By working on compilers (Slang) and runtimes (Rethnet), we aim to improve the quality of the meta-infrastructure available for the development of new tools and infrastructure. + + + Together, these approaches ensure that Ethereum continues to offer a leading developer experience that meets today’s needs and those of tomorrow. + + + + + ); +}; + +export default WhatWeDo; From 2237a8bcf3f76059f942d4a94c3401af42e3117f Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Tue, 13 Jun 2023 18:49:48 +0200 Subject: [PATCH 02/30] Trigger deploy From 772a8cc4fae73b5449b270c3f229870186d8750e Mon Sep 17 00:00:00 2001 From: Franco Zeoli Date: Wed, 14 Jun 2023 12:33:15 +0200 Subject: [PATCH 03/30] Update copy, navigation and supporters order. --- public/sitemap-0.xml | 5 +++++ public/sitemap.xml | 4 ++++ src/config.ts | 20 ++++++++++---------- src/content/landing.ts | 36 ++++++++++++++++++------------------ 4 files changed, 37 insertions(+), 28 deletions(-) create mode 100644 public/sitemap-0.xml create mode 100644 public/sitemap.xml diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml new file mode 100644 index 0000000..a189112 --- /dev/null +++ b/public/sitemap-0.xml @@ -0,0 +1,5 @@ + + +https://nomic.foundation2023-06-14T10:25:18.192Zdaily0.7 +https://nomic.foundation/what-we-do2023-06-14T10:25:18.192Zdaily0.7 + \ No newline at end of file diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..78eaf7f --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,4 @@ + + +https://nomic.foundation/sitemap-0.xml + \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index d6375a5..9c655e8 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,7 +3,7 @@ import TwitterIcon from './assets/socials/twitter'; import { MenuItemType, SocialsEnum } from './types/commonTypes'; export const BANNER_LINK = - 'https://www.notion.so/Nomic-Foundation-jobs-991b37c547554f75b89a95f437fd5056'; + 'https://medium.com/nomic-foundation-blog/introducing-the-nomic-foundation-an-ethereum-public-goods-organization-31012af67df9'; export const bannerContent = { text: 'Announcing the Nomic Foundation', @@ -15,22 +15,22 @@ export const menuItemsList: MenuItemType[] = [ label: 'What we do', href: '/what-we-do', }, - { - label: 'Who we are', - href: '/who-we-are', - }, { label: 'Hardhat', href: 'https://hardhat.org/', }, { - label: 'Building Blocks', + label: 'Slang', + href: '/', + }, + { + label: 'Rethnet', + href: '/', + }, + { + label: 'Jobs', href: '/', }, - // { - // label: 'Jobs', - // href: '/', - // }, ]; export const SOCIALS_LINKS = { diff --git a/src/content/landing.ts b/src/content/landing.ts index d645403..cd1eac9 100644 --- a/src/content/landing.ts +++ b/src/content/landing.ts @@ -44,35 +44,35 @@ const { export const HERO_BLOCK_CONTENT = { cta: { href: '/what-we-do', - label: 'View more', + label: 'Learn more', }, title: 'Empowering developers\nto decentralize the world', - subtitle: 'Independent non-profit organization.', + subtitle: 'A non-profit dedicated to Ethereum developers', }; export const WHO_WE_ARE_BLOCK_CONTENT = { cta: { href: '/who-we-are', - label: 'View more', + label: 'Learn more', }, - text: 'The Nomic Foundation is an independent non-profit organization dedicated to building public good infrastructure to empower Ethereum developers to build decentralized software.', + text: "The Nomic Foundation is a non-profit advancing the Ethereum ecosystem. We provide open-source engineering software to empower developers today and ensure Ethereum's continued success in the future.", }; export const FOOTER_CONTENT = { - copyright: 'Copyright 2022 Nomic Foundation', + copyright: 'Copyright 2023 Nomic Foundation', privacy: { text: 'Privacy Policy', - href: '/', + href: 'https://hardhat.org/privacy-policy.html', }, }; export const PROJECTS_BLOCK_CONTENT = { title: 'Projects', - subtitle: 'Developer tools and low-level tooling infrastructure', + subtitle: 'Our open-source projects directly address developer needs and create foundations for new developer tools to be built.', projects: [ { title: 'Hardhat', - text: 'The Ethereum developer environment for professionals. Write, test, compile, deploy, grow, and scale. Try Hardhat.', + text: 'The Ethereum developer environment for professionals. Write, test, compile, deploy, grow, and scale.', cta: { href: 'https://hardhat.org', label: 'Try Hardhat', @@ -101,7 +101,7 @@ export const PROJECTS_BLOCK_CONTENT = { }, { title: 'Rethnet', - text: 'A debugging-enabled Ethereum runtime implementation that can be reused to build new developer tools.', + text: 'An Ethereum development runtime implementation that can be reused to build new developer tools.', cta: { href: '/', label: 'Learn more', @@ -118,10 +118,10 @@ export const PROJECTS_BLOCK_CONTENT = { export const WORK_WITH_US_CONTENT = { title: 'Work with us', - text: 'Work for us, from anywhere. We are hiring for hundreds of open positions across more than 96 countries.', + text: 'A small remote team working on hard engineering challenges that drive meaningful impact in the Ethereum ecosystem. Autonomy, trust, kindness, and high standards.', cta: { - href: '/', - label: 'View more', + href: '/jobs', + label: 'Learn more', }, }; @@ -130,17 +130,17 @@ export const SUPPORTERS_CONTENT = { logos: [ EthereumFoundationLogo, VitalikButerinLogo, + ConsensysLogo, + CoinbaseLogo, AndreesenHorowitzLogo, + UniswapLogo, ChainlinkLogo, - KaszekLogo, - TheGraphLogo, - ACapitalLogo, DecentralandLogo, + TheGraphLogo, PolygonLogo, - ConsensysLogo, - CoinbaseLogo, GnosisLogo, YearnLogo, - UniswapLogo, + ACapitalLogo, + KaszekLogo, ], }; From 5c97b155965f053ec90600aeb115cbaa044bcf7b Mon Sep 17 00:00:00 2001 From: Franco Zeoli Date: Wed, 14 Jun 2023 13:49:14 +0200 Subject: [PATCH 04/30] Add missing ethereum link --- src/pages/what-we-do.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index e6eab1a..be29fc8 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -224,7 +224,7 @@ const WhatWeDo: NextPage = () => { What we do - The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. + The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. As an early-stage non-profit, we provide open-source engineering software which advances the Ethereum ecosystem. Our ultimate goal is to ensure that Ethereum continues to deliver a top-quality, reliable developer experience as part of its software development platform, both today and in the future. We believe that by doing so, we can help Ethereum and the broader decentralized movement achieve their full potential and create a world where increased autonomy and choice are available to millions of people. From 1393952b6fc6be89955ed77adae73f01814ed674 Mon Sep 17 00:00:00 2001 From: Franco Zeoli Date: Wed, 14 Jun 2023 13:49:23 +0200 Subject: [PATCH 05/30] Update sitemap --- public/sitemap-0.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml index a189112..74104d7 100644 --- a/public/sitemap-0.xml +++ b/public/sitemap-0.xml @@ -1,5 +1,5 @@ -https://nomic.foundation2023-06-14T10:25:18.192Zdaily0.7 -https://nomic.foundation/what-we-do2023-06-14T10:25:18.192Zdaily0.7 +https://nomic.foundation2023-06-14T11:48:33.739Zdaily0.7 +https://nomic.foundation/what-we-do2023-06-14T11:48:33.739Zdaily0.7 \ No newline at end of file From 96db47e55de67b10a49ccf06d5c6d00ab6a732d7 Mon Sep 17 00:00:00 2001 From: Franco Zeoli Date: Wed, 14 Jun 2023 14:01:40 +0200 Subject: [PATCH 06/30] Change the ethereum link to ethereum.org --- public/sitemap-0.xml | 4 ++-- src/pages/what-we-do.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml index 74104d7..ba48b29 100644 --- a/public/sitemap-0.xml +++ b/public/sitemap-0.xml @@ -1,5 +1,5 @@ -https://nomic.foundation2023-06-14T11:48:33.739Zdaily0.7 -https://nomic.foundation/what-we-do2023-06-14T11:48:33.739Zdaily0.7 +https://nomic.foundation2023-06-14T12:00:11.441Zdaily0.7 +https://nomic.foundation/what-we-do2023-06-14T12:00:11.441Zdaily0.7 \ No newline at end of file diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index be29fc8..37dd1f4 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -224,7 +224,7 @@ const WhatWeDo: NextPage = () => { What we do - The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. + The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. As an early-stage non-profit, we provide open-source engineering software which advances the Ethereum ecosystem. Our ultimate goal is to ensure that Ethereum continues to deliver a top-quality, reliable developer experience as part of its software development platform, both today and in the future. We believe that by doing so, we can help Ethereum and the broader decentralized movement achieve their full potential and create a world where increased autonomy and choice are available to millions of people. From 67938c1eea90bb9a74fec1436af1b648c32a4c61 Mon Sep 17 00:00:00 2001 From: Patricio Palladino Date: Wed, 14 Jun 2023 11:27:18 -0300 Subject: [PATCH 07/30] Fix CTA vertical alignment --- src/components/ui/styled/Button.styled.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/ui/styled/Button.styled.tsx b/src/components/ui/styled/Button.styled.tsx index 0545536..db2e79f 100644 --- a/src/components/ui/styled/Button.styled.tsx +++ b/src/components/ui/styled/Button.styled.tsx @@ -1,9 +1,9 @@ -import { styled } from '@linaria/react'; -import { appTheme, media, tmSelectors } from '../../../themes'; +import { styled } from "@linaria/react"; +import { appTheme, media, tmSelectors } from "../../../themes"; export const StyledButton = styled.button<{ color?: string }>` --bgColor: ${appTheme.light.colors.ctaBg}; - --borderColor: ${({ color }) => (!!color ? color : 'transparent')}; + --borderColor: ${({ color }) => (!!color ? color : "transparent")}; position: relative; height: fit-content; cursor: pointer; @@ -24,8 +24,8 @@ export const StyledButton = styled.button<{ color?: string }>` background-origin: border-box; background-clip: content-box, border-box; position: absolute; - border: solid 1px ${({ color }) => (!!color ? color : 'transparent')}; - content: ' '; + border: solid 1px ${({ color }) => (!!color ? color : "transparent")}; + content: " "; display: block; border-radius: 40px; width: 99%; @@ -34,12 +34,13 @@ export const StyledButton = styled.button<{ color?: string }>` top: 0; left: 0; box-shadow: 0px 6px 26px ${appTheme.light.colors.buttonShadow}; + box-sizing: border-box; } &:hover { cursor: pointer; &:before { - border: solid 2px ${({ color }) => (!!color ? color : 'transparent')}; + border: solid 2px ${({ color }) => (!!color ? color : "transparent")}; margin-left: -1px; margin-top: -1px; } From 07b077d8124b781bab54b6a7b4b9effa818ace77 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Wed, 14 Jun 2023 16:55:14 +0200 Subject: [PATCH 08/30] Open external links in a new tab --- src/components/Socials.tsx | 2 ++ src/components/ui/Button.tsx | 8 +++++--- src/components/ui/DesktopMenu.tsx | 3 ++- src/components/ui/LandingFooter.tsx | 3 ++- src/pages/what-we-do.tsx | 4 ++-- 5 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/Socials.tsx b/src/components/Socials.tsx index 40a4bbf..0ed37d8 100644 --- a/src/components/Socials.tsx +++ b/src/components/Socials.tsx @@ -7,10 +7,12 @@ const Socials = () => { {socialsItems.map((socialItem) => { const { Icon } = socialItem; + const target = socialItem.href.startsWith("http") ? "_blank" : undefined; return ( diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index e533cc7..bf88f9e 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -2,8 +2,10 @@ import Link from 'next/link'; import { CTAContent } from '../../types/commonTypes'; import { StyledButton } from './styled/Button.styled'; -export const Button = ({ href, label, color }: CTAContent) => ( - +export const Button = ({ href, label, color }: CTAContent) => { + const target = href.startsWith("http") ? "_blank" : undefined; + + return {label} -); +}; diff --git a/src/components/ui/DesktopMenu.tsx b/src/components/ui/DesktopMenu.tsx index 142126e..a361ec9 100644 --- a/src/components/ui/DesktopMenu.tsx +++ b/src/components/ui/DesktopMenu.tsx @@ -18,9 +18,10 @@ const DesktopMenu = ({ menuItems }: Props) => ( {menuItems.map((menuItem) => { + const target = menuItem.href.startsWith("http") ? "_blank" : undefined; return ( - {menuItem.label} + {menuItem.label} ); })} diff --git a/src/components/ui/LandingFooter.tsx b/src/components/ui/LandingFooter.tsx index 6bafecc..5bb835b 100644 --- a/src/components/ui/LandingFooter.tsx +++ b/src/components/ui/LandingFooter.tsx @@ -23,6 +23,7 @@ type Props = { }; const LandingFooter = ({ content }: Props) => { + const target = content.privacy.href.startsWith("http") ? "_blank" : undefined; return ( @@ -37,7 +38,7 @@ const LandingFooter = ({ content }: Props) => { {content.copyright} | - {content.privacy.text} + {content.privacy.text} ); diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 37dd1f4..9202ca2 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -224,13 +224,13 @@ const WhatWeDo: NextPage = () => { What we do - The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. + The Nomic Foundation is helping create a more decentralized world that empowers individuals with greater autonomy and choice. As a software development platform, Ethereum can become a foundational component of this future, which is why we are solely focused on supporting its growth. As an early-stage non-profit, we provide open-source engineering software which advances the Ethereum ecosystem. Our ultimate goal is to ensure that Ethereum continues to deliver a top-quality, reliable developer experience as part of its software development platform, both today and in the future. We believe that by doing so, we can help Ethereum and the broader decentralized movement achieve their full potential and create a world where increased autonomy and choice are available to millions of people. - A Developer-Focused Approach to Growing the Infinite Garden + A Developer-Focused Approach to Growing the Infinite Garden Developers are essential to the continued success of the Ethereum platform, and we are committed to empowering them through two distinct approaches. From bfdbfedc699dff6327e619464dff7842ad629eb8 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Wed, 14 Jun 2023 17:01:06 +0200 Subject: [PATCH 09/30] Add jobs page with Ashby embed --- src/config.ts | 2 +- src/pages/jobs.tsx | 45 ++++++++++++++++++++++++++++++++++++++++ src/pages/what-we-do.tsx | 1 + 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/pages/jobs.tsx diff --git a/src/config.ts b/src/config.ts index 9c655e8..e4a2938 100644 --- a/src/config.ts +++ b/src/config.ts @@ -29,7 +29,7 @@ export const menuItemsList: MenuItemType[] = [ }, { label: 'Jobs', - href: '/', + href: '/jobs', }, ]; diff --git a/src/pages/jobs.tsx b/src/pages/jobs.tsx new file mode 100644 index 0000000..fedf6ca --- /dev/null +++ b/src/pages/jobs.tsx @@ -0,0 +1,45 @@ +import { styled } from '@linaria/react'; +import type { NextPage } from 'next'; +import { useEffect } from 'react'; + +import PageLayout from '../components/PageLayout'; +import { appTheme, media, tmSelectors } from '../themes'; + +const JobsContainer = styled.section` + position: relative; + width: 100%; +`; + + +const AshbyJobBoardEmbed = () => { + useEffect(() => { + const script = document.createElement('script'); + + script.src = "https://jobs.ashbyhq.com/nomic.foundation/embed"; + + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + } + }, []) + + return
+} + +const Jobs: NextPage = () => { + return ( + + + + + + ); +}; + +export default Jobs; diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 9202ca2..9d9f094 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -1,5 +1,6 @@ import { styled } from '@linaria/react'; import type { NextPage } from 'next'; +import { useEffect } from 'react'; import PageLayout from '../components/PageLayout'; import { appTheme, media, tmSelectors } from '../themes'; From 8a649a6ce9d8d560591477a9f0da976ed82a4964 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Wed, 14 Jun 2023 17:01:50 +0200 Subject: [PATCH 10/30] Remove unnecessary code --- src/pages/what-we-do.tsx | 82 ---------------------------------------- 1 file changed, 82 deletions(-) diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 9d9f094..73cd9f4 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -1,6 +1,5 @@ import { styled } from '@linaria/react'; import type { NextPage } from 'next'; -import { useEffect } from 'react'; import PageLayout from '../components/PageLayout'; import { appTheme, media, tmSelectors } from '../themes'; @@ -124,80 +123,6 @@ const WhatWeDoSectionTitle = styled.h2` } `; -const HeroPictureSection = styled.section` - position: absolute; - width: 100%; -`; - -const HeroPictureWrapper = styled.section` - --k: 1; - position: absolute; - right: -14%; - top: 0; - margin-top: calc(var(--k)* -420px); - margin-right: calc(var(--k)* -875px); - & .light { - display: block; - } - & .dark { - display: none; - } - - ${tmSelectors.dark} { - & .light { - display: none; - } - & .dark { - display: block; - } - } - transform-origin: top right; - transform: scale(var(--k)); - ${media.brp1440} { - --k: 0.9; - } - ${media.brp1280} { - --k: 0.8; - } - ${media.brp1024} { - --k: 0.6; - right: -100px - } - - - ${media.brp768} { - display: none; - } -`; - -const HeroMobilePictureWrapper = styled.section` - position: absolute; - right: 0; - top: 0; - display: none; - margin-top: -208px; - margin-right: -255px; - & .light { - display: block; - } - & .dark { - display: none; - margin-right: -20px; - } - - ${tmSelectors.dark} { - & .light { - display: none; - } - & .dark { - display: block; - } - } - ${media.brp768} { - display: block; - } -`; - const Link = styled.a` text-decoration: underline; text-decoration-color: ${appTheme.light.colors.font150}; @@ -206,13 +131,6 @@ const Link = styled.a` } ` -const CTAWrapper = styled.div` - margin-top: 40px; - ${media.brp1024} { - margin-top: 16px; - } -`; - const WhatWeDo: NextPage = () => { return ( Date: Wed, 14 Jun 2023 18:37:26 +0200 Subject: [PATCH 11/30] Styles fixes (Review v2) --- src/assets/graphics/light/hero-desk.tsx | 100 +++++++++--------- .../landingBlocks/ProjectsBlock.tsx | 4 +- .../styled/ProjectsBlock.styled.tsx | 86 ++++++++++++--- .../styled/SupportersBlock.styled.tsx | 2 +- .../styled/WhoWeAreBlock.styled.tsx | 27 +++-- .../styled/WorkWithUsBlock.styled.tsx | 31 +++--- .../ui/styled/LandingFooter.styled.tsx | 6 +- src/themes.tsx | 1 + 8 files changed, 166 insertions(+), 91 deletions(-) diff --git a/src/assets/graphics/light/hero-desk.tsx b/src/assets/graphics/light/hero-desk.tsx index 35286ee..9ca6925 100644 --- a/src/assets/graphics/light/hero-desk.tsx +++ b/src/assets/graphics/light/hero-desk.tsx @@ -10,7 +10,7 @@ const HeroDesk = (props: SVGProps) => ( {...props} > ) => ( maskType: 'alpha', }} > - + - - + + ) => ( /> ) => ( d='m919.102 576.932 149.538-86.353-149.646 259.376.108-173.023Z' /> ) => ( d='m994.484 793.481-.432-.25-.934 1.615 1.616-.932-.25-.433Zm149.846-86.362.24.433.26-.144v-.289h-.5Zm.08-172.949h.5a.499.499 0 0 0-.93-.25l.43.25ZM994.734 793.914l149.836-86.362-.49-.866-149.845 86.362.499.866Zm150.096-86.795.08-172.949h-1l-.08 172.949h1Zm-.85-173.199L994.052 793.231l.865.5 149.923-259.31-.86-.501Z' /> ) => ( }} /> - - + + ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( - + - + diff --git a/src/components/landingBlocks/styled/ProjectsBlock.styled.tsx b/src/components/landingBlocks/styled/ProjectsBlock.styled.tsx index 80a553a..7fa954c 100644 --- a/src/components/landingBlocks/styled/ProjectsBlock.styled.tsx +++ b/src/components/landingBlocks/styled/ProjectsBlock.styled.tsx @@ -9,19 +9,28 @@ export const StyledProjects = styled.section` margin-top: 360px; position: relative; z-index: 2; - ${media.brp1440} { - margin-top: 372px; + ${media.brp1792} { + margin-top: 460px; } - ${media.brp1024} { + ${media.brp1440} { margin-top: 372px; } ${media.brp1280} { - margin-top: 240px; + margin-top: 370px; + } + ${media.brp1024} { + margin-top: 500px; } ${media.brp768} { - margin-top: 300px; + margin-top: 600px; align-items: flex-start; } + ${media.brp500} { + margin-top: 460px; + } + ${media.brp428} { + margin-top: 300px; + } `; export const ProjectsTitle = styled.h2` @@ -109,18 +118,26 @@ export const ProjectItemContainer = styled.section` width: 100%; position: relative; flex-direction: column; - margin-bottom: 400px; - ${media.brp1792} { - margin-bottom: 320px; - } + margin-bottom: 220px; ${media.brp1440} { margin-bottom: 220px; } + ${media.brp1280} { + margin-bottom: 180px; + } ${media.brp1024} { - margin-bottom: 100px; + margin-bottom: 48px; + + &:nth-child(2) { + margin-bottom: 80px; + } } ${media.brp768} { margin-bottom: 42px; + + &:nth-child(2) { + margin-bottom: 32px; + } } &:last-child { margin-bottom: unset; @@ -217,7 +234,7 @@ export const ProjectItemPictureLeftDecoration = styled.div<{ color: string }>` } ${media.brp1792} { width: 16%; - height: 67.5%; + height: 67.4%; .reversed & { width: 16%; height: 49%; @@ -225,15 +242,44 @@ export const ProjectItemPictureLeftDecoration = styled.div<{ color: string }>` } ${media.brp1440} { width: 16%; - height: 50%; + height: 51%; .reversed & { width: 16%; height: 38%; } } + ${media.brp1280} { + height: 50.4%; + } ${media.brp1024} { display: none; } + + &.item-slang { + ${media.brp1792} { + height: 48.6%; + } + ${media.brp1440} { + height: 37.4%; + } + ${media.brp1280} { + height: 38%; + } + } + + &.item-rethnet { + height: 61.5%; + + ${media.brp1792} { + height: 64%; + } + ${media.brp1440} { + height: 48.6%; + } + ${media.brp1280} { + height: 49.2%; + } + } `; export const ProjectItemPicWrapper = styled.div` @@ -308,6 +354,12 @@ export const ProjectItemMobilePicWrapper = styled.div` top: 25%; } } + ${media.brp1024Only} { + &.item-rethnet { + top: 3%; + left: 0; + } + } ${media.brp768} { top: -10%; transform: scale(1.75); @@ -341,15 +393,16 @@ export const ProjectItemContentSection = styled.section<{ color: string }>` margin-left: unset; border-bottom: unset; padding: unset; - padding-bottom: 48px; .reversed & { margin-right: unset; + padding: 0; } } + ${media.brp768} { - padding: 0 0 48px 0; + padding: 0 0 22px 0; .reversed & { - padding: 0 0 48px 0; + padding: 0 0 22px 0; } } `; @@ -450,6 +503,9 @@ export const ButtonWrapper = styled.div` align-self: flex-end; } ${media.brp1024} { + position: static; + transform: none; + margin-top: 24px; .reversed & { align-self: flex-start; } diff --git a/src/components/landingBlocks/styled/SupportersBlock.styled.tsx b/src/components/landingBlocks/styled/SupportersBlock.styled.tsx index 890fa71..36f4554 100644 --- a/src/components/landingBlocks/styled/SupportersBlock.styled.tsx +++ b/src/components/landingBlocks/styled/SupportersBlock.styled.tsx @@ -12,7 +12,7 @@ export const SupportersBlockContainer = styled.section` margin-top: 344px; } ${media.brp1024} { - margin-top: 320px; + margin-top: 260px; } ${media.brp768} { margin-top: 280px; diff --git a/src/components/landingBlocks/styled/WhoWeAreBlock.styled.tsx b/src/components/landingBlocks/styled/WhoWeAreBlock.styled.tsx index d752504..1a03af3 100644 --- a/src/components/landingBlocks/styled/WhoWeAreBlock.styled.tsx +++ b/src/components/landingBlocks/styled/WhoWeAreBlock.styled.tsx @@ -27,23 +27,28 @@ export const WhoWeAreText = styled.p` letter-spacing: 0.05em; color: ${appTheme.light.colors.font150}; max-width: 1080px; - margin-top: 400px; + margin-top: 460px; + ${media.brp1792} { + font-size: 33px; + margin-top: 500px; + } ${media.brp1440} { max-width: 870px; - font-size: 33px; + margin-top: 480px; } ${media.brp1280} { max-width: 714px; font-size: 28px; - margin-top: 350px; + margin-top: 370px; } ${media.brp1024} { max-width: 544px; font-size: 23px; + margin-top: 480px; } ${media.brp768} { font-size: 19px; - margin-top: 312px; + margin-top: 342px; text-align: start; } @@ -62,7 +67,7 @@ export const WhoWeArePicture = styled.section` export const WhoWeArePictureWrapper = styled.section` --pictureWidth: 1921px; - --picHeight: 1286px + --picHeight: 1286px; --k: 1; --widthPercent: calc( var(--pictureWidth) / 100); --heightPercent: calc( var(--picHeight) / 100); @@ -71,8 +76,6 @@ export const WhoWeArePictureWrapper = styled.section` transform: translateX(-50%) scale(var(--k)); margin-top: 90px; - - & .light { display: block; } @@ -89,16 +92,20 @@ export const WhoWeArePictureWrapper = styled.section` } } transform-origin: center center; + ${media.brp1792} { + margin-top: 160px; + } ${media.brp1440} { --k: 0.9; - margin-top: 20px; - + margin-top: 90px; } ${media.brp1280} { --k: 0.8; + margin-top: -10px; } ${media.brp1024} { - --k: 0.6; + --k: 1; + margin-top: 150px; } ${media.brp768} { diff --git a/src/components/landingBlocks/styled/WorkWithUsBlock.styled.tsx b/src/components/landingBlocks/styled/WorkWithUsBlock.styled.tsx index cbd1a24..1673299 100644 --- a/src/components/landingBlocks/styled/WorkWithUsBlock.styled.tsx +++ b/src/components/landingBlocks/styled/WorkWithUsBlock.styled.tsx @@ -8,11 +8,17 @@ export const WorkWithUsContainer = styled.section` align-items: center; margin-top: 360px; position: relative; + ${media.brp1440} { + margin-top: 280px; + } + ${media.brp1280} { + margin-top: 260px; + } ${media.brp1024} { margin-top: 280px; } ${media.brp768} { - margin-top: 200px; + margin-top: 140px; padding: 0 24px; } `; @@ -58,7 +64,7 @@ export const WorkWithUsText = styled.p` color: ${appTheme.light.colors.font150}; max-width: 870px; margin-top: 32px; - ${media.brp1440} { + ${media.brp1792} { font-size: 33px; } ${media.brp1280} { @@ -99,8 +105,8 @@ export const WorkWithUsPictureWrapper = styled.section` position: absolute; left: 50%; transform: translateX(-50%); - width: 220%; - top: -60%; + width: 186%; + top: -49%; z-index: 1; & svg { @@ -128,16 +134,17 @@ export const WorkWithUsPictureWrapper = styled.section` } ${media.brp1792} { - width: 240%; + top: -32%; } ${media.brp1440} { - width: 260%; + width: 196%; + top: -19%; } ${media.brp1280} { - top: -50%; - width: 280%; + top: -5%; + width: 200%; margin-top: 0; } @@ -149,13 +156,13 @@ export const WorkWithUsPictureWrapper = styled.section` export const WorkWithUsMobilePictureWrapper = styled.section` display: none; - width: 260%; + width: 186%; position: absolute; left: 50%; transform: translateX(-50%); transform-origin: center top; z-index: 1; - top: -30%; + top: -2%; & svg { width: 100%; @@ -184,8 +191,8 @@ export const WorkWithUsMobilePictureWrapper = styled.section` display: block; } ${media.brp768} { - top: 2%; - width: 1360px; + top: 12%; + width: 1200px; left: 50%; transform: translateX(-50%); } diff --git a/src/components/ui/styled/LandingFooter.styled.tsx b/src/components/ui/styled/LandingFooter.styled.tsx index af00024..7936074 100644 --- a/src/components/ui/styled/LandingFooter.styled.tsx +++ b/src/components/ui/styled/LandingFooter.styled.tsx @@ -101,8 +101,12 @@ export const LogoWrapper = styled.span` export const CopyrightWrapper = styled.span` display: flex; align-items: center; - margin-right: 8px; white-space: nowrap; + color: ${appTheme.light.colors.font150}; + + ${tmSelectors.dark} { + color: #fff; + } ${media.brp768} { margin-bottom: 22spx; diff --git a/src/themes.tsx b/src/themes.tsx index 69e2a62..f239724 100644 --- a/src/themes.tsx +++ b/src/themes.tsx @@ -22,6 +22,7 @@ export const media = { brp500: `@media screen and (max-width: ${breakpoints.brp500}px)`, brp768: `@media screen and (max-width: ${breakpoints.brp768}px)`, brp1024: `@media screen and (max-width: ${breakpoints.brp1024}px)`, + brp1024Only: `@media screen and (min-width: ${breakpoints.brp768}px) and (max-width: ${breakpoints.brp1024}px)`, brp1280: `@media screen and (max-width: ${breakpoints.brp1280}px)`, brp1440: `@media screen and (max-width: ${breakpoints.brp1440}px)`, brp1792: `@media screen and (max-width: ${breakpoints.brp1792}px)`, From f8415117a7ba5f85b1a247c718d5fed76cc87aa1 Mon Sep 17 00:00:00 2001 From: Eugene Boruhov Date: Thu, 15 Jun 2023 19:35:34 +0200 Subject: [PATCH 12/30] Add header & top banner animation on scroll --- src/components/LandingLayout.tsx | 39 +++++++++++----- src/components/ui/TopBanner.tsx | 4 +- .../ui/styled/DesktopMenu.styled.tsx | 31 ++++++++++--- src/components/ui/styled/TopBanner.styled.tsx | 8 ++++ src/components/ui/types.ts | 1 + src/hooks/useScrollDirection.ts | 44 +++++++++++++++++++ 6 files changed, 108 insertions(+), 19 deletions(-) create mode 100644 src/hooks/useScrollDirection.ts diff --git a/src/components/LandingLayout.tsx b/src/components/LandingLayout.tsx index eb63f7e..b5ad916 100644 --- a/src/components/LandingLayout.tsx +++ b/src/components/LandingLayout.tsx @@ -3,12 +3,15 @@ import { styled } from '@linaria/react'; import SEO from './SEO'; import { bannerContent } from '../config'; import TopBanner from './ui/TopBanner'; -import { appTheme, media, ThemeProvider, tmSelectors } from '../themes'; -import { Header, HeaderBg } from './ui/styled/DesktopMenu.styled'; +import {appTheme, breakpoints, media, ThemeProvider, tmSelectors} from '../themes'; +import {Header, HeaderBg, HeaderWrapper} from './ui/styled/DesktopMenu.styled'; import LandingNavigation from './LandingNavigation'; import LandingFooter from './ui/LandingFooter'; import { FOOTER_CONTENT } from '../content/landing'; import { useEffect, useState } from 'react'; +import {cx} from "linaria"; +import {useScrollDirection} from "../hooks/useScrollDirection"; +import useWindowSize from "../hooks/useWindowSize"; const Container = styled.div` position: relative; @@ -21,7 +24,7 @@ const Container = styled.div` main { background: ${appTheme.light.colors.pageBackground}; overflow-x: hidden; - padding-top: 136px; + padding-top: 106px; flex: 1 1 auto; display: flex; flex-direction: column; @@ -66,16 +69,33 @@ const ContentContainer = styled.div` `; const LandingLayout = ({ children, seo }: Props) => { - const [isVisible, setIsVisible] = useState(true); const [prevScrollPos, setPrevScrollPos] = useState(0); - const [backgroundOpacity, setBackgroundOpacity] = useState(0); + const [fixed, setFixed] = useState(false) + const [animation, setAnimation] = useState(false) + const [isTopBarVisible, setIsTopBarVisible] = useState(true) + const [isHeaderVisible, setIsHeaderVisible] = useState(false) + const scrollDirection = useScrollDirection() + const windowSize = useWindowSize() + + const headerHeight = windowSize.width < breakpoints.brp1024 ? 80 : 96; + const topBarHeight = windowSize.width < breakpoints.brp1024 ? 46 : 55; + const totalHeight = headerHeight + topBarHeight; + useEffect(() => { const handleScroll = () => { const currentScrollPos = window.pageYOffset; - // setIsVisible(prevScrollPos > currentScrollPos || currentScrollPos < 600); + if (scrollDirection === 'up') { + currentScrollPos === 0 && setFixed(currentScrollPos > totalHeight) + } else { + setFixed(currentScrollPos > totalHeight) + } + setTimeout(() => { + setAnimation(currentScrollPos > totalHeight) + },100) + setIsHeaderVisible(scrollDirection === 'up') setPrevScrollPos(currentScrollPos); - setBackgroundOpacity((currentScrollPos * 1.5) / window.innerHeight); + setIsTopBarVisible(currentScrollPos === 0); }; window.addEventListener('scroll', handleScroll); @@ -85,13 +105,12 @@ const LandingLayout = ({ children, seo }: Props) => { return ( +
-
diff --git a/src/components/ui/TopBanner.tsx b/src/components/ui/TopBanner.tsx index 4fc3a2b..5d929bb 100644 --- a/src/components/ui/TopBanner.tsx +++ b/src/components/ui/TopBanner.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { BannerContainer, BannerDecorator } from './styled/TopBanner.styled'; import { BannerProps } from './types'; -const TopBanner = ({ content }: BannerProps) => { +const TopBanner = ({ content, className }: BannerProps) => { return ( - + ◱ ◰ ◲ diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx index bdd6179..cb0c6a5 100644 --- a/src/components/ui/styled/DesktopMenu.styled.tsx +++ b/src/components/ui/styled/DesktopMenu.styled.tsx @@ -1,20 +1,32 @@ import { styled } from '@linaria/react'; import { appTheme, media, tmSelectors } from '../../../themes'; -export const Header = styled.header<{ backgroundOpacity: number }>` - position: fixed; +export const Header = styled.header` + position: relative; width: 100%; top: 0; left: 0; display: flex; flex-direction: column; z-index: 199; - margin-top: 0; - transition: all 0.25s ease-in-out; + margin-bottom: -96px; background: ${appTheme.light.colors.transparent}; - &.hidden { - margin-top: -100%; + &.fixed { + position: sticky; + transform: translateY(-96px); + + & .blur { + opacity: 1; + } + + &.visible-header { + transform: translateY(0); + } + } + + &.animation { + transition: all 0.2s linear; } & .blur { @@ -22,7 +34,7 @@ export const Header = styled.header<{ backgroundOpacity: number }>` backdrop-filter: blur(9px); mix-blend-mode: normal; - opacity: ${({ backgroundOpacity }) => backgroundOpacity}; + opacity: 0; } ${tmSelectors.dark} { @@ -34,6 +46,11 @@ export const Header = styled.header<{ backgroundOpacity: number }>` } `; +export const HeaderWrapper = styled.div` + height: 96px; + width: 100%; +` + export const HeaderBg = styled.div` position: absolute; top: 0; diff --git a/src/components/ui/styled/TopBanner.styled.tsx b/src/components/ui/styled/TopBanner.styled.tsx index 607bec0..582148b 100644 --- a/src/components/ui/styled/TopBanner.styled.tsx +++ b/src/components/ui/styled/TopBanner.styled.tsx @@ -18,6 +18,14 @@ export const BannerContainer = styled.a` letter-spacing: 0.02em; white-space: nowrap; width: 100%; + margin-top: -55px; + transition: all 0.35s 0.05s linear; + position: relative; + + &.visible-top-bar { + margin-top: 0; + } + & .banner-text { margin: 0 18px; } diff --git a/src/components/ui/types.ts b/src/components/ui/types.ts index 3fec8bb..3164f96 100644 --- a/src/components/ui/types.ts +++ b/src/components/ui/types.ts @@ -5,4 +5,5 @@ interface DefaultBannerContent { export interface BannerProps { content: DefaultBannerContent; + className?: string; } diff --git a/src/hooks/useScrollDirection.ts b/src/hooks/useScrollDirection.ts new file mode 100644 index 0000000..6ed8fcc --- /dev/null +++ b/src/hooks/useScrollDirection.ts @@ -0,0 +1,44 @@ +import { useEffect, useState } from "react"; + +export enum ScrollDirection { + up = "up", + down = "down", +} + +export const useScrollDirection = () => { + const threshold = 50; + const [scrollDir, setScrollDir] = useState(ScrollDirection.up); + + useEffect(() => { + let previousScrollYPosition = window.scrollY; + + const scrolledMoreThanThreshold = (currentScrollYPosition: number) => + Math.abs(currentScrollYPosition - previousScrollYPosition) > threshold; + + const isScrollingUp = (currentScrollYPosition: number) => + currentScrollYPosition > previousScrollYPosition && + !(previousScrollYPosition > 0 && currentScrollYPosition === 0) && + !(currentScrollYPosition > 0 && previousScrollYPosition === 0); + + const updateScrollDirection = () => { + const currentScrollYPosition = window.scrollY; + + if (scrolledMoreThanThreshold(currentScrollYPosition)) { + const newScrollDirection = isScrollingUp(currentScrollYPosition) + ? ScrollDirection.down + : ScrollDirection.up; + setScrollDir(newScrollDirection); + previousScrollYPosition = + currentScrollYPosition > 0 ? currentScrollYPosition : 0; + } + }; + + const onScroll = () => window.requestAnimationFrame(updateScrollDirection); + + window.addEventListener("scroll", onScroll); + + return () => window.removeEventListener("scroll", onScroll); + }, []); + + return scrollDir; +}; From d3d77d60b2b9e43897749c988acf770319945c84 Mon Sep 17 00:00:00 2001 From: Eugene Boruhov Date: Fri, 16 Jun 2023 11:07:02 +0200 Subject: [PATCH 13/30] Polish header animation --- src/components/ui/styled/TopBanner.styled.tsx | 2 +- src/styles/globals.css | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/ui/styled/TopBanner.styled.tsx b/src/components/ui/styled/TopBanner.styled.tsx index 582148b..4852c45 100644 --- a/src/components/ui/styled/TopBanner.styled.tsx +++ b/src/components/ui/styled/TopBanner.styled.tsx @@ -19,7 +19,7 @@ export const BannerContainer = styled.a` white-space: nowrap; width: 100%; margin-top: -55px; - transition: all 0.35s 0.05s linear; + transition: all 0.35s 0.2s ease-out; position: relative; &.visible-top-bar { diff --git a/src/styles/globals.css b/src/styles/globals.css index c53ce0b..507964d 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -6,6 +6,14 @@ body { scroll-behavior: smooth; } +body.LIGHT { + background-color: #F7F7FA; +} + +body.DARK { + background-color: #13141A; +} + a { color: inherit; text-decoration: none; From e1fbf7742d59ada1fe6734e54b716e38624e560c Mon Sep 17 00:00:00 2001 From: Eugene Boruhov Date: Fri, 16 Jun 2023 11:35:02 +0200 Subject: [PATCH 14/30] Polish header animation --- src/components/ui/styled/DesktopMenu.styled.tsx | 2 +- src/components/ui/styled/TopBanner.styled.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx index cb0c6a5..3b3795f 100644 --- a/src/components/ui/styled/DesktopMenu.styled.tsx +++ b/src/components/ui/styled/DesktopMenu.styled.tsx @@ -31,7 +31,7 @@ export const Header = styled.header` & .blur { background: ${appTheme.light.colors.navbarBlur}; - + transition: all 0.4s linear; backdrop-filter: blur(9px); mix-blend-mode: normal; opacity: 0; diff --git a/src/components/ui/styled/TopBanner.styled.tsx b/src/components/ui/styled/TopBanner.styled.tsx index 4852c45..09c433a 100644 --- a/src/components/ui/styled/TopBanner.styled.tsx +++ b/src/components/ui/styled/TopBanner.styled.tsx @@ -19,7 +19,7 @@ export const BannerContainer = styled.a` white-space: nowrap; width: 100%; margin-top: -55px; - transition: all 0.35s 0.2s ease-out; + transition: all 0.4s 0.1s linear; position: relative; &.visible-top-bar { From 37c946a917f17a1094324830655b43d633826792 Mon Sep 17 00:00:00 2001 From: Eugene Boruhov Date: Fri, 16 Jun 2023 11:48:48 +0200 Subject: [PATCH 15/30] Fix mobile nav menu --- src/components/LandingLayout.tsx | 4 ++-- src/components/styled/LandingNavigation.styled.tsx | 2 +- src/components/ui/styled/DesktopMenu.styled.tsx | 9 ++------- src/components/ui/styled/MobileMenu.styled.tsx | 2 +- 4 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/LandingLayout.tsx b/src/components/LandingLayout.tsx index b5ad916..d0fc869 100644 --- a/src/components/LandingLayout.tsx +++ b/src/components/LandingLayout.tsx @@ -4,7 +4,7 @@ import SEO from './SEO'; import { bannerContent } from '../config'; import TopBanner from './ui/TopBanner'; import {appTheme, breakpoints, media, ThemeProvider, tmSelectors} from '../themes'; -import {Header, HeaderBg, HeaderWrapper} from './ui/styled/DesktopMenu.styled'; +import {Header, HeaderBg} from './ui/styled/DesktopMenu.styled'; import LandingNavigation from './LandingNavigation'; import LandingFooter from './ui/LandingFooter'; import { FOOTER_CONTENT } from '../content/landing'; @@ -77,7 +77,7 @@ const LandingLayout = ({ children, seo }: Props) => { const scrollDirection = useScrollDirection() const windowSize = useWindowSize() - const headerHeight = windowSize.width < breakpoints.brp1024 ? 80 : 96; + const headerHeight = windowSize.width < breakpoints.brp1024 ? 80 : 112; const topBarHeight = windowSize.width < breakpoints.brp1024 ? 46 : 55; const totalHeight = headerHeight + topBarHeight; diff --git a/src/components/styled/LandingNavigation.styled.tsx b/src/components/styled/LandingNavigation.styled.tsx index da92c15..0cd4307 100644 --- a/src/components/styled/LandingNavigation.styled.tsx +++ b/src/components/styled/LandingNavigation.styled.tsx @@ -4,7 +4,7 @@ import { appTheme, media, tmSelectors } from '../../themes'; export const Navigation = styled.nav` width: 100%; - height: 96px; + height: 112px; box-sizing: border-box; transition: all ease-in-out 0.5s; z-index: 10; diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx index 3b3795f..a659d38 100644 --- a/src/components/ui/styled/DesktopMenu.styled.tsx +++ b/src/components/ui/styled/DesktopMenu.styled.tsx @@ -9,12 +9,12 @@ export const Header = styled.header` display: flex; flex-direction: column; z-index: 199; - margin-bottom: -96px; + margin-bottom: -112px; background: ${appTheme.light.colors.transparent}; &.fixed { position: sticky; - transform: translateY(-96px); + transform: translateY(-112px); & .blur { opacity: 1; @@ -46,11 +46,6 @@ export const Header = styled.header` } `; -export const HeaderWrapper = styled.div` - height: 96px; - width: 100%; -` - export const HeaderBg = styled.div` position: absolute; top: 0; diff --git a/src/components/ui/styled/MobileMenu.styled.tsx b/src/components/ui/styled/MobileMenu.styled.tsx index 670e312..8354b13 100644 --- a/src/components/ui/styled/MobileMenu.styled.tsx +++ b/src/components/ui/styled/MobileMenu.styled.tsx @@ -7,7 +7,7 @@ export const MobileMenuContainer = styled.section<{ isOpen: boolean }>` justify-content: space-between; width: min(100%, 412px); height: calc(100vh - 126px); - top: 46px; + top: 0; position: absolute; transition: all 0.25s ease-in-out; right: ${({ isOpen }) => (isOpen ? '0px' : '-120%')}; From 4a7ad44fa247345b75015a029b665ee1e6c724f5 Mon Sep 17 00:00:00 2001 From: Eugene Boruhov Date: Fri, 16 Jun 2023 15:33:06 +0200 Subject: [PATCH 16/30] Change header animation --- src/components/LandingLayout.tsx | 47 ++++++++++++------- src/components/LandingNavigation.tsx | 11 ++--- .../ui/styled/DesktopMenu.styled.tsx | 32 +++++++++++-- src/components/ui/styled/TopBanner.styled.tsx | 6 --- 4 files changed, 61 insertions(+), 35 deletions(-) diff --git a/src/components/LandingLayout.tsx b/src/components/LandingLayout.tsx index d0fc869..9861116 100644 --- a/src/components/LandingLayout.tsx +++ b/src/components/LandingLayout.tsx @@ -4,11 +4,11 @@ import SEO from './SEO'; import { bannerContent } from '../config'; import TopBanner from './ui/TopBanner'; import {appTheme, breakpoints, media, ThemeProvider, tmSelectors} from '../themes'; -import {Header, HeaderBg} from './ui/styled/DesktopMenu.styled'; +import {Header, HeaderBg, HeaderWrapper} from './ui/styled/DesktopMenu.styled'; import LandingNavigation from './LandingNavigation'; import LandingFooter from './ui/LandingFooter'; import { FOOTER_CONTENT } from '../content/landing'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import {cx} from "linaria"; import {useScrollDirection} from "../hooks/useScrollDirection"; import useWindowSize from "../hooks/useWindowSize"; @@ -21,6 +21,7 @@ const Container = styled.div` align-items: center; -webkit-font-smoothing: antialiased; transition: all 0.25s ease-in-out; + overflow: hidden; main { background: ${appTheme.light.colors.pageBackground}; overflow-x: hidden; @@ -69,11 +70,11 @@ const ContentContainer = styled.div` `; const LandingLayout = ({ children, seo }: Props) => { - const [prevScrollPos, setPrevScrollPos] = useState(0); const [fixed, setFixed] = useState(false) - const [animation, setAnimation] = useState(false) + const [disableAnimation, setDisableAnimation] = useState(false) const [isTopBarVisible, setIsTopBarVisible] = useState(true) const [isHeaderVisible, setIsHeaderVisible] = useState(false) + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const scrollDirection = useScrollDirection() const windowSize = useWindowSize() @@ -88,31 +89,41 @@ const LandingLayout = ({ children, seo }: Props) => { if (scrollDirection === 'up') { currentScrollPos === 0 && setFixed(currentScrollPos > totalHeight) } else { - setFixed(currentScrollPos > totalHeight) + if (!fixed && currentScrollPos > totalHeight) { + setDisableAnimation(currentScrollPos > totalHeight); + setTimeout(() => { + setDisableAnimation(false); + }, 200); + } + setFixed(currentScrollPos > totalHeight); } - setTimeout(() => { - setAnimation(currentScrollPos > totalHeight) - },100) + setIsHeaderVisible(scrollDirection === 'up') - setPrevScrollPos(currentScrollPos); - setIsTopBarVisible(currentScrollPos === 0); + + if (windowSize.width < breakpoints.brp1024) { + setIsTopBarVisible(currentScrollPos < 10); + } else { + setIsTopBarVisible(currentScrollPos === 0); + } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); - }, [prevScrollPos]); + }, [fixed, headerHeight, scrollDirection, totalHeight, windowSize.width]); return ( - -
- - -
+ +
+ + + +
+
{children} diff --git a/src/components/LandingNavigation.tsx b/src/components/LandingNavigation.tsx index 7aa9a34..163d552 100644 --- a/src/components/LandingNavigation.tsx +++ b/src/components/LandingNavigation.tsx @@ -16,8 +16,7 @@ import HamburgerIcon from '../assets/icons/hamburger'; import CrossIcon from '../assets/icons/cross'; import MobileMenu from './ui/MobileMenu'; -const LandingNavigation: FC = () => { - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); +const LandingNavigation: FC<{isOpen: boolean, setIsOpen: (value: boolean) => void}> = ({isOpen, setIsOpen}) => { const { theme } = useContext(ThemeContext); return ( @@ -36,18 +35,18 @@ const LandingNavigation: FC = () => { { - setIsMobileMenuOpen(!isMobileMenuOpen); + setIsOpen(!isOpen); }} > - {isMobileMenuOpen ? : } + {isOpen ? : } setIsMobileMenuOpen(false)} + isOpen={isOpen} + closeMobileMenu={() => setIsOpen(false)} /> ); diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx index a659d38..ecc3a59 100644 --- a/src/components/ui/styled/DesktopMenu.styled.tsx +++ b/src/components/ui/styled/DesktopMenu.styled.tsx @@ -9,24 +9,36 @@ export const Header = styled.header` display: flex; flex-direction: column; z-index: 199; - margin-bottom: -112px; background: ${appTheme.light.colors.transparent}; + transition: all 0.4s linear; &.fixed { - position: sticky; - transform: translateY(-112px); + position: fixed; + transform: translateY(-167px); + + ${media.brp1024} { + transform: translateY(-126px); + } & .blur { opacity: 1; } &.visible-header { + transform: translateY(-55px); + + ${media.brp1024} { + transform: translateY(-46px); + } + } + + &.visible-top-bar { transform: translateY(0); } } - &.animation { - transition: all 0.2s linear; + &.disable-animation { + transition: none; } & .blur { @@ -46,6 +58,16 @@ export const Header = styled.header` } `; +export const HeaderWrapper = styled.div` + width: 100%; + height: 167px; + margin-bottom: -112px; + + ${media.brp1024} { + height: 126px; + } +`; + export const HeaderBg = styled.div` position: absolute; top: 0; diff --git a/src/components/ui/styled/TopBanner.styled.tsx b/src/components/ui/styled/TopBanner.styled.tsx index 09c433a..8f5e055 100644 --- a/src/components/ui/styled/TopBanner.styled.tsx +++ b/src/components/ui/styled/TopBanner.styled.tsx @@ -18,14 +18,8 @@ export const BannerContainer = styled.a` letter-spacing: 0.02em; white-space: nowrap; width: 100%; - margin-top: -55px; - transition: all 0.4s 0.1s linear; position: relative; - &.visible-top-bar { - margin-top: 0; - } - & .banner-text { margin: 0 18px; } From 77138cbf97c0af8dc015c53dcd213ae8ba203af5 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Sun, 18 Jun 2023 15:22:41 +0200 Subject: [PATCH 17/30] Re-use landing layout in all pages --- public/sitemap-0.xml | 5 +- src/components/PageLayout.tsx | 92 ----------------------------------- src/pages/jobs.tsx | 6 +-- src/pages/what-we-do.tsx | 6 +-- 4 files changed, 9 insertions(+), 100 deletions(-) delete mode 100644 src/components/PageLayout.tsx diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml index ba48b29..9df8ba3 100644 --- a/public/sitemap-0.xml +++ b/public/sitemap-0.xml @@ -1,5 +1,6 @@ -https://nomic.foundation2023-06-14T12:00:11.441Zdaily0.7 -https://nomic.foundation/what-we-do2023-06-14T12:00:11.441Zdaily0.7 +https://nomic.foundation2023-06-18T13:21:02.789Zdaily0.7 +https://nomic.foundation/jobs2023-06-18T13:21:02.789Zdaily0.7 +https://nomic.foundation/what-we-do2023-06-18T13:21:02.789Zdaily0.7 \ No newline at end of file diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx deleted file mode 100644 index ab54513..0000000 --- a/src/components/PageLayout.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { SEOType } from '../types/commonTypes'; -import { styled } from '@linaria/react'; -import SEO from './SEO'; -import { bannerContent } from '../config'; -import TopBanner from './ui/TopBanner'; -import { appTheme, media, ThemeProvider, tmSelectors } from '../themes'; -import { Header, HeaderBg } from './ui/styled/DesktopMenu.styled'; -import LandingNavigation from './LandingNavigation'; -import LandingFooter from './ui/LandingFooter'; -import { FOOTER_CONTENT } from '../content/landing'; -import { useEffect, useState } from 'react'; - -const Container = styled.div` - position: relative; - align-items: center; - -webkit-font-smoothing: antialiased; - transition: all 0.25s ease-in-out; - main { - background: ${appTheme.light.colors.pageBackground}; - overflow-x: hidden; - padding-top: 136px; - align-items: center; - width: 100%; - ${tmSelectors.dark} { - background: ${appTheme.dark.colors.pageBackground}; - } - } - min-width: 320px; -`; - -type Props = React.PropsWithChildren<{ - seo: SEOType; -}>; - -const ContentContainer = styled.div` - margin: 0 auto; - max-width: 952px; - ${media.brp1792} { - max-width: 790px; - } - ${media.brp1440} { - max-width: 870px; - } - ${media.brp1280} { - max-width: 714px; - } - ${media.brp1024} { - max-width: 544px; - } - ${media.brp768} { - max-width: 312px; - } -`; - -const PageLayout = ({ children, seo }: Props) => { - const [isVisible, setIsVisible] = useState(true); - const [prevScrollPos, setPrevScrollPos] = useState(0); - useEffect(() => { - const handleScroll = () => { - const currentScrollPos = window.pageYOffset; - - // setIsVisible(prevScrollPos > currentScrollPos || currentScrollPos < 600); - setPrevScrollPos(currentScrollPos); - }; - - window.addEventListener('scroll', handleScroll); - - return () => window.removeEventListener('scroll', handleScroll); - }, [prevScrollPos]); - - return ( - - -
- - - -
- -
- {children} - -
- - - ); -}; - -export default PageLayout; diff --git a/src/pages/jobs.tsx b/src/pages/jobs.tsx index fedf6ca..d197cdd 100644 --- a/src/pages/jobs.tsx +++ b/src/pages/jobs.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import type { NextPage } from 'next'; import { useEffect } from 'react'; -import PageLayout from '../components/PageLayout'; +import LandingLayout from '../components/LandingLayout'; import { appTheme, media, tmSelectors } from '../themes'; const JobsContainer = styled.section` @@ -29,7 +29,7 @@ const AshbyJobBoardEmbed = () => { const Jobs: NextPage = () => { return ( - { - + ); }; diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 73cd9f4..1187600 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import type { NextPage } from 'next'; -import PageLayout from '../components/PageLayout'; +import LandingLayout from '../components/LandingLayout'; import { appTheme, media, tmSelectors } from '../themes'; const WhatWeDoContainer = styled.section` @@ -133,7 +133,7 @@ const Link = styled.a` const WhatWeDo: NextPage = () => { return ( - { - + ); }; From ada30edc7e3419714108e4625188a8655f1fcc10 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Sun, 18 Jun 2023 17:11:58 +0200 Subject: [PATCH 18/30] Make What we do page match the design --- src/pages/what-we-do.tsx | 82 ++++++++++++++++++++++------------------ 1 file changed, 46 insertions(+), 36 deletions(-) diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 1187600..b7fb470 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -6,33 +6,41 @@ import { appTheme, media, tmSelectors } from '../themes'; const WhatWeDoContainer = styled.section` position: relative; - width: 100%; -`; + max-width: 952px; -const WhatWeDoContentSection = styled.section` - z-index: 1; - padding: 42px 0px 0px; - width: 100%; - min-width: min-content; - max-width: 100%; ${media.brp1792} { - padding: 40px 0px 0px; + max-width: 790px; + font-size: 19px; + } + ${media.brp1440} { + max-width: 870px; + font-size: 16px; } ${media.brp1280} { - padding: 32px 0px 0px; + max-width: 714px; } ${media.brp1024} { - padding: 16px 0px 0px; + max-width: 544px; + font-size: 14px; } ${media.brp768} { - padding: 16px 0px 0px; + max-width: 312px; + font-size: 14px; } `; +const WhatWeDoContentSection = styled.section` + z-index: 1; + padding: 42px 0px 0px; + width: 100%; + min-width: min-content; + max-width: 100%; +`; + const WhatWeDoTitle = styled.h1` font-weight: 400; font-size: 57px; - line-height: 125%; + line-height: 71.25px; padding-bottom: 32px; background: ${appTheme.light.colors.titleBg}; @@ -45,21 +53,22 @@ const WhatWeDoTitle = styled.h1` -webkit-text-fill-color: transparent; background-clip: text; } - ${media.brp1440} { + + ${media.brp1792} { font-size: 48px; - line-height: 125%; + line-height: 60px; } - ${media.brp1280} { + ${media.brp1440} { font-size: 40px; - line-height: 125%; + line-height: 50px; } - ${media.brp768} { + ${media.brp1024} { font-size: 33px; - line-height: 125%; + line-height: 41.25px; } - ${media.brp360} { + ${media.brp768} { font-size: 28px; - line-height: 125%; + line-height: 36.4px; padding-bottom: 24px; } `; @@ -67,24 +76,25 @@ const WhatWeDoTitle = styled.h1` const WhatWeDoParagraph = styled.p` font-weight: 300; font-size: 23px; - line-height: 140%; + line-height: 32.2px; letter-spacing: 0.03em; color: ${appTheme.light.colors.font150}; padding-bottom: 16px; - ${media.brp1440} { + ${media.brp1792} { font-size: 19px; - line-height: 150%; + line-height: 28.5px; } - ${media.brp1280} { + ${media.brp1440} { font-size: 16px; - line-height: 150%; + line-height: 24px; } - ${media.brp768} { + ${media.brp1024} { font-size: 14px; - line-height: 150%; + line-height: 21px; } + ${tmSelectors.dark} { color: ${appTheme.dark.colors.font250}; } @@ -93,8 +103,7 @@ const WhatWeDoParagraph = styled.p` const WhatWeDoSectionTitle = styled.h2` font-weight: 400; font-size: 28px; - line-height: 140%; - + line-height: 39.2px; padding-top: 16px; padding-bottom: 8px; @@ -108,17 +117,18 @@ const WhatWeDoSectionTitle = styled.h2` -webkit-text-fill-color: transparent; background-clip: text; } - ${media.brp1280} { + + ${media.brp1440} { font-size: 23px; - line-height: 140%; + line-height: 32.2px; } - ${media.brp768} { + ${media.brp1024} { font-size: 20px; - line-height: 150%; + line-height: 30px; } - ${media.brp360} { + ${media.brp768} { font-size: 19px; - line-height: 150%; + line-height: 28.5px; padding-top: 8px; } `; From 3d02cd317f0ca66e8a8c7f6ccd82bb86f20b4d03 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Sun, 18 Jun 2023 17:31:28 +0200 Subject: [PATCH 19/30] Fix the ashby embed width --- src/pages/jobs.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/pages/jobs.tsx b/src/pages/jobs.tsx index d197cdd..78d7468 100644 --- a/src/pages/jobs.tsx +++ b/src/pages/jobs.tsx @@ -7,7 +7,23 @@ import { appTheme, media, tmSelectors } from '../themes'; const JobsContainer = styled.section` position: relative; - width: 100%; + width: 952px; + + ${media.brp1792} { + width: 790px; + } + ${media.brp1440} { + width: 870px; + } + ${media.brp1280} { + width: 714px; + } + ${media.brp1024} { + width: 544px; + } + ${media.brp768} { + width: 312px; + } `; From 54061aeb45feb97a11cf098bdef5dac4cc447a46 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Sun, 18 Jun 2023 17:51:45 +0200 Subject: [PATCH 20/30] Highlight current page in navbar --- src/components/ui/DesktopMenu.tsx | 20 ++++++++++++++----- .../ui/styled/DesktopMenu.styled.tsx | 7 +++++++ src/config.ts | 4 ++-- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/ui/DesktopMenu.tsx b/src/components/ui/DesktopMenu.tsx index a361ec9..ba0962d 100644 --- a/src/components/ui/DesktopMenu.tsx +++ b/src/components/ui/DesktopMenu.tsx @@ -1,4 +1,5 @@ import Link from 'next/link'; +import { useRouter } from 'next/router'; import { socialsItems } from '../../config'; import { MenuItemType } from '../../types/commonTypes'; import Socials from '../Socials'; @@ -7,6 +8,7 @@ import { DesktopMenuContainer, MenuItem, MenuItemsContainer, + SelectedMenuItem, } from './styled/DesktopMenu.styled'; type Props = { @@ -14,15 +16,23 @@ type Props = { socialsItems: typeof socialsItems; }; -const DesktopMenu = ({ menuItems }: Props) => ( - +const DesktopMenu = ({ menuItems }: Props) => { + const router = useRouter(); + + return {menuItems.map((menuItem) => { const target = menuItem.href.startsWith("http") ? "_blank" : undefined; + + let MenuItemComponent = MenuItem; + if (menuItem.href === router.pathname) { + MenuItemComponent = SelectedMenuItem; + } + return ( - + {menuItem.label} - + ); })} @@ -32,6 +42,6 @@ const DesktopMenu = ({ menuItems }: Props) => (
-); +}; export default DesktopMenu; diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx index ecc3a59..33fed85 100644 --- a/src/components/ui/styled/DesktopMenu.styled.tsx +++ b/src/components/ui/styled/DesktopMenu.styled.tsx @@ -117,6 +117,13 @@ export const MenuItem = styled.li` } `; +export const SelectedMenuItem = styled(MenuItem)` + color: ${appTheme.light.colors.font200}; + ${tmSelectors.dark} { + color: ${appTheme.dark.colors.font100}; + } +`; + export const SocialsContainer = styled.section` display: flex; align-items: center; diff --git a/src/config.ts b/src/config.ts index e4a2938..a718a44 100644 --- a/src/config.ts +++ b/src/config.ts @@ -21,11 +21,11 @@ export const menuItemsList: MenuItemType[] = [ }, { label: 'Slang', - href: '/', + href: '/slang', }, { label: 'Rethnet', - href: '/', + href: '/rethnet', }, { label: 'Jobs', From a71294adec191ca992c669aac35a048f34c8949a Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Sun, 18 Jun 2023 17:59:33 +0200 Subject: [PATCH 21/30] Add google analytics --- src/pages/_app.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4c55088..c5c4fb9 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,17 @@ import '../styles/globals.css'; import { AppProps } from 'next/app'; +import Script from 'next/script'; export default function App({ Component, pageProps }: AppProps) { - return ; + return <> + + + } From 68d2c00693c2ab26c86e82c7f550c90edc0add12 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Mon, 19 Jun 2023 13:56:26 +0200 Subject: [PATCH 22/30] Set pargraphs font weight to 200 --- src/pages/what-we-do.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index b7fb470..1c1565f 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -74,7 +74,7 @@ const WhatWeDoTitle = styled.h1` `; const WhatWeDoParagraph = styled.p` - font-weight: 300; + font-weight: 200; font-size: 23px; line-height: 32.2px; letter-spacing: 0.03em; From e6570720063b5a5b4e5df12575e72bf869a5dd1a Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Mon, 19 Jun 2023 13:56:39 +0200 Subject: [PATCH 23/30] Use proper colors in links --- src/pages/what-we-do.tsx | 14 ++++---------- src/themes.tsx | 2 ++ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 1c1565f..3d32708 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -107,15 +107,9 @@ const WhatWeDoSectionTitle = styled.h2` padding-top: 16px; padding-bottom: 8px; - background: ${appTheme.light.colors.titleBg}; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: ${appTheme.light.colors.font150}; ${tmSelectors.dark} { - background: ${appTheme.dark.colors.titleBg}; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: ${appTheme.dark.colors.font250}; } ${media.brp1440} { @@ -135,9 +129,9 @@ const WhatWeDoSectionTitle = styled.h2` const Link = styled.a` text-decoration: underline; - text-decoration-color: ${appTheme.light.colors.font150}; + color: ${appTheme.light.colors.link}; ${tmSelectors.dark} { - text-decoration-color: ${appTheme.dark.colors.font250}; + color: ${appTheme.dark.colors.link}; } ` diff --git a/src/themes.tsx b/src/themes.tsx index f239724..fe84466 100644 --- a/src/themes.tsx +++ b/src/themes.tsx @@ -65,6 +65,7 @@ export const lightPalette = { navbarBlur: '#ffffffb2', border100: '#DCDCE1', buttonShadow: '#EFEFEF', + link: '#61626B', }; export const darkPalette = { @@ -98,6 +99,7 @@ export const darkPalette = { navbarBlur: '#13141ACC', border100: '#13141A', buttonShadow: '#13141A7F', + link: '#B0B0B8', } as Palette; type Palette = typeof lightPalette; From 171d66f135ff219fb6faa19c680e888f34e61a45 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Mon, 19 Jun 2023 18:27:12 +0200 Subject: [PATCH 24/30] Link jobs to Ashby site --- next.config.js | 9 +++++++++ src/config.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/next.config.js b/next.config.js index 7841825..cd5087b 100644 --- a/next.config.js +++ b/next.config.js @@ -20,6 +20,15 @@ const linariaConfig = withLinaria({ images: { dangerouslyAllowSVG: true, }, + // temporary until we figure out how to make the embed work + // in both light and dark mode + async redirects() { + return [{ + source: '/jobs', + destination: 'https://jobs.ashbyhq.com/nomic.foundation', + permanent: false, + }]; + }, }); module.exports = withPlugins([linariaConfig, withBundleAnalyzer]); diff --git a/src/config.ts b/src/config.ts index a718a44..6f9e7ba 100644 --- a/src/config.ts +++ b/src/config.ts @@ -29,7 +29,7 @@ export const menuItemsList: MenuItemType[] = [ }, { label: 'Jobs', - href: '/jobs', + href: 'https://jobs.ashbyhq.com/nomic.foundation', }, ]; From 52271d938811423862205d0950b1b11216d48ce3 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Mon, 19 Jun 2023 19:02:40 +0200 Subject: [PATCH 25/30] Add underline for current page menu item --- src/components/ui/styled/DesktopMenu.styled.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx index 33fed85..f60d850 100644 --- a/src/components/ui/styled/DesktopMenu.styled.tsx +++ b/src/components/ui/styled/DesktopMenu.styled.tsx @@ -122,6 +122,13 @@ export const SelectedMenuItem = styled(MenuItem)` ${tmSelectors.dark} { color: ${appTheme.dark.colors.font100}; } + + a { + padding-bottom: 8px; + border-bottom: 1px solid transparent; + border-image: linear-gradient(to right, #CACAD2, transparent); + border-image-slice: 1; + } `; export const SocialsContainer = styled.section` From 88a532791d9be8499a8b59a7c37d46b7b70d6fc1 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Mon, 19 Jun 2023 19:07:31 +0200 Subject: [PATCH 26/30] Fix footer height --- src/components/ui/styled/LandingFooter.styled.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ui/styled/LandingFooter.styled.tsx b/src/components/ui/styled/LandingFooter.styled.tsx index 7936074..64b195e 100644 --- a/src/components/ui/styled/LandingFooter.styled.tsx +++ b/src/components/ui/styled/LandingFooter.styled.tsx @@ -5,7 +5,7 @@ export const StyledLandingFooter = styled.footer` z-index: 100; width: 100%; background: ${appTheme.light.colors.footerBg}; - padding: 36px 176px; + padding: 32px 176px; display: flex; justify-content: space-between; align-items: center; @@ -14,17 +14,17 @@ export const StyledLandingFooter = styled.footer` background: ${appTheme.dark.colors.footerBg}; } ${media.brp1792} { - padding: 36px 120px; + padding: 32px 120px; } ${media.brp1280} { - padding: 36px 56px; + padding: 32px 56px; } ${media.brp1024} { - padding: 36px 48px; + padding: 32px 48px; margin-top: 100px; } ${media.brp768} { - padding: 36px 24px; + padding: 32px 24px; flex-direction: column-reverse; } `; From c26372c0c6cbf53f30d9416642071fecae98e0c4 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Mon, 19 Jun 2023 19:19:43 +0200 Subject: [PATCH 27/30] Fix distance between content and footer --- src/components/LandingLayout.tsx | 5 +++-- src/components/ui/LandingFooter.tsx | 11 ++++++++--- src/components/ui/styled/LandingFooter.styled.tsx | 10 ++++++++++ src/pages/index.tsx | 1 + src/pages/jobs.tsx | 1 + src/pages/what-we-do.tsx | 1 + 6 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/components/LandingLayout.tsx b/src/components/LandingLayout.tsx index 9861116..9ec8cb2 100644 --- a/src/components/LandingLayout.tsx +++ b/src/components/LandingLayout.tsx @@ -40,6 +40,7 @@ const Container = styled.div` `; type Props = React.PropsWithChildren<{ + isLanding: boolean; seo: SEOType; }>; @@ -69,7 +70,7 @@ const ContentContainer = styled.div` } `; -const LandingLayout = ({ children, seo }: Props) => { +const LandingLayout = ({ children, seo, isLanding }: Props) => { const [fixed, setFixed] = useState(false) const [disableAnimation, setDisableAnimation] = useState(false) const [isTopBarVisible, setIsTopBarVisible] = useState(true) @@ -127,7 +128,7 @@ const LandingLayout = ({ children, seo }: Props) => {
{children} - +
diff --git a/src/components/ui/LandingFooter.tsx b/src/components/ui/LandingFooter.tsx index 5bb835b..4f1a5ee 100644 --- a/src/components/ui/LandingFooter.tsx +++ b/src/components/ui/LandingFooter.tsx @@ -10,9 +10,11 @@ import { LogoWrapper, SocialsWrapper, StyledLandingFooter, + StyledPageFooter, } from './styled/LandingFooter.styled'; type Props = { + isLanding: boolean; content: { copyright: string; privacy: { @@ -22,10 +24,13 @@ type Props = { }; }; -const LandingFooter = ({ content }: Props) => { +const LandingFooter = ({ content, isLanding }: Props) => { const target = content.privacy.href.startsWith("http") ? "_blank" : undefined; + + const StyledFooter = isLanding ? StyledLandingFooter : StyledPageFooter; + return ( - + @@ -40,7 +45,7 @@ const LandingFooter = ({ content }: Props) => { | {content.privacy.text} - + ); }; diff --git a/src/components/ui/styled/LandingFooter.styled.tsx b/src/components/ui/styled/LandingFooter.styled.tsx index 64b195e..8872222 100644 --- a/src/components/ui/styled/LandingFooter.styled.tsx +++ b/src/components/ui/styled/LandingFooter.styled.tsx @@ -29,6 +29,16 @@ export const StyledLandingFooter = styled.footer` } `; +export const StyledPageFooter = styled(StyledLandingFooter)` + margin-top: 160px; + ${media.brp1440} { + margin-top: 120px; + } + ${media.brp1024} { + margin-top: 80px; + } +`; + export const LandingFooterContent = styled.section` display: flex; align-items: center; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dd5149e..ba9cac6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,6 +16,7 @@ import { const Home: NextPage = () => { return ( { const Jobs: NextPage = () => { return ( { return ( Date: Mon, 19 Jun 2023 19:34:09 +0200 Subject: [PATCH 28/30] Fix navigation height and distance to content --- src/components/LandingLayout.tsx | 2 +- src/pages/what-we-do.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LandingLayout.tsx b/src/components/LandingLayout.tsx index 9ec8cb2..ac0ebad 100644 --- a/src/components/LandingLayout.tsx +++ b/src/components/LandingLayout.tsx @@ -25,7 +25,7 @@ const Container = styled.div` main { background: ${appTheme.light.colors.pageBackground}; overflow-x: hidden; - padding-top: 106px; + padding-top: 112px; flex: 1 1 auto; display: flex; flex-direction: column; diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx index 4fa62f7..7d3fcf4 100644 --- a/src/pages/what-we-do.tsx +++ b/src/pages/what-we-do.tsx @@ -31,7 +31,7 @@ const WhatWeDoContainer = styled.section` const WhatWeDoContentSection = styled.section` z-index: 1; - padding: 42px 0px 0px; + padding: 40px 0px 0px; width: 100%; min-width: min-content; max-width: 100%; From 4bd1843227e65454d0a93b0c3e87ea18c5206efa Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Wed, 21 Jun 2023 12:07:49 +0200 Subject: [PATCH 29/30] Add missing urls --- src/config.ts | 5 +++-- src/constants.ts | 2 ++ src/content/landing.ts | 7 ++++--- 3 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 src/constants.ts diff --git a/src/config.ts b/src/config.ts index 6f9e7ba..f3f6e16 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,5 +1,6 @@ import MediumIcon from './assets/socials/medium'; import TwitterIcon from './assets/socials/twitter'; +import { RETHNET_URL, SLANG_URL } from './constants'; import { MenuItemType, SocialsEnum } from './types/commonTypes'; export const BANNER_LINK = @@ -21,11 +22,11 @@ export const menuItemsList: MenuItemType[] = [ }, { label: 'Slang', - href: '/slang', + href: SLANG_URL, }, { label: 'Rethnet', - href: '/rethnet', + href: RETHNET_URL, }, { label: 'Jobs', diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..1779338 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,2 @@ +export const SLANG_URL = "https://github.com/NomicFoundation/slang"; +export const RETHNET_URL = "https://github.com/NomicFoundation/rethnet"; diff --git a/src/content/landing.ts b/src/content/landing.ts index cd1eac9..4ced97e 100644 --- a/src/content/landing.ts +++ b/src/content/landing.ts @@ -16,6 +16,7 @@ import CoinbaseLogo from '../assets/supporters/coinbase-logo'; import GnosisLogo from '../assets/supporters/gnosis-logo'; import YearnLogo from '../assets/supporters/yearn-logo'; import UniswapLogo from '../assets/supporters/uniswap-logo'; +import { RETHNET_URL, SLANG_URL } from '../constants'; const { HardhatIcon, @@ -89,7 +90,7 @@ export const PROJECTS_BLOCK_CONTENT = { title: 'Slang', text: 'A modular set of compiler APIs empowering the next generation of Solidity code analysis and developer tooling. Written in Rust and distributed in multiple languages.', cta: { - href: '/', + href: SLANG_URL, label: 'Learn more', }, Icon: SlangIcon, @@ -103,7 +104,7 @@ export const PROJECTS_BLOCK_CONTENT = { title: 'Rethnet', text: 'An Ethereum development runtime implementation that can be reused to build new developer tools.', cta: { - href: '/', + href: RETHNET_URL, label: 'Learn more', }, Icon: RethnetIcon, @@ -120,7 +121,7 @@ export const WORK_WITH_US_CONTENT = { title: 'Work with us', text: 'A small remote team working on hard engineering challenges that drive meaningful impact in the Ethereum ecosystem. Autonomy, trust, kindness, and high standards.', cta: { - href: '/jobs', + href: 'https://jobs.ashbyhq.com/nomic.foundation', label: 'Learn more', }, }; From 5ed9a6e01f5c5bff739a3e354aad113ae21dfae3 Mon Sep 17 00:00:00 2001 From: Franco Victorio Date: Wed, 21 Jun 2023 12:17:39 +0200 Subject: [PATCH 30/30] Hide who-we-are button --- src/components/landingBlocks/WhoWeAreBlock.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/landingBlocks/WhoWeAreBlock.tsx b/src/components/landingBlocks/WhoWeAreBlock.tsx index f07f097..f14794c 100644 --- a/src/components/landingBlocks/WhoWeAreBlock.tsx +++ b/src/components/landingBlocks/WhoWeAreBlock.tsx @@ -27,9 +27,11 @@ const WhoWeAre = ({ content }: Props) => { + {/*