Replace div tags with section tags in various components

The div HTML tags in various components of the project have been replaced with more appropriate section tags for better semantic structure. This affects the TestimonialsSection, Products, FeaturesStats, and several other components. Options for minifying JavaScript in the process-html file have also been updated. In the MainLayout, a main tag has been added to wrap page content for better accessibility and semantics.

process-html.mjs

@@ -15,7 +15,8 @@ await Promise.all(
    	 html = minify(html, {
    		 removeComments: true,
    		 preserveLineBreaks: true,
-   		 collapseWhitespace: true
+   		 collapseWhitespace: true,
+		 minifyJS: true
    	 })
    	 await fs.writeFile(file, html)
     })

src/components/ContactSection.astro

@@ -18,7 +18,7 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
 ---
 
 <!-- Contact Us -->
-<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
   <div class="mx-auto max-w-2xl lg:max-w-5xl">
     <div class="text-center">
       <h1
@@ -168,4 +168,4 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
       </div>
     </div>
   </div>
-</div>
+</section>

src/components/FAQ.astro

@@ -47,7 +47,7 @@ const faqs = [
 ---
 
 <!-- Main container that holds all content. Customized for different viewport sizes. -->
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <div class="grid gap-10 md:grid-cols-5">
@@ -93,7 +93,7 @@ const faqs = [
       </div>
     </div>
   </div>
-</div>
+</section>
 <!--Import the necessary Accordion plugin-->
 <!--https://preline.co/plugins/html/accordion.html-->
 <script is:inline src="/scripts/vendor/preline/accordion/index.js"></script>

src/components/FeaturesGeneral.astro

@@ -10,7 +10,7 @@ const subTitle: string =
   "At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals.";
 ---
 
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <!-- Block to display the feature image -->
@@ -112,4 +112,4 @@ const subTitle: string =
       </div>
     </div>
   </div>
-</div>
+</section>

src/components/FeaturesNavs.astro

@@ -10,7 +10,7 @@ import dashboard from "../images/dashboard-image.avif";
 const title: string = `Customize <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>'s offerings to perfectly suit your hardware and construction needs.`;
 ---
 
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <div class="relative p-6 md:p-16">
@@ -125,7 +125,7 @@ const title: string = `Customize <span class="text-yellow-500 dark:text-yellow-4
       </div>
     </div>
   </div>
-</div>
+</section>
 <!--Import the necessary Tabs plugin-->
 <!--https://preline.co/plugins/html/tabs.html-->
 <script is:inline src="/scripts/vendor/preline/tabs/index.js"></script>

src/components/FeaturesStats.astro

@@ -33,7 +33,7 @@ const stats: Stat[] = [
 ];
 ---
 
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <div class="max-w-screen-md">
@@ -75,4 +75,4 @@ const stats: Stat[] = [
       </div>
     </div>
   </div>
-</div>
+</section>

src/components/FeaturesStatsAlt.astro

@@ -17,7 +17,7 @@ const benefits: string[] = [
 const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-0.5 h-6 w-6 text-[#fa5a15] dark:text-[#fb713b]"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
 ---
 
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <!-- Grid -->
@@ -53,4 +53,4 @@ const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-widt
       </div>
     </div>
   </div>
-</div>
+</section>

src/components/HeroSection.astro

@@ -23,7 +23,7 @@ const reviews: string = "12.8k";
 ---
 
 <!-- Defining a grid container that holds all the content -->
-<div
+<section
   class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
 >
   <!-- Title and description -->
@@ -124,4 +124,4 @@ const reviews: string = "12.8k";
       />
     </div>
   </div>
-</div>
+</section>

src/components/HeroSectionAlt.astro

@@ -8,7 +8,7 @@ const subTitle: string =
   "ScrewFast is an open-source template, meticulously crafted with Astro, Tailwind CSS, and Preline UI frameworks.";
 ---
 
-<div class="relative mx-auto max-w-[85rem] px-4 pb-24 pt-10 sm:px-6 lg:px-8">
+<section class="relative mx-auto max-w-[85rem] px-4 pb-24 pt-10 sm:px-6 lg:px-8">
   <!-- Decorating SVG elements -->
   <div
     class="absolute left-0 top-[55%] scale-90 md:top-[20%] xl:left-[10%] xl:top-[25%]"
@@ -128,4 +128,4 @@ const subTitle: string =
   <div class="mt-8 flex justify-center gap-3">
     <GithubBtn url="https://github.com/mearashadowfax/ScrewFast" />
   </div>
-</div>
+</section>

src/components/PricingSection.astro

@@ -51,7 +51,7 @@ const professionalToolbox: Product = {
 };
 ---
 
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <!-- Section heading and sub-heading -->
@@ -187,4 +187,4 @@ const professionalToolbox: Product = {
 
     <SecondaryCTA title="Get a Custom Quote" url="#" />
   </div>
-</div>
+</section>

src/components/TestimonialsSection.astro

@@ -52,7 +52,7 @@ const statistics: StatProps[] = [
 ];
 ---
 
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
 >
   <!-- Container for the testimonials -->
@@ -156,4 +156,4 @@ const statistics: StatProps[] = [
       </div>
     </div>
   </div>
-</div>
+</section>

src/components/TestimonialsSectionAlt.astro

@@ -49,7 +49,7 @@ const testimonials: Testimonial[] = [
 ];
 ---
 <!-- Main div that wraps the testimonials section -->
-<div
+<section
   class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   id="testimonials"
 >
@@ -97,4 +97,4 @@ const testimonials: Testimonial[] = [
       ))
     }
   </div>
-</div>
+</section>

src/layouts/MainLayout.astro

@@ -58,7 +58,9 @@ We set the language of the page to English and add classes for scrollbar and scr
     -->
     <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
       <Navbar />
+      <main>
       <slot />
+      </main>
     </div>
     <FooterSection />
     <style>

src/pages/blog/[...slug].astro

@@ -34,7 +34,7 @@ const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter(
   title={post.data.title + " | ScrewFast"}
   meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
 >
-  <div class="mx-auto max-w-3xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pt-10">
+  <section class="mx-auto max-w-3xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pt-10">
     <div class="max-w-2xl">
       <div class="mb-6 flex items-center justify-between">
         <div class="flex w-full gap-x-5 sm:items-center sm:gap-x-3">
@@ -111,9 +111,9 @@ const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter(
         }
       </div>
     </div>
-  </div>
+  </section>
   <!--Related articles section-->
-  <div class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+  <section class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
     <div class="mb-10 max-w-2xl">
       <h2
         class="text-balance text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
@@ -125,5 +125,5 @@ const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter(
     <div class="grid grid-cols-2 gap-6">
       {relatedPosts.map((entry) => <CardRelated blogEntry={entry} />)}
     </div>
-  </div>
+  </section>
 </MainLayout>

src/pages/blog/index.astro

@@ -33,7 +33,7 @@ const secondSubTitle: string =
   title="Blog | ScrewFast"
   meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
 >
-  <div
+  <section
     class="mx-auto max-w-[85rem] space-y-8 px-4 pt-16 sm:px-6 lg:px-8 2xl:max-w-full"
   >
     <!--Page header-->
@@ -50,24 +50,24 @@ const secondSubTitle: string =
         {subTitle}
       </p>
     </div>
-  </div>
+  </section>
 
-  <div
+  <section
     class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   >
     <!--Blog posts grid-->
     <div class="grid gap-6 lg:grid-cols-2">
       {otherPosts.map((blogEntry) => <CardBlog blogEntry={blogEntry} />)}
     </div>
-  </div>
+  </section>
   <!--Most recent blog post-->
-  <div
+  <section
     class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   >
     <CardBlogRecent blogEntry={mostRecentPost} />
-  </div>
+  </section>
   <!--Insights section-->
-  <div
+  <section
     class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   >
     <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
@@ -87,5 +87,5 @@ const secondSubTitle: string =
         ))
       }
     </div>
-  </div>
+  </section>
 </MainLayout>

src/pages/insights/[...slug].astro

@@ -20,7 +20,7 @@ const { post } = Astro.props;
   title={post.data.title + " | ScrewFast"}
   meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
 >
-  <div class="py-6 sm:py-8 lg:py-12">
+  <section class="py-6 sm:py-8 lg:py-12">
     <div class="mx-auto max-w-screen-xl px-4 md:px-8">
       <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
         <div>
@@ -53,5 +53,5 @@ const { post } = Astro.props;
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </MainLayout>

src/pages/products/[...slug].astro

@@ -31,7 +31,7 @@ const { product } = Astro.props;
   <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 
-  <div
+  <section
     class="mx-auto flex max-w-[85rem] flex-col px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   >
     <div>
@@ -66,7 +66,7 @@ const { product } = Astro.props;
         />
       </div>
     </div>
-  </div>
+  </section>
 
   <div class="mx-auto max-w-[85rem] px-4 pt-10 sm:px-6 lg:px-8 lg:pt-14">
     <nav

src/pages/products/index.astro

@@ -51,7 +51,7 @@ const subTitle: string =
     </div>
     <!--Displaying products in alternating styles. Alternative product gets different card styling.-->
     <!--Maps through all product entries and displays them with either CardSmall or CardWide based on their position.-->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-8">
+    <section class="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-8">
       {
         product.map((product, index) => {
           const position = index % 4;
@@ -62,7 +62,7 @@ const subTitle: string =
           }
         })
       }
-    </div>
+    </section>
   </div>
   <!--Features statistics section-->
   <FeaturesStatsAlt />