Improve index.astro by adding a missing closing tag for the <Image> element and updating CSS imports.

src/pages/index.astro

@@ -9,7 +9,7 @@ import { Image } from 'astro:assets'
   <main class="page">
     <section class="title--section">
       <div class="titleandlogo">
-        <Image class="titleandlogo__logo" src={aioToolsImage} alt="AIO Tools" width={90} quality={80}/>
+        <Image class="titleandlogo__logo" src={aioToolsImage} alt="AIO Tools" width={90} quality={80} />
         <div class="titleandlogo__texts">
           <span class="titleandlogo__texts__title">AIO Tools</span>
           <span class="titleandlogo__texts__subtitle">All-in-One Tools for Everyone</span>
@@ -26,18 +26,18 @@ import { Image } from 'astro:assets'
 
 <style lang="sass">
   @use '/src/assets/css/viewport.sass' as view
+  @use '/src/assets/css/variables.sass' as vars
 
   .page
     display: flex
     flex-direction: column
-    font-family: 'Inter', sans-serif
     margin-top: 2rem
 
     .title--section
       display: flex
       flex-direction: column
       align-items: flex-start
-      color: #ffffff
+      color: vars.$textColor
       padding: 0 2rem
 
       @media screen and (max-width: view.$tablet)
@@ -80,7 +80,6 @@ import { Image } from 'astro:assets'
     .cards--section
       display: flex
       flex-direction: row
-      // align-items: center
       flex-wrap: wrap
       justify-content: center
       gap: 1rem