Updated index to use fwt components

This commit is contained in:
Patrick Alvin Alcala 2025-09-04 12:06:44 +08:00
parent b3f5040b8e
commit 687a046dbd

View file

@ -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>