reset commits

src/pages/index.astro

@@ -0,0 +1,94 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Card from '../components/Card/Card.jsx'
+import aioToolsImage from '../assets/images/aio-tools.png'
+import { Image } from 'astro:assets'
+---
+
+<Layout title="AIO Tools">
+  <main class="page">
+    <section class="title--section">
+      <div class="titleandlogo">
+        <Image class="titleandlogo__logo" src={aioToolsImage} alt="AIO Tools" width={90} />
+        <div class="titleandlogo__texts">
+          <span class="titleandlogo__texts__title">AIO Tools</span>
+          <span class="titleandlogo__texts__subtitle">All-in-One Tools for Everyone</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="cards--section">
+      <a href="/password-generator" aria-label="Password generator page"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /> </a>
+      <a href="/hash-generator" aria-label="Hash generator page"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></a>
+    </section>
+  </main>
+</Layout>
+
+<style lang="sass">
+  @use '/src/assets/css/viewport.sass' as view
+
+  .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
+      padding: 0 2rem
+
+      @media screen and (max-width: view.$tablet)
+        justify-content: center
+        align-items: center
+
+    .titleandlogo
+      display: flex
+      flex-direction: row
+      gap: 1rem
+      align-items: center
+      font-family: 'Montserrat'
+
+      @media screen and (max-width: view.$tablet)
+        display: flex
+        flex-direction: column
+        justify-content: center
+        text-align: center
+
+      &__texts
+        display: flex
+        flex-direction: column
+
+        &__title
+          font-size: clamp(2rem, 6vw, 3.25rem)
+          font-weight: 500
+
+        &__subtitle
+          font-size: clamp(0.75rem, 3vw, 1.25rem)
+          opacity: 0.8
+
+      &__logo
+        @media screen and (max-width: view.$tablet)
+          width: 80px
+          height: auto
+
+        @media screen and (max-width: view.$mobile)
+          width: 60px
+
+    .cards--section
+      display: flex
+      flex-direction: row
+      // align-items: center
+      flex-wrap: wrap
+      justify-content: center
+      gap: 1rem
+      padding: 0.5rem
+      margin-top: 2rem
+      border-radius: 0.5rem
+
+  a
+    text-decoration: none
+    color: inherit
+</style>