@posiwise/shared-components 0.0.10 → 0.0.11

package/assets/scss/common/landing-page-b/banner.scss

@@ -0,0 +1,141 @@
+@import 'variables/landing-page-new-variables';
+@import 'common/landing-page-b/landing-page-style-2';
+
+.banner {
+    background-attachment: scroll;
+    background-image: url('/assets/img/products/cloud-olive/cloudolive-new/banner-bg.jpg');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: $white-color;
+    position: relative;
+    text-align: center;
+
+    .banner-logo {
+        padding: 180px 0 150px;
+        img {
+            max-width: 400px;
+        }
+    }
+
+    .banner-sub-heading,
+    .banner-sub-heading-1 {
+        color: $white-color;
+        font-size: 50px;
+        font-weight: 600;
+        line-height: 1.4em;
+        margin-bottom: 50px;
+    }
+
+    .banner-sub-heading-1 {
+        font-size: 30px;
+        margin-bottom: 0;
+    }
+}
+
+/* mobile view */
+@media (max-width: 500px) {
+    .banner {
+        .banner-sub-heading,
+        .banner-sub-heading-1 {
+            font-size: 21px;
+            font-weight: 500;
+            line-height: 10px;
+            margin-bottom: 40px;
+        }
+
+        .banner-sub-heading-1 {
+            font-size: 16px;
+            margin-bottom: 0;
+        }
+
+        .banner-logo {
+            padding: 150px 0;
+            width: 100%;
+        }
+    }
+}
+
+@media (min-width: 501px) and (max-width: 768px) {
+    .banner {
+        .banner-logo {
+            padding: 150px 0;
+            width: 100%;
+        }
+
+        .banner-sub-heading,
+        .banner-sub-heading-1 {
+            font-size: 30px;
+            font-weight: 500;
+            line-height: 23px;
+            margin-bottom: 40px;
+        }
+        .banner-sub-heading-1 {
+            font-size: 20px;
+            margin-bottom: 0;
+        }
+    }
+}
+
+@media (max-width:768px){
+    .banner {
+        .banner-logo {
+           img{
+            max-width: 200px !important;
+           }
+        }
+
+        .banner-sub-heading,
+        .banner-sub-heading-1 {
+            font-size: 30px;
+            font-weight: 500;
+            line-height: 1.2;
+            word-break: break-word;
+            margin-bottom: 40px;
+        }
+        .banner-sub-heading-1 {
+            font-size: 22px;
+            margin-bottom: 0;
+            line-height: 1.5 !important;
+        }
+    }
+}
+
+@media (min-width: 991px) {
+    section.banner::before {
+        background: rgb(145 196 216 / 80%) left top no-repeat;
+        clip-path: circle(50% at 25% 29%);
+        content: '';
+        height: 300px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 300px;
+    }
+
+    section.banner::after {
+        background: url('/assets/img/products/cloud-olive/cloudolive-new/white-stripes-right1.png')
+            right bottom no-repeat;
+        bottom: 0;
+        clip-path: circle(55% at 80% 80%);
+        content: '';
+        height: 250px;
+        position: absolute;
+        right: 0;
+        width: 250px;
+    }
+
+    .banner {
+        .stripes-img::before {
+            background: url('/assets/img/products/cloud-olive/cloudolive-new/white-stripes-left.png')
+                left bottom no-repeat;
+            bottom: 0;
+            clip-path: circle(50.9% at 1% 44%);
+            content: '';
+            height: 316px;
+            left: 0;
+            position: absolute;
+            width: 250px;
+        }
+    }
+}

package/assets/scss/common/landing-page-b/contact-us.scss

@@ -0,0 +1,167 @@
+@import 'variables/landing-page-new-variables';
+@import 'common/landing-page-b/landing-page-style-2';
+
+.cloudolive-contact-us {
+    background: url('/assets/img/products/cloud-olive/cloudolive-new/contact-us-bg.jpg') center;
+    background-size: cover;
+    padding: 40px 0;
+
+    .left-section {
+        background: rgb(146 184 212 / 90%);
+        border-radius: 50%;
+        text-align: center;
+
+        h4 {
+            color: $title-color;
+            font-size: 18px;
+            font-weight: 700;
+            line-height: 1.4em;
+        }
+
+        p {
+            color: $white-color;
+            font-size: 16px;
+            font-weight: 400;
+            letter-spacing: 0.05em;
+            line-height: 1.4em;
+        }
+
+        .icons {
+            .linkedin-icon {
+                width: 70px;
+            }
+
+            .youtube-icon {
+                height: 70px;
+                width: 90px;
+            }
+        }
+    }
+
+    .right-section {
+        background: rgb(256 256 256 / 60%);
+        border-radius: 50%;
+        text-align: center;
+
+        .contact-form {
+            form {
+                .is-invalid {
+                    border: 1px solid#ff0000 !important;
+                }
+
+                .form-field {
+                    align-items: center;
+                    display: flex;
+                    justify-content: center;
+                    padding: 5px 0;
+
+                    label {
+                        color: rgb(75 74 71);
+                        font-size: 16px;
+                        font-weight: 700;
+                        line-height: 1.4em;
+                        margin-right: 3px;
+                    }
+
+                    input {
+                        border: none;
+                        border-radius: 30px;
+                        padding: 14px;
+                        width: 63%;
+                    }
+
+                    textarea {
+                        border: none;
+                        border-radius: 30px;
+                        padding: 16px;
+                        width: 61%;
+                    }
+                }
+
+                .enquiry {
+                    .form-field {
+                        margin-left: -10px;
+                    }
+                }
+
+                .submit-button {
+                    background-color: rgb(65 181 226);
+                    border: none;
+                    border-radius: 6px;
+                    color: $white-color;
+                    font-size: 20px;
+                    font-weight: 500;
+                    padding: 10px;
+                }
+            }
+        }
+    }
+
+    .container-wrapper {
+        position: relative;
+    }
+
+    .footer-logo {
+        display: block;
+        height: auto;
+        margin-left: auto;
+        width: 287px;
+    }
+
+    // for responsive
+    .left-section {
+        height: 470px;
+        margin-left: auto;
+        padding: 50px;
+        width: 470px;
+    }
+
+    .right-section {
+        height: 470px;
+        margin-right: auto;
+        padding: 25px;
+        width: 470px;
+    }
+}
+
+@media (max-width: 991px) {
+    .cloudolive-contact-us {
+        .left-section-outer {
+            order: 2;
+        }
+
+        .right-section-outer {
+            order: 1;
+        }
+
+        .right-section,
+        .left-section {
+            border-radius: 20px;
+            height: auto;
+            margin: 10px 0;
+            width: 100%;
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .cloudolive-contact-us {
+        padding: 0;
+
+        .left-section {
+            margin-right: -2%;
+            margin-top: 20%;
+        }
+
+        .footer-logo {
+            bottom: 10px;
+            position: absolute;
+            right: 0;
+        }
+
+        .captcha-wrapper-container {
+            margin: 0 auto;
+            width: 64%;
+        }
+    }
+}

package/assets/scss/common/landing-page-b/explainer.scss

@@ -0,0 +1,75 @@
+@import 'variables/landing-page-new-variables';
+@import 'common/landing-page-b/landing-page-style-2';
+@import 'public-pages/mixins/buttons';
+
+.cloudolive-contract-for-msps {
+    background-color: $bg-color-black-grey;
+    padding: 40px 0;
+    position: relative;
+
+    h2 {
+        color: $blue-color;
+    }
+
+    h4 {
+        color: $white-color;
+        font-size: 17px;
+        font-weight: 500;
+        line-height: 1.4em;
+    }
+
+    p {
+        color: $white-color;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 1.4em;
+        margin-top: 10px;
+        text-align: center;
+    }
+
+    .book-demo {
+        @include greenBackgroundButton;
+        margin-top: 30px;
+        display: inline-block;
+    }
+}
+
+@media (max-width: 768px) {
+    .cloudolive-contract-for-msps {
+        .cloudolive-video {
+            margin-top: 50px;
+        }
+
+        .sub-text,
+        h2 {
+            text-align: center;
+        }
+    }
+}
+
+@media (min-width: 991px) {
+    .cloudolive-contract-for-msps {
+        .stripes::after {
+            background: rgb(145 196 216 / 80%) right bottom no-repeat;
+            bottom: 0;
+            clip-path: circle(46.5% at 81% 57%);
+            content: '';
+            height: 300px;
+            position: absolute;
+            right: 0;
+            width: 300px;
+        }
+
+        .stripes::before {
+            background: url('/assets/img/products/cloud-olive/cloudolive-new/white-stripes-right1.png')
+                right top no-repeat;
+            clip-path: circle(45% at 67% 61%);
+            content: '';
+            height: 350px;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 350px;
+        }
+    }
+}

package/assets/scss/common/landing-page-b/explainer2.scss

@@ -0,0 +1,35 @@
+@import 'variables/landing-page-new-variables';
+@import 'common/landing-page-b/landing-page-style-2';
+@import 'public-pages/mixins/buttons';
+
+.cloudolive-contract-for-msps {
+    background: $bg-color-blue;
+    padding: 40px 0;
+    position: relative;
+
+    h2 {
+        color: $white-color;
+    }
+
+    h4 {
+        color: $white-color;
+        font-size: 17px;
+        font-weight: 500;
+        line-height: 1.4em;
+    }
+
+    p {
+        color: $white-color;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 1.4em;
+        margin-top: 10px;
+        text-align: center;
+    }
+
+    .book-demo {
+        @include greenBackgroundButton;
+        margin-top: 30px;
+        display: inline-block;
+    }
+}

package/assets/scss/common/landing-page-b/header.scss

@@ -0,0 +1,56 @@
+@import 'variables/landing-page-new-variables';
+@import 'common/landing-page-b/landing-page-style-2';
+
+.navbar-custom-background {
+    background-color: rgb(0 0 0 / 50%);
+    box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 12.2%);
+    transition: width 2s, height 2s, -webkit-transform 2s;
+
+    /* Safari */
+    transition: width 2s, height 2s, transform 2s background-color 0.5s ease;
+    z-index: 9999;
+}
+
+.navbar-nav {
+    .nav-item {
+        .nav-link {
+            color: $white-color;
+            font-size: 18px;
+            font-weight: 500;
+            letter-spacing: 1px;
+            padding: 1.1em 1em !important;
+        }
+    }
+}
+
+.navbar-toggle-icon {
+    width: 25px;
+}
+
+@media (min-width: 500px) {
+    .navbar-nav {
+        .nav-item {
+            button {
+                margin: 10px 0;
+            }
+        }
+    }
+}
+
+@media (max-width: 500px) {
+    .navbar-nav {
+        background-color: $black-color;
+        border-top: 3px solid rgb(254 209 54);
+        color: $white-color;
+        margin-top: 5px;
+        z-index: 1;
+
+        .nav-item {
+            .nav-link {
+                font-size: 100%;
+                font-weight: 500;
+                padding: 0.7em 1em !important;
+            }
+        }
+    }
+}

package/assets/scss/common/landing-page-b/landing-page-style-2.scss

@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import 'variables/branding-variables';
+
+* {
+    font-family: $familyMontserrat;
+}
+
+h2 {
+    font-size: 32px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    line-height: 1.1em;
+    text-transform: uppercase;
+}
+
+@media (max-width: 1200px) {
+    .container-wrapper {
+        padding: 0 20px !important;
+    }
+}