From 0c49c5efff23ffda661d7648338c5b6d5671ef05 Mon Sep 17 00:00:00 2001
From: enjidev <me@enji.dev>
Date: Wed, 11 Jan 2023 21:18:26 +0700
Subject: [PATCH] chore: use section and header elements

---
 apps/enji.dev/src/contents/index/CleanIntuitive.tsx  |  4 ++--
 apps/enji.dev/src/contents/index/DetailOriented.tsx  |  4 ++--
 apps/enji.dev/src/contents/index/PrettyOptimized.tsx |  4 ++--
 apps/enji.dev/src/contents/index/index.tsx           | 12 ++++++------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/enji.dev/src/contents/index/CleanIntuitive.tsx b/apps/enji.dev/src/contents/index/CleanIntuitive.tsx
index e4f7c832..c4f5f45b 100644
--- a/apps/enji.dev/src/contents/index/CleanIntuitive.tsx
+++ b/apps/enji.dev/src/contents/index/CleanIntuitive.tsx
@@ -48,14 +48,14 @@ function CleanIntuitive() {
 
   return (
     <>
-      <div className={clsx('mb-8')}>
+      <header className={clsx('mb-8')}>
         <SectionTitle
           title="Eye Catching, Modern & Minimalist Design."
           caption="Clean & Intuitive"
           description="Keep the User Interface clean with a modern touch without
             compromising the User Experience."
         />
-      </div>
+      </header>
       <SectionContent>
         <div className={clsx('flex', 'lg:gap-12')}>
           <div
diff --git a/apps/enji.dev/src/contents/index/DetailOriented.tsx b/apps/enji.dev/src/contents/index/DetailOriented.tsx
index 96e0236c..930401d4 100644
--- a/apps/enji.dev/src/contents/index/DetailOriented.tsx
+++ b/apps/enji.dev/src/contents/index/DetailOriented.tsx
@@ -4,13 +4,13 @@ import SectionTitle from '@/components/sections/SectionTitle';
 
 function DetailOriented() {
   return (
-    <div className={clsx('mb-8')}>
+    <header className={clsx('mb-8')}>
       <SectionTitle
         title="Keen Eye for Spotting Small Details."
         caption="Detail Oriented"
         description="Awareness to ease of access, User Interface consistency, and improved User Experience."
       />
-    </div>
+    </header>
   );
 }
 
diff --git a/apps/enji.dev/src/contents/index/PrettyOptimized.tsx b/apps/enji.dev/src/contents/index/PrettyOptimized.tsx
index 1c32e8ec..295ca1a2 100644
--- a/apps/enji.dev/src/contents/index/PrettyOptimized.tsx
+++ b/apps/enji.dev/src/contents/index/PrettyOptimized.tsx
@@ -4,13 +4,13 @@ import SectionTitle from '@/components/sections/SectionTitle';
 
 function PrettyOptimized() {
   return (
-    <div className={clsx('mb-8')}>
+    <header className={clsx('mb-8')}>
       <SectionTitle
         title="Comprehensible and Optimized Code."
         caption="Pretty & Optimized"
         description="Writing clean code is a top priority while keeping it as optimized as possible."
       />
-    </div>
+    </header>
   );
 }
 
diff --git a/apps/enji.dev/src/contents/index/index.tsx b/apps/enji.dev/src/contents/index/index.tsx
index 9031d657..9f8b7f26 100644
--- a/apps/enji.dev/src/contents/index/index.tsx
+++ b/apps/enji.dev/src/contents/index/index.tsx
@@ -80,15 +80,15 @@ function IndexContents() {
       <div className={clsx('-mt-12 mb-12', 'md:mt-0 md:mb-24')}>
         <QuoteSection />
       </div>
-      <div className={clsx('mb-12', 'lg:mb-24')}>
+      <section className={clsx('mb-12', 'lg:mb-24')}>
         <CleanIntuitive />
-      </div>
-      <div className={clsx('mb-12', 'lg:mb-24')}>
+      </section>
+      <section className={clsx('mb-12', 'lg:mb-24')}>
         <DetailOriented />
-      </div>
-      <div className={clsx('mb-12', 'lg:mb-24')}>
+      </section>
+      <section className={clsx('mb-12', 'lg:mb-24')}>
         <PrettyOptimized />
-      </div>
+      </section>
     </>
   );
 }