From ba2f79e1c4f5bb2d47aca419fd854ebb22ea35f3 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 31 Jul 2024 17:40:41 -0500 Subject: [PATCH] Website: personalize /better page for Secure Frame users (#20890) Related to: https://github.com/fleetdm/confidential/issues/7227 Changes: - Added a banner to the /better page that is visible to users who visit it with a `?utm_content=secureframe` query param. - Updated the `` component to support customizing text and arrow color. --- website/api/controllers/view-transparency.js | 4 +-- .../images/logo-secureframe-46x48@2x.png | Bin 0 -> 2053 bytes .../animated-arrow-button.component.js | 8 +++-- website/assets/js/pages/transparency.page.js | 1 + .../animated-arrow-button.component.less | 2 +- website/assets/styles/pages/transparency.less | 31 ++++++++++++++++++ website/views/pages/transparency.ejs | 9 ++++- 7 files changed, 48 insertions(+), 7 deletions(-) create mode 100644 website/assets/images/logo-secureframe-46x48@2x.png diff --git a/website/api/controllers/view-transparency.js b/website/api/controllers/view-transparency.js index c079ed5300..7267792026 100644 --- a/website/api/controllers/view-transparency.js +++ b/website/api/controllers/view-transparency.js @@ -6,7 +6,6 @@ module.exports = { description: 'Display "Transparency" page.', - exits: { success: { @@ -17,9 +16,8 @@ module.exports = { fn: async function () { - // Respond with view. - return {}; + return {showSecureframeBanner: this.req.param('utm_content') === 'secureframe'}; } diff --git a/website/assets/images/logo-secureframe-46x48@2x.png b/website/assets/images/logo-secureframe-46x48@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..86107888f9aa26af557972d36d6d9b5ddad47c98 GIT binary patch literal 2053 zcmV+g2>SPlP)0D|OQzr+NiI7HK&=IkH*!^b zq9AYax7|nSQK$~;uwmG8bA5ZH5LyV>0zf`B{mY?>Y(#Kt$-0e79U^>dDTIh)t%9@A zxvo7&#A7gSA}T%2+5~@m^_GS1D8x$m87~ z;HKYicKT2OM1rqFY%4PUL23O(Rm7c#SMXKEwnD?}e)ClqB7PrE(a3qh8)QbsnrBhy zN%XQGQk;DX5FYwbw)sI}-i%_;ve2bCSMn!>(WgSyi+=Ou0wQx+=u({D4uM=q?P=aR?Acw@>JKz}&h%9Bsr4)!t$c^kZqu4TLES&1uG&>`=ZX1ad6WdL> zHOPU{l$+jHfTf;pQ#g1rA-J(_#5M?_3q$es$!7>8xqRC~1*bIS#$p?Rt1;zPOQtMb zw?OVnvVQZl0|DIC&Jn6xWtS8?ljH?ljG}6vD7oR%KooltBREGVU?K(q zh#w`x_?YBIIuMz_S$It*wjme!?gFKOO5g-HJ$_!CJMm5)&<&XH2Ps5mFkvBC*K}@z9kl1kToGwwPD${P(!o_d@fxrSy zZ3HCP(m+_Yy6b2gp~#R~q3nJD1xf>DKnIM?M5B~`A{r*VACwIeyq3ZmL2-Fi2Ui)( zK!}A$)&L1U$lyV!W^ZChZ=uLlD9ryt&>Og$ zrpiEs_7=I^)fHbrRNuaoO!PF@df_|62(C=)u%BF7GdJnFn9_;Pa{z7zZT5F?Lqu*s ziD!k(bXrJlq;#S$nja1loJba3xpDZu5NPGhE{GoRH(_g@R@xpc#P7fWmfeNNQ8;)C;bLsH={1$Q?(X*QNDi#4Yyo9I?62#8vA zd-&DV55zTxWwGWwc0}|u?thewbx(OnJ;LGe9Fqs(XhnAOv_uidD0NXCQb(j8g znB&WDp7RB_CmcM3fYh8){3pBg*FrmBzpiMPeFuDBJ0Kb=yn9HzDHDz(c0xQ_-X6w=85nD z1mzv2Tmo6=M1$(u!98?40}lTSLSs!-rj|dDmVY(Jg~$wcEdl=;Fz$ik7KqTsr9{DJ z$)wipmOBwL=$cnRWCC86M7qL}bh(r92a2QMW7x+SWzGBc0RdrnIW|dAnXu4@U2pO9 zOgcVfF&}`v;YEys7g(~Dty`L1T6Z#XQB@Y)b@<|0$YbX=feNthsphK63GUV|{~9Xv z=m4gLA{CC#rk91S^J9bbmI~=b*+Ep_*1!kd{tAmI@YG@0GJ~@{KK`6EV&J|*?mrB8 zNp{^h`EmN2F)S2NKpB*YTcuE5?4xfXoou3!k z7)qJ_E*6&tqTpjp?v@z7i66)Hl&xMY9Rrb}&}z6XWf4^Gy78*%8&z2gAFf@l@emQ( zD{f0kxy(S+LRYsZe)M2{8u!O-YL@@du@8ZaW51Ld8>T4Q_~ps!(vs zZ9b}}u>Le;hkzIs7KCdu>_$SjV~9~o0o+y$9VkE)JPcPmKj}h2qDv97uI>ka77o7yR{@`9TOTTL4SuQM>{ZF*VlI;EoUJ - - + + diff --git a/website/assets/js/pages/transparency.page.js b/website/assets/js/pages/transparency.page.js index 211b9f441f..be7cfde1f3 100644 --- a/website/assets/js/pages/transparency.page.js +++ b/website/assets/js/pages/transparency.page.js @@ -4,6 +4,7 @@ parasails.registerPage('transparency', { // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { //… + showSecureframeBanner: false, }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ diff --git a/website/assets/styles/components/animated-arrow-button.component.less b/website/assets/styles/components/animated-arrow-button.component.less index 60102c4d7b..61d9b459b8 100644 --- a/website/assets/styles/components/animated-arrow-button.component.less +++ b/website/assets/styles/components/animated-arrow-button.component.less @@ -21,7 +21,7 @@ height: 12px; width: 12px; fill: none; - stroke: #FF5C83; + // stroke: #FF5C83; « Note: this is overridden by the arrow-color prop; } [purpose='arrow-line'] { opacity: 0; diff --git a/website/assets/styles/pages/transparency.less b/website/assets/styles/pages/transparency.less index ac5831ccf0..4e787318f6 100644 --- a/website/assets/styles/pages/transparency.less +++ b/website/assets/styles/pages/transparency.less @@ -128,6 +128,31 @@ } } } + [purpose='secureframe-banner'] { + width: 100%; + text-align: center; + color: #FFF; + h2, p { + color: #FFF; + } + h2 { + margin-bottom: 16px; + } + [parasails-component='animated-arrow-button'] { + font-weight: 600; + } + border-radius: 16px; + background: #091922; + padding: 32px; + img { + height: 48px; + width: 45.474px; + margin-bottom: 16px; + margin-left: auto; + margin-right: auto; + } + } + [purpose='feature-headline'] { max-width: 510px; margin-bottom: 80px; @@ -332,6 +357,12 @@ margin-right: auto; } } + [purpose='secureframe-banner'] { + padding: 32px 16px; + h2 { + font-size: 24px; + } + } } @media (max-width: 375px) { diff --git a/website/views/pages/transparency.ejs b/website/views/pages/transparency.ejs index 12f255e580..4e478e147c 100644 --- a/website/views/pages/transparency.ejs +++ b/website/views/pages/transparency.ejs @@ -25,7 +25,14 @@
- +
+
+ Secureframe logo +

Automate compliance.
Improve security. Reduce risk.

+

Build trust with customers using automation backed by world-class experts

+ Learn more +
+

Don’t make me think about IT