News Updated

primefaces · Jan 11, 2022 · 9673066 · 9673066
1 parent 0faea12
commit 9673066
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 32 deletions.
diff --git a/src/app/showcase/app.news.component.ts b/src/app/showcase/app.news.component.ts
@@ -5,10 +5,9 @@ import {Component, Input, EventEmitter, Output} from '@angular/core';
     template: `
         <div class="layout-news">
             <div class="layout-news-container" (click)="redirect()">
-                <img class="layout-news-logo p-ml-2" src="assets/showcase/images/topbar-newyear-logo.svg">
-                <h3 class="layout-news-header p-px-2">DISCOUNT UP TO 50% ON EVERYTHING AT PRIMESTORE</h3>
-                <a href="https://www.primefaces.org/store" target="_blank"  style="text-decoration: none" class="layout-news-button">
-                    Read More
+                <img class="layouts-news-mockup-image" src="assets/showcase/images/topbar-primeblocks-device.png">
+                <a href="https://www.primefaces.org/primeblocks-ng" target="_blank"  style="text-decoration: none" class="layout-news-button">
+                    LEARN MORE<i class="pi pi-angle-right"></i>
                 </a>
                 <a tabindex="0" class="layout-news-close" (click)="hideNews($event)">
                     <i class="pi pi-times"></i>
@@ -29,6 +28,6 @@ export class AppNewsComponent {
     }
 
     redirect() {
-        window.open('https://www.primefaces.org/store"', '_blank');
+        window.open('https://www.primefaces.org/primeblocks-ng"', '_blank');
     }
-}
+}
diff --git a/src/assets/showcase/styles/app/_news.scss b/src/assets/showcase/styles/app/_news.scss
@@ -4,8 +4,8 @@
     justify-content: center;
     align-items: center;
     margin-left: 250px;
-    background-image: url(../../../../assets/showcase/images/topbar-newyear-bg.png), linear-gradient(180deg, #D2000B 0%, #9B0008 100%);
-    background-blend-mode: multiply;
+    background-image: linear-gradient(197.37deg, rgba(0, 120, 227, 0.07) -0.38%, rgba(165, 72, 181, 0) 101.89%), linear-gradient(115.93deg, rgba(62, 136, 246, 0.15) 4.86%, rgba(62, 180, 246, 0.0495) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.05) 0%, rgba(62, 158, 246, 0.013) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, rgba(163, 171, 217, 0.1) 19.83%, rgba(163, 171, 217, 0) 97.33%);
+    background-color: white;
 
     .layout-news-container {
         width: 100%;
@@ -17,26 +17,14 @@
         font-weight: bold;
         font-size: 20px;
 
-        .layout-news-header {
-            margin: 0;
-            background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
-            border-radius: 4px 4px 0px 0px;
-            text-shadow: 0px 4px 4.4px rgba(0, 0, 0, 0.3);
-            font-weight: 900;
-        }
-
         img.layouts-news-mockup-image {
             height: 70px;
         }
 
-        .layout-news-logo {
-            left: 250px;
-            position: absolute;
-        }
-
         .layout-news-button {
-            color: #ffffff;
-            font-size: 14px;
+            border: 2px solid #283738;
+            color: #283738;
+            font-size: 15px;
             padding: 0.4em .8em 0.4em 1em;
             font-weight: bold;
             border-radius: 3px;
@@ -48,8 +36,6 @@
             margin-left: 1rem;
             position: relative;
             z-index: 1;
-            background: linear-gradient(180deg, #D8000A 0%, rgba(251, 0, 1, 0.4) 89.06%, rgba(255, 0, 0, 0) 100%);
-            border-radius: 5px;
 
             > i {
                 margin-left: .5em;
@@ -59,24 +45,23 @@
             }
 
             &:hover {
-                background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
+                background-color: rgba(120, 144, 156, 0.4);
             }
         }
     }
 
     .layout-news-close {
         cursor: pointer;
-        color: #ffffff;
+        color: #fff;
         position: absolute;
         z-index: 2;
         right: 28px;
-        background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
-        filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17));
+        background-color: rgba(0,0,0,.3);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 34px;
-        height: 34px;
+        width: 23px;
+        height: 23px;
     }
-}
+}