migrate(web): migrate from website/new-website to nexus/apps/website

19 files changed, 536 insertions, 3 deletions

diff --git a/apps/website/astro.config.ts b/apps/website/astro.config.ts
index 882e651..c929648 100644
--- a/apps/website/astro.config.ts
+++ b/apps/website/astro.config.ts
@@ -1,4 +1,10 @@
 import { defineConfig } from 'astro/config';
 
+import tailwind from '@astrojs/tailwind';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+	integrations: [
+		tailwind(),
+	]
+});
diff --git a/apps/website/config.ts b/apps/website/config.ts
new file mode 100644
index 0000000..1b45557
--- /dev/null
+++ b/apps/website/config.ts
@@ -0,0 +1,93 @@
+import type { Config, NavbarDropdown, NavbarElement, Project } from "@webtypes/Config";
+
+export const configConst = {
+    projects: getProjects(),
+    logos: [
+        "oneconfig.minimal",
+        "polyfrost.full",
+        "polyfrost.minimal",
+        "polyfrost.minimal_bg",
+    ],
+    navbar: {
+        left: [
+            {
+                logo: ["polyfrost.full", -1],
+                path: "/",
+            }
+        ],
+        right: [
+            {
+                text: "Home",
+                path: "/",
+            },
+            {
+                text: "Projects",
+                dropdown: (getProjects().map((project) => {
+                    (project as any).path = `/projects/${project.name.toLowerCase()}`;
+                    return project;
+                }) as unknown as NavbarDropdown[])
+            }
+        ]
+    }
+} as const satisfies Config;
+
+function getProjects(): Project[] {
+    return [
+        {
+            name: "OneConfig",
+            description: "The next-generation config library for Forge and Fabric",
+            logo: "oneconfig.minimal",
+            tag: "BETA"
+        },
+        {
+            name: "OneLauncher",
+            description: "The next-generation launcher for Forge and Fabric",
+            logo: "polyfrost.minimal",
+            tag: "SOON"
+        },
+        {
+            name: "OneConfig",
+            description: "The next-generation config library for Forge and Fabric",
+            logo: "oneconfig.minimal",
+            tag: "BETA"
+        },
+        {
+            name: "OneLauncher",
+            description: "The next-generation launcher for Forge and Fabric",
+            logo: "polyfrost.minimal",
+            tag: "SOON"
+        },
+        {
+            name: "OneConfig",
+            description: "The next-generation config library for Forge and Fabric",
+            logo: "oneconfig.minimal",
+            tag: "BETA"
+        },
+        {
+            name: "OneLauncher",
+            description: "The next-generation launcher for Forge and Fabric",
+            logo: "polyfrost.minimal",
+            tag: "SOON"
+        },
+        {
+            name: "OneConfig",
+            description: "The next-generation config library for Forge and Fabric",
+            logo: "oneconfig.minimal",
+            tag: "BETA"
+        },
+        {
+            name: "OneLauncher",
+            description: "The next-generation launcher for Forge and Fabric",
+            logo: "polyfrost.minimal",
+            tag: "SOON"
+        },
+    ]
+}
+
+
+
+
+
+
+// -------------------- NO TOUCH --------------------- //
+export default configConst as unknown as Config;
diff --git a/apps/website/package.json b/apps/website/package.json
index eab7226..059363c 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -1,5 +1,6 @@
 {
 	"name": "@polyfrost/website",
+	"type": "module",
   	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -8,9 +9,12 @@
 		"preview": "astro preview"
 	},
 	"dependencies": {
-		"astro": "^2.10.12"
+		"@astrojs/tailwind": "^5.0.2",
+		"astro": "^3.3.0",
+		"tailwindcss": "^3.3.3"
 	},
 	"devDependencies": {
-		"typescript": "^5.1.6"
+		"@types/node": "^18.0.0",
+		"typescript": "^5.2.2"
 	}
 }
diff --git a/apps/website/public/media/oneconfig/minimal.svg b/apps/website/public/media/oneconfig/minimal.svg
new file mode 100644
index 0000000..cba37ab
--- /dev/null
+++ b/apps/website/public/media/oneconfig/minimal.svg
@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70.3573 29.2713C70.4668 29.4694 70.5816 29.6767 70.6705 29.8925C72.5332 33.8023 72.4576 39.4449 70.3235 43.2681L62.5582 56.7093C60.2619 53.2001 57.0453 50.1892 53.179 47.9147C53.2764 47.7633 53.3629 47.6115 53.4386 47.4597C60.2945 33.5858 53.179 15.2605 36.0014 15.531C18.521 15.2387 11.6106 33.8998 18.7699 47.9581C14.9248 50.2327 11.7301 53.2323 9.44449 56.7311C9.39106 56.6172 8.6306 55.3104 7.58772 53.5173C5.05245 49.1586 0.846575 41.9292 1.06183 41.9903C-0.378748 38.5028 -0.357048 33.7371 1.14855 30.2931C1.23897 30.0503 1.35108 29.816 1.46904 29.5906C1.53458 29.4646 1.60229 29.3414 1.6684 29.221L12.737 10.029C12.7534 10.0072 12.7672 9.98229 12.7809 9.95773C12.7947 9.93358 12.8079 9.90983 12.8238 9.88849C15.1089 6.08684 20.5135 3 24.9217 3H47.0594C52.0848 3 56.7313 5.68599 59.2333 10.029C59.2587 10.0612 63.1081 16.7246 66.2643 22.1876C68.4515 25.9738 70.3054 29.1836 70.3235 29.2101L70.3573 29.2713Z" fill="#0048C5"/>
+<path d="M25.8187 55.0747C31.6347 58.367 40.4507 58.3561 46.1367 55.053C50.989 57.4572 54.52 61.5514 55.6138 66.3601C53.2201 68.1254 50.274 69.3275 47.6098 69.4576C47.4367 69.4793 47.2418 69.4793 47.0683 69.4793C46.9169 69.4753 43.9049 69.4773 40.1347 69.4797H39.9375C33.4769 69.4837 24.9266 69.489 24.6492 69.4684C21.9197 69.4036 18.8545 68.1903 16.396 66.3601C17.4685 61.5622 20.9886 57.4789 25.8187 55.0747Z" fill="#0A5BE8"/>
+<path d="M46.9384 36.2502C47.3172 51.3589 24.6811 51.348 25.0604 36.2502C24.8547 21.0549 47.1333 21.0549 46.9384 36.2502Z" fill="#0A5BE8"/>
+</svg>
diff --git a/apps/website/public/media/polyfrost/full.svg b/apps/website/public/media/polyfrost/full.svg
new file mode 100644
index 0000000..8c51156
--- /dev/null
+++ b/apps/website/public/media/polyfrost/full.svg
@@ -0,0 +1,12 @@
+<svg width="210" height="64" viewBox="0 0 210 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.86 32.6282L31.8843 17.0816C31.0516 15.6393 29.689 15.6393 28.8564 17.0816L18.9471 34.2463C16.2562 38.9073 19.6196 44.7331 25.0015 44.7331H33.8719L40.8601 32.6288L47.8482 44.733H52.7491C56.7858 44.733 59.3082 40.3635 57.2898 36.868L49.3646 23.1415C48.532 21.6999 47.1701 21.6999 46.3374 23.1415L40.86 32.6282Z" fill="#0A5BE8"/>
+<path d="M135.79 27.03H138.95V30.6499H135.92V40.3499H131.26V30.6499H129.32V27.03H131.26V26.6699C131.26 25 131.74 23.6699 132.69 22.6799C133.65 21.6799 135.02 21.1799 136.8 21.1799C137.37 21.1799 137.93 21.24 138.49 21.3599C139.04 21.48 139.51 21.6599 139.89 21.8999L138.73 25.3198C138.54 25.2 138.32 25.0999 138.07 25.02C137.83 24.95 137.58 24.9099 137.34 24.9099C136.85 24.9099 136.47 25.0598 136.2 25.3599C135.93 25.6499 135.79 26.1099 135.79 26.72V27.03Z" fill="#0A5BE8"/>
+<path d="M149.74 26.29V30.6501L149.626 30.6343C149.457 30.6104 149.313 30.5901 149.19 30.5901C149.03 30.5801 148.86 30.5701 148.68 30.5701C147.74 30.5701 146.97 30.8401 146.38 31.3801C145.79 31.9102 145.5 32.79 145.5 33.99V40.3501H140.84V26.52H145.28V28.1799C145.61 27.72 146.03 27.3501 146.53 27.0601C147.41 26.55 148.48 26.29 149.74 26.29Z" fill="#0A5BE8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M158.19 40.5701C156.74 40.5701 155.44 40.26 154.32 39.6501C153.19 39.04 152.31 38.1899 151.66 37.1101C151.01 36.03 150.69 34.79 150.69 33.4001C150.69 32.01 151.01 30.77 151.66 29.7C152.31 28.6301 153.19 27.79 154.32 27.1899C155.45 26.5901 156.74 26.28 158.19 26.28C159.64 26.28 160.94 26.5801 162.07 27.1899C163.2 27.79 164.09 28.6301 164.73 29.7C165.37 30.77 165.69 32.01 165.69 33.4001C165.69 34.79 165.37 36.03 164.73 37.1101C164.09 38.1899 163.21 39.04 162.07 39.6501C160.94 40.27 159.65 40.5701 158.19 40.5701ZM158.19 36.72C158.73 36.72 159.21 36.5901 159.62 36.3401C160.04 36.0801 160.37 35.71 160.61 35.2C160.85 34.6899 160.98 34.1001 160.98 33.4001C160.98 32.7 160.86 32.1101 160.61 31.6301C160.36 31.1401 160.03 30.77 159.62 30.52C159.403 30.3909 159.172 30.2937 158.926 30.23C158.695 30.1704 158.451 30.1401 158.19 30.1401C157.953 30.1401 157.727 30.167 157.51 30.22C157.252 30.2834 157.008 30.384 156.78 30.52C156.36 30.77 156.03 31.1401 155.78 31.6301C155.53 32.1101 155.4 32.71 155.4 33.4001C155.4 34.0901 155.53 34.7 155.78 35.2C156.03 35.7 156.37 36.0801 156.78 36.3401C157.2 36.5901 157.67 36.72 158.19 36.72Z" fill="#0A5BE8"/>
+<path d="M172.68 40.5701C171.55 40.5701 170.45 40.4299 169.38 40.1599C168.31 39.8901 167.45 39.55 166.8 39.1401L168.2 35.8201C168.82 36.21 169.55 36.52 170.38 36.75C171.21 36.98 172.03 37.0901 172.83 37.0901C173.61 37.0901 174.16 37.01 174.46 36.8301C174.76 36.6599 174.91 36.4299 174.91 36.1401C174.91 35.8701 174.77 35.6699 174.48 35.54C174.344 35.479 174.191 35.4248 174.018 35.3782C173.821 35.3252 173.6 35.282 173.35 35.25L172.92 35.1873L172.912 35.1858L172.893 35.1831C172.555 35.1339 172.196 35.0816 171.82 35.02C171.529 34.9724 171.235 34.9192 170.938 34.8589C170.674 34.8052 170.408 34.7458 170.14 34.6799C169.58 34.54 169.06 34.3101 168.6 34.02C168.14 33.73 167.76 33.3201 167.48 32.8101C167.2 32.3 167.06 31.6501 167.06 30.8701C167.06 29.99 167.31 29.2 167.81 28.51C168.31 27.8201 169.04 27.28 170 26.8801C170.96 26.48 172.14 26.28 173.53 26.28C173.979 26.28 174.433 26.3035 174.89 26.3489C175.378 26.3977 175.869 26.4719 176.36 26.5701C176.938 26.6855 177.463 26.8418 177.933 27.0339C178.236 27.158 178.515 27.2971 178.77 27.45L177.37 30.74C177.039 30.5415 176.706 30.374 176.372 30.239C176.05 30.1089 175.729 30.0088 175.41 29.9399C174.76 29.8 174.14 29.72 173.55 29.72C172.77 29.72 172.22 29.8101 171.9 30C171.58 30.1899 171.42 30.4199 171.42 30.6899C171.42 30.96 171.56 31.1699 171.84 31.3101C171.894 31.3369 171.95 31.3625 172.01 31.3872C172.265 31.491 172.578 31.5754 172.95 31.6401C173.32 31.7029 173.714 31.7598 174.134 31.8201L174.48 31.8701C174.8 31.9165 175.126 31.9731 175.454 32.042C175.689 32.0916 175.925 32.1472 176.16 32.21C176.401 32.2747 176.635 32.3542 176.86 32.448C177.157 32.5715 177.438 32.7195 177.7 32.8901C178.17 33.1899 178.54 33.5901 178.82 34.0901C179.1 34.5901 179.24 35.23 179.24 36.02C179.24 36.8701 178.99 37.6401 178.49 38.3201C177.99 39 177.26 39.54 176.28 39.95C175.32 40.3701 174.11 40.5701 172.68 40.5701Z" fill="#0A5BE8"/>
+<path d="M190.91 39.79C190.749 39.9014 190.573 40.0007 190.38 40.0876C190.107 40.2114 189.801 40.3096 189.46 40.3799C189.26 40.4255 189.058 40.4636 188.852 40.4941C188.471 40.5503 188.079 40.5798 187.67 40.5798C185.98 40.5798 184.65 40.1399 183.71 39.26C182.76 38.3899 182.28 37.0598 182.28 35.29V30.6499H180.35V27.03H182.28V23.4299H186.94V27.03H189.98V30.6499H186.94V35.24C186.94 35.74 187.07 36.1199 187.33 36.3999C187.59 36.6799 187.93 36.8298 188.34 36.8298C188.89 36.8298 189.37 36.6799 189.76 36.3899L190.91 39.79Z" fill="#0A5BE8"/>
+<path d="M105.89 21.4099V40.3398H110.55V21.4099H105.89Z" fill="#0A5BE8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.5298 25.5601C85.9102 24.5601 85.0298 23.8 83.8999 23.28C82.7598 22.75 81.4102 22.48 79.8398 22.48H72V40.3501H76.8501V35.6799H79.8398C81.4102 35.6799 82.7598 35.4099 83.8999 34.8699C85.0298 34.3401 85.9102 33.5801 86.5298 32.5901C87.1499 31.6001 87.46 30.4399 87.46 29.0901C87.46 27.73 87.1499 26.55 86.5298 25.5601ZM81.8101 31.01C81.3198 31.47 80.5601 31.7 79.5498 31.7H76.8501V26.46H79.5498C80.5601 26.46 81.3198 26.7 81.8101 27.1499C82.3101 27.6099 82.5601 28.26 82.5601 29.0901C82.5601 29.9099 82.3101 30.55 81.8101 31.01Z" fill="#0A5BE8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.3696 39.6501C93.4897 40.26 94.7896 40.5701 96.2397 40.5701C97.6899 40.5701 98.9897 40.27 100.12 39.6501C101.26 39.04 102.14 38.1899 102.78 37.1101C103.42 36.03 103.74 34.79 103.74 33.4001C103.74 32.01 103.42 30.77 102.78 29.7C102.14 28.6301 101.25 27.79 100.12 27.1899C98.9897 26.5801 97.6899 26.28 96.2397 26.28C94.7896 26.28 93.4995 26.5901 92.3696 27.1899C91.2397 27.79 90.3599 28.6301 89.71 29.7C89.0596 30.77 88.7397 32.01 88.7397 33.4001C88.7397 34.79 89.0596 36.03 89.71 37.1101C90.3599 38.1899 91.2397 39.04 92.3696 39.6501ZM97.6699 36.3401C97.2598 36.5901 96.7798 36.72 96.2397 36.72C95.71 36.72 95.2397 36.5901 94.8296 36.3401C94.4199 36.0801 94.0796 35.7 93.8296 35.2C93.6797 34.9001 93.5728 34.5608 93.5112 34.1882C93.4702 33.9397 93.4497 33.6763 93.4497 33.4001C93.4497 32.71 93.5796 32.1101 93.8296 31.6301C93.9697 31.3555 94.1348 31.1187 94.3267 30.9194C94.3916 30.8521 94.46 30.7888 94.5312 30.73C94.625 30.6526 94.7246 30.5825 94.8296 30.52C95.2495 30.27 95.7197 30.1401 96.2397 30.1401C96.4727 30.1401 96.6924 30.1643 96.9009 30.2119C97.1758 30.2747 97.4307 30.3779 97.6699 30.52C97.7417 30.564 97.811 30.6116 97.8784 30.6628C98.0581 30.8005 98.2202 30.9648 98.3643 31.1555C98.4146 31.2217 98.4624 31.291 98.5083 31.3638C98.5615 31.4482 98.6123 31.5369 98.6597 31.6301C98.7949 31.8894 98.8921 32.1807 98.9526 32.5042C99.0044 32.7795 99.0298 33.0781 99.0298 33.4001C99.0298 34.1001 98.8999 34.6899 98.6597 35.2C98.5703 35.3896 98.4688 35.5601 98.3545 35.7124C98.2446 35.8591 98.1235 35.9895 97.9907 36.1047C97.8901 36.1917 97.7832 36.2698 97.6699 36.3401Z" fill="#0A5BE8"/>
+<path d="M128.05 26.52L122.31 40.9099C122.09 41.4912 121.852 42.0103 121.595 42.4675C121.326 42.9463 121.037 43.3572 120.73 43.7C120.14 44.3701 119.47 44.8501 118.75 45.1201C118.02 45.3901 117.21 45.53 116.33 45.53C115.63 45.53 114.92 45.4099 114.21 45.1799C113.5 44.95 112.93 44.6499 112.49 44.28L114.1 40.8801C114.38 41.1401 114.7 41.3401 115.07 41.48C115.277 41.564 115.48 41.6228 115.683 41.6582C115.843 41.6863 116.001 41.7 116.16 41.7C116.67 41.7 117.07 41.5801 117.36 41.3401C117.465 41.2563 117.565 41.1555 117.658 41.0378C117.777 40.8882 117.885 40.7117 117.98 40.51L112.29 26.52H117.07L120.33 34.97L123.61 26.52H128.05Z" fill="#0A5BE8"/>
+</svg>
diff --git a/apps/website/public/media/polyfrost/minimal.svg b/apps/website/public/media/polyfrost/minimal.svg
new file mode 100644
index 0000000..82d8e36
--- /dev/null
+++ b/apps/website/public/media/polyfrost/minimal.svg
@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.86 32.1283L25.8843 16.5817C25.0516 15.1394 23.689 15.1394 22.8564 16.5817L12.9471 33.7464C10.2562 38.4075 13.6196 44.2332 19.0015 44.2332H27.8719L34.8601 32.129L41.8482 44.2331H46.7491C50.7858 44.2331 53.3082 39.8637 51.2898 36.3681L43.3646 22.6416C42.532 21.2 41.1701 21.2 40.3374 22.6416L34.86 32.1283Z" fill="#0A5BE8"/>
+</svg>
diff --git a/apps/website/public/media/polyfrost/minimal_bg.svg b/apps/website/public/media/polyfrost/minimal_bg.svg
new file mode 100644
index 0000000..f949e8d
--- /dev/null
+++ b/apps/website/public/media/polyfrost/minimal_bg.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" fill="#121317"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.86 32.1283L25.8843 16.5817C25.0516 15.1394 23.689 15.1394 22.8564 16.5817L12.9471 33.7464C10.2562 38.4075 13.6196 44.2332 19.0015 44.2332H27.8719L34.8601 32.129L41.8482 44.2331H46.7491C50.7858 44.2331 53.3082 39.8637 51.2898 36.3681L43.3646 22.6416C42.532 21.2 41.1701 21.2 40.3374 22.6416L34.86 32.1283Z" fill="#2567D8"/>
+</svg>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
new file mode 100644
index 0000000..ad8267b
--- /dev/null
+++ b/apps/website/src/components/base/Header.astro
@@ -0,0 +1,57 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+const sizes = {
+    "xl": "h1",
+    "lg": "h2",
+    "md": "h3",
+    "sm": "h4",
+    "xs": "h5",
+    "xxs": "h6"  
+};
+
+type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+interface Props extends HTMLAttributes<Headers> {
+    size: keyof typeof sizes;
+}
+
+const { size, ...attr } = Astro.props;
+const Element = sizes[size] as any; // Unfortunately gotta do this
+---
+
+<Element {...attr}>
+    <slot />
+</Element>
+
+<style>
+    h1 {
+        font-size: theme("fontSize.header-lg");
+        font-weight: 700;
+    }
+
+    h2 {
+        font-size: theme("fontSize.header");
+        font-weight: 700;
+    }
+
+    h3 {
+        font-size: theme("fontSize.header-sm");
+        font-weight: 600;
+    }
+
+    h4 {
+        font-size: theme("fontSize.body-lg");
+        font-weight: 500;
+    }
+
+    h5 {
+        font-size: theme("fontSize.body");
+        font-weight: 500;
+    }
+
+    h6 {
+        font-size: theme("fontSize.body-sm");
+        font-weight: 500;
+    }
+</style>
\ No newline at end of file
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro
new file mode 100644
index 0000000..f4f2f49
--- /dev/null
+++ b/apps/website/src/components/base/Navbar.astro
@@ -0,0 +1,21 @@
+---
+import config from "config";
+import type { Config } from "@webtypes/Config";
+import NavbarElement from "./NavbarElement.astro";
+
+---
+
+<div class="w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+    <nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
+        <ul class="flex flex-row justify-start gap-4">
+            {(config as Config).navbar.left.map((element, index) => (
+                <NavbarElement {element} {index} />
+            ))}
+        </ul>
+        <ul class="flex flex-row justify-end gap-4">
+            {(config as Config).navbar.right.map((element, index) => (
+                <NavbarElement {element} {index} />
+            ))}
+        </ul>
+    </nav>
+</div>
\ No newline at end of file
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
new file mode 100644
index 0000000..4f82e8b
--- /dev/null
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -0,0 +1,86 @@
+---
+import ChevronDown from "@components/icons/ChevronDown.astro";
+import type { LogoType, NavbarElement } from "@webtypes/Config";
+import ScreenOverlay from "./ScreenOverlay.astro";
+import Header from "./Header.astro";
+import Tag from "./Tag.astro";
+import Logo from "@components/logos/Logo.astro";
+import ScrollbarOverlayContainer from "./ScrollbarOverlayContainer.astro";
+
+interface Props {
+    element: NavbarElement;
+    index: number;
+}
+
+const {
+    element,
+    index
+} = Astro.props;
+---
+
+<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
+    <label for={`navbar-input-${index}`} class="group">
+
+        {element.path ? (
+            <a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
+                {element.text && element.text}
+                {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
+                {element.dropdown && <ChevronDown />}
+            </a>
+        ) : (
+            <p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
+                {element.text && element.text}
+                {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
+                {element.dropdown && <ChevronDown />}
+            </p>
+        )}
+
+        {element.dropdown && (
+            <ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
+            <input type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
+            <div class={`transition-opacity
+                absolute right-0 max-sm:bottom-0
+                max-sm:overflow-hidden 
+                max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen 
+                pointer-events-none opacity-0
+
+                md:top-full md:right-0
+
+                group-focus-within:pointer-events-auto group-focus-within:opacity-100
+                focus-within:pointer-events-auto focus-within:opacity-100
+                hover:pointer-events-auto hover:opacity-100
+            `}>
+                <ScrollbarOverlayContainer class={`
+                    bg-gray-50 
+                    rounded-t-lg md:rounded-lg 
+                    transition-transform
+                    max-sm:translate-y-1/3 max-sm:left-0
+                    group-focus-within:translate-y-0
+                    max-h-full md:max-h-96 overflow-y-auto
+                `}>
+                    <ul class="p-4">
+                        {element.dropdown.map((item) => (
+                            <li>
+                                <a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
+                                    <div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-white-hover">
+                                        <div class="w-[36px]">
+                                            {item.logo && <Logo size={40} logo={item.logo} />}    
+                                        </div>
+
+                                        <div class="flex flex-col justify-start items-start">
+                                            <div class="flex flex-row gap-2">
+                                                <Header size="sm" class="text-gray-800">{item.name}</Header>
+                                                {item.tag && <Tag>{item.tag}</Tag>}
+                                            </div>
+                                            <p class="text-sm text-gray-400 font-light">{item.description}</p>
+                                        </div>
+                                    </div>    
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </ScrollbarOverlayContainer>
+            </div>
+        )}
+    </label>
+</li>
\ No newline at end of file
diff --git a/apps/website/src/components/base/ScreenOverlay.astro b/apps/website/src/components/base/ScreenOverlay.astro
new file mode 100644
index 0000000..7be8bc5
--- /dev/null
+++ b/apps/website/src/components/base/ScreenOverlay.astro
@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+    zIndex?: number;
+}
+
+const {
+    zIndex = 0,
+    ...rest
+} = Astro.props;
+---
+
+<div class="pointer-events-none absolute left-0 top-0">
+    <div class={`transition-opacity fixed opacity-0 w-screen h-screen z-[${zIndex}] bg-black/30 ${rest.class}`} {...rest}></div>
+</div>
\ No newline at end of file
diff --git a/apps/website/src/components/base/ScrollbarOverlayContainer.astro b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
new file mode 100644
index 0000000..d8d315d
--- /dev/null
+++ b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+
+}
+
+const { ...attr } = Astro.props;
+---
+
+<div {...attr}>
+    <slot></slot>
+</div>
+
+<style>
+@media (hover: hover) {
+    div {
+        
+    }
+
+    div::-webkit-scrollbar {
+        display: block;
+        width: 5px;
+    }
+
+    div::-webkit-scrollbar:hover {
+        opacity: 1;
+    }
+
+    div::-webkit-scrollbar-button {
+        display: none;
+    }
+
+    div::-webkit-scrollbar-track {
+        background-color: #00000000;
+    }
+
+    div::-webkit-scrollbar-track-piece {
+        background-color: #00000000;
+    }
+
+    div::-webkit-scrollbar-thumb {
+        background-color: #00000000;
+        border-radius: 24px;
+    }
+
+    div::-webkit-scrollbar-thumb:hover {
+        background-color: #00000040;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro
new file mode 100644
index 0000000..e6fd34f
--- /dev/null
+++ b/apps/website/src/components/base/Tag.astro
@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {}
+
+const { ...attr } = Astro.props;
+---
+
+<div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
+    <span {...attr}>
+        <slot></slot>
+    </span>
+</div>
+
diff --git a/apps/website/src/components/icons/ChevronDown.astro b/apps/website/src/components/icons/ChevronDown.astro
new file mode 100644
index 0000000..5cb98e4
--- /dev/null
+++ b/apps/website/src/components/icons/ChevronDown.astro
@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<"svg"> {
+    size?: number;
+}
+
+const {
+    size = 16,
+    ...attr
+} = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" fill="none" {...attr}>
+    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro
new file mode 100644
index 0000000..0532396
--- /dev/null
+++ b/apps/website/src/components/logos/Logo.astro
@@ -0,0 +1,52 @@
+---
+import type { LogoType } from "@webtypes/Config";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import type { HTMLAttributes } from "astro/types";
+
+export interface Props extends HTMLAttributes<"svg"> {
+    logo: LogoType,
+    size?: number | [number, number],
+    silent?: boolean,
+}
+
+const { 
+    logo,
+    silent = false,
+    size = undefined,
+    ...attr
+} = Astro.props;
+let svg: string | undefined;
+
+try {
+    if (logo == undefined) return;
+    const dir = dirname(fileURLToPath(import.meta.url)) + "/../../../public/media";
+    svg = (await import(`${dir}/${logo.replaceAll(".", "/")}.svg?raw` /* @vite-ignore */)).default;
+
+    if (svg == undefined) return;
+
+    if (typeof size == "number" || Array.isArray(size)) {
+        // SVG main element regex
+        const svgElementRegex = /<svg[^>]*>/;
+
+        svg = svg.replace(svgElementRegex, (match) => {
+            let newMatch = match;
+            if (typeof size == "number") {
+                newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`);
+                newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`);
+            } else if (Array.isArray(size)) {
+                newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`);
+                newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`);
+            }
+            return newMatch;
+        });
+    }
+
+    svg = svg.replace(/<svg/, `<svg ${Object.entries(attr).map(([key, value]) => `${key}="${value}"`).join(" ")}`);
+} catch (err) {
+    if (typeof silent != "boolean" || silent == false) console.error(err);
+}
+
+---
+
+<Fragment set:html={svg} />
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
new file mode 100644
index 0000000..a648f08
--- /dev/null
+++ b/apps/website/src/layouts/Layout.astro
@@ -0,0 +1,38 @@
+---
+import "../styles/global.css";
+import Navbar from "../components/base/Navbar.astro";
+import Favicon from "/media/polyfrost/minimal_bg.svg?url";
+
+interface Props {
+	title?: string;
+    favicon?: string;
+}
+
+const { 
+    title = 'Polyfrost',
+    favicon = Favicon
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Official website for Polyfrost." />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href={favicon} />
+		<meta name="generator" content={Astro.generator} />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
+		<title>{title}</title>
+	</head>
+
+	<body class="bg-white">
+        <Navbar />
+		<slot />
+
+	</body>
+</html>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
new file mode 100644
index 0000000..a484172
--- /dev/null
+++ b/apps/website/src/pages/index.astro
@@ -0,0 +1,10 @@
+---
+import Header from "@components/base/Header.astro";
+import Layout from "../layouts/Layout.astro";
+import Logo from "@components/logos/Logo.astro";
+---
+
+<Layout>
+    <Header size="xl">test</Header>
+	<Header size="md">Test</Header>
+</Layout>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
new file mode 100644
index 0000000..51f3c19
--- /dev/null
+++ b/apps/website/src/styles/global.css
@@ -0,0 +1,11 @@
+@tailwind base;
+
+* {
+    font-family: 'Poppins', sans-serif;
+}
+
+@layer base {
+    :focus-visible {
+        @apply outline-none ring ring-blue-500;
+    }
+}
\ No newline at end of file
diff --git a/apps/website/src/types/Config.d.ts b/apps/website/src/types/Config.d.ts
new file mode 100644
index 0000000..82eb4d7
--- /dev/null
+++ b/apps/website/src/types/Config.d.ts
@@ -0,0 +1,34 @@
+import { type configConst } from "config";
+
+export type LogoType = typeof configConst.logos[number];
+
+export interface Project {
+    name: string,
+    description: string,
+    logo?: LogoType,
+    tag?: string,
+}
+
+export type NavbarDropdown = {
+    name: string,
+    description: string,
+    path: string,
+    logo?: LogoType,
+    tag?: string
+}
+
+export type NavbarElement = {
+    text?: string,
+    logo?: [string, number],
+    path?: string,
+    dropdown?: NavbarDropdown[],
+}
+
+export interface Config {
+    projects: Project[],
+    logos: string[],
+    navbar: {
+        left: NavbarElement[],
+        right: NavbarElement[],
+    },
+}
\ No newline at end of file