@blinkpage/composer-tools 1.0.0

package/editor-components/hero-section/hero-section10/hero-section10.module.scss

@@ -0,0 +1,492 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+.container {
+  padding: 0 50px !important;
+  min-height: 100px;
+  .max-content {
+    max-width: 100%;
+    .carousel {
+      max-width: 100%;
+      max-height: 100vh;
+      &>button{
+        display: none !important;
+      }
+      >div{
+        >div{
+          display: flex !important;
+          align-items: stretch;
+          gap: var(--composer-gap-md);
+          >div{
+            height: auto;
+            >div{
+              height: 100%;
+            }
+          }
+        }
+      }
+      .content {
+        width: 100%;
+        display: flex !important;
+        height: 100%;
+        position: relative;
+        
+        .left {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+          justify-content: center;
+          width: 100%;
+          flex: 1;
+          padding-right: var(--composer-gap-md);
+          padding-top: 20px;
+          padding-bottom: 20px;
+
+          .logo {
+            margin-bottom: var(--composer-gap-sm);
+            font-size: 3rem;
+            color: white;
+            aspect-ratio: 3/1;
+            object-fit: cover;
+            max-width: 150px;
+          }
+          .subtitleTop {
+            font-size: 1.5rem;
+            color: var(--composer-font-color-primary);
+            margin: 0;
+          }
+          
+          .left-container {
+            position: absolute;
+            z-index: 9;
+          }
+          
+          .title-wrapper {
+            display: flex;
+            gap: var(--composer-gap-md);
+            
+            .title {
+              font-size: 5.5rem;
+              color: var(--composer-font-color-primary);
+              margin: 0px;
+              max-width: 27vw;
+              flex: 1;
+            }
+            
+            .imagetitle {
+              font-size: 5.5rem;
+              color: var(--composer-font-color-primary);
+              margin: 0px;
+              flex: 1.5;
+              max-width: 40%;
+              &.imagetitleWhite {
+                color: white !important;
+              }
+            }
+          }
+          
+          .left-page-content {
+            display: flex;
+            flex-direction: column;
+            gap: var(--composer-gap-md);
+            max-width: 25%;
+            .description {
+              width: 100%;
+              font-size: 1.5rem;
+              color: var(--composer-font-color-primary);
+              margin: 0px;
+            }
+            .nav-buttons {
+              display: flex;
+              align-items: center;
+              gap: var(--composer-gap-lg);
+              .slide_number {
+                color: var(--composer-tertiary-color);
+                font-size: 4.5rem;
+              }
+              .iconsSection{
+                display: flex;
+                gap: var(--composer-gap-md);
+                .prev_icon_wrapper, .next_icon_wrapper{
+                  background-color: var(--composer-primary-color);
+                  padding: var(--composer-gap-xs);
+                  border-radius: 50%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  height: var(--composer-gap-lg);
+                  width: var(--composer-gap-lg);
+                  .prev_icon, .next_icon {
+                    color: var(--composer-font-color-secondary);
+                    cursor: pointer;
+                    font-size: 2rem;
+                    width: 26px;
+                    height: 30px;
+                    object-fit: contain;
+                  }
+                }
+              }
+            }
+
+            .button-section{
+              display: flex;
+              align-items: center;
+              gap: var(--composer-gap-sm);
+              .line::before {
+                content: "";
+                display: inline-block;
+                width: 70px;
+                height: 1px;
+                background-color: var(--composer-tertiary-color);
+                position: relative;
+              }
+              .button {
+                .button-text{
+                  content: "";
+                }
+              }
+            }
+          }
+          .column-left-page-content {
+              height: auto;
+          }
+        }
+        .middle {
+          position: relative;
+          display: flex;
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          flex: 1.5;
+          .imagetitle {
+            display: flex;
+            align-items: center;
+            font-size: 4.5rem;
+            position: absolute;
+            top:35%;
+            color:white;
+            z-index: 2;
+            margin: 0px 0px 0px var(--composer-gap-sm);
+          }
+          .image-wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+
+            .image {
+              position: relative;
+              max-height: 100vh;
+              width: 100%;
+              object-fit: cover;
+              z-index: 1;
+              border-radius: 0px;
+              height: 100%;
+              
+              img,
+              video {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+
+            .overlay {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              z-index: 1;
+              background-color: var(--composer-overlay-color);
+            }
+          }
+        }
+        .right {
+          overflow: hidden;
+          width: 100%;
+          max-height: 100%;
+          z-index: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: end;
+          gap: var(--composer-gap-sm);
+          flex: 1;
+          padding: 20px 0px;
+          .icon {
+            position: relative;
+            max-height: 100%;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .ampersand-icon{
+              position: absolute;
+              left: 0;
+              top: 0;
+              transform: translateX(-40%);
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 30rem;
+              color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+              object-fit: contain;
+            }
+          }
+          .right-page-content {
+            display: flex;
+            flex-direction: column;
+            width: 90%;
+            z-index: 2;
+            padding: var(--composer-gap-lg) 0px;
+            gap: var(--composer-gap-md);
+            .rightSubtitle {
+              font-size: 1.5rem;
+              color: var(--composer-font-color-primary);
+              margin: 0;
+            }
+
+            .description1 {
+              width: 100%;
+              font-size: 1rem;
+              color: var(--composer-font-color-primary);
+              margin: 0px;
+              text-align: justify;
+            }
+          }
+          .column-right-page-content {
+            width: 100%;
+            padding:0px;
+          }
+          .icon-group {
+            color: var(--composer-tertiary-color);
+            display: flex;
+            flex-direction: row;
+            gap: var(--composer-gap-md);
+            font-size: 1.5rem;
+            cursor: pointer;
+            .icon {
+              width: 24px;
+              height: 24px;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+      .column-content{
+        justify-content: center;
+        flex-direction: row;
+        gap: var(--composer-gap-xl);
+        min-height: 400px;
+        height: auto;
+        align-items: center;
+        .left {
+          padding: 0px;
+          width: 100%;
+          .left-page-content{
+            width: 100%;
+          }
+        }
+        .right {
+          width: 100%;
+          height: 100%;
+          .icon {
+            .ampersand-icon {
+              transform: translateX(0);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    padding: 0 var(--composer-gap-lg) !important;
+    .max-content {
+      .carousel {
+        .content {
+          .left {
+            .title-wrapper {
+              .title {
+                font-size: 2rem;
+                max-width: 30%;
+              }
+              .imagetitle {
+                font-size: 2rem;
+                max-width: 35%;
+              }
+            }
+            
+            .left-page-content {
+              .description {
+                font-size: 1rem;
+              }
+              .nav-buttons {
+                gap: var(--composer-gap-sm);
+                .slide_number {
+                  font-size: 2rem;
+                }
+                .iconsSection {
+                  gap: var(--composer-gap-sm);
+                  .prev_icon_wrapper, .next_icon_wrapper {
+                    height: 30px;
+                    width: 30px;
+                    .prev_icon, .next_icon {
+                      font-size: 1.5rem;
+                      width: 24px;
+                      height: 24px;
+                      object-fit: contain;
+                    }
+                  }
+                }
+              }
+            }
+            .logo {
+              font-size: 2rem !important;
+            }
+          }
+
+          .middle {
+            .imagetitle {
+              font-size: 2rem;
+              .text {
+                font-size: 2rem;
+              }
+            }
+          }
+
+          .right {
+            .right-page-content {
+              .right-title {
+                font-size: 1.5rem;
+              }
+              .right-description {
+                font-size: 0.875rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .container {
+    padding: 0 var(--composer-gap-md) var(--composer-gap-xl) var(--composer-gap-md) !important;
+    .max-content {
+      .carousel {
+        max-height: 100%;
+        .content {
+          flex-direction: column;
+          gap: var(--composer-gap-md);
+          height: auto;
+          
+          &.column-content {
+            min-height: auto;
+            padding-top: var(--composer-gap-md);
+          }
+          .left {
+            order: 1;
+            padding: 0px;
+            
+            .left-container {
+              position: relative;
+              z-index: 1;
+            }
+            
+            .title-wrapper {
+              flex-direction: column;
+              width: 100%;
+              gap: 0;
+              
+              .title {
+                font-size: 2rem;
+                width: 100%;
+                max-width: 100%;
+              }
+              .imagetitle {
+                font-size: 2rem;
+                width: 100%;
+                max-width: 100%;
+
+                &.imagetitleWhite {
+                  color: var(--composer-font-color-primary) !important;
+                }
+              }
+            }
+            
+            .left-page-content {
+              position: static;
+              gap: var(--composer-gap-sm);
+              height: auto;
+              width: 100%;
+              max-width: 100%;
+              .description {
+                width: 100%;
+                font-size: 1rem;
+                margin: 0;
+              }
+              .nav-buttons {
+                .iconsSection{
+                  .prev_icon_wrapper, .next_icon_wrapper{
+                    .prev_icon, .next_icon {
+                      font-size: 1.5rem;
+                      width: 24px;
+                      height: 24px;
+                      object-fit: contain;
+                    }
+                  }
+                }
+                .slide_number {
+                  font-size: 2rem;
+                }
+              }
+            }
+          }
+
+          .middle {
+            order: -1;
+            flex: 1;
+            .imagetitle {
+              display: none;
+            }
+
+            .image-wrapper {
+              .image {
+                height: 350px;
+                border-radius: var(--composer-border-radius-sm);
+                
+                img,
+                video {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                  border-radius: var(--composer-border-radius-sm);
+                }
+              }
+            }
+          }
+
+          .right {
+            order: 2;
+            z-index: 1;
+            align-items: start;
+            padding: 0px;
+            flex: auto;
+            .icon {
+              display: none;
+            }
+            .right-page-content {
+              width: 100%;
+              padding: 0px;
+            }
+          }
+        }
+      }
+    }
+  }
+}