Updated

frontend/@dasig/api/functions/getApi.ts

@@ -0,0 +1,25 @@
+import { ofetch } from 'ofetch'
+import { $backendUrl, $requestRetries, $requestRetryCodes } from '../../../../configs/config.api'
+
+const URL = $backendUrl.get()
+const RETRY = $requestRetries.get()
+const CODES = $requestRetryCodes.get()
+
+export default async (api: string, value?: any, value2?: any) => {
+  try {
+    let fetch
+    if (!value2) {
+      if (!value) {
+        fetch = await ofetch(URL + api, { parseResponse: JSON.parse, retry: RETRY, retryDelay: 500, retryStatusCodes: CODES })
+      } else {
+        fetch = await ofetch(URL + `${api}/${value}/fetch-data`, { parseResponse: JSON.parse, retry: RETRY, retryDelay: 500, retryStatusCodes: CODES })
+      }
+    } else {
+      fetch = await ofetch(URL + `${api}/${value}/${value2}/fetch-data`, { parseResponse: JSON.parse, retry: RETRY, retryDelay: 500, retryStatusCodes: CODES })
+    }
+    const result = fetch
+    return [result, null]
+  } catch (error) {
+    return [[], error]
+  }
+}

frontend/@dasig/api/functions/postApi.ts

@@ -0,0 +1,37 @@
+import dayjs from 'dayjs'
+import { ofetch } from 'ofetch'
+import { $backendUrl, $requestRetries, $requestRetryCodes } from '../../../../configs/config.api'
+import { $tokenExpiration, $tokenName } from '../../../../configs/config.security'
+import { encryptRsa } from '../../scripts'
+
+const URL = $backendUrl.get()
+const TOKEN_NAME = $tokenName.get()
+const TOKEN_EXPIRATION = $tokenExpiration.get()
+const RETRY = $requestRetries.get()
+const CODES = $requestRetryCodes.get()
+
+export default async (api: string, body: Object) => {
+  const today = new Date()
+  const todayUnix = dayjs(today).unix()
+  const expiration = todayUnix + TOKEN_EXPIRATION
+  const aes = await encryptRsa(`${api.toString()}-${todayUnix.toString()}-${expiration.toString()}`)
+
+  const hash = `${TOKEN_NAME}=${aes}token`
+  try {
+    await ofetch(URL + api, {
+      headers: {
+        Accept: 'application/json',
+        'Cache-Control': 'no-cache',
+        'Dasig-Token': hash,
+      },
+      retry: RETRY,
+      retryDelay: 500,
+      retryStatusCodes: CODES,
+      method: 'POST',
+      body: body,
+    })
+    return true
+  } catch {
+    return false
+  }
+}

frontend/@dasig/api/index.ts

@@ -0,0 +1,2 @@
+export { default as getApi } from './functions/getApi'
+export { default as postApi } from './functions/postApi'

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

frontend/@dasig/components/Box.tsx

@@ -0,0 +1,22 @@
+import { createMemo, type JSXElement } from "solid-js";
+import "../styles/Box.sass";
+
+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>
+  );
+};

frontend/@dasig/components/Button.tsx

@@ -0,0 +1,124 @@
+import { Match, Show, Switch } from "solid-js";
+import "../styles/Button.sass";
+
+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 type="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 type="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
+                type="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
+                type="button"
+                class="button"
+                onClick={props.onClick}
+                style={borderRadius}
+              >
+                {props.label || "Click Me!"}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  );
+};

frontend/@dasig/components/Column.tsx

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

frontend/@dasig/components/Copyright.tsx

@@ -0,0 +1,11 @@
+import { $companyName, $copyRightYear } from "../../configs/config.site.ts";
+
+export default () => {
+  return (
+    <>
+      <span>
+        Copyright © {$copyRightYear.get()} {$companyName.get()} All Rights Reserved.
+      </span>
+    </>
+  )
+}

frontend/@dasig/components/Display.tsx

@@ -0,0 +1,41 @@
+import { type JSXElement, Match, Switch } from 'solid-js';
+import '../styles/Display.sass';
+
+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>
+    </>
+  )
+}

frontend/@dasig/components/HTML.tsx

@@ -0,0 +1,72 @@
+import { type JSXElement, Show } from "solid-js";
+import { $fontSource } from "../../configs/config.site.ts";
+import background1 from "../images/background.avif";
+import background2 from "../images/background.webp";
+import "../styles/HTML.sass";
+
+interface Props {
+  name: string;
+  description: string;
+  children: JSXElement;
+  font?:
+  | "roboto"
+  | "inter"
+  | "montserrat"
+  | "open-sans"
+  | "public-sans"
+  | string;
+  preloadBackground?: boolean;
+  author: string;
+  assets: JSXElement;
+  scripts: JSXElement;
+}
+
+export default (props: Props) => {
+  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={props.name} />
+          <meta name="description" content={props.description} />
+          <meta name="title" property="og:title" content={props.name} />
+          <meta name="keywords" content="HTML, CSS, JavaScript" />
+          <meta name="developer" content={props.author} />
+          <meta property="og:description" content={props.description} />
+          <meta property="og:type" content="website" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+          <Show when={$fontSource.get() === "cdn"}>
+            <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+          </Show>
+          <Show when={props.preloadBackground}>
+            <link
+              rel="preload"
+              href={background1}
+              as="image"
+              type="image/svg+xml"
+            />
+            <link
+              rel="preload"
+              href={background2}
+              as="image"
+              type="image/svg+xml"
+            />
+          </Show>
+          {props.assets}
+        </head>
+
+        <body>
+          <div class={props.font} id="app">
+            {props.children}
+          </div>
+          {props.scripts}
+        </body>
+      </html>
+    </>
+  );
+};

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

frontend/@dasig/components/Page.tsx

@@ -0,0 +1,28 @@
+import { Title } from "@solidjs/meta";
+import { type JSXElement, Show } from "solid-js";
+import "../styles/Page.sass";
+
+interface Props {
+  children?: JSXElement;
+  alignment?: "row" | "column";
+  title: string;
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>
+          <Title>{props.title}</Title>
+          {props.children}
+        </main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">
+          <Title>{props.title}</Title>
+          {props.children}
+        </main>
+      </Show>
+    </>
+  );
+};

frontend/@dasig/index.ts

@@ -0,0 +1,4 @@
+export { default as Column } from "./components/Column.tsx";
+export { default as Display } from "./components/Display.tsx";
+export { default as HTML } from "./components/HTML.tsx";
+export { default as Page } from "./components/Page.tsx";

frontend/@dasig/scripts/functions/encryptRsa.ts

@@ -0,0 +1,13 @@
+import { JSEncrypt } from "jsencrypt";
+import { $rsaPublicKey } from "../../../configs/config.security.ts";
+
+const enc = new JSEncrypt();
+const PUBLIC_KEY = $rsaPublicKey.get();
+
+export default (message: string) => {
+	enc.setPublicKey(PUBLIC_KEY);
+	const encrypted = enc.encrypt(message).toString();
+	const fixedEncrypted = encrypted.replace(/\//g, "~");
+
+	return fixedEncrypted;
+};

frontend/@dasig/scripts/index.ts

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

frontend/@dasig/scripts/node/generateFavicon.js

@@ -0,0 +1,23 @@
+import { consola } from 'consola';
+import * as fs from 'fs';
+import * as path from 'path';
+import sharp from 'sharp';
+
+try {
+  const dirPath = path.resolve('./public')
+
+  if (fs.existsSync(dirPath)) {
+    const inputSrc = './src/images/favicon.png'
+    const favicon = dirPath + '/favicon.png'
+    const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(48).toBuffer()
+    await sharp(faviconBuffer).toFile(favicon)
+    consola.success('Favicon generated successfully')
+  } else {
+    consola.error('Directory does not exist:', dirPath)
+  }
+
+} catch (error) {
+  if (error.message.includes('missing')) {
+    consola.error('Source favicon does not exist')
+  }
+}

frontend/@dasig/scripts/node/optimizeImage.js

@@ -0,0 +1,41 @@
+import { consola } from 'consola';
+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 = `./src/@dasig/images/${name.toString().split('.').slice(0, -1).join('.')}.avif`
+    const webpOutputPath = `./src/@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) {
+    consola.error('Error optimizing image:', error)
+    if (error.message.includes('missing')) consola.error(`${name} could not be found on image folder`)
+  }
+})()
+

frontend/@dasig/scripts/node/optimizeLogo.js

@@ -0,0 +1,33 @@
+import { consola } from 'consola';
+import sharp from 'sharp';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+(async () => {
+  const argv = yargs(hideBin(process.argv))
+  .option('size', {
+    alias: 's',
+    describe: 'Specify the size of the logo',
+    type: 'number',
+    demandOption: true,
+  })
+  .argv;
+
+  const size = argv.size;
+
+  try {
+    const webpImage = './src/@dasig/images/logo.webp'
+    const avifImage = './src/@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)
+  }
+})()

frontend/@dasig/styles/Background.sass

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

frontend/@dasig/styles/Box.sass

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

frontend/@dasig/styles/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

frontend/@dasig/styles/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

frontend/@dasig/styles/Display.sass

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

frontend/@dasig/styles/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

frontend/@dasig/styles/HTML.sass

@@ -0,0 +1,25 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+
+.body
+  color: vars.$textColor
+
+.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

frontend/@dasig/styles/Input.sass

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

frontend/@dasig/styles/Link.sass

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

frontend/@dasig/styles/Modal.sass

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

frontend/@dasig/styles/Navbar.sass

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

frontend/@dasig/styles/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

frontend/@dasig/styles/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

frontend/@dasig/styles/Viewport.sass

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