feat: rebuild onboarding experience

apps/nextjs/src/components/board/board-layout-thumbnail.module.css

@@ -0,0 +1,68 @@
+.canvas {
+  min-height: 8rem;
+  aspect-ratio: 16 / 7;
+  overflow: hidden;
+  color: var(--mantine-color-dimmed);
+  background:
+    radial-gradient(
+      circle at 15% 10%,
+      color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent),
+      transparent 35%
+    ),
+    var(--mantine-color-body);
+}
+
+.lanes {
+  display: grid;
+  height: 100%;
+  gap: rem(8px);
+  padding: rem(12px);
+}
+
+.lane {
+  display: grid;
+  min-width: 0;
+  gap: rem(3px);
+  padding: rem(4px);
+  overflow: hidden;
+  border: rem(1px) solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+  background-image:
+    linear-gradient(
+      to right,
+      color-mix(in srgb, var(--mantine-color-dimmed) 8%, transparent) rem(1px),
+      transparent rem(1px)
+    ),
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--mantine-color-dimmed) 8%, transparent) rem(1px),
+      transparent rem(1px)
+    );
+  background-size: rem(12px) rem(12px);
+}
+
+.lane[data-lane="left"],
+.lane[data-lane="right"] {
+  background-color: color-mix(in srgb, var(--mantine-primary-color-light) 40%, transparent);
+}
+
+.tile {
+  min-width: 0;
+  min-height: 0;
+  border: rem(1px) solid color-mix(in srgb, var(--mantine-primary-color-filled) 32%, transparent);
+  border-radius: max(rem(2px), calc(var(--mantine-radius-default) / 2));
+  background: color-mix(in srgb, var(--mantine-primary-color-filled) 18%, var(--mantine-color-body));
+  box-shadow: 0 rem(1px) rem(3px) rgb(0 0 0 / 8%);
+}
+
+.container {
+  border-style: dashed;
+  border-color: color-mix(in srgb, var(--mantine-color-teal-filled) 45%, transparent);
+  background: color-mix(in srgb, var(--mantine-color-teal-light) 55%, var(--mantine-color-body));
+}
+
+@media (max-width: $mantine-breakpoint-xs) {
+  .canvas {
+    min-height: 7rem;
+  }
+}