From f4beb0bea506b3f44ddceadb7df3debe3c836e41 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 16:08:33 +0800
Subject: [PATCH 1/5] Added box component

---
 fwt/components/Box/Box.sass |  6 ++++++
 fwt/components/Box/Box.tsx  | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 fwt/components/Box/Box.sass
 create mode 100644 fwt/components/Box/Box.tsx

diff --git a/fwt/components/Box/Box.sass b/fwt/components/Box/Box.sass
new file mode 100644
index 0000000..17165bb
--- /dev/null
+++ b/fwt/components/Box/Box.sass
@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px
diff --git a/fwt/components/Box/Box.tsx b/fwt/components/Box/Box.tsx
new file mode 100644
index 0000000..dc71de3
--- /dev/null
+++ b/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>
+  )
+}

From af311111c6931dfbfb5ed21a564c3a2fd60a398d Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 16:35:18 +0800
Subject: [PATCH 2/5] Fixed bugs

---
 fwt/components/Column/Column.sass | 10 +++++-----
 fwt/components/Column/Column.tsx  |  6 +++---
 fwt/components/Row/Row.sass       | 12 ++++++------
 fwt/components/Row/Row.tsx        |  8 ++++----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/fwt/components/Column/Column.sass b/fwt/components/Column/Column.sass
index 7a9309e..b26f108 100644
--- a/fwt/components/Column/Column.sass
+++ b/fwt/components/Column/Column.sass
@@ -1,4 +1,4 @@
-.top
+.column-top
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.center
+.column-center
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.right
+.column-right
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.split
+.column-split
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.spaced
+.column-spaced
   display: flex
   flex-direction: column
   flex-wrap: wrap
diff --git a/fwt/components/Column/Column.tsx b/fwt/components/Column/Column.tsx
index 27e0e05..3f5c786 100644
--- a/fwt/components/Column/Column.tsx
+++ b/fwt/components/Column/Column.tsx
@@ -3,16 +3,16 @@ import './Column.sass'
 
 interface Props {
   children: JSXElement
-  content: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
   gap?: number
 }
 
 export default (props: Props) => {
   return (
     <>
-      <div class={props.content} style={`gap: ${props.gap}rem`}>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
         {props.children}
-      </div>
+      </section>
     </>
   )
 }
diff --git a/fwt/components/Row/Row.sass b/fwt/components/Row/Row.sass
index a103f5c..6162bbe 100644
--- a/fwt/components/Row/Row.sass
+++ b/fwt/components/Row/Row.sass
@@ -1,4 +1,4 @@
-.left
+.row-left
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.center
+.row-center
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.right
+.row-right
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.split
+.row-split
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.spaced
+.row-spaced
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -38,7 +38,7 @@
   align-items: center
   align-content: center
 
-.even
+.row-even
   display: flex
   flex-direction: row
   flex-wrap: wrap
diff --git a/fwt/components/Row/Row.tsx b/fwt/components/Row/Row.tsx
index 0e3176b..5255e9c 100644
--- a/fwt/components/Row/Row.tsx
+++ b/fwt/components/Row/Row.tsx
@@ -3,7 +3,7 @@ import { Show, type JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement
-  content: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
   gap?: number
 }
 
@@ -11,13 +11,13 @@ export default (props: Props) => {
   return (
     <>
       <Show when={props.gap}>
-        <div class={props.content} style={`gap: ${props.gap}rem`}>
+        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
           {props.children}
-        </div>
+        </section>
       </Show>
 
       <Show when={!props.gap}>
-        <div class={props.content}>{props.children}</div>
+        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
       </Show>
     </>
   )

From 9b5aa100260c39d52a257b5e20ac21bdb7d1c84c Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 16:39:33 +0800
Subject: [PATCH 3/5] Cleanup

---
 fwt/components/Footer/Footer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/fwt/components/Footer/Footer.tsx b/fwt/components/Footer/Footer.tsx
index a8f4780..2c47f07 100644
--- a/fwt/components/Footer/Footer.tsx
+++ b/fwt/components/Footer/Footer.tsx
@@ -1,6 +1,5 @@
 import './Footer.sass'
 import type { JSXElement } from 'solid-js'
-import Row from '../Row/Row'
 
 interface Props {
   children: JSXElement

From 76bcdfc00ba9f590f597d8ed117cc47ad2ec758f Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 16:47:39 +0800
Subject: [PATCH 4/5] Simplified form component

---
 fwt/components/Form/Form.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/fwt/components/Form/Form.tsx b/fwt/components/Form/Form.tsx
index 9436017..a498c76 100644
--- a/fwt/components/Form/Form.tsx
+++ b/fwt/components/Form/Form.tsx
@@ -1,19 +1,15 @@
 import './Form.sass'
 import type { JSXElement } from 'solid-js'
-import Button from '../Button/Button'
 
 interface Props {
   children: JSXElement
-  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'
 }
 
 export default (props: Props) => {
   return (
     <>
-      <form method="post">
+      <form method="post" enctype="application/x-www-form-urlencoded">
         {props.children}
-        <Button submit label="Submit" edges={props.edges || 'flat'} design={props.design} />
       </form>
     </>
   )

From 2bc78b0b3a0f3e11370e890310b6e5e576d6272a Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 16:48:05 +0800
Subject: [PATCH 5/5] Arranged

---
 src/pages/index.astro | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index a42c855..ca71087 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -34,10 +34,10 @@ import Copyright from '../../fwt/components/Copyright/Copyright'
         <Copyright year="2025" name="Pat Alcala" />
       </Row>
     </Footer>
-
-    <style lang="sass">
-      h1
-        color: #3377AC
-    </style>
   </Page>
 </Layout>
+
+<style lang="sass">
+  h1
+    color: #3377AC
+</style>