wip

pkgs/clan-app/ui/icons/clan-logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="223" height="89" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 223 89">
     <g clip-path="url(#a)">
         <path d="M55.503 18.696h10.104a1.946 1.946 0 0 0 1.943-1.948v-7.79c0-1.075-.87-1.947-1.943-1.947h-3.186a1.863 1.863 0 0 1-1.866-1.87V1.947C60.555.872 59.685 0 58.612 0h-27.98a1.946 1.946 0 0 0-1.944 1.947v3.194c0 1.036-.832 1.87-1.865 1.87h-3.187a1.946 1.946 0 0 0-1.943 1.947v3.194c0 1.036-.832 1.87-1.866 1.87h-3.186a1.946 1.946 0 0 0-1.943 1.947s-.467 1.153-.467 23.253c0 19.763.467 21.913.467 21.913 0 1.075.87 1.948 1.943 1.948h3.186c1.034 0 1.866.833 1.866 1.87v3.271c0 1.036.831 1.87 1.865 1.87h3.265c1.033 0 1.865.833 1.865 1.87v3.193c0 1.075.87 1.948 1.943 1.948h27.981a1.946 1.946 0 0 0 1.943-1.948v-3.194c0-1.036.832-1.87 1.866-1.87h5.145a1.946 1.946 0 0 0 1.943-1.947v-9.285c0-1.075-.87-1.948-1.943-1.948H55.503a1.946 1.946 0 0 0-1.943 1.948v4.69c0 1.035-.832 1.869-1.866 1.869H37.55a1.863 1.863 0 0 1-1.866-1.87v-4.752c0-1.075-.87-1.947-1.943-1.947H29c-1.034 0-1.609.148-1.865-1.87-.078-.646-.125-1.44-.18-2.508-.147-2.68-.287-5.5-.287-13.539 0-11.24.288-16.81.466-18.369.18-1.558.832-1.87 1.866-1.87h4.741a1.946 1.946 0 0 0 1.943-1.947v-3.193c0-1.037.832-1.87 1.866-1.87h14.145c1.034 0 1.866.833 1.866 1.87v3.193c0 1.075.87 1.948 1.943 1.948M20.247 74.822h-2.293a.814.814 0 0 1-.808-.81v-2.298c0-.896-.723-1.62-1.617-1.62H9.327c-.894 0-1.617.724-1.617 1.62v2.298c0 .444-.365.81-.808.81H4.609c-.894 0-1.617.725-1.617 1.62v6.217c0 .896.723 1.62 1.617 1.62h2.293c.443 0 .808.366.808.81v2.299c0 .895.723 1.62 1.617 1.62h6.202c.894 0 1.617-.725 1.617-1.62v-2.299c0-.444.365-.81.808-.81h2.293c.894 0 1.617-.724 1.617-1.62v-6.216c0-.896-.723-1.62-1.617-1.62M221.135 35.04h-1.71a1.863 1.863 0 0 1-1.866-1.87v-3.272c0-1.036-.831-1.87-1.865-1.87h-3.265a1.863 1.863 0 0 1-1.865-1.87v-3.271c0-1.036-.832-1.87-1.865-1.87h-20.971a1.863 1.863 0 0 0-1.865 1.87v3.965c0 .514-.42.935-.933.935h-3.559c-.513 0-.84-.32-.933-.935l-.622-3.918c-.148-1.099-.676-1.777-1.788-1.777l-3.653-.14h-2.052a3.736 3.736 0 0 0-3.73 3.74V61.68a3.736 3.736 0 0 1-3.731 3.739h-8.394a1.863 1.863 0 0 1-1.866-1.87V36.714c0-11.825-7.461-18.813-22.556-18.813-13.718 0-20.325 5.04-21.203 14.443-.109 1.153.552 1.815 1.702 1.815l7.757.569c1.143.1 1.594-.554 1.811-1.652.77-3.74 4.174-5.827 9.933-5.827 7.081 0 10.042 3.358 10.042 9.076v3.014c0 1.036-.831 1.87-1.865 1.87l-.342-.024h-9.715c-15.421 0-22.984 5.983-22.984 17.956 0 3.802.778 7.058 2.254 9.738h-.59c-1.765-1.27-2.457-2.236-3.055-2.93-.256-.295-.653-.537-1.345-.537h-1.717l-5.993.008h-3.264a3.736 3.736 0 0 1-3.731-3.74V1.769C89.74.654 89.072 0 87.969 0H79.55c-1.034 0-1.865.732-1.865 1.768l-.024 54.304v13.554c0 4.13 3.343 7.479 7.462 7.479h50.84c8.448-.429 8.604-3.42 9.436-4.542.645 3.56 1.865 4.347 4.71 4.518 8.137.117 18.343.032 18.49.024h4.975c4.119 0 6.684-3.35 6.684-7.479l.777-27.264c0-1.036.832-1.87 1.866-1.87h2.021a1.56 1.56 0 0 0 1.554-1.558v-3.583c0-1.036.832-1.87 1.866-1.87h11.868a3.37 3.37 0 0 1 3.366 3.373v3.249c0 1.075.87 1.947 1.943 1.947h4.119c.513 0 .933.42.933.935v32.25c0 1.036.831 1.87 1.865 1.87h6.84a3.736 3.736 0 0 0 3.731-3.74V36.91c0-1.036-.832-1.87-1.866-1.87zM142.64 54.225c0 8.927-6.132 14.715-15.335 14.715-6.606 0-9.793-2.953-9.793-8.748 0-6.442 3.832-9.636 11.62-9.636h13.508v3.669"/>
     </g>

pkgs/clan-app/ui/src/components/Typography/Typography.css

@@ -148,6 +148,18 @@
       line-height: 116%;
       letter-spacing: 0.06rem;
     }
+
+    &.size-xl {
+      font-size: 2.5rem;
+      line-height: 104%;
+      letter-spacing: -0.06rem;
+    }
+
+    &.size-xxl {
+      font-size: 3rem;
+      line-height: 104%;
+      letter-spacing: -0.06rem;
+    }
   }
 
   &.teaser {
@@ -161,4 +173,17 @@
       letter-spacing: -0.06rem;
     }
   }
+
+  &.align-left {
+    text-align: left;
+  }
+
+  &.align-center {
+    text-align: center;
+  }
+
+  &.align-right {
+    text-align: right;
+  }
+
 }

pkgs/clan-app/ui/src/components/Typography/Typography.tsx

@@ -28,6 +28,8 @@ interface SizeForHierarchy {
     default: string;
     m: string;
     l: string;
+    xl: string;
+    xxl: string;
   };
   title: {
     default: string;
@@ -52,6 +54,8 @@ const sizeHierarchyMap: SizeForHierarchy = {
     default: cx("size-default"),
     m: cx("size-m"),
     l: cx("size-l"),
+    xl: cx("size-xl"),
+    xxl: cx("size-xxl")
   },
   title: {
     default: cx("size-default"),
@@ -97,6 +101,7 @@ interface _TypographyProps<H extends Hierarchy> {
   tag?: Tag;
   class?: string;
   transform?: Transform;
+  align?: "left" | "center" | "right";
 }
 
 export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
@@ -106,6 +111,7 @@ export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
   const size = () => sizeHierarchyMap[props.hierarchy][props.size] as string;
   const weight = () => weightMap[props.weight || "normal"];
   const color = () => fgClass(props.color, props.inverted);
+  const align = () => `align-${props.align || "left"}`;
 
   return (
     <Dynamic
@@ -116,6 +122,7 @@ export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
         weight(),
         size(),
         color(),
+        align(),
         props.transform,
         props.class,
       )}

pkgs/clan-app/ui/src/index.tsx

@@ -3,6 +3,9 @@ import { render } from "solid-js/web";
 
 import "./index.css";
 import { QueryClient } from "@tanstack/solid-query";
+import { Routes } from "@/src/routes";
+import { Router } from "@solidjs/router";
+import { Layout } from "@/src/routes/Layout";
 
 export const client = new QueryClient();
 
@@ -19,4 +22,4 @@ if (import.meta.env.DEV) {
   await import("solid-devtools");
 }
 
-render(() => <h1>Hello World</h1>, root!);
+render(() => <Router root={Layout}>{Routes}</Router>, root!);

pkgs/clan-app/ui/src/routes/Layout.tsx

@@ -0,0 +1,8 @@
+import { Component } from "solid-js";
+import { RouteSectionProps } from "@solidjs/router";
+
+export const Layout: Component<RouteSectionProps> = (props) => (
+  <div class="size-full h-screen">
+    {props.children}
+  </div>
+)

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css

@@ -0,0 +1,52 @@
+div#background {
+    @apply min-h-screen w-screen relative;
+
+    .layer-1 {
+        @apply z-0;
+        background:
+                url('./background.jpg') 0 -69.032px / 100% 119.049% no-repeat,
+                url('./background.jpg') 50% / cover no-repeat;
+    }
+
+    .layer-2 {
+        @apply z-10;
+        background: #103131;
+        mix-blend-mode: screen;
+    }
+
+    .layer-3 {
+        @apply z-20;
+        background: #749095;
+        mix-blend-mode: soft-light;
+    }
+
+    .layer-1, .layer-2, .layer-3 {
+        @apply absolute top-0 left-0 w-full h-full;
+    }
+
+}
+
+main#welcome {
+    @apply absolute top-0 left-0 w-full z-30 flex items-center justify-center min-h-screen;
+
+    & > div.choose {
+        @apply flex flex-col items-center gap-y-20 w-1/2;
+
+        & > div.controls {
+            @apply flex flex-col min-w-80 gap-y-6;
+
+            & > div.separator {
+                @apply grid grid-cols-3 grid-rows-1 gap-x-4 items-center;
+
+
+            }
+        }
+
+    }
+
+    svg.clan-logo {
+        @apply fg-inv-1 w-16;
+
+    }
+}
+

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx

@@ -0,0 +1,53 @@
+import { Component } from "solid-js";
+import { RouteSectionProps } from "@solidjs/router";
+import "./Onboarding.css";
+import { Typography } from "@/src/components/Typography/Typography";
+import { Button } from "@/src/components/Button/Button";
+import { Divider } from "@/src/components/Divider/Divider";
+
+import ClanLogo from "@/icons/clan-logo.svg";
+import { Dynamic } from "solid-js/web";
+
+export const Onboarding: Component<RouteSectionProps> = (props) => (
+  <>
+    <div id="background">
+      <div class="layer-1" />
+      <div class="layer-2" />
+      <div class="layer-3" />
+    </div>
+    <main id="welcome">
+      <div class="choose">
+        <Typography
+          hierarchy="headline"
+          size="xxl"
+          weight="bold"
+          align="center"
+          inverted={true}
+        >
+          Build your <br />
+          own darknet
+        </Typography>
+        <div class="controls">
+          <Button hierarchy="secondary">Start building</Button>
+          <div class="separator">
+            <Divider orientation="horizontal" inverted={true} />
+            <Typography
+              hierarchy="body"
+              size="s"
+              weight="medium"
+              inverted={true}
+              align="center"
+            >
+              or
+            </Typography>
+            <Divider orientation="horizontal" inverted={true} />
+          </div>
+          <Button hierarchy="primary" ghost={true}>
+            Select folder
+          </Button>
+        </div>
+        <Dynamic class="clan-logo" component={ClanLogo} />
+      </div>
+    </main>
+  </>
+);

pkgs/clan-app/ui/src/routes/index.tsx

@@ -0,0 +1,9 @@
+import type { RouteDefinition } from "@solidjs/router/dist/types";
+import { Onboarding } from "@/src/routes/Onboarding/Onboarding";
+
+export const Routes: RouteDefinition[] = [
+  {
+    path: "/",
+    component: Onboarding,
+  },
+];