Banner.jsx 1.76 KB
Newer Older
minseok.park's avatar
minseok.park committed
1
// @ts-nocheck
박민석's avatar
박민석 committed
2
import { SiGithub } from 'react-icons/si'
minseok.park's avatar
minseok.park committed
3
import styled from 'styled-components'
박민석's avatar
박민석 committed
4
import Button from './Button'
minseok.park's avatar
minseok.park committed
5
import Backdrop from './Backdrop'
minseok.park's avatar
minseok.park committed
6

minseok.park's avatar
minseok.park committed
7 8 9
const backdropStyle = {
  borderBottomLeftRadius: '50% 25%',
  borderBottomRightRadius: '50% 25%',
minseok.park's avatar
minseok.park committed
10 11 12 13 14
}

export default function Banner () {
  return (
    <Wrapper>
minseok.park's avatar
minseok.park committed
15
      <Backdrop style={backdropStyle} />
minseok.park's avatar
minseok.park committed
16 17 18
      <Overlay>
        <BannerTitle type='main' fontSize='5em'>Bankware Global</BannerTitle>
        <BannerTitle type='sub' fontSize='3.5em'>Software Lab.</BannerTitle>
박민석's avatar
박민석 committed
19 20 21 22 23
        <BannerDesc>Analyzing new technologies and ideas • Developing innovative products and services</BannerDesc>
        <ButtonGroup>
          <Button text='Documetation' />
          <Button text='GitHub' icon={<SiGithub />}/>
        </ButtonGroup>
minseok.park's avatar
minseok.park committed
24 25 26 27 28 29 30 31
      </Overlay>
    </Wrapper>
  )
}

const Wrapper = styled.div`
    position: relative;
    width: 100%;
minseok.park's avatar
minseok.park committed
32
    height: 610px;
minseok.park's avatar
minseok.park committed
33
    background-color: #12071f;
minseok.park's avatar
minseok.park committed
34 35
    border-bottom-left-radius: 50% 25%;
    border-bottom-right-radius: 50% 25%;
minseok.park's avatar
minseok.park committed
36 37 38
`
const Overlay = styled.div`
    position: absolute;
minseok.park's avatar
minseok.park committed
39
    top: 60%;
minseok.park's avatar
minseok.park committed
40
    left: 50%;
minseok.park's avatar
minseok.park committed
41
    transform: translate3d(-50%, -50%, 0);
minseok.park's avatar
minseok.park committed
42 43 44 45 46 47 48 49
    text-align: center;
`
const BannerTitle = styled.h1`
    margin: 0;
    padding: 0;
    font-size: ${(props) => props.fontSize};
    font-weight: 600;
    letter-spacing: -0.05em;
박민석's avatar
박민석 committed
50
    background: ${(props) => (props.type === 'main' ? 'linear-gradient(30deg, #0072CE, #fff)' : '#fff')};
minseok.park's avatar
minseok.park committed
51 52 53
    background-clip: text;
    -webkit-text-fill-color: transparent;
`
박민석's avatar
박민석 committed
54 55 56 57 58 59 60 61 62 63 64 65
const BannerDesc = styled.h3`
  font-size: 1.5em;
  font-weight: 400;
  margin-top: 15px;
  color: #fff;
`
const ButtonGroup = styled.div`
  display: flex;
  margin-top: 15px;
  width: 100%;
  justify-content: center;
`