add Link, update styles

src/app/[slug]/page.tsx

@@ -5,9 +5,12 @@ import Heading from '@/components/ui/heading'
 import IconsList from '@/components/ui/icons-list/icons-list'
 import IconsListItem from '@/components/ui/icons-list/icons-list-item'
 import ImagePlaceholder from '@/components/ui/image-placeholder'
+import { LINK } from '@/types/enums/Link'
 import { SITE_URL } from '@/utils'
 import { getProject, getSlugs } from '@/utils/projects'
 import Image from 'next/image'
+import Link from 'next/link'
+import { BiArrowBack } from 'react-icons/bi'
 import { FaGithub } from 'react-icons/fa'
 import { TfiWorld } from 'react-icons/tfi'
 
@@ -45,7 +48,14 @@ export default async function Project({ params: { slug } }: ProjectPageProps) {
   return (
     <section className="pt-header">
       <Content className="pb-16 pt-12 md:pb-24 md:pt-20" size="tight">
-        <article className="flex flex-col gap-5 md:gap-7">
+        <Link
+          className="group flex items-center gap-2 text-accent transition-colors hover:text-accent-light md:text-lg"
+          href={LINK.projects}
+        >
+          <BiArrowBack className="h-5 w-5 transition-transform group-hover:-translate-x-1" />{' '}
+          Go Back to Projects
+        </Link>
+        <article className="mt-3 flex flex-col gap-5 md:mt-5 md:gap-7">
           <header>
             {website || github ? (
               <div className="flex items-center justify-between">
@@ -72,7 +82,7 @@ export default async function Project({ params: { slug } }: ProjectPageProps) {
             )}
             {body && (
               <p
-                className="mt-7 md:text-lg"
+                className="mt-5 md:mt-7 md:text-lg"
                 dangerouslySetInnerHTML={{ __html: body }}
               />
             )}