Changed from astro to pure solidjs

.astro/content-assets.mjs

@@ -0,0 +1 @@
+export default new Map();

.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

.astro/content.d.ts

@@ -0,0 +1,199 @@
+declare module 'astro:content' {
+	export interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	export type ReferenceDataEntry<
+		C extends CollectionKey,
+		E extends keyof DataEntryMap[C] = string,
+	> = {
+		collection: C;
+		id: E;
+	};
+	export type ReferenceContentEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}) = string,
+	> = {
+		collection: C;
+		slug: E;
+	};
+	export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+		collection: C;
+		id: string;
+	};
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter?: LiveLoaderCollectionFilterType<C>,
+	): Promise<
+		import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+	>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		entry: ReferenceContentEntry<C, E>,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		entry: ReferenceDataEntry<C, E>,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? string extends keyof DataEntryMap[C]
+			? Promise<DataEntryMap[C][E]> | undefined
+			: Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter: string | LiveLoaderEntryFilterType<C>,
+	): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: ReferenceContentEntry<C, ValidContentEntrySlug<C>>[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? ReferenceContentEntry<C, ValidContentEntrySlug<C>>
+			: ReferenceDataEntry<C, keyof DataEntryMap[C]>
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		
+	};
+
+	type DataEntryMap = {
+		
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+		infer TData,
+		infer TEntryFilter,
+		infer TCollectionFilter,
+		infer TError
+	>
+		? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+		: { data: never; entryFilter: never; collectionFilter: never; error: never };
+	type ExtractDataType<T> = ExtractLoaderTypes<T>['data'];
+	type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
+	type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
+	type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
+
+	type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+		LiveContentConfig['collections'][C]['schema'] extends undefined
+			? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+			: import('astro/zod').infer<
+					Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
+				>;
+	type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+		LiveContentConfig['collections'][C]['loader']
+	>;
+
+	export type ContentConfig = typeof import("../src/content.config.mjs");
+	export type LiveContentConfig = never;
+}

.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.13.8","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"http://localhost:4321\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_fwt\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"never\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"prefetch\":true,\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false},\"legacy\":{\"collections\":false}}"]

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1758157364090
+	}
+}

.astro/types.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

.env

@@ -0,0 +1 @@
+BACKEND=http://localhost:4320/api/

.gitignore

@@ -1,37 +1,24 @@
-# build output
-dist/
-# generated types
-.astro/
-
-# dependencies
-node_modules/
-
-# logs
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
 
+node_modules
+dist
+dist-ssr
+*.local
 
-# environment variables
-.env
-.env.local
-.env.production
-
-# macOS-specific files
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-
-# jetbrains setting folder
-.idea/
-
-# Playwright
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-
-# Backend
-backend/target/
-
-# Custom
-# src/assets/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "5150e8c9",
+  "configHash": "5122d30b",
+  "lockfileHash": "21c3b17e",
+  "browserHash": "c8ad0cff",
+  "optimized": {},
+  "chunks": {}
+}

.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

README.md

@@ -1,3 +1,28 @@
-![Logo](src/assets/images/logo.png)
+## Usage
 
-# OCBO e-Sign
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html)

astro.config.mjs

@@ -6,6 +6,7 @@ import robotsTxt from '@itsmatteomanf/astro-robots-txt'
 import purgecss from 'astro-purgecss'
 
 export default defineConfig({
+  output: 'static',
   prefetch: true,
   integrations: [
     solidJs(),

index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="name" content="OCBO e-Sign" />
+    <meta name="description" content="Digital Signature added for OCBO (Office of the City Building Official)" />
+    <meta name="title" property="og:title" content="OCBO e-Sign" />
+    <meta name="keywords" content="HTML, CSS, JavaScript" />
+    <meta name="author" content="Patrick Alvin Alcala" />
+    <meta property="og:description" content="Digital Signature added for OCBO (Office of the City Building Official)" />
+    <meta property="og:type" content="website" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <title>OCBO e-Sign</title>
+  </head>
+
+  <body class="body">
+    <div id="root"></div>
+    <script type="module" src="/src/layouts/Layout.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,34 +1,27 @@
 {
-  "name": "fast-webapp-template",
+  "name": "ocbo-esign-solid",
+  "private": true,
+  "version": "0.0.0",
   "type": "module",
-  "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro",
-    "test": "playwright clear-cache && playwright test"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^5.1.1",
-    "@itsmatteomanf/astro-robots-txt": "^0.2.0",
-    "@nanostores/solid": "^1.1.1",
-    "@supabase/supabase-js": "^2.57.4",
-    "astro": "^5.13.8",
-    "astro-compressor": "^1.1.2",
-    "astro-purgecss": "^5.3.0",
+    "@kobalte/core": "^0.13.11",
+    "@solidjs/router": "^0.15.3",
     "gsap": "^3.13.0",
-    "lightningcss": "^1.30.1",
     "nanostores": "^1.0.1",
     "ofetch": "^1.4.1",
-    "purgecss": "^7.0.2",
     "sharp": "^0.34.4",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.9"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.0",
-    "@types/node": "^24.5.2",
-    "sass-embedded": "^1.92.1"
+    "sass-embedded": "^1.93.1",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vite-plugin-solid": "^2.11.8"
   }
 }

src/components/Box/Box.sass

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

src/components/Box/Box.tsx

@@ -0,0 +1,19 @@
+import './Box.sass'
+import { 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>
+  )
+}

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

src/components/Button/Button.tsx

@@ -0,0 +1,84 @@
+import './Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+import { A } from '@solidjs/router'
+
+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
+  newtab?: 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} target={props.newtab ? '_blank' : '_self'}>
+              <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} target={props.newtab ? '_blank' : '_self'}>
+              <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>
+    </>
+  )
+}

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

src/components/Column/Column.tsx

@@ -0,0 +1,18 @@
+import './Column.sass'
+import type { JSXElement } from 'solid-js'
+
+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>
+    </>
+  )
+}

src/components/Combobox/Combobox.tsx

@@ -1,41 +0,0 @@
-import Input from '../../../fwt/components/Input'
-import { createSignal } from 'solid-js'
-
-interface Props {
-  placeholder?: string
-  value?: string
-  onChange?: (value: string) => void
-  options: string[]
-}
-
-export default (props: Props) => {
-  const [sample, setSample] = createSignal(props.value || '')
-  const [isOpen, setIsOpen] = createSignal(false)
-  const [selectedOption, setSelectedOption] = createSignal('')
-
-  const handleInputChange = (val: string) => {
-    setSample(val)
-    setSelectedOption('')
-    setIsOpen(true)
-  }
-
-  const handleSelectOption = (option: string) => {
-    setSelectedOption(option)
-    setSample(option)
-    setIsOpen(false)
-    props.onChange?.(option)
-  }
-
-  return (
-    <>
-      <Input onChange={handleInputChange} placeholder={props.placeholder || 'Select an option'} value={sample()}></Input>
-      {isOpen() && (
-        <ul>
-          {props.options.map((option, index) => (
-            <li onClick={() => handleSelectOption(option)}>{option}</li>
-          ))}
-        </ul>
-      )}
-    </>
-  )
-}

src/components/Display/Display.sass

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

src/components/Display/Display.tsx

@@ -0,0 +1,41 @@
+import './Display.sass'
+import { type JSXElement, Switch, Match } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  desktop?: boolean
+  tablet?: boolean
+  mobile?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Switch>
+        <Match when={props.desktop && !props.tablet && !props.mobile}>
+          <div class="on-desktop-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && !props.mobile}>
+          <div class="on-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && !props.tablet && props.mobile}>
+          <div class="on-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && props.tablet && !props.mobile}>
+          <div class="on-desktop-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && !props.tablet && props.mobile}>
+          <div class="on-desktop-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && props.mobile}>
+          <div class="on-tablet-mobile-only">{props.children}</div>
+        </Match>
+      </Switch>
+    </>
+  )
+}

src/components/Footer/Footer.sass

@@ -0,0 +1,13 @@
+@use '/src/styles/breakpoint.sass' as view
+
+.footer
+  padding: 1rem 0
+  margin: 0 2rem
+  position: fixed
+  bottom: 0
+  width: 100%
+  opacity: 0.8
+  font-size: 1rem
+
+  @media only screen and (max-width: view.$tablet)
+    font-size: 0.75rem

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

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

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

src/components/Input/Input.tsx

@@ -1,12 +0,0 @@
-import Input from '../../../fwt/components/Input'
-import { createSignal } from 'solid-js'
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Input onChange={(val) => setSample(val)}></Input>
-    </>
-  )
-}

src/components/Link/Link.sass

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

src/components/Link/Link.tsx

@@ -0,0 +1,18 @@
+import './Link.sass'
+import { A } from '@solidjs/router'
+
+interface Props {
+  to: string
+  children?: any
+  newtab?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <A href={props.to} aria-label={`Go to ${props.to}`} target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+        {props.children}
+      </A>
+    </>
+  )
+}

src/components/Logo/Logo.tsx

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

src/components/Modal/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

src/components/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import './Modal.sass'
+import { type JSXElement, Show } from 'solid-js'
+import gsap from 'gsap'
+import Button from '../Button/Button'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  let dialogRef!: HTMLDivElement
+
+  // const [open, setOpen] = createSignal(false)
+
+  const openHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'flex',
+      ease: 'power2.out',
+    })
+  }
+
+  const closeHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'none',
+      ease: 'power2.out',
+    })
+  }
+
+  return (
+    <>
+      <Button label="OpenDialog" onClick={openHandler}></Button>
+      <div class="modal" ref={dialogRef} onClick={closeHandler}>
+        <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>
+      </div>
+    </>
+  )
+}

src/components/Optimizers/OptimizeBackground.tsx

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const convertBackground = async () => {
+  const inputSrc = 'src/assets/images/background.png'
+  const webpOutput = 'src/assets/images/optimized/background.webp'
+  const avifOutput = 'src/assets/images/optimized/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()
+}

src/components/Optimizers/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `src/assets/images/optimized/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `src/assets/images/optimized/${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)
+}

src/components/Optimizers/OptimizeLogo.tsx

@@ -0,0 +1,45 @@
+import sharp from 'sharp'
+import { Image } from '../index'
+
+interface Props {
+  size?: number
+  favicon?: boolean
+}
+
+export default (props: Props) => {
+  const webpImage = 'src/assets/images/optimized/logo.webp'
+  const avifImage = 'src/assets/images/optimized/logo.avif'
+  const inputSrc = 'src/assets/images/logo.png'
+
+  const convertLogo = async (props: Props) => {
+    // const webpImage = 'src/assets/images/optimized/logo.webp'
+    // const avifImage = 'src/assets/images/optimized/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)
+  }
+
+  const generateFavicon = async () => {
+    const inputSrc = 'src/assets/images/logo.png'
+    const favicon = 'public/favicon.png'
+
+    const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+    await sharp(faviconBuffer).toFile(favicon)
+  }
+
+  convertLogo(props)
+
+  if (props.favicon) {
+    generateFavicon()
+  }
+
+  return (
+    <>
+      {/* <Image avif={avifImage} webp={webpImage} size={props.size}></Image> */}
+      <h1>Hello</h1>
+    </>
+  )
+}

src/components/Padding/Padding.tsx

@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top?: number
+  bottom?: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}

src/components/Page/Page.sass

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

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

src/components/RegistrationForm/RegistrantionForm.tsx

@@ -1,26 +0,0 @@
-import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../../fwt/'
-import Input from '../../components/Input/Input'
-import Combobox from '../../components/Combobox/Combobox'
-import { ofetch } from 'ofetch'
-import { createSignal } from 'solid-js'
-
-const api = import.meta.env.BACKEND
-const assessors = await ofetch(api + 'get-list-assessors', { parseResponse: JSON.parse })
-const assessorsIDList = assessors.result
-const assessorsNameList = assessors.result2
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Column>
-        <Form>
-          <span>Name</span>
-          {/* <Combobox placeholder="Enter Name" value="1" onChange={() => console.log(1)} /> */}
-          <span>{assessorsNameList}</span>
-        </Form>
-      </Column>
-    </>
-  )
-}

src/components/RegistrationForm/RegistrationForm.sass

@@ -0,0 +1,147 @@
+.aa
+  font-size: 5rem
+
+.combobox__control
+  display: inline-flex
+  justify-content: space-between
+  width: 200px
+  border-radius: 6px
+  font-size: 16px
+  line-height: 1
+  outline: none
+  background-color: white
+  border: 1px solid hsl(240 6% 90%)
+  color: hsl(240 4% 16%)
+  transition: border-color 250ms, color 250ms
+
+  &[data-invalid]
+    border-color: hsl(0 72% 51%)
+    color: hsl(0 72% 51%)
+
+  &_multi
+    width: 100%
+    min-width: 200px
+    max-width: 300px
+
+.combobox__input
+  appearance: none
+  display: inline-flex
+  min-width: 0
+  min-height: 40px
+  padding-left: 16px
+  font-size: 16px
+  background: transparent
+  border-top-left-radius: 6px
+  border-bottom-left-radius: 6px
+  outline: none
+
+  &::placeholder
+    color: hsl(240 4% 46%)
+
+.combobox__trigger
+  appearance: none
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  width: auto
+  outline: none
+  border-top-right-radius: 6px
+  border-bottom-right-radius: 6px
+  padding: 0 10px
+  background-color: hsl(240 5% 96%)
+  border-left: 1px solid hsl(240 6% 90%)
+  color: hsl(240 4% 16%)
+  font-size: 16px
+  line-height: 0
+  transition: 250ms background-color
+
+.combobox__icon
+  height: 20px
+  width: 20px
+  flex: 0 0 20px
+
+.combobox__description
+  margin-top: 8px
+  color: hsl(240 5% 26%)
+  font-size: 12px
+  user-select: none
+
+.combobox__error-message
+  margin-top: 8px
+  color: hsl(0 72% 51%)
+  font-size: 12px
+  user-select: none
+
+.combobox__content
+  background-color: white
+  border-radius: 6px
+  border: 1px solid hsl(240 6% 90%)
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
+  // transform-origin: var(--kb-combobox-content-transform-origin)
+  animation: contentHide 250ms ease-in forwards
+
+  &[data-expanded]
+    animation: contentShow 250ms ease-out
+
+.combobox__listbox
+  overflow-y: auto
+  max-height: 360px
+  padding: 8px
+
+  &:focus
+    outline: none
+
+.combobox__item
+  font-size: 16px
+  line-height: 1
+  color: hsl(240 4% 16%)
+  border-radius: 4px
+  display: flex
+  align-items: center
+  justify-content: space-between
+  height: 32px
+  padding: 0 8px
+  position: relative
+  user-select: none
+  outline: none
+
+  &[data-disabled]
+    color: hsl(240 5% 65%)
+    opacity: 0.5
+    pointer-events: none
+
+  &[data-highlighted]
+    outline: none
+    background-color: hsl(200 98% 39%)
+    color: white
+
+.combobox__section
+  padding: 8px 0 0 8px
+  font-size: 14px
+  line-height: 32px
+  color: hsl(240 4% 46%)
+
+.combobox__item-indicator
+  height: 20px
+  width: 20px
+  display: inline-flex
+  align-items: center
+  justify-content: center
+
+  @keyframes contentShow
+    from
+      opacity: 0
+      transform: translateY(-8px)
+
+    to
+      opacity: 1
+      transform: translateY(0)
+
+  @keyframes contentHide
+    from
+      opacity: 1
+      transform: translateY(0)
+
+    to
+      opacity: 0
+      transform: translateY(-8px)

src/components/RegistrationForm/RegistrationForm.tsx

@@ -0,0 +1,29 @@
+import './RegistrationForm.sass'
+import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Display, Padding } from '../../components'
+import { ofetch } from 'ofetch'
+import { Combobox } from '@kobalte/core/combobox'
+import { AiTwotoneCheckCircle } from 'solid-icons/ai'
+import { TiArrowSortedDown } from 'solid-icons/ti'
+import { createMemo, createSignal, createUniqueId, For, Show } from 'solid-js'
+
+const OPTIONS = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
+
+// const api = import.meta.env.BACKEND
+// const assessors = await ofetch(api + 'get-list-assessors', { parseResponse: JSON.parse })
+// const assessorsIDList = assessors.result
+// const assessorsNameList = assessors.result2
+
+// const [sample, setSample] = createSignal('')
+
+export default () => {
+  return (
+    <>
+      {/* <Form> */}
+      {/* <span>{OPTIONS}</span>
+      <span>{assessorsNameList}</span> */}
+
+      {/* <span>{sample()}</span> */}
+      {/* </Form> */}
+    </>
+  )
+}

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

src/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/components/Table/Table.tsx

@@ -1,7 +1,8 @@
 import './Table.sass'
-import { createSignal, onMount, Index, For } from 'solid-js'
+import { Modal } from '../../components'
+import { createSignal } from 'solid-js'
 import { ofetch } from 'ofetch'
-import { Button } from '../../../fwt'
+// import { Button } from '../../components'
 
 const api = import.meta.env.BACKEND
 
@@ -77,6 +78,12 @@ export default () => {
           </tr> */}
         </tbody>
       </table>
+
+      <div id="modal" style="display: none">
+        <Modal background="rgba(0,0,0,0.5)">
+          <h1>SAMPLE</h1>
+        </Modal>
+      </div>
     </>
   )
 }

src/components/index.ts

@@ -0,0 +1,22 @@
+export { default as Button } from './Button/Button'
+export { default as Box } from './Box/Box'
+export { default as Column } from './Column/Column'
+// export { default as Copyright } from './components/Copyright'
+export { default as Footer } from './Footer/Footer'
+export { default as Form } from './Form/Form'
+// export { default as HTML } from './components/HTML'
+export { default as Image } from './Image/Image'
+export { default as Link } from './Link/Link'
+export { default as Logo } from './Logo/Logo'
+// export { default as Navbar } from './components/Navbar'
+export { default as Page } from './Page/Page'
+export { default as Row } from './Row/Row'
+export { default as Display } from './Display/Display'
+export { default as Padding } from './Padding/Padding'
+export { default as Modal } from './Modal/Modal'
+export { default as Table } from './Table/Table'
+// export { default as Input } from './components/Input'
+
+// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+// export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

src/layouts/Layout.astro

@@ -1,13 +0,0 @@
----
-const { title } = Astro.props
-
-const websiteName = 'OCBO e-Sign'
-const websiteDescription = 'Digital Signature added for OCBO (Office of the City Building Official)'
-
-import { Background, HTML } from '../../fwt'
----
-
-<HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
-  <Background image />
-  <slot />
-</HTML>

src/layouts/Layout.sass

@@ -0,0 +1,36 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+@use '/src/styles/breakpoint.sass' as views
+
+.body
+  color: vars.$textColor
+  font-family: fonts.$Roboto
+  background-image: url('/src/assets/images/optimized/background.avif'), url('/src/assets/images/optimized/background.webp')
+  position: absolute
+  top: 0
+  left: 0
+  min-width: 90vw
+  min-height: 90vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1
+
+.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

src/layouts/Layout.tsx

@@ -0,0 +1,23 @@
+import './Layout.sass'
+import { lazy } from 'solid-js'
+import { render } from 'solid-js/web'
+import { Router } from '@solidjs/router'
+
+const root = document.getElementById('root')
+
+const routes = [
+  {
+    path: '/',
+    component: lazy(() => import('../pages/IndexPage/Index.tsx')),
+  },
+  {
+    path: '/main',
+    component: lazy(() => import('../pages/MainPage/Main.tsx')),
+  },
+  {
+    path: '/register',
+    component: lazy(() => import('../pages/RegisterPage/Register.tsx')),
+  },
+]
+
+render(() => <Router>{routes}</Router>, root!)

src/pages/IndexPage/Index.sass

@@ -0,0 +1,12 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/breakpoint.sass' as views
+
+h1
+  font-size: 3.25rem
+  color: vars.$textColor
+
+  @media only screen and (max-width: views.$mobile)
+    font-size: 2.25rem
+
+.div
+  width: 8rem

src/pages/IndexPage/Index.tsx

@@ -0,0 +1,44 @@
+import './Index.sass'
+import { Button, Page, Padding, Display, Row, Logo, Column, Box } from '../../components'
+
+export default () => {
+  return (
+    <>
+      <Page>
+        <Padding left={4.75} right={4.75}>
+          <Display desktop tablet>
+            <Row content="split">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+
+              <Row content="left" gap={1}>
+                <Button label="Login" edges="curved" design="bo-link" />
+                <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+              </Row>
+            </Row>
+          </Display>
+
+          <Display mobile>
+            <Column content="center">
+              <Logo size={120} />
+              <h1>OCBO e-Sign</h1>
+
+              <Button label="Register" edges="curved" to="/main" />
+            </Column>
+          </Display>
+
+          <Row content="spaced">
+            <Box thickness={1} curved>
+              <h2>Assessor</h2>
+            </Box>
+            <Box thickness={1} curved>
+              <h2>Approver</h2>
+            </Box>
+          </Row>
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/pages/MainPage/Main.sass

@@ -0,0 +1,16 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.padding
+  margin: 11rem
+  border: 1px solid red
+
+h1
+  font-size: 3.25rem
+  color: vars.$textColor
+
+.div
+  width: 8rem
+
+.name
+  font-size: 1.25rem

src/pages/MainPage/Main.tsx

@@ -0,0 +1,35 @@
+import './Main.sass'
+import { Logo, Link, Page, Row, Padding, Table } from '../../components/'
+import { FiLogOut } from 'solid-icons/fi'
+// import { ofetch } from 'ofetch'
+
+export default () => {
+  return (
+    <>
+      <Page alignment="column">
+        <Padding left={4.75} right={4.75}>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+            </Link>
+
+            <Row content="left" gap={1}>
+              <span class="name">Login Name</span>
+              <Link to="/">
+                <FiLogOut size={25} />
+              </Link>
+            </Row>
+          </Row>
+          <Row content="center">
+            <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
+          </Row>
+
+          <Table />
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/pages/RegisterPage/Register.tsx

@@ -0,0 +1,36 @@
+import { Button, Logo, Link, Page, Row, Column, Display, Padding } from '../../components'
+// import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
+
+export default () => {
+  return (
+    <>
+      <Page alignment="column">
+        <Padding left={4.75} right={4.75}>
+          <Display desktop tablet>
+            <Row content="split">
+              <Link to="/">
+                <Row content="left" gap={2}>
+                  <Logo size={200} />
+                  <h1>OCBO e-Sign</h1>
+                </Row>
+              </Link>
+
+              <Button label="Register" edges="curved" to="/main" />
+            </Row>
+
+            <Display mobile>
+              <Column content="center">
+                <Link to="/">
+                  <Logo size={120} />
+                  <h1>OCBO e-Sign</h1>
+                </Link>
+
+                <Button label="Register" edges="curved" to="/main" />
+              </Column>
+            </Display>
+          </Display>
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/pages/index.astro

@@ -1,59 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Box, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
-
-// const sample = import.meta.env.SAMPLE
----
-
-<Layout title="OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Display desktop tablet>
-        <Row content="split">
-          <Row content="left" gap={2}>
-            <Logo size={200} />
-            <h1>OCBO e-Sign</h1>
-          </Row>
-
-          <Row content="left" gap={1}>
-            <Button label="Login" edges="curved" design="bo-link" to="/login" />
-            <Button label="Register" edges="curved" design="bo-primary" to="/register" />
-          </Row>
-        </Row>
-      </Display>
-
-      <Display mobile>
-        <Column content="center">
-          <Logo size={120} />
-          <h1>OCBO e-Sign</h1>
-
-          <Button label="Register" edges="curved" to="/main" />
-        </Column>
-      </Display>
-
-      <Row content="spaced">
-        <Box thickness={1} curved>
-          <h2>Assessor</h2>
-        </Box>
-        <Box thickness={1} curved>
-          <h2>Approver</h2>
-        </Box>
-      </Row>
-    </Padding>
-  </Page>
-</Layout>
-
-<style lang="sass">
-  @use '/src/styles/variables.sass' as vars
-  @use '/src/styles/breakpoint.sass' as views
-
-  h1
-    font-size: 3.25rem
-    color: vars.$textColor
-
-    @media only screen and (max-width: views.$mobile)
-      font-size: 2.25rem
-
-  .div
-    width: 8rem
-</style>

src/pages/login.astro

@@ -1,67 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
-import { RiArrowsArrowGoBackLine } from 'solid-icons/ri'
----
-
-<Layout title="Dashboard - OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Row content="split">
-        <Display desktop tablet>
-          <Row content="left" gap={2}>
-            <Logo size={200} />
-            <h1>OCBO e-Sign</h1>
-          </Row>
-        </Display>
-
-        <Link to="/">
-          <Row content="left" gap={1}>
-            <span class="name">Go Back</span>
-            <RiArrowsArrowGoBackLine size={25} />
-          </Row>
-        </Link>
-      </Row>
-    </Padding>
-  </Page>
-</Layout>
-
-<style lang="sass">
-  @use '/src/styles/variables.sass' as vars
-  @use 'sass:color'
-
-  .padding
-    margin: 11rem
-    border: 1px solid red
-
-  h1
-    font-size: 3.25rem
-    color: vars.$textColor
-
-  .div
-    width: 8rem
-
-  .name
-    font-size: 1.25rem
-
-  .table
-    width: 100%
-    border-collapse: collapse
-    margin: 2rem
-
-    th, td
-      border: 1px solid vars.$tableBorderColor
-      padding: 0.75rem
-      text-align: left
-      font-size: 1.1rem
-
-    td:nth-child(1)
-      width: 12rem
-
-    td:nth-child(3)
-      width: 9rem
-
-    th
-      background-color: vars.$tableHeaderBackground
-      color: white
-</style>

src/pages/main.astro

@@ -1,82 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding, Modal } from '../../fwt/'
-import { FiLogOut } from 'solid-icons/fi'
-import { ofetch } from 'ofetch'
-import Table from '../components/Table/Table'
----
-
-<script>
-  import gsap from 'gsap'
-  const modal = document.getElementById('modal')
-  const modalButton = document.getElementById('modal-button')
-
-  modalButton?.addEventListener('click', () => {
-    gsap.to(modal, {
-      duration: 0,
-      display: 'block',
-      ease: 'power2.out',
-    })
-  })
-
-  modal?.addEventListener('click', () => {
-    gsap.to(modal, {
-      duration: 0,
-      display: 'none',
-      ease: 'power2.out',
-    })
-  })
-</script>
-
-<Layout title="Dashboard - OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Row content="split">
-        <Display desktop tablet>
-          <Link to="/">
-            <Row content="left" gap={2}>
-              <Logo size={200} />
-              <h1>OCBO e-Sign</h1>
-            </Row>
-          </Link>
-
-          <Row content="left" gap={1}>
-            <span class="name">Patrick Alvin Alcala</span>
-            <Link to="/"><FiLogOut size={25} /></Link>
-          </Row>
-        </Display>
-
-        <Row content="center">
-          <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
-        </Row>
-
-        <Table client:load />
-      </Row>
-    </Padding>
-
-    <div id="modal" style="display: none">
-      <Modal background="rgba(0,0,0,0.5)">
-        <h1>SAMPLE</h1>
-      </Modal>
-    </div>
-  </Page>
-
-  <style lang="sass">
-    @use '/src/styles/variables.sass' as vars
-    @use 'sass:color'
-
-    .padding
-      margin: 11rem
-      border: 1px solid red
-
-    h1
-      font-size: 3.25rem
-      color: vars.$textColor
-
-    .div
-      width: 8rem
-
-    .name
-      font-size: 1.25rem
-  </style>
-</Layout>

src/pages/register.astro

@@ -1,54 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
-import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
----
-
-<Layout title="Register - OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Display desktop tablet>
-        <Row content="split">
-          <Link to="/">
-            <Row content="left" gap={2}>
-              <Logo size={200} />
-              <h1>OCBO e-Sign</h1>
-            </Row>
-          </Link>
-
-          <Button label="Register" edges="curved" to="/main" />
-        </Row>
-
-        <Display mobile>
-          <Column content="center">
-            <Link to="/">
-              <Logo size={120} />
-              <h1>OCBO e-Sign</h1>
-            </Link>
-
-            <Button label="Register" edges="curved" to="/main" />
-          </Column>
-        </Display>
-
-        <Column>
-          <RegistrationForm />
-        </Column>
-      </Display>
-    </Padding>
-
-    <style lang="sass">
-      @use '/src/styles/variables.sass' as vars
-      @use '/src/styles/breakpoint.sass' as views
-
-      h1
-        font-size: 3.25rem
-        color: vars.$textColor
-
-        @media only screen and (max-width: views.$mobile)
-          font-size: 2.25rem
-
-      .div
-        width: 8rem
-    </style>
-  </Page>
-</Layout>

src/stores/sample.ts

@@ -1,3 +0,0 @@
-// import { atom } from 'nanostores'
-
-// export const $sample = atom(0)

src/utils/js/generateFavicon.js

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const path = require('path')
+
+const generateFavicon = async () => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const faviconPath = path.join(__dirname, '../public/favicon.png')
+
+  try {
+    await sharp(inputSrc).png({ quality: 90 }).resize(50).toFile(faviconPath)
+    console.log('Favicon generated successfully')
+  } catch (error) {
+    console.error('Error generating favicon:', error)
+  }
+}
+
+export default generateFavicon

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -1,14 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strict",
-  "include": [
-    ".astro/types.d.ts",
-    "**/*"
-  ],
-  "exclude": [
-    "dist"
-  ],
-  "compilerOptions": {
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js"
-  }
-}
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})