import React from 'react' ; import { useTranslation } from 'react-i18next' ; import { DiHeroku } from 'react-icons/di' ; import { FaAws , FaGithub , FaGithubAlt , FaGitlab , FaJsSquare , FaPython , FaSlack , FaTwitter , } from 'react-icons/fa' ; import { IoIosBeer , IoMdAppstore } from 'react-icons/io' ; import { MdDomain } from 'react-icons/md' ; import { RiBuilding2Fill , RiNpmjsFill } from 'react-icons/ri' ; import { SiAppstore , SiArchlinux , SiDebian , SiFirebase , SiRubygems , SiRust , SiUbuntu , } from 'react-icons/si' ; import { Link } from 'react-router-dom' ; import styled from 'styled-components' ; import { sendGettingStartedEvent } from '../util/analytics' ; import { mobile } from '../util/css' ; import { NetlifyIcon , NowIcon , OcamlIcon , SpectrumIcon } from './Icons' ; const supportedProviders = { domains : < MdDomain />, github : < FaGithub />, gitlab : < FaGitlab />, twitter : < FaTwitter />, homebrew : < IoIosBeer />, npm : < RiNpmjsFill />, rust : < SiRust />, pypi : < FaPython />, rubygems : < SiRubygems />, ocaml : < OcamlIcon />, archlinux : < SiArchlinux />, ubuntu : < SiUbuntu />, debian : < SiDebian />, slack : < FaSlack />, spectrum : < SpectrumIcon />, heroku : < DiHeroku />, now : < NowIcon />, netlify : < NetlifyIcon />, s3 : < FaAws />, firebase : < SiFirebase />, jsorg : < FaJsSquare />, githubSearch : < FaGithubAlt />, appStore : < SiAppstore />, playStore : < IoMdAppstore />, nta : < RiBuilding2Fill />, } ; const Welcome = ( ) => { const { t } = useTranslation ( ) ; return ( < Container > < Section > < HeroTitle > { t ( 'title' ) } < /HeroTitle> < HeroText > { t ( 'description' ) } < /HeroText> < ButtonContainer > < List > < ListButton > < Link to = "/s/namae" onClick = { ( ) => sendGettingStartedEvent ( ) } > { t ( 'gettingStartedWithExample' ) } < /Link> < /ListButton> < /List> < /ButtonContainer> < /Section> < HighlightSection > { Object . keys ( supportedProviders ) . map ( ( key ) => ( < ListItem key = { key } > { supportedProviders [ key ] } { t ( `providers.${ key } `)}
          </ListItem>))}
      </HighlightSection>
      {/* <Section>
          <Title>Integrations</Title>
          <blockquote>Soon</blockquote>
        </Section> */}
    </Container>);
};
export default Welcome;
const Container = styled.div ` text - align : center ; font - size : 1.5 rem ; $ { mobile } { margin - top : 0 px ; text - align : left ; font - size : 1.1 rem ; } `;
const Section = styled.div ` padding : 40 px 20 vw 100 px ; $ { mobile } { padding : 60 px 40 px ; } `;
const HighlightSection = styled.div ` padding : 100 px 20 vw ; width : 100 % ; display : flex ; flex - direction : row ; flex - wrap : wrap ; justify - content : center ; $ { mobile } { flex - direction : column ; padding : 40 px 40 px 60 px ; } color : white ; background : # 632 bec ; `;
const Title = styled.h1 ` line - height : 1.6e m ; font - size : 5 rem ; font - weight : 700 ; $ { mobile } { font - size : 2.5e m ; } `;
const HeroTitle = styled(Title) ` padding - bottom : 30 px ; line - height : 1e m ; `;
const HeroText = styled.p ` font - size : 1.2e m ; font - weight : 400 ; line - height : 1.3e m ; color : # 3 c3c3c ; `;
const ButtonContainer = styled.div ` margin : 10 px 0 0 0 ; `;
const List = styled.div ` display : flex ; flex - direction : row ; flex - wrap : wrap ; justify - content : center ; font - size : 1 rem ; $ { mobile } { justify - content : flex - start ; } `;
const ListItem = styled.div ` margin : 20 px 25 px ; display : flex ; align - items : center ; font - size : 1.5 rem ; line - height : 1e m ; $ { mobile } { margin : 10 px 0 ; font - size : 1.2 rem ; } svg { margin - right : 5 px ; } `;
const ListButton = styled.div ` margin : 10 px 5 px ; display : flex ; align - items : center ; font - size : 1.2 rem ; line - height : 1e m ; $ { mobile } { margin : 10 px 10 px 0 0 ; } a { color : black ; padding : 12 px 25 px ; border : 1 px solid black ; border - radius : 2 px ; text - decoration : none ; & : hover { color : white ; background : black ; } } `;
