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}`)}
))}
-
+
+
);
};
+
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}