diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx index 884f5d5..4f3e3e4 100644 --- a/src/components/Welcome.tsx +++ b/src/components/Welcome.tsx @@ -57,7 +57,7 @@ const Welcome: React.FC = () => { return ( - +
{t('title')} {t('description')} @@ -69,21 +69,25 @@ const Welcome: React.FC = () => { - - +
+ {Object.keys(supportedProviders).map((key) => ( {supportedProviders[key]} {t(`providers.${key}`)} ))} - + +
+ Integrations +
Soon
+
); }; + export default Welcome; const Container = styled.div` - margin-top: 30px; padding-bottom: 40px; text-align: center; font-size: 1.5rem; @@ -91,13 +95,38 @@ const Container = styled.div` ${mobile} { margin-top: 0px; text-align: left; - font-size: 1.2rem; + font-size: 1.1rem; } `; -const HeroTitle = styled.h1` - padding-bottom: 30px; - line-height: 1em; +const Section = styled.div` + padding: 100px 20vw; + + ${mobile} { + padding: 60px 40px; + } +`; + +const HighlightSection = styled.div` + padding: 100px 20vw; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + + ${mobile} { + flex-direction: column; + padding: 40px 40px 60px; + } + + color: white; + /* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */ + background: #632bec; +`; + +const Title = styled.h1` + line-height: 1.6em; font-size: 5rem; font-weight: 700; @@ -106,6 +135,11 @@ const HeroTitle = styled.h1` } `; +const HeroTitle = styled(Title)` + padding-bottom: 30px; + line-height: 1em; +`; + const HeroText = styled.p` font-size: 1.2em; font-weight: 400; @@ -113,17 +147,6 @@ const HeroText = styled.p` color: #3c3c3c; `; -const Hero = styled.div` - margin-right: 20vw; - margin-left: 20vw; - - ${mobile} { - margin: inherit; - padding-right: 20px; - padding-left: 20px; - } -`; - const ButtonContainer = styled.div` margin: 10px 0 0 0; `; @@ -141,26 +164,6 @@ const List = styled.div` } `; -const HighlightedList = styled.div` - margin-top: 100px; - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - - ${mobile} { - flex-direction: column; - margin-top: 50px; - padding: 20px; - } - - padding: 50px 20vw 50px 20vw; - color: white; - /* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */ - background: #632bec; -`; - const ListItem = styled.div` margin: 20px 25px; display: flex; diff --git a/src/components/cards/core.tsx b/src/components/cards/core.tsx index e0a9586..093d982 100644 --- a/src/components/cards/core.tsx +++ b/src/components/cards/core.tsx @@ -219,7 +219,8 @@ export const Result: React.FC<{ + target="_blank" + > {content} ) : ( @@ -274,7 +275,8 @@ class ErrorBoundary extends React.Component< this.state.eventId ? ` (${this.state.eventId})` : '' }`} placement="top" - trigger={['hover']}> + trigger={['hover']} + > @@ -296,7 +298,8 @@ const ErrorHandler: React.FC = ({ children }) => ( - }> + } + > {children}