feat: redesign landing page with brand system and section blocks

Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-23 17:00:55 +03:30
parent f0c290786e
commit c2376b3b9e
352 changed files with 34442 additions and 2760 deletions
@@ -0,0 +1,103 @@
+@layer base {
+  body {
+    background-color: var(--background);
+    /* Atmosphere radials live in .page-atmosphere — body stays a flat base */
+    background-image: none;
+  }
+
+  .dark body {
+    background-image: none;
+  }
+}
+
+@layer utilities {
+  .bg-page-canvas {
+    background-color: var(--background);
+  }
+
+  .bg-cta-photo-banner {
+    background-color: var(--brand-primary-dark);
+    background-image:
+      radial-gradient(
+        ellipse 90% 70% at 12% 20%,
+        color-mix(in srgb, var(--brand-primary) 42%, transparent),
+        transparent 58%
+      ),
+      radial-gradient(
+        ellipse 80% 60% at 92% 85%,
+        color-mix(in srgb, var(--brand-primary) 28%, transparent),
+        transparent 55%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--brand-primary-dark) 88%, transparent) 0%,
+        color-mix(in srgb, var(--brand-primary-dark) 62%, var(--brand-primary)) 48%,
+        color-mix(in srgb, var(--brand-primary) 78%, transparent) 100%
+      ),
+      linear-gradient(
+        to top,
+        color-mix(in srgb, var(--brand-primary-dark) 72%, transparent) 0%,
+        transparent 55%
+      ),
+      url("/assets/main-pic/1dark.jpg");
+    background-size: cover;
+    background-position: center;
+  }
+
+  .bg-cta-photo-banner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, white 12%, transparent) 0%,
+      transparent 28%,
+      transparent 72%,
+      color-mix(in srgb, var(--brand-primary-dark) 40%, transparent) 100%
+    );
+  }
+}
+
+/* Diamond network pattern — default right side (~32%), 15% opacity.
+ * Kept outside @layer so it isn't lost to utility cascade. */
+.cta-diamond-pattern {
+  position: absolute;
+  top: -10%;
+  bottom: -10%;
+  inset-inline-start: 0;
+  width: 32%;
+  z-index: 0;
+  pointer-events: none;
+  background-color: #fff;
+  opacity: 0.15;
+  -webkit-mask-image:
+    linear-gradient(to left, #000 42%, transparent 100%),
+    url("/assets/patterns/cta-diamond-pattern.png?v=3");
+  mask-image:
+    linear-gradient(to left, #000 42%, transparent 100%),
+    url("/assets/patterns/cta-diamond-pattern.png?v=3");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, cover;
+  mask-size: 100% 100%, cover;
+  -webkit-mask-position: center, right center;
+  mask-position: center, right center;
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}
+
+/* Left-side placement (physical left — e.g. contact CTA) */
+.cta-diamond-pattern--left {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  -webkit-mask-image:
+    linear-gradient(to right, #000 42%, transparent 100%),
+    url("/assets/patterns/cta-diamond-pattern.png?v=3");
+  mask-image:
+    linear-gradient(to right, #000 42%, transparent 100%),
+    url("/assets/patterns/cta-diamond-pattern.png?v=3");
+  -webkit-mask-position: center, left center;
+  mask-position: center, left center;
+}