diff --git a/landing/investor-profile.css b/landing/investor-profile.css new file mode 100644 index 000000000..1e722efb2 --- /dev/null +++ b/landing/investor-profile.css @@ -0,0 +1,45 @@ +.profile { + display: flex; + flex-direction: row; + width: 576px; + border-radius: 20px; + padding: 40px 32px; + background-color: #7e57c221; + box-shadow: 0px 4px 4px #00000040, inset 0px 0px 12px 5px #7e57c24d; +} + +.profile img { + border-radius: 72px; + max-width: 144px; + max-height: 144px; + filter: saturate(0); + align-self: center; +} + +div.investorInfoContainer { + margin-left: 32px; + display: flex; + flex-direction: column; +} + +p.name { + font-size: 24px; + font-weight: 500; + margin-bottom: 12px; +} + +p.description { + font-size: 18px; + margin-bottom: 40px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + height: 56px; +} + +p.involvement { + font-weight: 500; + font-size: 14px; +} diff --git a/landing/investor-profile.react.js b/landing/investor-profile.react.js new file mode 100644 index 000000000..0b27f69c6 --- /dev/null +++ b/landing/investor-profile.react.js @@ -0,0 +1,29 @@ +// @flow + +import * as React from 'react'; + +import css from './investor-profile.css'; + +type Props = { + +name: string, + +description: string, + +involvement: ?string, + +imageURL: string, +}; + +function InvestorProfile(props: Props): React.Node { + const { name, description, involvement, imageURL } = props; + + return ( +
+ {`image +
+

{name}

+

{description}

+

{involvement}

+
+
+ ); +} + +export default InvestorProfile; diff --git a/landing/investors.css b/landing/investors.css index 0fe2a8b83..697fd674a 100644 --- a/landing/investors.css +++ b/landing/investors.css @@ -1,41 +1,54 @@ .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) ); } +.investorContainer { + transition-property: max-width; + transition: 300ms; + display: flex; + flex-wrap: wrap; + row-gap: 24px; + column-gap: 32px; + justify-content: center; + min-width: 320px; + margin: 0 auto; + padding-bottom: 72px; +} + 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 index 1d0f4a7bc..7d903299d 100644 --- a/landing/investors.react.js +++ b/landing/investors.react.js @@ -1,24 +1,26 @@ // @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;