diff --git a/landing/investor-profile.css b/landing/investor-profile.css new file mode 100644 --- /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.investmentDate { + font-weight: 500; + font-size: 14px; +} diff --git a/landing/investor-profile.react.js b/landing/investor-profile.react.js new file mode 100644 --- /dev/null +++ b/landing/investor-profile.react.js @@ -0,0 +1,31 @@ +// @flow + +import * as React from 'react'; + +import css from './investor-profile.css'; + +type Props = { + +name: string, + +description: string, + +investmentDate: string, + +imageURL: string, +}; + +function InvestorProfile(props: Props): React.Node { + const { name, description, investmentDate, imageURL } = props; + + return ( +
+ {`image +
+

{name}

+

{description}

+

+ Initally Invested in {investmentDate} +

+
+
+ ); +} + +export default InvestorProfile; diff --git a/landing/investors.css b/landing/investors.css --- a/landing/investors.css +++ b/landing/investors.css @@ -28,6 +28,19 @@ ); } +.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; diff --git a/landing/investors.react.js b/landing/investors.react.js --- a/landing/investors.react.js +++ b/landing/investors.react.js @@ -16,6 +16,8 @@ our community as investors.

+ +
);