From 845a4349783a1f00408827901a7dcfaef30976e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Sun, 10 Jan 2021 21:57:01 +0900
Subject: [PATCH] feat: better ui for footer

---
 components/Footer.tsx | 99 ++++++++++++++++++++++---------------------
 pages/index.tsx       |  2 +-
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 341eae9..43ac004 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -5,10 +5,10 @@ import Wave from './Wave'
 const Footer = (): JSX.Element => {
 	return (
 		<div className='releative'>
-			<Wave color='currentColor' className='dark:text-discord-dark text-white bg-discord-black -mb-10' />
-			<div className='bottom-0 text-white bg-discord-black mt-5'>
-				<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-3/5' ignoreColor>
-					<div className='w-full lg:flex-grow'>
+			<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'>
+				<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-4/5' ignoreColor>
+					<div className='w-full md:w-2/5'>
 						<h1 className='text-koreanbots-blue text-3xl font-extrabold'>국내봇을 한 곳에서.</h1>
 						<span className='text-base'>2020 Koreanbots, All rights reserved.</span>
 						<div className='text-2xl'>
@@ -22,51 +22,54 @@ const Footer = (): JSX.Element => {
 							</a>
 						</div>
 					</div>
-					<div className='flex-col mb-2 w-full lg:w-1/3'>
-						<h2 className='text-koreanbots-blue text-base font-bold'>한국 디스코드봇 리스트</h2>
-						<ul className='text-sm'>
-							<li>
-								<Link href='/about'>
-									<a className='hover:text-gray-300'>소개</a>
-								</Link>
-							</li>
-							<li>
-								<Link href='/api'>
-									<a className='hover:text-gray-300'>API</a>
-								</Link>
-							</li>
-						</ul>
-					</div>
-					<div className='flex-col mb-2 w-full lg:w-1/5'>
-						<h2 className='text-koreanbots-blue text-base font-bold'>커뮤니티</h2>
-						<ul className='text-sm'>
-							<li>
-								<Link href='/partners'>
-									<a className='hover:text-gray-300'>파트너</a>
-								</Link>
-							</li>
-							<li>
-								<Link href='/verification'>
-									<a className='hover:text-gray-300'>인증</a>
-								</Link>
-							</li>
-						</ul>
-					</div>
-					<div className='flex-col mb-2 w-full lg:w-1/5'>
-						<h2 className='text-koreanbots-blue text-base font-bold'>약관</h2>
-						<ul className='text-sm'>
-							<li>
-								<Link href='/privacy'>
-									<a className='hover:text-gray-300'>개인정보취급방침</a>
-								</Link>
-							</li>
-							<li>
-								<Link href='/guidelines'>
-									<a className='hover:text-gray-300'>가이드라인</a>
-								</Link>
-							</li>
-						</ul>
+					<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>
+							<ul className='text-sm'>
+								<li>
+									<Link href='/about'>
+										<a className='hover:text-gray-300'>소개</a>
+									</Link>
+								</li>
+								<li>
+									<Link href='/api'>
+										<a className='hover:text-gray-300'>API</a>
+									</Link>
+								</li>
+							</ul>
+						</div>
+						<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>
+							<ul className='text-sm'>
+								<li>
+									<Link href='/partners'>
+										<a className='hover:text-gray-300'>파트너</a>
+									</Link>
+								</li>
+								<li>
+									<Link href='/verification'>
+										<a className='hover:text-gray-300'>인증</a>
+									</Link>
+								</li>
+							</ul>
+						</div>
+						<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>
+							<ul className='text-sm'>
+								<li>
+									<Link href='/privacy'>
+										<a className='hover:text-gray-300'>개인정보취급방침</a>
+									</Link>
+								</li>
+								<li>
+									<Link href='/guidelines'>
+										<a className='hover:text-gray-300'>가이드라인</a>
+									</Link>
+								</li>
+							</ul>
+						</div>
 					</div>
+					
 				</Container>
 			</div>
 		</div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 69b9a26..19f5162 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -19,7 +19,7 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 			</div>
 			<Wave
 				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>