refactor: use react-icons andopen social links in new tab (#128)

src/components/Header.tsx

@@ -1,32 +1,31 @@
-import { NextPage } from 'next/types';
-import Image from 'next/image';
 import Link from 'next/link';
+import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa';
 
-export const Header: NextPage = () => {
+export function Header() {
 	return (
 		<nav className='flex items-center justify-between py-4 shadow-[rgba(17,17,26,0.1)_0px_1px_0px] lg:pl-[20%] lg:pr-[20%]'>
-			<Link href='/' rel='noreferrer'>
+			<Link href='/'>
 				<a>
 					<span className='cursor-pointer px-5 text-3xl font-bold text-gray-700'>defaang</span>
 				</a>
 			</Link>
 			<div className='mx-5 flex w-1/3 items-center justify-between lg:w-1/6'>
-				<Link href='https://github.com/ykdojo/defaang' rel='noreferrer'>
-					<a>
-						<Image src='/github.svg' className='cursor-pointer' height={30} width={30} alt='github' />
+				<Link href='https://github.com/ykdojo/defaang'>
+					<a target='_blank' rel='noopener noreferrer'>
+						<FaGithub className='h-8 w-8' title='GitHub' />
 					</a>
 				</Link>
-				<Link href='https://discord.gg/aJp6Fypb' rel='noreferrer'>
-					<a>
-						<Image src='/discord.svg' className='cursor-pointer' height={30} width={30} alt='discord' />
+				<Link href='https://discord.gg/aJp6Fypb'>
+					<a target='_blank' rel='noopener noreferrer'>
+						<FaDiscord className='h-8 w-8' title='Discord' />
 					</a>
 				</Link>
-				<Link href='https://twitter.com/ykdojo' rel='noreferrer'>
-					<a>
-						<Image src='/twitter.svg' className='cursor-pointer' height={30} width={30} alt='twitter' />
+				<Link href='https://twitter.com/ykdojo'>
+					<a target='_blank' rel='noopener noreferrer'>
+						<FaTwitter className='h-8 w-8' title='Twitter' />
 					</a>
 				</Link>
 			</div>
 		</nav>
 	);
-};
+}

src/pages/confirm-email.tsx

@@ -1,6 +1,6 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import { type NextPage } from 'next';
+import { MdOutlineMarkEmailRead } from 'react-icons/md';
 
 const ConfirmEmail: NextPage = () => {
 	return (
@@ -9,13 +9,11 @@ const ConfirmEmail: NextPage = () => {
 				<title>defaang | Confirm email</title>
 			</Head>
 			<main className='flex h-full min-h-screen items-center justify-center bg-gray-50'>
-				<div className='grid w-full max-w-xs items-center justify-center rounded-lg bg-white p-6 shadow-lg sm:max-w-md'>
-					<div className='relative mx-auto aspect-square w-full max-w-xs '>
-						<Image src='/welcome.svg' alt='envelope' layout='fill' className='object-cover object-center'></Image>
-					</div>
-					<div className='text-center text-gray-700'>
-						<p>Thanks for signing up! We&#39;ve sent you an email to confirm your account.</p>
-					</div>
+				<div className='grid w-full max-w-xs grid-cols-1 justify-items-center gap-y-4 rounded-lg bg-white p-6 shadow-lg sm:max-w-md'>
+					<MdOutlineMarkEmailRead title='envelope' className='h-28 w-28 fill-blue-500' />
+					<p className='text-center text-gray-700'>
+						Thanks for signing up! We&#39;ve sent you an email to confirm your account.
+					</p>
 				</div>
 			</main>
 		</>