From 4cc30f5fd106e5fd6d4be2a38be1a7cf8af2adb2 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 30 Oct 2024 01:06:45 -0500
Subject: [PATCH] Website: add CTA to the handbook nav (#23364)

Closes: https://github.com/fleetdm/confidential/issues/8484

Changes:
- Added a CTA linking to the contact page to the handbook nav
---
 .../assets/images/icon-question-20x19@2x.png  | Bin 0 -> 1359 bytes
 .../styles/pages/handbook/basic-handbook.less |  30 ++++++++++++++++++
 .../views/pages/handbook/basic-handbook.ejs   |  23 ++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 website/assets/images/icon-question-20x19@2x.png

diff --git a/website/assets/images/icon-question-20x19@2x.png b/website/assets/images/icon-question-20x19@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff18ed67f836bbbd1464d4d6c40b6ba489171a0a
GIT binary patch
literal 1359
zcmV-V1+e;wP)<h;3K|Lk000e1NJLTq001Ze001Tk1^@s6w)EK@00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1msCXK~#7F-B`VD
z8%GeH*<&0c7GOTY32>1g2d29OE<$(dbW&oAa3iWqCkY{gbfmf<QX=XJL^c7VB=-3U
zOann$voH{qmp5P#DP|(_#<P1oa!K9Z4<!SJKY-Hh-R{n}voo`^1Mr3e;R;bMZ`(u2
z**>5x+XBdw|A&L6p6fRHumCPa&~X|C>)JmhLRcX{hhG(poe6u0*tINb|MJsb4^m<w
zf|8iHcDlvHwqr?|(X|kEf9>pdlR9Q5_+`0T8WA3`O6-WwavMEFQW|2d+Wbc@pa_w|
zvE`$+>vq2L;3^2Ntyd2Sl-6cQu_h1M(pqk(=|zo`8i)L8k%d*5@Wvbkk1SYq4cnfY
z;M#iah=3|OF}A6lN1eSEWPnrt)<zgM=7|cT%5TR%v|$l~^P1zWasB_UZ!YSY0nus+
z=S+nxyfd%KM1pG%s&(GN#$*yUZnv}FfGdE~CXJqIB-vbYcXXQ+NfW#-auSjVp><E%
z;rLYnX?UdfvEnB9;G<8ULl{O7x=d~pQa}dmTem(b+`RcYoSbwAaeYr-{N8{6_T6Vl
z@YVR0{o%)V|N8UAAH6`V0ZzGAL88fOSoO<s;UFe9cG;QQNzSxZt~Q9E9<<PV{PW(j
zd@^n^liQe*gV<Q5Z0X&z=VNo258Nf<g|ee<Lk#@Eun9pNl@e{~L`H&ApqzO6Cf9-(
z2pH8vLzf;-I9yggfSs@pKi5?}G{AM69JXXU4S-{9<{|~+&|!6lcoM(0+XdE8Wjw9N
zC&P~0*$ewOSJ%I``TZ6@7exL{p4TnYTs|v;W8`?7p{UFzx+i`%SqY*GameQ<T496k
z&MyX0+|cHVjhkvLPCXjlJF_DRk`_FD0llP236Z@U4>@@6=--@&wIXZR3ELwQDY6)P
z7Cs3diaA5C>EZtGbq^BYMtG?6;2Q@=zKjA&!%2=7f_K52S{K>5qydW@XNny9k0)X-
z5#SREX2tmUItbf@{-)dcu>}jl6bC0-iwg}=u>A947;*y5Ely4%nxO7&>`9OTBO#^>
z5(yC?3WT?(G(^v^#mbXxC1XS-{+Id=0fTcF^0^Wly60xNdrTy24mv{eA~nbny{8RW
zfeer*0%ssCUU?TX!nt27>ZzApU?f5R<*=nSOIhqtCK)4wr}DSP&yWGag01jb9+~Q0
zR7a@=&@>?Or?CgU4kUlFMSNTq(~eWQCrz&uK2qCAP<<deoC?AXND0Dsnlg8kKTbxQ
zX~zW#M+o%X@s-pV2T6z(2r~u@Dg<dTJ}vG+21v8ewZ{sX9GN1`0JeuVye0&Joenfv
zE%*3)*GMpGK$s27RQ~?MT57vWB*$|Fm!>euRq5KU-e)G|m)<Hf<JqbK9wPWR^xBKM
zcB;HD`S3U4i}l);57f}f$qUqlbWLxpu2<!1N{|kH&U%}Vj`w#V1A@|t%9cwS4P$j-
zLeNmwxIhXn+&R#biK^hRU@Ego)A%2A4*4qRmu5b4)r*9+YT6A&P+iUiR%SmD3nq_9
z{7v#?;lx$0FygX3Kcxrbx*!WLa0IZyPyv(41Pqp%aVg!x^}*m;3UxD4GtyMGrhP97
zRbvUNRx%4Qd3c{CaRC#a_%D}QS(4x@Edfh7Y;PR@ZPgH*w)y9MQ(5k<z$*psG<|sd
R???au002ovPDHLkV1n<`X0reQ

literal 0
HcmV?d00001

diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less
index 941231abb6..60cb15b3e0 100644
--- a/website/assets/styles/pages/handbook/basic-handbook.less
+++ b/website/assets/styles/pages/handbook/basic-handbook.less
@@ -180,6 +180,36 @@
         margin-left: -2px;
       }
     }
+    [purpose='sidebar-cta'] {
+      margin-top: 24px;
+      display: flex;
+      width: 200px;
+      padding: 16px;
+      align-items: center;
+      border-radius: 8px;
+      border: 1px solid #E2E4EA;
+      background: #FFF;
+      font-size: 14px;
+      line-height: 150%;
+      color: @core-fleet-black;
+      p {
+        line-height: 120%;
+        margin-bottom: 0px;
+        font-weight: 800;
+      }
+      [parasails-component='animated-arrow-button'] {
+        line-height: 150%;
+      }
+      img {
+        width: 20px;
+        height: 18.947px;
+        margin-right: 10px;
+      }
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
   }
   [purpose='🫧 Marketing'] {
     h2 {
diff --git a/website/views/pages/handbook/basic-handbook.ejs b/website/views/pages/handbook/basic-handbook.ejs
index 9e0dab8c6e..443f7b5438 100644
--- a/website/views/pages/handbook/basic-handbook.ejs
+++ b/website/views/pages/handbook/basic-handbook.ejs
@@ -17,6 +17,18 @@
               </li>
             </ul>
           </div>
+
+        </div>
+        <div>
+          <a href="/contact" purpose="sidebar-cta" class="d-flex flex-row justify-content-start">
+          <div class="d-flex align-self-start">
+            <img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
+          </div>
+          <div>
+            <p class="mb-0">Questions?</p>
+            <animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
+          </div>
+          </a>
         </div>
         <div class="border-bottom py-3 d-flex d-md-none"></div>
       </div>
@@ -75,6 +87,17 @@
               </ul>
             </div>
           </div>
+          <div>
+            <a href="/contact" purpose="sidebar-cta" class="d-flex flex-row justify-content-start">
+            <div class="d-flex align-self-start">
+              <img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
+            </div>
+            <div>
+              <p class="mb-0">Questions?</p>
+              <animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
+            </div>
+            </a>
+          </div>
           <div class="border-bottom py-3 d-flex d-md-none"></div>
         </div>