feat: added web

assets/scss/_base.scss

@@ -0,0 +1,150 @@
+@use "vars" as *;
+@use "mixins" as *;
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    min-width: 320px;
+    margin: 0;
+    font-family: $font-main;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: $color-black;
+    background: $color-white;
+    text-rendering: geometricPrecision;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+button,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+img,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+.container {
+    width: min($container-width, calc(100% - 32px));
+    margin-inline: auto;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 0 26px;
+    border: 1px solid transparent;
+    border-radius: $radius-pill;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    transition: transform $transition-fast, border-color $transition-fast, background-color $transition-fast, color $transition-fast;
+
+    @include hover-supported {
+        transform: translateY(-2px);
+    }
+
+    &--dark {
+        min-width: 172px;
+        gap: 12px;
+        color: $color-white;
+        background: $color-black;
+        box-shadow: 0 18px 38px rgba($color-black, 0.12);
+    }
+
+    &--light {
+        min-width: 150px;
+        color: $color-btn-light-text;
+        background: rgba($color-white, 0.78);
+        border-color: rgba($color-black, 0.14);
+    }
+}
+
+.site-header {
+    position: fixed;
+    top: 14px;
+    left: 50%;
+    z-index: 20;
+    width: min(505px, calc(100% - 32px));
+    transform: translateX(-50%);
+
+    &__inner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 50px;
+        padding: 0 20px;
+        border: 1px solid rgba($color-black, 0.06);
+        border-radius: $radius-pill;
+        background: rgba(248, 248, 248, 0.86);
+        backdrop-filter: blur(16px);
+    }
+
+    &__logo {
+        flex: 0 0 auto;
+
+        img {
+            width: 100px;
+            height: auto;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        color: $color-header-text;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1;
+
+        a {
+            transition: color $transition-fast;
+
+            @include hover-supported {
+                color: $color-black;
+            }
+        }
+    }
+}
+
+@include media-down($bp-mobile) {
+    .site-header {
+        top: 10px;
+        width: calc(100% - 20px);
+
+        &__inner {
+            min-height: 46px;
+            padding: 0 16px;
+        }
+
+        &__logo img {
+            width: 92px;
+        }
+
+        &__nav {
+            gap: 12px;
+            font-size: 11px;
+        }
+    }
+}

assets/scss/_fonts.scss

@@ -0,0 +1 @@
+/* Nunito Sans is connected in index.html via Google Fonts. */

assets/scss/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin hover-supported {
+	@media (hover: hover) and (pointer: fine) {
+		&:hover {
+			@content;
+		}
+	}
+}
+
+@mixin media-down($width) {
+	@media (max-width: $width) {
+		@content;
+	}
+}

assets/scss/_reset.scss

@@ -0,0 +1,134 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

assets/scss/_vars.scss

@@ -0,0 +1,29 @@
+$font-main: "Nunito Sans", "Segoe UI", Arial, sans-serif;
+
+$color-black: #111111;
+$color-dark: #333333;
+$color-gray: #C2C2C2;
+$color-light-gray: #c9c9cc;
+$color-border: rgba(15, 15, 16, 0.12);
+$color-white: #ffffff;
+$color-accent: #C7FF4F;
+$color-red: #ff1d25;
+$color-page-start: #fbfff4;
+$color-muted-text: #888888;
+$color-muted-text-soft: #828286;
+$color-header-text: #6f6f73;
+$color-badge-text: #3b3b3e;
+$color-btn-light-text: #202023;
+$color-launch-bg: #0b0b0c;
+$color-section-gray: #f2f2f2;
+
+$container-width: 1200px;
+$radius-pill: 999px;
+$radius-card: 11px;
+
+$bp-desktop-md: 1120px;
+$bp-tablet: 760px;
+$bp-mobile: 520px;
+$bp-mobile-sm: 420px;
+
+$transition-fast: 0.2s ease;