HeroSection eingeführt

components/HeroSection.module.css

@@ -0,0 +1,87 @@
+.hero {
+  position: relative;
+  background: linear-gradient(to bottom, #f9f9f9 5%, #ffffff 50%, #f9f9f9 100%);
+  padding-block: var(--space-16);
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}
+
+.inner {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+}
+
+.heroDecoration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  right: var(--space-4);
+  width: auto;
+  height: 80%;
+  opacity: 0.12;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.heading {
+  max-width: 20ch;
+}
+
+.lead {
+  max-width: 56ch;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-3);
+  margin-top: var(--space-2);
+}
+
+.actions :global(.btn) {
+  width: fit-content;
+  justify-content: center;
+  min-height: 44px;
+}
+
+/* Tablet */
+@media (min-width: 768px) {
+  .hero {
+    padding-block: var(--space-28);
+  }
+
+  .heroDecoration {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+     height: 90%;
+  }
+  .actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-6);
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .hero {
+    padding-block: var(--space-36);
+  }
+  .inner {
+    padding-inline: var(--space-6);
+  }
+}