Initial commit

2025-10-16 15:23:57 +08:00 · 2025-10-16 15:23:57 +08:00 · 4184942584
commit 4184942584
51 changed files with 6222 additions and 0 deletions
--- a/.editorconfig
+++ b/.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
--- a/.env.dev
+++ b/.env.dev
@ -0,0 +1,6 @@
+WEBSITE_NAME="Dasig Solid"
+WEBSITE_DESCRIPTION="A template for next level speed (Solid Version)"
+AUTHOR="Patrick Alvin Alcala"
+
+FONT="inter"
+
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
+dist
+.wrangler
+.output
+.vercel
+.netlify
+.vinxi
+app.config.timestamp_*.js
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db
--- a/.prettierrc.yml
+++ b/.prettierrc.yml
@ -0,0 +1,6 @@
+semi: false
+singleQuote: true
+trailingComma: 'es5'
+bracketSpacing: true
+printWidth: 500
+proseWrap: 'preserve'
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+# DASIG
--- a/app.config.ts
+++ b/app.config.ts
@ -0,0 +1,3 @@
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({});
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "example-basic",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start",
+    "version": "vinxi version"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "^1.1.0",
+    "dotenv": "^17.2.3",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.5",
+    "vinxi": "^0.5.7"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "@types/node": "^24.7.2",
+    "sass-embedded": "^1.93.2"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/_dasig/components/Column.tsx
+++ b/src/_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={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}
--- a/src/_dasig/components/HTML.tsx
+++ b/src/_dasig/components/HTML.tsx
@ -0,0 +1,50 @@
+import '../styles/HTML.sass'
+import { type JSXElement, Show } from 'solid-js'
+import background1 from '../images/background.avif'
+import background2 from '../images/background.webp'
+
+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="author" 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={props.font}>
+            <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>
+    </>
+  )
+}
--- a/src/_dasig/components/Page.tsx
+++ b/src/_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={props.alignment}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">{props.children}</main>
+      </Show>
+    </>
+  )
+}
--- a/src/_dasig/images/background.avif
+++ b/src/_dasig/images/background.avif
--- a/src/_dasig/images/background.webp
+++ b/src/_dasig/images/background.webp
--- a/src/_dasig/images/logo.avif
+++ b/src/_dasig/images/logo.avif
--- a/src/_dasig/images/logo.webp
+++ b/src/_dasig/images/logo.webp
--- a/src/_dasig/images/no-background.webp
+++ b/src/_dasig/images/no-background.webp
--- a/src/_dasig/images/pat-alcala.avif
+++ b/src/_dasig/images/pat-alcala.avif
--- a/src/_dasig/images/pat-alcala.webp
+++ b/src/_dasig/images/pat-alcala.webp
--- a/src/_dasig/images/sample.avif
+++ b/src/_dasig/images/sample.avif
--- a/src/_dasig/images/sample.webp
+++ b/src/_dasig/images/sample.webp
--- a/src/_dasig/index.ts
+++ b/src/_dasig/index.ts
@ -0,0 +1,3 @@
+export { default as HTML } from './components/HTML'
+export { default as Page } from './components/Page'
+export { default as Column } from './components/Column'
--- a/src/_dasig/styles/Background.sass
+++ b/src/_dasig/styles/Background.sass
@ -0,0 +1 @@
+@use '/src/styles/classes.sass'
--- a/src/_dasig/styles/Box.sass
+++ b/src/_dasig/styles/Box.sass
@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px
--- a/src/_dasig/styles/Button.sass
+++ b/src/_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
--- a/src/_dasig/styles/Column.sass
+++ b/src/_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
--- a/src/_dasig/styles/Footer.sass
+++ b/src/_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
--- a/src/_dasig/styles/Form.sass
+++ b/src/_dasig/styles/Form.sass
--- a/src/_dasig/styles/HTML.sass
+++ b/src/_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
--- a/src/_dasig/styles/Input.sass
+++ b/src/_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
--- a/src/_dasig/styles/Link.sass
+++ b/src/_dasig/styles/Link.sass
@ -0,0 +1,3 @@
+a
+  text-decoration: none
+  color: inherit
--- a/src/_dasig/styles/Modal.sass
+++ b/src/_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
--- a/src/_dasig/styles/Navbar.sass
+++ b/src/_dasig/styles/Navbar.sass
@ -0,0 +1,7 @@
+.nav
+  position: fixed
+  top: 0
+  width: 100%
+  padding: 1rem 0
+  // margin: 5rem
+
--- a/src/_dasig/styles/Page.sass
+++ b/src/_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
--- a/src/_dasig/styles/Row.sass
+++ b/src/_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
--- a/src/_dasig/styles/Viewport.sass
+++ b/src/_dasig/styles/Viewport.sass
@ -0,0 +1 @@
+@use '/src/styles/breakpoint.sass'
--- a/src/app.sass
+++ b/src/app.sass
@ -0,0 +1,31 @@
+@use './styles/classes'
+@use './styles/variables'
+
+a
+  margin-right: 1rem
+
+main
+  text-align: center
+  padding: 1em
+  margin: 0 auto
+
+h1
+  color: #335d92
+  text-transform: uppercase
+  font-size: 4rem
+  font-weight: 100
+  line-height: 1.1
+  margin: 4rem auto
+  max-width: 14rem
+
+p
+  max-width: 14rem
+  margin: 2rem auto
+  line-height: 1.35
+
+@media (min-width: 480px)
+h1
+  max-width: none
+
+p
+  max-width: none
--- a/src/app.tsx
+++ b/src/app.tsx
@ -0,0 +1,22 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import "./app.sass";
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <Title>Dasig - Solid</Title>
+          {/* <a href="/">Index</a>
+          <a href="/about">About</a> */}
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}
--- a/src/components/Counter/Counter.sass
+++ b/src/components/Counter/Counter.sass
@ -0,0 +1,46 @@
+.counter
+  font-family: inherit
+  font-size: inherit
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 1rem
+  margin: 2rem
+  color: white
+  border: 1px solid rgba(22, 34, 60, 0.5)
+  padding: 1rem 2rem
+  border-radius: 16px
+  background: rgba(134, 152, 217, 0.1)
+  width: 3rem
+
+  &__display
+    font-size: 1.75rem
+    font-weight: bold
+
+  &__buttons
+    display: flex
+    justify-content: center
+    gap: 0.25rem
+
+  &__decrement
+    width: 2rem
+    height: 2.25rem
+    padding: auto
+    font-size: 1rem
+    font-weight: bold
+    cursor: pointer
+    text-decoration: none
+    background-color: rgba(86, 14, 14, 0.915)
+    border-radius: 8px
+    color: white
+    border: 1px solid rgba(255,255,255,0.2)
+
+    &:active
+      transform: scale(0.95)
+
+  &__increment
+    @extend .counter__decrement
+    background-color: rgb(14, 42, 86, 0.915)
+
+    &:active
+      transform: scale(0.95)
--- a/src/components/Counter/Counter.tsx
+++ b/src/components/Counter/Counter.tsx
@ -0,0 +1,30 @@
+import './Counter.sass'
+import { createSignal } from 'solid-js'
+
+let [count, setCount] = createSignal(0)
+
+const increment = () => {
+  setCount(count() + 1)
+}
+
+const decrement = () => {
+  setCount(count() - 1)
+}
+
+export default () => {
+  return (
+    <>
+      <section class="counter">
+        <div class="counter__display">{count()}</div>
+        <div class="counter__buttons">
+          <button class="counter__decrement" onClick={decrement}>
+            -
+          </button>
+          <button class="counter__increment" onClick={increment}>
+            +
+          </button>
+        </div>
+      </section>
+    </>
+  )
+}
--- a/src/entry-client.tsx
+++ b/src/entry-client.tsx
@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);
--- a/src/entry-server.tsx
+++ b/src/entry-server.tsx
@ -0,0 +1,12 @@
+// src/entry-server.tsx
+import { createHandler, StartServer } from '@solidjs/start/server'
+import dotenv from 'dotenv'
+dotenv.config({ path: '.env.dev' })
+import { HTML } from './_dasig'
+
+const websiteName = process.env.WEBSITE_NAME || 'Dasig - Solid'
+const websiteDescription = process.env.WEBSITE_DESCRIPTION || 'A template for fast development (Solid Version)'
+const author = process.env.AUTHOR || 'Patrick Alvin Alcala'
+const font = process.env.FONT
+
+export default createHandler(() => <StartServer document={({ assets, children, scripts }) => <HTML name={websiteName} description={websiteDescription} author={author} children={children} assets={assets} scripts={scripts} font={font} />} />)
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />
--- a/src/routes/[...404].tsx
+++ b/src/routes/[...404].tsx
@ -0,0 +1,19 @@
+import { Title } from "@solidjs/meta";
+import { HttpStatusCode } from "@solidjs/start";
+
+export default function NotFound() {
+  return (
+    <main>
+      <Title>Not Found</Title>
+      <HttpStatusCode code={404} />
+      <h1>Page Not Found</h1>
+      <p>
+        Visit{" "}
+        <a href="https://start.solidjs.com" target="_blank">
+          start.solidjs.com
+        </a>{" "}
+        to learn how to build SolidStart apps.
+      </p>
+    </main>
+  );
+}
--- a/src/routes/about.tsx
+++ b/src/routes/about.tsx
@ -0,0 +1,10 @@
+import { Title } from "@solidjs/meta";
+
+export default function About() {
+  return (
+    <main>
+      <Title>About</Title>
+      <h1>About</h1>
+    </main>
+  );
+}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -0,0 +1,16 @@
+import { Title } from '@solidjs/meta'
+import Counter from '~/components/Counter/Counter'
+import { Page, Column } from '~/_dasig'
+
+export default function Home() {
+  return (
+    <Page>
+      <Column>
+        <Title>Dasig - Index</Title>
+        <h1>DASIG</h1>
+        <h4>A next level development for pure speed</h4>
+        <Counter />
+      </Column>
+    </Page>
+  )
+}
--- a/src/styles/breakpoint.sass
+++ b/src/styles/breakpoint.sass
@ -0,0 +1,51 @@
+$mobile: 375px
+$tablet: 768px
+$desktop: 1440px
+
+.on-desktop-only
+  @media only screen and (min-width: 0px) and (max-width: $desktop)
+    display: none
+
+  @media only screen and (min-width: $desktop)
+    display: block
+
+.on-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: $tablet)
+    display: none
+
+  @media only screen and (min-width: $tablet) and (max-width: $desktop)
+    display: block
+
+  @media only screen and (min-width: $desktop)
+    display: none
+
+.on-mobile-only
+  @media only screen and (min-width: $mobile)
+    display: block
+
+  @media only screen and (min-width: $tablet)
+    display: none
+
+.on-desktop-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: $tablet)
+    display: none
+
+  @media only screen and (min-width: $tablet)
+    display: block
+
+.on-desktop-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: $mobile)
+    display: block
+
+  @media only screen and (min-width: $mobile) and (max-width: $desktop)
+    display: none
+
+  @media only screen and (min-width: $desktop)
+    display: block
+
+.on-tablet-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: $desktop)
+    display: block
+
+  @media only screen and (min-width: $desktop)
+    display: none
--- a/src/styles/classes.sass
+++ b/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
--- a/src/styles/fonts.sass
+++ b/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
--- a/src/styles/variables.sass
+++ b/src/styles/variables.sass
@ -0,0 +1,16 @@
+@use 'sass:color'
+
+$background: #0c1b31
+$textColor: #f0f8ff
+
+$fontSize: 1rem
+
+$borderMargin: 2rem
+
+$primaryColor: #0075BB
+$secondaryColor: #57687F
+$accentColor: #00887C
+$infoColor: #0082A4
+$successColor: #009435
+$warningColor: #E5B400
+$errorColor: #E8595C
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["vinxi/types/client"],
+    "isolatedModules": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}
				`@ -0,0 +1 @@`
				`/// <reference types="@solidjs/start/env" />`