landing desktop

src/styles/fonts.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: IRANYekanX;
+  src: url('../assets/fonts/IRANYekanXFaNum-ExtraBlack.woff2') format('woff2');
+  font-weight: 950;
+  font-style: normal;
+  font-display: swap;
+}

src/styles/landing.css

@@ -0,0 +1,38 @@
+.landing-hero-blob {
+  clip-path: url(#landing-hero-wave);
+  border-radius: 0;
+}
+
+@supports not (clip-path: url(#landing-hero-wave)) {
+  .landing-hero-blob {
+    clip-path: polygon(
+      0% 0%,
+      100% 0%,
+      100% 78%,
+      94% 84%,
+      86% 90%,
+      76% 95%,
+      64% 98%,
+      50% 100%,
+      36% 98%,
+      24% 93%,
+      12% 86%,
+      0% 80%
+    );
+  }
+}
+
+.landing-hero-dots {
+  background-image: radial-gradient(circle, rgb(0 150 64 / 0.16) 1.5px, transparent 1.5px);
+  background-size: 16px 16px;
+}
+
+.landing-hero-lines {
+  background-image: repeating-linear-gradient(
+    -14deg,
+    transparent,
+    transparent 7px,
+    rgb(0 150 64 / 0.07) 7px,
+    rgb(0 150 64 / 0.07) 8px
+  );
+}

src/styles/main.css

@@ -2,50 +2,43 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --color-surface: #ffffff;
-  --color-surface-2: #f8fafc;
-  --color-surface-3: #f1f5f9;
-  --color-border: #e2e8f0;
-  --color-text: #0f172a;
-  --color-muted: #64748b;
-  --color-placeholder: rgb(100 116 139 / 0.35);
-}
-
-.dark {
-  --color-surface: #0f1419;
-  --color-surface-2: #1a2332;
-  --color-surface-3: #243044;
-  --color-border: #334155;
-  --color-text: #f1f5f9;
-  --color-muted: #94a3b8;
-  --color-placeholder: rgb(148 163 184 / 0.35);
-}
-
 @layer base {
+  :root {
+    --color-surface: #ffffff;
+    --color-surface-2: #f8fafc;
+    --color-surface-3: #f1f5f9;
+    --color-border: #e2e8f0;
+    --color-text: #0f172a;
+    --color-muted: #64748b;
+  }
+
+  .dark {
+    --color-surface: #0f1419;
+    --color-surface-2: #1a2332;
+    --color-surface-3: #243044;
+    --color-border: #334155;
+    --color-text: #f1f5f9;
+    --color-muted: #94a3b8;
+  }
+
   html {
-    @apply antialiased;
+    @apply antialiased font-sans;
+    font-family: IRANYekanX, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  body,
+  button,
+  input,
+  textarea,
+  select {
+    font-family: inherit;
   }
 
   body {
-    @apply bg-surface-2 font-sans text-text;
+    @apply bg-surface-2 text-text;
   }
 
   #app {
-    @apply min-h-dvh;
-  }
-
-  select {
-    @apply text-text;
-    color-scheme: light;
-  }
-
-  .dark select {
-    color-scheme: dark;
-  }
-
-  select option {
-    background-color: var(--color-surface-2);
-    color: var(--color-text);
+    min-height: 100dvh;
   }
 }