feat: using Hero component

components/Hero.tsx

@@ -0,0 +1,44 @@
+import dynamic from 'next/dynamic'
+
+import { categories, categoryIcon } from '@utils/Constants'
+
+const Container = dynamic(()=> import('@components/Container'))
+const Wave  = dynamic(()=> import('@components/Wave'))
+const Tag = dynamic(()=> import('@components/Tag'))
+const Search = dynamic(()=> import('@components/Search'))
+
+const Hero = ({ header, description }:HeroProps):JSX.Element => {
+	return <>
+		<div className='dark:bg-discord-black bg-discord-blurple'>
+			<Container className='pt-12' ignoreColor paddingTop>
+				<h1 className='text-center sm:text-left text-gray-100 text-3xl font-bold'>
+					{ header && `${header} - `}한국 디스코드봇 리스트
+				</h1>
+				<p className='text-center sm:text-left text-xl font-base mt-2'>{description || '다양한 국내 디스코드봇을 한곳에서 확인하세요!'}</p>
+				<Search />
+				<div className='flex flex-wrap mt-5'>
+					<Tag key='list' text={<>
+						<i className='fas fa-heart text-red-600'/> 하트 랭킹
+					</>} dark bigger href='/list/votes' />
+					{ categories.slice(0, 4).map(t=> <Tag key={t} text={<>
+						<i className={categoryIcon[t]} /> {t}
+					</>} dark bigger href={`/categories/${t}`} />) }
+					<Tag key='tag' text={<>
+						<i className='fas fa-tag'/> 카테고리 더보기
+					</>} dark bigger href='/categories' />
+				</div>
+			</Container>
+		</div>
+		<Wave
+			color='currentColor'
+			className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white hidden md:block'
+		/>
+	</>
+}
+
+interface HeroProps {
+  header?: string
+  description?: string
+}
+
+export default Hero

pages/index.tsx

@@ -3,43 +3,17 @@ import dynamic from 'next/dynamic'
 
 import { BotList } from '@types'
 import * as Query from '@utils/Query'
-import { categories, categoryIcon } from '@utils/Constants'
 
 const Advertisement = dynamic(()=> import('@components/Advertisement'))
 const Container = dynamic(()=> import('@components/Container'))
 const BotCard = dynamic(()=> import('@components/BotCard'))
-const Wave  = dynamic(()=> import('@components/Wave'))
-const Tag = dynamic(()=> import('@components/Tag'))
-const Search = dynamic(()=> import('@components/Search'))
 const Paginator = dynamic(()=> import('@components/Paginator'))
+const Hero = dynamic(() => import('@components/Hero'))
 
 const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 	return (
 		<>
-			<div className='dark:bg-discord-black bg-discord-blurple'>
+			<Hero />
-				<Container className='pb-24 pt-20' ignoreColor paddingTop>
-					<h1 className='text-center text-gray-100 text-3xl font-bold sm:text-left'>
-						한국 디스코드봇 리스트
-					</h1>
-					<Search />
-					<div className='flex flex-wrap mt-5'>
-						<Tag key='list' text={<>
-							<i className='fas fa-heart text-red-600'/> 하트 랭킹
-						</>} dark bigger href='/list/votes' />
-						{ categories.slice(0, 5).map(t=> <Tag key={t} text={<>
-							<i className={categoryIcon[t]} /> {t}
-						</>} dark bigger href={`/categories/${t}`} />) }
-						<Tag key='tag' text={<>
-							<i className='fas fa-tag'/> 카테고리 더보기
-						</>} dark bigger href='/categories' />
-					</div>
-				</Container>
-			</div>
-			<Wave
-				color='currentColor'
-				className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white hidden md:block'
-			/>
-
 			<Container>
 				<Advertisement />
 				<h1 className='text-3xl font-bold'>

pages/list/votes.tsx

@@ -1,4 +1,5 @@
 import { NextPage, NextPageContext } from 'next'
+import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import { ParsedUrlQuery } from 'querystring'
 
@@ -7,9 +8,10 @@ import * as Query from '@utils/Query'
 
 import NotFound from '../404'
 import { PageCount } from '@utils/Yup'
-import { useRouter } from 'next/router'
 
+const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
+const SEO = dynamic(() => import('@components/SEO'))
 const BotCard = dynamic(() => import('@components/BotCard'))
 const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
@@ -17,19 +19,18 @@ const Paginator = dynamic(() => import('@components/Paginator'))
 const Votes:NextPage<VotesProps> = ({ data }) => {
 	const router = useRouter()
 	if(!data || data.data.length === 0 || data.totalPage < Number(router.query.page)) return <NotFound />
-	return <Container paddingTop>
+	return <>
-		<h1 className='text-3xl font-bold mt-5'>
+		<Hero header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
-			<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹 - {data.currentPage}페이지
+		<SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
-		</h1>
+		<Container>
-		<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
+			<Advertisement />
-		<Advertisement />
+			<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
-		<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
+				{
-			{
+					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-				data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
+				}
-			}
+			</div>
-		</div>
+			<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
-		<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
+		</Container></>
-	</Container>
 }
 export const getServerSideProps = async (ctx:Context) => {
 	let data: BotList