스타일 리소스 추가

2025-11-26 15:46:31 +09:00
parent 3e059a9642
commit e8f9212a13
4 changed files with 365 additions and 0 deletions
@@ -0,0 +1,62 @@
+// Page Title Banner Component
+// Reusable banner for page titles across the portal
+
+@import '../abstracts/variables';
+@import '../abstracts/mixins';
+
+.page-title-banner {
+  background: #E9F8FF;
+  position: relative;
+  width: 100%;
+  height: 220px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E");
+    background-size: 50px 50px;
+    opacity: 0.5;
+  }
+
+  .title-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 220px;
+    width: auto;
+    z-index: 1;
+  }
+
+  h1 {
+    position: relative;
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-dark;
+    margin: 0;
+    z-index: 2;
+    letter-spacing: -0.5px;
+  }
+
+  // Responsive
+  @include respond-to('sm') {
+    height: 120px;
+    margin-bottom: $spacing-xl;
+
+    .title-image {
+      height: 120px;
+    }
+
+    h1 {
+      font-size: $font-size-xl;
+    }
+  }
+}