updated to look nicer

src/init.luau

@@ -12,91 +12,132 @@ return h.html({ lang = "en" })({
 			rel = "icon",
 			href = "https://git.luau.software/luau.software/assets/raw/branch/main/luau-logo.png",
 		}),
-		h.link({
-			rel = "stylesheet",
-			href = "https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.classless.min.css",
-		}),
 		h.style()({
 			[[
-				:root {
+				* { margin: 0; padding: 0; box-sizing: border-box; }
-					--pico-primary:               #335FFF;
+
-					--pico-primary-hover:         #2B50D8;
-					--pico-primary-focus:         #335FFF40;
-					--pico-background-color:      #000000;
-					--pico-card-background-color: #202227;
-					--pico-card-border-color:     #353741;
-					--pico-color:                 #EEEFF1;
-					--pico-muted-color:           #BCBEC8;
-					--pico-muted-border-color:    #353741;
-					--pico-h1-color:              #F7F7F8;
-					--pico-h2-color:              #EEEFF1;
-				}
-				html, body {
-					height: 100%;
-					margin: 0;
-					padding: 0;
-					background-color: #000000;
-				}
 				body {
+					min-height: 100vh;
 					display: flex;
 					align-items: center;
 					justify-content: center;
+					background: #000;
+					color: #eee;
+					font-family: system-ui, sans-serif;
+					overflow: hidden;
 				}
+
+				.bg-logo {
+					position: fixed;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					width: 500px;
+					height: 500px;
+					opacity: 0.06;
+					filter: drop-shadow(0 0 80px #335FFF) drop-shadow(0 0 160px #335FFF88);
+					pointer-events: none;
+					z-index: 0;
+				}
+
+				.glow {
+					position: fixed;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					width: 400px;
+					height: 400px;
+					background: radial-gradient(circle, #335FFF18 0%, transparent 70%);
+					pointer-events: none;
+					z-index: 0;
+				}
+
 				main {
+					position: relative;
+					z-index: 1;
 					display: flex;
 					flex-direction: column;
 					align-items: center;
-					justify-content: center;
 					text-align: center;
-					width: 100%;
-					max-width: 860px;
 					padding: 2rem;
 				}
-				header {
+
-					text-align: center;
+				h1 {
-					margin-bottom: 1rem;
+					font-size: 4rem;
+					font-weight: 600;
+					letter-spacing: -0.03em;
+					color: #fff;
+					margin-bottom: 0.3rem;
 				}
+
+				.tagline {
+					font-size: 1.1rem;
+					color: #666;
+					margin-bottom: 3rem;
+				}
+
 				.cards {
 					display: flex;
-					flex-direction: row;
+					gap: 12px;
 					flex-wrap: wrap;
-					gap: 10px;
 					justify-content: center;
-					width: 100%;
 				}
-				article {
+
-					min-width: 220px;
+				.card {
-					text-align: center;
+					background: #0a0a0c99;
+					backdrop-filter: blur(8px);
+					-webkit-backdrop-filter: blur(8px);
+					border: 1px solid #1a1a20;
+					border-radius: 10px;
+					padding: 1.25rem 1.75rem;
+					text-decoration: none;
+					color: #eee;
+					transition: border-color 0.2s, background 0.2s;
+				}
+
+				.card:hover {
+					border-color: #335FFF44;
+					background: #0e0e14b3;
+				}
+
+				.card-label {
+					font-size: 0.7rem;
+					text-transform: uppercase;
+					letter-spacing: 0.08em;
+					color: #555;
+					margin-bottom: 0.4rem;
+				}
+
+				.card-value {
+					font-size: 0.95rem;
+					font-weight: 500;
+					color: #335FFF;
 				}
 			]],
 		}),
 	}),
 	h.body()({
+		h.img({
+			class = "bg-logo",
+			src = "https://git.luau.software/luau.software/assets/raw/branch/main/luau-logo.png",
+			alt = "",
+		}),
+		h.div({ class = "glow" }),
 		h.main()({
-			h.header()({
 			h.h1()({
 				"luau.software",
 			}),
-				h.p()({
+			h.p({ class = "tagline" })({
 				"Luau enthusiasm since 2025.",
 			}),
-			}),
 			h.div({ class = "cards" })({
-				h.article()({
+				h.a({ class = "card", href = "mailto:cyclic@luau.software" })({
-					h.header()({
+					h.div({ class = "card-label" })({ "Contact" }),
-						"Contact email:",
+					h.div({ class = "card-value" })({ "cyclic@luau.software" }),
-					}),
-					h.a({ href = "mailto://cyclic@luau.software"})({
-						"cyclic@luau.software",
-					}),
-				}),
-				h.article()({
-					h.header()({
-						"Luau themed Git:",
-					}),
-					h.a({ href = "https://git.luau.software" })({
-						"Gitea Instance",
 				}),
+				h.a({ class = "card", href = "https://git.luau.software" })({
+					h.div({ class = "card-label" })({ "Git" }),
+					h.div({ class = "card-value" })({ "git.luau.software" }),
 				}),
 			}),
 		}),