Arranged

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

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>
     </>
   )
 }

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

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>
     </>
   )

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

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>
     </>
   )

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>