Updated about page

.gitignore

@@ -22,3 +22,15 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Backend
+backend/target/
+
+# Custom
+src/assets/

fwt/components/Background/Background.sass

@@ -0,0 +1 @@
+@use '/src/styles/classes.sass'

fwt/components/Background/Background.tsx

@@ -0,0 +1,50 @@
+import './Background.sass'
+import { Show, createSignal } from 'solid-js'
+import fs from 'fs'
+import webpPath from '../../images/background.webp'
+import avifPath from '../../images/background.avif'
+import noBackground from '../../images/no-background.webp'
+
+interface Props {
+  image?: boolean
+  color?: string
+}
+
+let [imageLoaded, setImageLoaded] = createSignal(false)
+
+const checkBackground = () => {
+  if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
+    setImageLoaded(true)
+  } else {
+    setImageLoaded(false)
+  }
+}
+
+export default (props: Props) => {
+  checkBackground()
+
+  return (
+    <>
+      <Show when={props.image}>
+        <Show when={imageLoaded()}>
+          <picture class="fullscreen">
+            <source srcset={avifPath.src} type="image/avif" />
+            <source srcset={webpPath.src} type="image/webp" />
+            <source srcset={noBackground.src} type="image/webp" />
+            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          </picture>
+        </Show>
+        <Show when={!imageLoaded()}>
+          <picture class="fullscreen">
+            <source srcset={noBackground.src} type="image/webp" />
+            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
+          </picture>
+        </Show>
+      </Show>
+
+      <Show when={!props.image}>
+        <div style={{ background: props.color }} class="fullscreen" />
+      </Show>
+    </>
+  )
+}

fwt/components/Box/Box.sass

@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px

fwt/components/Box/Box.tsx

@@ -0,0 +1,20 @@
+import type { ImageMetadata } from 'astro'
+import './Box.sass'
+import { Show, type JSXElement, createMemo } from 'solid-js'
+
+interface Props {
+  thickness: number
+  color?: string
+  children: JSXElement
+  curved?: boolean
+}
+
+export default (props: Props) => {
+  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+
+  return (
+    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+      {props.children}
+    </section>
+  )
+}

fwt/components/Button/Button.sass

@@ -0,0 +1,223 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+@use 'sass:color'
+
+$bulmaPrimary: rgb(0, 235, 199)
+$bulmaPrimaryText: rgb(0, 31, 26)
+$bulmaLink: rgb(92, 111, 255)
+$bulmaLinkText: rgb(245, 246, 255)
+$bulmaInfo: rgb(128, 217, 255)
+$bulmaInfoText: rgb(0, 36, 51)
+$bulmaSuccess: rgb(91, 205, 154)
+$bulmaSuccessText: rgb(10, 31, 21)
+$bulmaWarning: rgb(255, 191, 41)
+$bulmaWarningText: rgb(41, 29, 0)
+$bulmaDanger: rgb(255, 128, 153)
+$bulmaDangerText: rgb(26, 0, 5)
+$bulmaLight: rgb(255, 255, 255)
+$bulmaLightText: rgb(46, 51, 61)
+$bulmaDark: rgb(57, 63, 76)
+$bulmaDarkText: rgb(243, 244, 246)
+$bulmaText: rgb(31, 34, 41)
+$bulmaTextText: rgb(235, 236, 240)
+$bulmaGhost: rgba(0,0,0,0)
+$bulmaGhostText: rgb(66, 88, 255)
+
+$bootstrapTextLight: rgb(255, 255, 253)
+$bootstrapTextDark: rgb(0, 0, 2)
+$bootstrapTextLink: rgb(139, 185, 254)
+$bootstrapPrimary: rgb(13, 110, 253)
+$bootstrapSecondary: rgb(92, 99, 106)
+$bootstrapSuccess: rgb(21, 115, 71)
+$bootstrapDanger: rgb(187, 45, 59)
+$bootstrapWarning: rgb(255, 202, 44)
+$bootstrapInfo: rgb(49, 210, 242)
+$bootstrapLight: rgb(211, 212, 213)
+$bootstrapDark: rgb(33, 37, 41)
+
+.button
+  background-color: vars.$primaryColor
+  border: none
+  color: white
+  padding: 0.5rem 1.25rem
+  text-align: center
+  text-decoration: none
+  display: inline-block
+  font-size: 1rem
+  font-weight: 500
+  cursor: pointer
+  transition: all 0.2s ease-out
+
+  &:hover
+    background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+  &:active
+    transform: scale(0.95)
+
+.bu-primary
+  @extend .button
+  font-family: fonts.$Inter
+  background-color: $bulmaPrimary
+  color: $bulmaPrimaryText
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 500
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+
+  &:hover
+    background-color: color.adjust($bulmaPrimary, $lightness: 10%)
+
+.bu-link
+  @extend .bu-primary
+  background-color: $bulmaLink
+  color: $bulmaLinkText
+
+  &:hover
+    background-color: color.adjust($bulmaLink, $lightness: 5%)
+
+.bu-info
+  @extend .bu-primary
+  background-color: $bulmaInfo
+  color: $bulmaInfoText
+
+  &:hover
+    background-color: color.adjust($bulmaInfo, $lightness: 5%)
+
+.bu-success
+  @extend .bu-primary
+  background-color: $bulmaSuccess
+  color: $bulmaSuccessText
+
+  &:hover
+    background-color: color.adjust($bulmaSuccess, $lightness: 5%)
+
+.bu-warning
+  @extend .bu-primary
+  background-color: $bulmaWarning
+  color: $bulmaWarningText
+
+  &:hover
+    background-color: color.adjust($bulmaWarning, $lightness: 5%)
+
+.bu-danger
+  @extend .bu-primary
+  background-color: $bulmaDanger
+  color: $bulmaDangerText
+
+  &:hover
+    background-color: color.adjust($bulmaDanger, $lightness: 5%)
+
+.bu-light
+  @extend .bu-primary
+  background-color: $bulmaLight
+  color: $bulmaLightText
+
+  &:hover
+    background-color: color.adjust($bulmaLight, $lightness: 5%)
+
+.bu-dark
+  @extend .bu-primary
+  background-color: $bulmaDark
+  color: $bulmaDarkText
+
+  &:hover
+    background-color: color.adjust($bulmaDark, $lightness: 5%)
+
+.bu-text
+  @extend .bu-primary
+  background-color: rgba(0,0,0,0)
+  color: $bulmaTextText
+  text-decoration: underline
+
+  &:hover
+    background-color: hsl(221,14%,14%)
+
+.bu-ghost
+  @extend .bu-primary
+  background-color: $bulmaGhost
+  color: $bulmaGhostText
+
+  &:hover
+    background-color: transparent
+    text-decoration: underline
+
+.bo-primary
+  @extend .button
+  font-family: 'Segoe UI', fonts.$Roboto
+  background-color: $bootstrapPrimary
+  color: $bootstrapTextLight
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 400
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+  margin: 0.25rem 0.125rem
+
+  &:hover
+    background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
+
+.bo-secondary
+  @extend .bo-primary
+  background-color: $bootstrapSecondary
+
+  &:hover
+    background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
+
+.bo-success
+  @extend .bo-primary
+  background-color: $bootstrapSuccess
+
+  &:hover
+    background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
+
+.bo-danger
+  @extend .bo-primary
+  background-color: $bootstrapDanger
+
+  &:hover
+    background-color: color.adjust($bootstrapDanger, $blackness: 10%)
+
+.bo-warning
+  @extend .bo-primary
+  background-color: $bootstrapWarning
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapWarning, $lightness: 5%)
+
+.bo-info
+  @extend .bo-primary
+  background-color: $bootstrapInfo
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapInfo, $lightness: 5%)
+
+.bo-light
+  @extend .bo-primary
+  background-color: $bootstrapLight
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapLight, $blackness: 10%)
+
+.bo-dark
+  @extend .bo-primary
+  background-color: $bootstrapDark
+  // color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapDark, $lightness: 10%)
+
+.bo-link
+  @extend .bo-primary
+  background-color: transparent
+  color: $bootstrapTextLink
+  text-decoration: underline
+
+  &:hover
+    color: color.adjust($bootstrapTextLink, $lightness: 5%)
+    background-color: transparent

fwt/components/Button/Button.tsx

@@ -0,0 +1,82 @@
+import './Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+
+interface Props {
+  label?: string
+  to?: string
+  onClick?: () => void
+  edges?: 'curved' | 'rounded' | 'flat'
+  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
+  submit?: boolean
+}
+
+const getBorderRadius = (edge: Props['edges']) => {
+  switch (edge) {
+    case 'curved':
+      return 'border-radius: 6px'
+    case 'rounded':
+      return 'border-radius: 32px'
+    case 'flat':
+      return 'border-radius: 0'
+    default:
+      return 'border-radius: 0'
+  }
+}
+
+export default (props: Props) => {
+  const borderRadius = getBorderRadius(props.edges)
+
+  return (
+    <>
+      <Show when={props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <a href={props.to} aria-label={props.label} data-astro-prefetch>
+              <button class={props.design} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </a>
+          </Match>
+          <Match when={!props.design}>
+            <a href={props.to} aria-label={props.label} data-astro-prefetch>
+              <button class="button" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </a>
+          </Match>
+        </Switch>
+      </Show>
+
+      <Show when={!props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <Show when={props.submit}>
+              <button class={props.design} type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class={props.design} onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+          <Match when={!props.design}>
+            <Show when={props.submit}>
+              <button class="button" type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class="button" onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  )
+}

fwt/components/Column/Column.sass

@@ -0,0 +1,39 @@
+.column-top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.column-center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.column-right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.column-split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.column-spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center

fwt/components/Column/Column.tsx

@@ -0,0 +1,18 @@
+import type { JSXElement } from 'solid-js'
+import './Column.sass'
+
+interface Props {
+  children: JSXElement
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}

fwt/components/Copyright/Copyright.tsx

@@ -0,0 +1,14 @@
+interface Props {
+  year: string
+  name: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <span>
+        Copyright © {props.year} {props.name} All Rights Reserved.
+      </span>
+    </>
+  )
+}

fwt/components/Footer/Footer.sass

@@ -0,0 +1,7 @@
+.footer
+  padding: 1rem 0
+  margin: 0 2rem
+  position: fixed
+  bottom: 0
+  width: 100%
+  opacity: 0.8

fwt/components/Footer/Footer.tsx

@@ -0,0 +1,16 @@
+import './Footer.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <footer class="footer">
+        <small>{props.children}</small>
+      </footer>
+    </>
+  )
+}

fwt/components/Form/Form.tsx

@@ -0,0 +1,16 @@
+import './Form.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <form method="post" enctype="application/x-www-form-urlencoded">
+        {props.children}
+      </form>
+    </>
+  )
+}

fwt/components/HTML/HTML.sass

@@ -0,0 +1,25 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+
+.body
+  color: vars.$textColor
+
+.inter
+  @extend .body
+  font-family: fonts.$Inter
+
+.roboto
+  @extend .body
+  font-family: fonts.$Roboto
+
+.montserrat
+  @extend .body
+  font-family: fonts.$Montserrat
+
+.open-sans
+  @extend .body
+  font-family: fonts.$OpenSans
+
+.public-sans
+  @extend .body
+  font-family: fonts.$PublicSans

fwt/components/HTML/HTML.tsx

@@ -0,0 +1,41 @@
+import './HTML.sass'
+import { type JSXElement, Show } from 'solid-js'
+import background1 from '../../images/background.avif'
+import background2 from '../../images/background.webp'
+
+interface Props {
+  title: string
+  name: string
+  description: string
+  children: JSXElement
+  font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
+  preloadBackground?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <html lang="en">
+        <head>
+          <base href="/" />
+          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+          <meta name="name" content={props.name} />
+          <meta name="description" content={props.description} />
+          <meta property="og:title" content={props.name} />
+          <meta property="og:description" content={props.description} />
+          <meta property="og:type" content="website" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+          <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+          <Show when={props.preloadBackground}>
+            <link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
+            <link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
+          </Show>
+          <title>{props.title}</title>
+        </head>
+
+        <body class={props.font}>{props.children}</body>
+      </html>
+    </>
+  )
+}

fwt/components/Image/Image.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  avif: string
+  webp: string
+  size?: number
+  alt?: string
+  radius?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={props.avif} type="image/avif" />
+        <source srcset={props.webp} type="image/webp" />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+      </picture>
+    </>
+  )
+}

fwt/components/Input/Input.sass

@@ -0,0 +1,27 @@
+.input
+  font-size: 1rem
+  padding: 0.5rem 1rem
+  width: 100%
+  border: 2px solid #ccc
+  border-radius: 4px
+  outline: none
+  transition: border-color 0.3s, box-shadow 0.3s
+
+  &:focus
+    border-color: #3377AC
+    box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
+
+  &::placeholder
+    color: #888
+    font-style: italic
+
+  &:disabled
+    background-color: #f0f0f0
+    border-color: #ddd
+
+  &--error
+    border-color: #ff4d4f
+    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
+
+    &:focus
+      border-color: #e81123

fwt/components/Input/Input.tsx

@@ -0,0 +1,27 @@
+import './Input.sass'
+import { createSignal } from 'solid-js'
+
+interface Props {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export default (props: Props) => {
+  const [inputValue, setInputValue] = createSignal(props.value || '')
+
+  const handleChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const newValue = target.value
+    setInputValue(newValue)
+    if (props.onChange) {
+      props.onChange(newValue)
+    }
+  }
+
+  return (
+    <>
+      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+    </>
+  )
+}

fwt/components/Link/Link.sass

@@ -0,0 +1,3 @@
+a
+  text-decoration: none
+  color: inherit

fwt/components/Link/Link.tsx

@@ -0,0 +1,16 @@
+import './Link.sass'
+
+interface Props {
+  to: string
+  children?: any
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <a href={props.to} aria-label={`Go to ${props.to}`} data-astro-prefetch>
+        {props.children}
+      </a>
+    </>
+  )
+}

fwt/components/Logo/Logo.tsx

@@ -0,0 +1,19 @@
+import webpPath from '../../images/logo.webp'
+import avifPath from '../../images/logo.avif'
+
+interface Props {
+  size?: number
+  alt?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={avifPath.src} type="image/avif" />
+        <source srcset={webpPath.src} type="image/webp" />
+        <img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
+      </picture>
+    </>
+  )
+}

fwt/components/Navbar/Navbar.sass

@@ -0,0 +1,7 @@
+.nav
+  position: fixed
+  top: 0
+  width: 100%
+  padding: 1rem 0
+  // margin: 5rem
+

fwt/components/Navbar/Navbar.tsx

@@ -0,0 +1,18 @@
+import './Navbar.sass'
+import { Show } from 'solid-js'
+import Row from '../Row/Row'
+
+interface Props {
+  transparent?: boolean
+  children: HTMLElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <nav class="nav" role="navigation" aria-label="main navigation">
+        <Row content="split">{props.children}</Row>
+      </nav>
+    </>
+  )
+}

fwt/components/Optimizer/OptimizeBackground.tsx

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const convertBackground = async () => {
+  const inputSrc = 'src/assets/images/background.png'
+  const webpOutput = 'fwt/images/background.webp'
+  const avifOutput = 'fwt/images/background.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutput)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutput)
+}
+
+export default () => {
+  convertBackground()
+}

fwt/components/Optimizer/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.webp`
+
+  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutputPath)
+
+  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutputPath)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+}

fwt/components/Optimizer/OptimizeLogo.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  size?: number
+}
+
+const convertLogo = async (props: Props) => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const webpImage = 'fwt/images/logo.webp'
+  const avifImage = 'fwt/images/logo.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifImage)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpImage)
+}
+
+export default (props: Props) => {
+  convertLogo(props)
+}

fwt/components/Page/Page.sass

@@ -0,0 +1,14 @@
+.page
+  margin: 2rem
+  height: auto
+  min-height: 90vh
+
+.column
+  @extend .page
+  display: flex
+  flex-direction: column
+  align-items: center
+
+.row
+  @extend .column
+  flex-direction: row

fwt/components/Page/Page.tsx

@@ -0,0 +1,20 @@
+import './Page.sass'
+import { Show } from 'solid-js'
+
+interface Props {
+  children?: any
+  alignment?: 'row' | 'column'
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">{props.children}</main>
+      </Show>
+    </>
+  )
+}

fwt/components/Row/Row.sass

@@ -0,0 +1,47 @@
+.row-left
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.row-center
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.row-right
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.row-split
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.row-spaced
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
+
+.row-even
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  align-content: center

fwt/components/Row/Row.tsx

@@ -0,0 +1,24 @@
+import './Row.sass'
+import { Show, type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.gap}>
+        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}

src/layouts/Layout.astro

@@ -1,44 +1,16 @@
 ---
 import Navbar from '../components/Navbar/Navbar.tsx'
 const { title } = Astro.props
+
+const websiteName = 'AIO Tools'
+const websiteDescription = 'All-in-One Tools for Everyone'
+
+import Background from '../../fwt/components/Background/Background'
+import HTML from '../../fwt/components/HTML/HTML'
 ---
 
-<html lang="en">
+<HTML title={title} name={websiteName} description={websiteDescription} font="inter">
-  <head>
+  <Background color="#0f1a28" />
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="name" content="AIO Tools" />
-    <meta name="description" content="All-in-One Tools for Everyone" />
-    <title>{title}</title>
-  </head>
-
-  <body id="body">
   <Navbar />
   <slot />
-  </body>
+</HTML>
-</html>
-
-<style lang="sass">
-  @use '/src/assets/css/variables.sass' as vars
-
-  @font-face
-    font-family: 'Inter'
-    font-style: normal
-    font-display: swap
-    font-weight: 100 900
-    src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations')
-    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
-
-  @font-face
-    font-family: 'Montserrat'
-    font-style: normal
-    font-display: swap
-    font-weight: 100 900
-    src: url(@fontsource-variable/montserrat/files/montserrat-latin-wght-normal.woff2) format('woff2-variations')
-    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
-
-  #body
-    font-family: vars.$fontFamily
-    background-color: vars.$background
-</style>

src/pages/about.astro

@@ -15,16 +15,13 @@ import Layout from '../layouts/Layout.astro'
       AIO Tools is made using <a target="_blank" href="https://astro.build/">AstroJS</a> and <a target="_blank" href="https://www.solidjs.com/">SolidJS</a> to achieve maximum performance and to provide a smooth user experience, and is styled with <a target="_blank" href="https://sass-lang.com/">SASS</a>. The UI Components are manually built from scratch for better flexibility. Third-party open-source libraries are used in some tools, you may find the complete list in the package.json file of the
       repository.
     </p>
-
-    <!-- <h2 class="paragraph-title">Found a bug? A tool is missing?</h2> -->
-    <!-- <p class="paragraph-content">If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the issues section in the GitHub repository. And if you found a bug, or something doesn't work as expected, please file a bug report in the issues section in the GitHub repository.</p> -->
   </main>
 </Layout>
 
-
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
-  @use '/src/assets/css/variables.sass' as vars
+  @use '/src/styles/variables.sass' as vars
+  @use '/src/styles/fonts.sass' as fonts
   @use 'sass:color'
 
   .page
@@ -33,7 +30,7 @@ import Layout from '../layouts/Layout.astro'
     flex-direction: column
     items-align: center
     color: #ffffff
-    font-family: 'Inter', sans-serif
+    font-family: fonts.$Inter
 
     @media screen and (max-width: view.$tablet)
       padding: 1rem

src/pages/color-converter.astro

@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Color Converter - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Color Converter" description="Convert colors to any format. Color picker provided inside." />
 
     <section class="content">
       <ColorConverterComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     text-align: center

src/pages/hash-generator.astro

@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Hash Generator - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
 
     <section class="content">
       <HashGeneratorComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     text-align: center

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 Logo from '../../fwt/components/Logo/Logo'
-import { Image } from 'astro:assets'
+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>
+      <Link to="/password-generator"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /></Link>
-      <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>
+      <Link to="/hash-generator"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></Link>
-      <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>
+      <Link to="/color-converter"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></Link>
-      <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="/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/styles/breakpoint.sass' as view
-  @use '/src/assets/css/variables.sass' as vars
+  @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>

src/pages/password-generator.astro

@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Password Generator - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Password Generator" description="Generate a strong and secure password for your accounts online." />
 
     <section class="content">
       <PasswordGeneratorComponent client:load />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     text-align: center

src/pages/password-manager.astro

@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
 ---
 
 <Layout title="Password Manager - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Password Manager" description="Manage your passwords securely and privately. Recommended to be pair with Password Generator for best security." />
 
     <section class="content">
       <PasswordManagerComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     font-family: 'Inter', sans-serif

src/pages/text-comparison.astro

@@ -5,17 +5,17 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
 ---
 
 <Layout title="Text Comparison - AIO Tools">
-  <div class="page">
+  <main class="page">
     <PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />
 
     <section class="content">
       <TextComparisonComponent client:visible />
     </section>
-  </div>
+  </main>
 </Layout>
 
 <style lang="sass">
-  @use '/src/assets/css/viewport.sass' as view
+  @use '/src/styles/breakpoint.sass' as view
 
   .page
     font-family: 'Inter', sans-serif

src/styles/breakpoint.sass

@@ -0,0 +1,3 @@
+$mobile: 375px
+$tablet: 768px
+$desktop: 1440px

src/styles/classes.sass

@@ -0,0 +1,71 @@
+@use './breakpoint' as view
+
+.fullscreen
+  position: fixed
+  top: 0
+  left: 0
+  width: 100vw
+  height: 100vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1
+
+.on-desktop-only
+  @media only screen and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (max-width: view.$tablet)
+    display: none
+
+  @media only screen and (max-width: view.$mobile)
+    display: none
+
+.on-tablet-only
+  @media only screen and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (max-width: view.$tablet)
+    display: block
+
+  @media only screen and (max-width: view.$mobile)
+    display: none
+
+.on-mobile-only
+  @media only screen and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (max-width: view.$tablet)
+    display: none
+
+  @media only screen and (max-width: view.$mobile)
+    display: block
+
+.on-desktop-tablet-only
+  @media only screen and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (max-width: view.$tablet)
+    display: block
+
+  @media only screen and (max-width: view.$mobile)
+    display: none
+
+.on-desktop-mobile-only
+  @media only screen and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (max-width: view.$tablet)
+    display: none
+
+  @media only screen and (max-width: view.$mobile)
+    display: block
+
+.on-tablet-mobile-only
+  @media only screen and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (max-width: view.$tablet)
+    display: block
+
+  @media only screen and (max-width: view.$mobile)
+    display: block

src/styles/fonts.sass

@@ -0,0 +1,45 @@
+$Roboto: Roboto, sans-serif
+$Inter: Inter, sans-serif
+$Montserrat: Montserrat, sans-serif
+$OpenSans: 'Open Sans', sans-serif
+$PublicSans: 'Public Sans', sans-serif
+
+@font-face
+  font-family: 'Roboto'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Inter'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Montserrat'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Open Sans'
+  font-style: normal
+  font-display: swap
+  font-weight: 300 800
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Public Sans'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD

src/styles/variables.sass

@@ -0,0 +1,9 @@
+@use 'sass:color'
+
+$fontFamily: 'Inter', sans-serif
+$background: #0f1a28
+$textColor: color.adjust($background, $lightness: 80%)
+$textColorTitle: color.adjust($background, $lightness: 75%)
+$borderRadius: 16px
+$componentBorder: 2px solid color.adjust($background, $lightness: 6%)
+$componentBackground: color.adjust($background, $lightness: 1%)