From 687a046dbd3400a86523221dfa288e41521250bc Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 4 Sep 2025 12:06:44 +0800
Subject: [PATCH] Updated index to use fwt components

---
 src/pages/index.astro | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index daa8557..c2cc62d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,18 @@
 ---
 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'
+import Logo from '../../fwt/components/Logo/Logo'
+import Link from '../../fwt/components/Link/Link'
+import Footer from '../../fwt/components/Footer/Footer'
+import Copyright from '../../fwt/components/Copyright/Copyright'
 ---
 
 <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} quality={80} />
+        <Logo size={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>
@@ -18,17 +21,17 @@ import { Image } from 'astro:assets'
     </section>
 
     <section class="cards--section">
-      <a href="/password-generator" data-astro-prefetch 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" data-astro-prefetch aria-label="Hash generator page"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></a>
-      <a href="/color-converter" data-astro-prefetch aria-label="Color converter page"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></a>
-      <a href="/text-comparison" data-astro-prefetch aria-label="Text comparison page"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></a>
+      <Link to="/password-generator"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /></Link>
+      <Link to="/hash-generator"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></Link>
+      <Link to="/color-converter"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></Link>
+      <Link to="/text-comparison"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></Link>
     </section>
   </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
-  @use '/src/assets/css/variables.sass' as vars
+  @use '/src/styles/breakpoint.sass' as view
+  @use '/src/styles/variables.sass' as vars
 
   .page
     display: flex
@@ -88,8 +91,4 @@ import { Image } from 'astro:assets'
       padding: 0.5rem
       margin-top: 2rem
       border-radius: 0.5rem
-
-  a
-    text-decoration: none
-    color: inherit
 </style>