diff --git a/landing/footer.react.js b/landing/footer.react.js index 6f3bd8939..195cc2deb 100644 --- a/landing/footer.react.js +++ b/landing/footer.react.js @@ -1,66 +1,69 @@ // @flow import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; import { NavLink } from 'react-router-dom'; import css from './footer.css'; import SubscriptionForm from './subscription-form.react'; const navLinkProps = { activeStyle: { color: 'white', fontWeight: '500', }, }; function Footer(): React.Node { return ( ); } export default Footer; diff --git a/landing/investors.css b/landing/investors.css new file mode 100644 index 000000000..0fe2a8b83 --- /dev/null +++ b/landing/investors.css @@ -0,0 +1,41 @@ +.wrapper { + padding: 16px 0; + margin: 0 auto 48px auto; + max-width: 1200px; +} + +.header { + font-family: 'iA Writer Duo S', monospace; + font-weight: 500; + line-height: 1.35; + text-align: center; + --scale: calc(0.75rem + 2vw); + --smallest-font-size: 30px; + --largest-font-size: 50px; + --smallest-padding-size: 32px; + --largest-padding-size: 64px; + + padding-bottom: clamp( + var(--smallest-padding-size), + var(--scale), + var(--largest-padding-size) + ); + + font-size: clamp( + var(--smallest-font-size), + var(--scale), + var(--largest-font-size) + ); +} + +div.headingContainer { + text-align: center; + padding-bottom: 72px; +} + +p.subtitle { + max-width: 60ch; + margin: 0 auto; + padding: 0 16px 36px 16px; + font-size: 1.6rem; +} diff --git a/landing/investors.react.js b/landing/investors.react.js new file mode 100644 index 000000000..1d0f4a7bc --- /dev/null +++ b/landing/investors.react.js @@ -0,0 +1,24 @@ +// @flow + +import * as React from 'react'; + +import css from './investors.css'; + +function Investors(): React.Node { + return ( +
+

Investors

+ +
+
+

+ Comm is proud to count over 80 individuals & organizations from + our community as investors. +

+
+
+
+ ); +} + +export default Investors; diff --git a/landing/landing.react.js b/landing/landing.react.js index 3541347b8..e288139af 100644 --- a/landing/landing.react.js +++ b/landing/landing.react.js @@ -1,69 +1,82 @@ // @flow import * as React from 'react'; import { useRouteMatch } from 'react-router-dom'; import AppLanding from './app-landing.react'; import Footer from './footer.react'; import Header from './header.react'; +import Investors from './investors.react'; import Keyservers from './keyservers.react'; import Privacy from './privacy.react'; import QR from './qr.react'; import SIWE from './siwe.react'; import Support from './support.react'; import Team from './team.react'; import Terms from './terms.react'; import useScrollToTopOnNavigate from './use-scroll-to-top-on-navigate.react'; import './reset.css'; import './global.css'; function Landing(): React.Node { useScrollToTopOnNavigate(); const onPrivacy = useRouteMatch({ path: '/privacy' }); const onTerms = useRouteMatch({ path: '/terms' }); const onSupport = useRouteMatch({ path: '/support' }); const onKeyservers = useRouteMatch({ path: '/keyservers' }); const onQR = useRouteMatch({ path: '/qr' }); const onTeam = useRouteMatch({ path: '/team' }); + const onInvestors = useRouteMatch({ path: '/investors' }); const onSIWE = useRouteMatch({ path: '/siwe' }); const activePage = React.useMemo(() => { if (onPrivacy) { return ; } else if (onTerms) { return ; } else if (onSupport) { return ; } else if (onKeyservers) { return ; } else if (onQR) { return ; } else if (onSIWE) { return ; } else if (onTeam) { return ; + } else if (onInvestors) { + return ; } else { return ; } - }, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onQR, onSIWE]); + }, [ + onKeyservers, + onPrivacy, + onSupport, + onTerms, + onTeam, + onInvestors, + onQR, + onSIWE, + ]); let header =
; if (onQR || onSIWE) { header = null; } let footer =