Initial commit

.dockerignore

@@ -0,0 +1,6 @@
+node_modules/
+.git
+.gitignore
+*.log
+dist
+Dockerfile

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.gitignore

@@ -0,0 +1,37 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.local
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Backend
+backend/target/
+
+# Custom
+src/assets/

.prettierrc.yml

@@ -0,0 +1,6 @@
+semi: false
+singleQuote: true
+trailingComma: 'es5'
+bracketSpacing: true
+printWidth: 500
+proseWrap: 'preserve'

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

@dasig/components/Background.tsx

@@ -0,0 +1,50 @@
+import '../styles/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>
+    </>
+  )
+}

@dasig/components/Box.tsx

@@ -0,0 +1,19 @@
+import '../styles/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 ? 'dasig-curvedbox' : 'dasig-box'))
+
+  return (
+    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+      {props.children}
+    </section>
+  )
+}

@dasig/components/Button.tsx

@@ -0,0 +1,83 @@
+import '../styles/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
+  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} rel="noopener" target={props.newtab ? '_blank' : '_self'} 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} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+              <button class="dasig-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="dasig-button" type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class="dasig-button" onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  )
+}

@dasig/components/Column.tsx

@@ -0,0 +1,18 @@
+import '../styles/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={`dasig-column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}

@dasig/components/Copyright.tsx

@@ -0,0 +1,12 @@
+import * as toml from 'toml'
+import * as fs from 'fs'
+
+const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
+
+export default () => {
+  return (
+    <span>
+      Copyright © {config.copyright.year} {config.copyright.name} All Rights Reserved.
+    </span>
+  )
+}

@dasig/components/Display.tsx

@@ -0,0 +1,41 @@
+import '../styles/Viewport.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>
+    </>
+  )
+}

@dasig/components/Footer.tsx

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

@dasig/components/Form.tsx

@@ -0,0 +1,16 @@
+import '../styles/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>
+    </>
+  )
+}

@dasig/components/HTML.tsx

@@ -0,0 +1,51 @@
+import '../styles/HTML.sass'
+import * as fs from "fs";
+import * as toml from 'toml';
+import { type JSXElement, Show } from 'solid-js'
+import background1 from '../images/background.avif'
+import background2 from '../images/background.webp'
+
+interface Props {
+  title: string
+  children: JSXElement
+  font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
+  preloadBackground?: boolean
+}
+
+export default (props: Props) => {
+  const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
+  return (
+    <>
+      <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={config.website.name} />
+          <meta name="description" content={config.website.description} />
+          <meta name="title" property="og:title" content={config.website.name} />
+          <meta name="keywords" content="HTML, CSS, JavaScript" />
+          <meta name="developer" content={config.website.developer} />
+          <meta name="designer" content={config.website.designer} />
+          <meta property="og:description" content={config.website.description} />
+          <meta property="og:type" content="website" />
+          <link rel="icon" type="image/png" href="/favicon.png" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+          <link rel="manifest" href="/site.webmanifest" />
+          <Show when={props.font}>
+            <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+          </Show>
+          <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>
+    </>
+  )
+}

@dasig/components/Image.tsx

@@ -0,0 +1,17 @@
+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>
+  )
+}

@dasig/components/Input.tsx

@@ -0,0 +1,27 @@
+import '../styles/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="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+    </>
+  )
+}

@dasig/components/Link.tsx

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

@dasig/components/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>
+    </>
+  )
+}

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

@dasig/components/Navbar.tsx

@@ -0,0 +1,17 @@
+import '../styles/Navbar.sass'
+import Row from './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>
+    </>
+  )
+}

@dasig/components/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>
+}

@dasig/components/Page.tsx

@@ -0,0 +1,20 @@
+import '../styles/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={`dasig-page-${props.alignment}`}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="dasig-page">{props.children}</main>
+      </Show>
+    </>
+  )
+}

@dasig/components/Row.tsx

@@ -0,0 +1,24 @@
+import '../styles/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={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}

@dasig/index.ts

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

@dasig/scripts/functions/encryptRsa.ts

@@ -0,0 +1,17 @@
+import { JSEncrypt } from "jsencrypt";
+import * as fs from "node:fs";
+import * as toml from "toml";
+
+const config = toml.parse(
+	fs.readFileSync("configs/config.security.toml", "utf-8"),
+);
+const enc = new JSEncrypt();
+const PUBLIC_KEY = config.rsa.public_key;
+
+export default (message: string) => {
+	enc.setPublicKey(PUBLIC_KEY);
+	const encrypted = enc.encrypt(message).toString();
+	const fixedEncrypted = encrypted.replace(/\//g, "~");
+
+	return fixedEncrypted;
+};

@dasig/scripts/index.ts

@@ -0,0 +1 @@
+export { default as encryptRsa } from "./functions/encryptRsa.ts";

@dasig/scripts/node/generateFavicon.ts

@@ -0,0 +1,110 @@
+import { consola } from "consola";
+import * as fs from "fs";
+import * as path from "path";
+import sharp from "sharp";
+import * as toml from 'toml'
+
+try {
+	const dirPath = path.resolve("./public");
+  const config = toml.parse(fs.readFileSync("configs/config.site.toml", "utf8"));
+
+	if (fs.existsSync(dirPath)) {
+		const inputSrc = "./src/images/favicon.png";
+		const favicon = dirPath + "/favicon.png";
+		const chrome192 = dirPath + "/android-chrome-192x192.png";
+		const chrome512 = dirPath + "/android-chrome-512x512.png";
+		const apple = dirPath + "/apple-touch-icon.png";
+		const favicon16 = dirPath + "/favicon-16x16.png";
+		const favicon32 = dirPath + "/favicon-32x32.png";
+
+		const faviconBuffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(48)
+			.toBuffer();
+		await sharp(faviconBuffer).toFile(favicon);
+		consola.success("Favicon generated successfully");
+
+		const favicon32Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(32)
+			.toBuffer();
+		await sharp(favicon32Buffer).toFile(favicon32);
+		consola.success("Favicon-32x32 generated successfully");
+
+		const favicon16Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(16)
+			.toBuffer();
+		await sharp(favicon16Buffer).toFile(favicon16);
+		consola.success("Favicon-16x16 generated successfully");
+
+		const chrome512Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(512)
+			.toBuffer();
+		await sharp(chrome512Buffer).toFile(chrome512);
+		const chrome192Buffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(192)
+			.toBuffer();
+		await sharp(chrome192Buffer).toFile(chrome192);
+		consola.success("Android icon generated successfully");
+
+		const appleBuffer = await sharp(inputSrc)
+			.png({ quality: 90 })
+			.resize(180)
+			.toBuffer();
+		await sharp(appleBuffer).toFile(apple);
+		consola.success("iOS icon generated successfully");
+
+		const manifestPath = path.resolve(dirPath, "site.webmanifest");
+		const manifestContent = JSON.stringify(
+			{
+				name: config.website.name,
+				short_name: config.website.short_name,
+				start_url: "/",
+				display: "standalone",
+				background_color: "#ffffff",
+				theme_color: "#000000",
+				icons: [
+					{
+						src: "/android-chrome-192x192.png",
+						sizes: "192x192",
+						type: "image/png",
+					},
+					{
+						src: "/android-chrome-512x512.png",
+						sizes: "512x512",
+						type: "image/png",
+					},
+					{
+						src: "/apple-touch-icon.png",
+						sizes: "180x180",
+						type: "image/png",
+					},
+					{
+						src: "/favicon-32x32.png",
+						sizes: "32x32",
+						type: "image/png",
+					},
+					{
+						src: "/favicon-16x16.png",
+						sizes: "16x16",
+						type: "image/png",
+					},
+				],
+			},
+			null,
+			2,
+		);
+
+		fs.writeFileSync(manifestPath, manifestContent);
+		consola.success("Site Webmanifest file created successfully");
+	} else {
+		consola.error("Directory does not exist:", dirPath);
+	}
+} catch (error: any) {
+	if (error.message.includes("missing")) {
+		consola.error("Source favicon does not exist");
+	}
+}

@dasig/scripts/node/optimizeBackground.ts

@@ -0,0 +1,23 @@
+import { consola } from "consola";
+import sharp from "sharp";
+
+(async () => {
+	try {
+    const inputSrc = 'src/images/background.png'
+    const webpOutput = "./@dasig/images/background.webp"
+    const avifOutput = "./@dasig/images/background.avif"
+
+    const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+    await sharp(avifBuffer).toFile(avifOutput)
+    consola.success('Background successfully optimized in Avif');
+
+    const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutput)
+    consola.success('Background successfully optimized in Webp');
+
+	} catch (error: any) {
+		consola.error("Error optimizing background:", error);
+		if (error.message.includes("missing"))
+			consola.error(`${name} could not be found on image folder`);
+	}
+})();

@dasig/scripts/node/optimizeImage.ts

@@ -0,0 +1,47 @@
+import { consola } from "consola";
+import process from "node:process";
+import sharp from "sharp";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+(async () => {
+	const argv = yargs(hideBin(process.argv))
+		.option("name", {
+			alias: "n",
+			describe: "Specify the name of the image",
+			type: "string",
+			demandOption: true,
+		})
+		.option("size", {
+			alias: "s",
+			describe: "Specify the size of the image",
+			type: "number",
+			demandOption: true,
+		}).argv;
+
+	const name = argv.name;
+	const size = argv.size;
+
+	try {
+		const avifOutputPath = `./@dasig/images/${name.toString().split(".").slice(0, -1).join(".")}.avif`;
+		const webpOutputPath = `./@dasig/images/${name.toString().split(".").slice(0, -1).join(".")}.webp`;
+
+		const avifBuffer = await sharp(`./src/images/${name}`)
+			.avif({ quality: 60 })
+			.resize(size)
+			.toBuffer();
+		await sharp(avifBuffer).toFile(avifOutputPath);
+		consola.success(`${name} successfully optimized in Avif`);
+
+		const webpBuffer = await sharp(`./src/images/${name}`)
+			.webp({ quality: 75 })
+			.resize(size)
+			.toBuffer();
+		await sharp(webpBuffer).toFile(webpOutputPath);
+		consola.success(`${name} successfully optimized in Webp`);
+	} catch (error: any) {
+		consola.error("Error optimizing image:", error);
+		if (error.message.includes("missing"))
+			consola.error(`${name} could not be found on image folder`);
+	}
+})();

@dasig/scripts/node/optimizeLogo.ts

@@ -0,0 +1,36 @@
+import { consola } from "consola";
+import process from "node:process";
+import sharp from "sharp";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+(async () => {
+	const size = yargs(hideBin(process.argv)).option("size", {
+		alias: "s",
+		describe: "Specify the size of the logo",
+		type: "number",
+		demandOption: true,
+	}).argv.size;
+
+	try {
+		const webpImage = "./@dasig/images/logo.webp";
+		const avifImage = "./@dasig/images/logo.avif";
+		const inputSrc = "./src/images/logo.png";
+
+		const avifBuffer = await sharp(inputSrc)
+			.avif({ quality: 60 })
+			.resize(size)
+			.toBuffer();
+		await sharp(avifBuffer).toFile(avifImage);
+		consola.success("Logo successfully optimized in Avif");
+
+		const webpBuffer = await sharp(inputSrc)
+			.webp({ quality: 75 })
+			.resize(size)
+			.toBuffer();
+		await sharp(webpBuffer).toFile(webpImage);
+		consola.success("Logo successfully optimized in Webp");
+	} catch (error) {
+		consola.error("Error generating favicon:", error);
+	}
+})();

@dasig/styles/Background.sass

@@ -0,0 +1,17 @@
+// @use '/src/styles/classes.sass'
+@use '../../configs/design/site.sass' as design
+
+:root
+  color-scheme: light dark
+  background-color: light-dark(design.$light-background, design.$dark-background)
+  transition: background-color 0.6s ease-out
+
+.fullscreen
+  position: fixed
+  top: 0
+  left: 0
+  width: 100vw
+  height: 100vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1

@dasig/styles/Box.sass

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

@dasig/styles/Button.sass

@@ -0,0 +1,224 @@
+@use '/src/styles/fonts.sass' as fonts
+@use 'sass:color'
+
+$primaryColor: #0075BB
+
+$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)
+
+.dasig-button
+  background-color: $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($primaryColor, $blackness: 20%)
+
+  &:active
+    transform: scale(0.95)
+
+.bu-primary
+  @extend .dasig-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 .dasig-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

@dasig/styles/Column.sass

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

@dasig/styles/Footer.sass

@@ -0,0 +1,13 @@
+@use '../../configs/design/sizes' as view
+
+.dasig-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

@dasig/styles/HTML.sass

@@ -0,0 +1,25 @@
+@use '../../configs/design/colors.sass' as colors
+@use '/src/styles/fonts.sass' as fonts
+
+.body
+  color: colors.$white
+
+.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

@dasig/styles/Input.sass

@@ -0,0 +1,27 @@
+.dasig-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

@dasig/styles/Link.sass

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

@dasig/styles/Modal.sass

@@ -0,0 +1,20 @@
+@use '../../configs/design/site' as site
+@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(site.$dark-background, $blackness: 5%), 0.6)
+  z-index: 999
+
+  &__content
+    border-radius: 8px
+    padding: 2rem
+    position: relative

@dasig/styles/Navbar.sass

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

@dasig/styles/Page.sass

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

@dasig/styles/Row.sass

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

@dasig/styles/Viewport.sass

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

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN corepack enable
+RUN pnpm install
+COPY . .
+RUN pnpm build
+
+FROM nginx:alpine AS runtime
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 4321

Makefile

@@ -0,0 +1,31 @@
+.SILENT:
+
+install:
+	pnpm install
+
+dev:
+	pnpm dev
+
+build:
+	pnpm build
+
+update:
+	pnpm update -i
+
+docker:
+	docker compose up -d
+
+podman:
+	podman-compose up -d
+
+favicon:
+	node ./@dasig/scripts/node/generateFavicon.ts
+
+logo:
+	node ./@dasig/scripts/node/optimizeLogo.ts --size $(size)
+
+image:
+	node ./@dasig/scripts/node/optimizeImage.ts --name $(name) --size $(size)
+
+background:
+	node ./@dasig/scripts/node/optimizeBackground.ts

README.md

@@ -0,0 +1 @@
+# ocbo-portal-2

astro.config.mjs

@@ -0,0 +1,26 @@
+// @ts-check
+import { defineConfig } from 'astro/config'
+import solidJs from '@astrojs/solid-js'
+import compressor from 'astro-compressor'
+import robotsTxt from '@itsmatteomanf/astro-robots-txt'
+import purgecss from 'astro-purgecss'
+
+
+export default defineConfig({
+  prefetch: true,
+  integrations: [solidJs(),
+  compressor({ gzip: false, brotli: true }), robotsTxt(), purgecss({
+    fontFace: true,
+    variables: true,
+  }) ],
+  vite: {
+    css: {
+      transformer: 'lightningcss',
+    },
+  },
+  build: {
+    assets: '_dasig',
+    inlineStylesheets: 'never',
+  },
+  site: 'http://localhost:4321',
+})

configs/config.security.toml

@@ -0,0 +1,22 @@
+[token]
+name = "dasig"     # output: dasig-token
+encryption = "rsa"
+expiration = 9     # seconds
+
+[rsa]
+public_key = '''
+-----BEGIN PUBLIC KEY-----
+MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA9Aw5Zasdanf2biS69qoQ
+/YZbyIM+LS7LOLNN3ot6nZH1FiTqTNy61ffUA2Y/s3hGz9L0+k6gRu7uGBza6XPU
++iuGdXxZd2mc3lrnPfR6SSllMwGlAVkYpQhmkB19igd8aLUbFiJ3pPKkNocv/yQa
+ERQ2tXtSxAoEQ9hg4wPgXkuW5PF+yEk9/+eN6tB36lHu9Im44GG18xKkU+VcdsXc
+DJVgEpcr1FtJL6uLI+VXc4peZmOdsBN7/MS3Rjb2Ib9TrOADE5qodSc+T8D6GoGH
+MOWQGKY6dmfo9cnY3tJ23FfKy9jFOIIrTIdz2ncRaOfxX1oIiTVy4pGG+GxZn5aQ
+z+IW8hmSj/oOcrGKr6T6lmKxxxYqBWgvQWef0O0anGfa2y5CTpqdPQ8KEoF2zxPD
+EnvcIQiCUmXwML4x18XItY/d60nEn/pxn7a9J9hb3Lxjy94ZXuOgHvqL3XRC9xg+
+HvEuAHzUBr+GJM9w4/LF1mQSsmblB8q5S7qNaminYAw6wm35lRy7ZlIbJQlj/EyL
+lCKWBbUEHkjzRFCoun9VVUc0guQTsTbchPD7Rgzg3SBK3Gws39n12WQPc7jKto0H
+N39sJnNzllXw41gKRy9b2uYuaVYaQ0sjrFJ8ITuyO9NDDaEdeBqBBTtbRp2i0O4K
+tvT2kItEEnVzjNutUatVOWcCAwEAAQ==
+-----END PUBLIC KEY-----
+'''

configs/config.site.toml

@@ -0,0 +1,15 @@
+[website]
+name = "OCBO Portal"
+short_name = "OCBO Portal"
+description = "Office of the City Building Official Application Portal"
+developer = "Pat Alcala"
+designer = "Pat Alcala"
+
+[font]
+name = "roboto"
+source = "cdn"  # cdn or local
+
+[copyright]
+name = "Office of the City Building Official"
+year = 2026
+color = "#ffffffff"

configs/design/colors.sass

@@ -0,0 +1,2 @@
+$white: #f4f3f2
+$black: #0A0A0A

configs/design/site.sass

@@ -0,0 +1,2 @@
+$light-background: #e2e7f2
+$dark-background: #0a152a

configs/design/sizes.sass

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

docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  template:
+    container_name: template
+    restart: unless-stopped
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - 4321:4321

nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "dasig-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build"
+  },
+  "dependencies": {
+    "@astrojs/solid-js": "^5.1.3",
+    "@itsmatteomanf/astro-robots-txt": "^0.2.0",
+    "astro": "^5.13.8",
+    "astro-compressor": "^1.1.2",
+    "astro-purgecss": "^5.3.0",
+    "consola": "^3.4.2",
+    "gsap": "^3.13.0",
+    "lightningcss": "^1.30.1",
+    "nanostores": "^1.0.1",
+    "purgecss": "^7.0.2",
+    "sharp": "^0.34.4",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.11",
+    "toml": "^3.0.0",
+    "yargs": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.5.2",
+    "@types/yargs": "^17.0.35",
+    "sass-embedded": "^1.92.1"
+  }
+}

podman.container

@@ -0,0 +1,13 @@
+[Unit]
+Description=DASIG-ASTRO
+
+[Container]
+ContainerName=dasig-astro
+Image=localhost/dasig-astro
+PublishPort=4321:4321
+
+[Service]
+Restart=always
+
+[Install]
+WantedBy=multi-user.target default.target

public/site.webmanifest

@@ -0,0 +1,35 @@
+{
+  "name": "OCBO Portal",
+  "short_name": "OCBO Portal",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    }
+  ]
+}

src/components/Card.astro

@@ -0,0 +1,64 @@
+---
+import { Image, Column, Link } from '../../@dasig'
+
+interface Props {
+  avif: string
+  webp: string
+  name: string
+  description: string
+  site: string
+}
+
+const { avif, webp, name, description, site } = Astro.props
+---
+
+<section class="card">
+  <Link to={site} newtab>
+    <Column>
+      <Image avif={avif} webp={webp} size={140} />
+      <span class="card__name">{name}</span>
+      <span class="card__description">{description}</span>
+    </Column>
+  </Link>
+</section>
+
+<style lang="sass">
+  @use 'sass:color'
+  @use '../../configs/design/sizes.sass' as view
+  $background: rgba(12, 26, 48, 0.2)
+
+  .card
+    backdrop-filter: blur(6px) saturate(100%)
+    background-color: $background
+    border: 1px solid color.adjust($background, $lightness: 15%)
+    padding: 2.25rem
+    cursor: pointer
+    width: 14rem
+    height: 12rem
+    transition: all 0.2s ease-out
+
+    &:hover
+      background-color: rgba(12, 26, 48, 0.6)
+      transform: scale(1.10)
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
+
+    &__name
+      padding: 1rem 0 0 0
+      font-size: 1rem
+      font-weight: 500
+
+    &__description
+      padding: 0.5rem 0 0 0
+      font-size: 0.75rem
+
+    @media only screen and (min-width: 0px) and (max-width: view.$tablet)
+      background-color: color.adjust($background, $lightness: 15%)
+      border: 1px solid color.adjust($background, $lightness: 25%)
+      padding: 1.25rem
+
+      &:hover
+        background-color: color.adjust($background, $blackness: 35%)
+        border: 1px solid color.adjust($background, $blackness: 25%)
+        transform: scale(1.05)
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
+</style>

src/layouts/Layout.astro

@@ -0,0 +1,14 @@
+---
+import { Background, HTML } from '../../@dasig'
+
+interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<HTML title={title} font="inter">
+  <Background image />
+  <slot />
+</HTML>

src/pages/index.astro

@@ -0,0 +1,70 @@
+---
+import Layout from '../layouts/Layout.astro'
+import { Footer, Page, Row, Image, Column, Display, Padding, Copyright } from '../../@dasig'
+
+import Card from '../components/Card.astro'
+import portalA from '../../@dasig/images/ocbo-portal.avif'
+import portalW from '../../@dasig/images/ocbo-portal.webp'
+import esignA from '../../@dasig/images/esign.avif'
+import esignW from '../../@dasig/images/esign.webp'
+import patA from '../../@dasig/images/pat-alcala.avif'
+import patW from '../../@dasig/images/pat-alcala.webp'
+---
+
+<Layout title="OCBO Portal">
+  <Page alignment="column">
+    <Row gap={1} content="left"><Image avif={portalA.src} webp={portalW.src} size={90} /><span class="logo-text">OCBO Portal</span></Row>
+    <Column>
+      <Display desktop tablet>
+        <Row content="center">
+          <Column>
+            <h1>Welcome to OCBO Application Portal</h1>
+          </Column>
+        </Row>
+
+        <Row gap={2.5}>
+          <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits" site="https://esign.patalcala.com" />
+        </Row>
+      </Display>
+      <Display mobile>
+        <Padding top={2} bottom={2} left={0} right={0}>
+          <Column gap={1.5}>
+            <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits" site="https://esign.patalcala.com" />
+          </Column>
+        </Padding>
+      </Display>
+    </Column>
+
+    <Footer>
+      <Row content="left">
+        <Column gap={0.5} content="top">
+          <Copyright />
+          <Row gap={0.5}>
+            <span>Developed By: <Image avif={patA.src} webp={patW.src} size={80} alt="Pat Alcala logos" /> Pat Alcala</span>
+          </Row>
+          <span>Developed By: Pat Alcala</span>
+        </Column>
+      </Row>
+    </Footer>
+
+    <style lang="sass">
+      $text-color: rbga(255, 255, 255, 0.8)
+
+      h1
+        color: $text-color
+        margin: -2rem 0 2.75rem 0
+        font-size: 2.25rem
+
+      h3
+        color: $text-color
+        margin: 0.5rem 0 2rem 0
+
+      .logo-text
+        color: $text-color
+        font-size: 2rem
+        font-weight: 700
+        margin: -1.5rem 0 0 0
+        opacity: 0.9
+    </style>
+  </Page>
+</Layout>

src/stores/sample.ts

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

src/styles/breakpoints.sass

@@ -0,0 +1,49 @@
+@use '../../configs/design/sizes.sass' as sizes
+
+.on-desktop-only
+  @media only screen and (min-width: 0px) and (max-width: sizes.$desktop)
+    display: none
+
+  @media only screen and (min-width: sizes.$desktop)
+    display: block
+
+.on-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: sizes.$tablet)
+    display: none
+
+  @media only screen and (min-width: sizes.$tablet) and (max-width: sizes.$desktop)
+    display: block
+
+  @media only screen and (min-width: sizes.$desktop)
+    display: none
+
+.on-mobile-only
+  @media only screen and (min-width: sizes.$mobile)
+    display: block
+
+  @media only screen and (min-width: sizes.$tablet)
+    display: none
+
+.on-desktop-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: sizes.$tablet)
+    display: none
+
+  @media only screen and (min-width: sizes.$tablet)
+    display: block
+
+.on-desktop-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: sizes.$mobile)
+    display: block
+
+  @media only screen and (min-width: sizes.$mobile) and (max-width: sizes.$desktop)
+    display: none
+
+  @media only screen and (min-width: sizes.$desktop)
+    display: block
+
+.on-tablet-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: sizes.$desktop)
+    display: block
+
+  @media only screen and (min-width: sizes.$desktop)
+    display: none

src/styles/classes.sass

@@ -0,0 +1,9 @@
+.fullscreen
+  position: absolute
+  top: 0
+  left: 0
+  width: 100vw
+  height: 100vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1

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

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}