Added column to organize display

README.md

@@ -68,13 +68,6 @@ sudo vim docker-compose.yml
 ```
 docker compose up -d
 ```
-#### Remove the dangling image created
-
-An node image was created as a requirement for the build process, to ensure dependencies are installed. This image is temporary and should be remove afer the built project is moved to nginx runtime image.
-
-```
-docker rmi $(docker images -f "dangling=true" -q)
-```
 
 ### Podman
 
@@ -84,12 +77,6 @@ docker rmi $(docker images -f "dangling=true" -q)
 podman-compose up -d
 ```
 
-#### Remove the dangling image created
-
-```
-podman rmi $(docker images -f "dangling=true" -q)
-```
-
 ### Podman Quadlet
 
 #### Edit Quadlet Container

fwt/components/Modal.tsx

@@ -0,0 +1,27 @@
+import '../styles/Modal.sass'
+import { type JSXElement, Show, createSignal } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.border}>
+        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+          {props.children}
+        </div>
+      </Show>
+
+      <Show when={!props.border}>
+        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+          {props.children}
+        </div>
+      </Show>
+    </>
+  )
+}

fwt/styles/Modal.sass

@@ -0,0 +1,20 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.modal
+  display: flex
+  justify-content: center
+  align-items: center
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  backdrop-filter: blur(20px)
+  background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.6)
+  z-index: 999
+
+  &__content
+    border-radius: 8px
+    padding: 2rem
+    position: relative

package.json

@@ -17,6 +17,7 @@
     "astro": "^5.13.8",
     "astro-compressor": "^1.1.2",
     "astro-purgecss": "^5.3.0",
+    "gsap": "^3.13.0",
     "lightningcss": "^1.30.1",
     "nanostores": "^1.0.1",
     "purgecss": "^7.0.2",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       astro-purgecss:
         specifier: ^5.3.0
         version: 5.3.0(astro@5.13.8(@types/node@24.5.2)(lightningcss@1.30.1)(rollup@4.50.1)(sass-embedded@1.92.1)(sass@1.92.1)(typescript@5.8.3))(purgecss@7.0.2)
+      gsap:
+        specifier: ^3.13.0
+        version: 3.13.0
       lightningcss:
         specifier: ^1.30.1
         version: 1.30.1
@@ -1331,6 +1334,9 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
+  gsap@3.13.0:
+    resolution: {integrity: sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==}
+
   h3@1.15.4:
     resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
 
@@ -3663,6 +3669,8 @@ snapshots:
 
   globals@11.12.0: {}
 
+  gsap@3.13.0: {}
+
   h3@1.15.4:
     dependencies:
       cookie-es: 1.2.2

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Page, Footer, Row, Image, Copyright } from '../../fwt/'
+import { Button, Logo, Link, Page, Footer, Row, Image, Copyright, Column } from '../../fwt/'
 import Counter from '../components/Counter/Counter'
 import PA1 from '../../fwt/images/pat-alcala.avif'
 import PA2 from '../../fwt/images/pat-alcala.webp'
@@ -10,21 +10,23 @@ import PA2 from '../../fwt/images/pat-alcala.webp'
 
 <Layout title="FWT">
   <Page alignment="column">
-    <Link to="https://git.patalcala.com/patalcala9/fwt">
+    <Column>
-      <Logo size={250} />
+      <Link to="https://git.patalcala.com/patalcala9/fwt" newtab>
-    </Link>
+        <Logo size={250} />
+      </Link>
 
-    <h1>Fast WebApp Template</h1>
+      <h1>Fast WebApp Template</h1>
-    <Counter client:idle />
+      <Counter client:idle />
 
-    <Button edges="rounded" label="FWT Components" to="/next" />
+      <Button edges="rounded" label="FWT Components" to="/next" />
 
-    <Footer>
+      <Footer>
-      <Row content="center" gap={0.5}>
+        <Row content="center" gap={0.5}>
-        <Image avif={PA1.src} webp={PA2.src} size={100} />
+          <Image avif={PA1.src} webp={PA2.src} size={100} />
-        <Copyright year="2025" name="Pat Alcala" />
+          <Copyright year="2025" name="Pat Alcala" />
-      </Row>
+        </Row>
-    </Footer>
+      </Footer>
+    </Column>
   </Page>
 </Layout>