'init'

2026-01-30 05:01:05 +02:00
commit 83f38dc63f
327 changed files with 18725 additions and 0 deletions
--- a/app/views/Introduction/Introduction.module.css
+++ b/app/views/Introduction/Introduction.module.css
@@ -0,0 +1,168 @@
+.wrapper {
+    box-sizing: border-box;
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: auto;
+    padding: 60px 20px 30px;
+}
+  
+.title {
+    font-family:
+      Greycliff CF,
+      var(--mantine-font-family);
+    font-size: 62px;
+    font-weight: 900;
+    line-height: 1.1;
+    margin-top: 70px;
+    padding: 0;
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  
+    @media (max-width: $mantine-breakpoint-sm) {
+      font-size: 42px;
+      line-height: 1.2;
+    }
+  }
+  
+  .description {
+    margin-top: var(--mantine-spacing-xl);
+    font-size: 24px;
+  
+    @media (max-width: $mantine-breakpoint-sm) {
+      font-size: 18px;
+    }
+  }
+  
+  .controls {
+    margin-top: calc(var(--mantine-spacing-xl) * 2);
+  
+    @media (max-width: $mantine-breakpoint-sm) {
+      margin-top: var(--mantine-spacing-xl);
+    }
+  }
+  
+  .control {
+    height: 54px;
+    padding-left: 38px;
+    padding-right: 38px;
+  
+    @media (max-width: $mantine-breakpoint-sm) {
+      height: 54px;
+      padding-left: 18px;
+      padding-right: 18px;
+      flex: 1;
+    }
+  }
+
+.carousel {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	height: 340px;
+}
+
+.slideContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	flex: 1;
+	justify-content: flex-start;
+	animation: fadeInSlide 0.5s ease-in-out;
+	width: 100%;
+}
+
+@keyframes fadeInSlide {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.iconWrapper {
+	width: 160px;
+	height: 160px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 32px;
+	transition: all 0.5s ease;
+	animation: scaleIn 0.5s ease-in-out;
+}
+
+@keyframes scaleIn {
+	from {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.title {
+	font-size: 24px;
+	font-weight: 600;
+	margin-bottom: 16px;
+	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+	animation: fadeIn 0.5s ease-in-out 0.1s both;
+	min-height: 30px;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.description {
+	font-size: 15px;
+	color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+	line-height: 1.5;
+	max-width: 300px;
+	animation: fadeIn 0.5s ease-in-out 0.2s both;
+	min-height: 68px;
+}
+
+.dots {
+	margin: 20px 0;
+	gap: 8px;
+}
+
+.dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+	border: none;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	padding: 0;
+}
+
+.dot:hover {
+	background-color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.dotActive {
+	width: 24px;
+	border-radius: 4px;
+	background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
+}