New onboarding page

views/components.twig

@@ -0,0 +1,40 @@
+{% macro welcomeCard(title, iconName) %}
+    <div class="onboarding-card">
+        <h3>{{ title |  raw }}</h3>
+        <div>
+            <img class="onboarding-card-icon" style="height: 27px; width: auto;" src="{{ theme.rootUri() }}theme/default/img/onboarding/{{iconName}}.svg" alt={{iconName}}>
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro serviceCard(title, text, firstLink, secondLink, imageUrl, otherLink="") %}
+    <div class="service-card">
+        <img class="service-card-image" src="{{ theme.rootUri() }}theme/default/img/onboarding/{{ imageUrl }}.png" alt="{{ imageUrl }}">
+        <div class="service-card-text">
+            <h3>{{ title }}</h3>
+            <p>{{ text | raw }}</p>
+            <div class="d-flex align-items-center" style="column-gap: 8px;">
+
+                {% if title == "Existing Content" %}
+                    <a href="{{firstLink}}" type="button" class="btn-rounded btn-orange" style="font-size: 16px;">Upload Content</a>
+                    <a href="{{secondLink}}" type="button" class="btn-rounded btn-outlined" style="font-size: 16px;" target="_blank">Schedule Content</a>    
+                    <a href="{{ otherLink }}" class="optional-link" target="_blank">Learn More</a>
+                {%else%}
+                    <a href="{{firstLink}}" type="button" class="btn-rounded btn-orange" style="font-size: 16px;">Get Started</a>
+                    <a href="{{secondLink}}" type="button" class="btn-rounded btn-outlined" style="font-size: 16px;" target="_blank">Learn More</a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro othersCard(title, text, links, iconName) %}
+    <div class="others-card">
+        <img class="others-card-icon" style="height: 50px; width: auto;" src="{{ theme.rootUri() }}theme/default/img/onboarding/{{iconName}}.svg" alt="{{ iconName }}">
+        <h3>{{title}}</h3>
+        <p>{{text}}</p>
+        <div class="links-list">
+            {{ links | raw }}
+        </div>
+    </div>
+{% endmacro %}

web/theme/default/css/xibo.css

@@ -1613,4 +1613,264 @@ div.dataTables_wrapper div.dataTables_info {
     height: 24px;
     line-height: 1;
     border-radius: 2px;
-}
+}
+
+
+.welcome-page {
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFF;
+    background-size: cover;
+    background-position: top;
+    background-repeat: no-repeat;
+    padding: 80px 80px;
+    overflow: hidden;
+    position: relative;
+    top: -15px;
+    right: -8px;
+}
+
+.welcome-header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+}
+
+.welcome-header .text-left {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+
+.welcome-header .welcome-image-box {
+    display: flex;
+    flex-grow: 1;
+    width: 50%;
+}
+
+@media (max-width: 1400px) {
+    .welcome-page{
+        padding: 80px 20px;
+    }
+    .welcome-header{
+        flex-direction: column;
+    }
+
+    .welcome-header .welcome-image-box {
+        margin-top: 80px;
+        width: 100%;
+    }
+    .welcome-header .text-left{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1850px) {
+    .others-card-container {
+        justify-content: start !important;
+        gap: 32px;
+    }
+}
+
+@media (max-width: 765px) {
+    .service-card {
+        flex-direction: column;
+    }
+    .service-card h3 {
+        margin-top: 16px;
+    }
+}
+
+
+.btn-rounded {
+    border-radius: 100px;
+    padding: 9px 20px;
+    font-size: 20px;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+    text-decoration: none !important;
+}
+
+
+.btn-orange {
+    background-color: #EB7857;
+    color: #fff;
+    border: none;
+}
+
+.btn-orange:hover {
+    background-color: #BC6046;
+    color: #fff;
+}
+
+.btn-outlined {
+    background-color: #fff;
+    color: #0E70F6;
+    border: 2px solid #0E70F6;
+}
+
+.btn-outlined:hover {
+    background-color: #0E70F6;
+    color: #fff;
+}
+
+.onboarding-cards-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-top: 80px;
+    position: relative;
+}
+
+.onboarding-card {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    height: 160px;
+    width: 234px;
+    padding: 20px;
+    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.10);
+    justify-content: space-between;
+    color: #0E70F6;
+    transition: background-color 0.3s ease;
+    background-color: #FFFFFF;
+    z-index: 2;
+}
+
+
+.onboarding-card  h3 {
+    font-size: 24px;
+    line-height: 16px;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+
+.onboarding-card:hover {
+    background-color: #0E70F6;
+    color: #ffffff;
+}
+
+.onboarding-welcome-image {
+    border-radius: 20px;
+    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.10);
+    width: 100%;
+    height: 500px;
+    object-fit: cover;
+}
+
+.service-card {
+    display: flex;
+    padding: 40px;
+    column-gap: 86px;
+    border-radius: 20px;
+    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.10);
+    background-color: #FFFFFF;
+    z-index: 2;
+}
+
+.service-card h3 {
+    color: #0E70F6;
+    font-size: 32px;
+}
+
+.service-card p {
+    color: #484848;
+    font-size: 24px;
+    margin-bottom: 0;
+}
+
+.service-card .text-link {
+    text-decoration: underline !important;
+    font-weight: 600 !important;
+    color: #484848;
+}
+
+
+
+.service-card-image {
+    width: 274px;
+    height: 154px;
+}
+
+.service-card-text {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+}
+
+.line-curve {
+    position: absolute;
+    z-index: 0;
+    right: -50%;
+    bottom: -50%;
+    height: 137.9px !important;
+}
+
+.others-card-container{
+    margin-top: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.others-card {
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    row-gap: 15px;
+    background-color: #fff;
+    border-radius: 20px;
+    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.10);
+    align-items: start;
+    width: 480px;
+    height: 312px;
+}
+
+.others-card h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1775F6;
+}
+
+.others-card p {
+    font-size: 16px;
+    color: #484848;
+    line-height: normal
+}
+
+.others-card a {
+    color: #1775F6;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.links-list {
+    display: flex;
+    column-gap: 24px;
+    margin-top: auto;
+}
+
+.optional-link {
+    color: #1775F6;
+    text-decoration: underline;
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 9px 20px;
+}
+
+.optional-link::after {
+    content: ' >';
+    color: #1775F6;
+    font-weight: bold;
+    position: absolute;
+    right: 8px;
+}
+
+.scroll-up {
+    position: fixed;
+    margin: 30px;
+    bottom: 0;
+    right: 0;
+    z-index: 3;
+}