feat: better ui for footer

This commit is contained in:
원더 2021-01-10 21:57:01 +09:00
parent d85ad90913
commit 845a434978
2 changed files with 52 additions and 49 deletions

View File

@ -5,10 +5,10 @@ import Wave from './Wave'
const Footer = (): JSX.Element => { const Footer = (): JSX.Element => {
return ( return (
<div className='releative'> <div className='releative'>
<Wave color='currentColor' className='dark:text-discord-dark text-white bg-discord-black -mb-10' /> <Wave color='currentColor' className='dark:text-discord-dark text-white bg-discord-black hidden md:block' />
<div className='bottom-0 text-white bg-discord-black mt-5'> <div className='bottom-0 text-white bg-discord-black'>
<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-3/5' ignoreColor> <Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-4/5' ignoreColor>
<div className='w-full lg:flex-grow'> <div className='w-full md:w-2/5'>
<h1 className='text-koreanbots-blue text-3xl font-extrabold'> .</h1> <h1 className='text-koreanbots-blue text-3xl font-extrabold'> .</h1>
<span className='text-base'>2020 Koreanbots, All rights reserved.</span> <span className='text-base'>2020 Koreanbots, All rights reserved.</span>
<div className='text-2xl'> <div className='text-2xl'>
@ -22,7 +22,8 @@ const Footer = (): JSX.Element => {
</a> </a>
</div> </div>
</div> </div>
<div className='flex-col mb-2 w-full lg:w-1/3'> <div className='flex-grow grid grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-2'>
<div className='mb-2 col-span-2 md:col-span-1 col-start-1'>
<h2 className='text-koreanbots-blue text-base font-bold'> </h2> <h2 className='text-koreanbots-blue text-base font-bold'> </h2>
<ul className='text-sm'> <ul className='text-sm'>
<li> <li>
@ -37,7 +38,7 @@ const Footer = (): JSX.Element => {
</li> </li>
</ul> </ul>
</div> </div>
<div className='flex-col mb-2 w-full lg:w-1/5'> <div className='mb-2 row-start-2 md:row-start-1 md:col-start-2'>
<h2 className='text-koreanbots-blue text-base font-bold'></h2> <h2 className='text-koreanbots-blue text-base font-bold'></h2>
<ul className='text-sm'> <ul className='text-sm'>
<li> <li>
@ -52,7 +53,7 @@ const Footer = (): JSX.Element => {
</li> </li>
</ul> </ul>
</div> </div>
<div className='flex-col mb-2 w-full lg:w-1/5'> <div className='mb-2 row-start-2 md:row-start-1 md:col-start-3'>
<h2 className='text-koreanbots-blue text-base font-bold'></h2> <h2 className='text-koreanbots-blue text-base font-bold'></h2>
<ul className='text-sm'> <ul className='text-sm'>
<li> <li>
@ -67,6 +68,8 @@ const Footer = (): JSX.Element => {
</li> </li>
</ul> </ul>
</div> </div>
</div>
</Container> </Container>
</div> </div>
</div> </div>

View File

@ -19,7 +19,7 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
</div> </div>
<Wave <Wave
color='currentColor' color='currentColor'
className='-mt-18 sm:mt-0 dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white' className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white hidden md:block'
/> />
<Container> <Container>