mirror of
https://github.com/uetchy/namae.git
synced 2025-03-17 04:30:31 +09:00
fix: add integration section
This commit is contained in:
parent
18d956abb1
commit
f86bcaa05a
@ -57,7 +57,7 @@ const Welcome: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Hero>
|
<Section>
|
||||||
<HeroTitle>{t('title')}</HeroTitle>
|
<HeroTitle>{t('title')}</HeroTitle>
|
||||||
<HeroText>{t('description')}</HeroText>
|
<HeroText>{t('description')}</HeroText>
|
||||||
<ButtonContainer>
|
<ButtonContainer>
|
||||||
@ -69,21 +69,25 @@ const Welcome: React.FC = () => {
|
|||||||
</ListButton>
|
</ListButton>
|
||||||
</List>
|
</List>
|
||||||
</ButtonContainer>
|
</ButtonContainer>
|
||||||
</Hero>
|
</Section>
|
||||||
<HighlightedList>
|
<HighlightSection>
|
||||||
{Object.keys(supportedProviders).map((key) => (
|
{Object.keys(supportedProviders).map((key) => (
|
||||||
<ListItem key={key}>
|
<ListItem key={key}>
|
||||||
{supportedProviders[key]} {t(`providers.${key}`)}
|
{supportedProviders[key]} {t(`providers.${key}`)}
|
||||||
</ListItem>
|
</ListItem>
|
||||||
))}
|
))}
|
||||||
</HighlightedList>
|
</HighlightSection>
|
||||||
|
<Section>
|
||||||
|
<Title>Integrations</Title>
|
||||||
|
<blockquote>Soon</blockquote>
|
||||||
|
</Section>
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Welcome;
|
export default Welcome;
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
margin-top: 30px;
|
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@ -91,13 +95,38 @@ const Container = styled.div`
|
|||||||
${mobile} {
|
${mobile} {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 1.2rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const HeroTitle = styled.h1`
|
const Section = styled.div`
|
||||||
padding-bottom: 30px;
|
padding: 100px 20vw;
|
||||||
line-height: 1em;
|
|
||||||
|
${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-size: 5rem;
|
||||||
font-weight: 700;
|
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`
|
const HeroText = styled.p`
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -113,17 +147,6 @@ const HeroText = styled.p`
|
|||||||
color: #3c3c3c;
|
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`
|
const ButtonContainer = styled.div`
|
||||||
margin: 10px 0 0 0;
|
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`
|
const ListItem = styled.div`
|
||||||
margin: 20px 25px;
|
margin: 20px 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -219,7 +219,8 @@ export const Result: React.FC<{
|
|||||||
<OutboundLink
|
<OutboundLink
|
||||||
to={link}
|
to={link}
|
||||||
eventLabel={link.split('/')[2]}
|
eventLabel={link.split('/')[2]}
|
||||||
target="_blank">
|
target="_blank"
|
||||||
|
>
|
||||||
{content}
|
{content}
|
||||||
</OutboundLink>
|
</OutboundLink>
|
||||||
) : (
|
) : (
|
||||||
@ -274,7 +275,8 @@ class ErrorBoundary extends React.Component<
|
|||||||
this.state.eventId ? ` (${this.state.eventId})` : ''
|
this.state.eventId ? ` (${this.state.eventId})` : ''
|
||||||
}`}
|
}`}
|
||||||
placement="top"
|
placement="top"
|
||||||
trigger={['hover']}>
|
trigger={['hover']}
|
||||||
|
>
|
||||||
<ResultItem color={COLORS.error}>
|
<ResultItem color={COLORS.error}>
|
||||||
<ResultIcon>
|
<ResultIcon>
|
||||||
<GoInfo />
|
<GoInfo />
|
||||||
@ -296,7 +298,8 @@ const ErrorHandler: React.FC = ({ children }) => (
|
|||||||
<ResultContainer>
|
<ResultContainer>
|
||||||
<BarLoader />
|
<BarLoader />
|
||||||
</ResultContainer>
|
</ResultContainer>
|
||||||
}>
|
}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user