frontend/src/app/shared/architecture/architecture.component.html

<!--
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<!-- <div class="userJourney">

  <a class="btn e-button-userJourney btn-sm" routerLink="/demo/user-journey">
    <span class="e-button-userJourney-text"><i class="fa fa-trash red" style="padding-left:2px;"></i>

      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white">
        <circle cx="22" cy="21" r="20" fill="black" />
        <path
          d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z" />
      </svg>
      User Journeys
    </span>
  </a>
</div>

<div class="abc">
  <a class="btn e-button btn-sm" (click)="showArchitetureDig()">
    <span class="e-button-text"><i class="fa fa-trash red" style="padding-right:3px;"></i>
      <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g filter="url(#filter0_d_306_1940)">
          <circle cx="22" cy="21" r="20" fill="white" />
        </g>
        <path
          d="M23.8235 18.9091V20.6364H21.1765V18.9091H18.9706V17.1818H21.1765V12H15V17.1818H17.2059V18.9091H15V24.0909H17.2059V25.8182H15V31H21.1765V25.8182H18.9706V24.0909H21.1765V22.3636H23.8235V24.0909H30V18.9091H23.8235Z"
          fill="#4285F4" />
        <defs>
          <filter id="filter0_d_306_1940" x="0" y="0" width="44" height="44" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="1" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_306_1940" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_306_1940" result="shape" />
          </filter>
        </defs>
      </svg>
      Architecture Diagram
    </span>
  </a>
</div> -->


<div class="userJourney">
  
  <a  class="btn e-button-userJourney btn-sm" (click)="navigateToUserJourney()">
    <span class="e-button-userJourney-text"
      >
      <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 -960 960 960" width="25" fill="white">  
      <circle cx="22" cy="21" r="20" fill="black" />
      <path d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/></svg> 
     User Journeys 
    </span>
  </a>
</div> 

<div class="abc">
    <a  class="btn e-button btn-sm" (click)="showArchitetureDig()">
      <span class="e-button-text"
        >
        <svg
          width="40"
          height="40"
          viewBox="0 0 44 44"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_d_306_1940)">
           <circle cx="22" cy="21" r="20" fill="white" /> 
          </g>
          <path
            d="M23.8235 18.9091V20.6364H21.1765V18.9091H18.9706V17.1818H21.1765V12H15V17.1818H17.2059V18.9091H15V24.0909H17.2059V25.8182H15V31H21.1765V25.8182H18.9706V24.0909H21.1765V22.3636H23.8235V24.0909H30V18.9091H23.8235Z"
            fill="#4285F4"
          />
          <defs>
            <filter
              id="filter0_d_306_1940"
              x="0"
              y="0"
              width="44"
              height="44"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dy="1" />
              <feGaussianBlur stdDeviation="1" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
              />
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_306_1940"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect1_dropShadow_306_1940"
                result="shape"
              />
            </filter>
          </defs>
        </svg>
          Architecture Diagram
      </span>
    </a>
  </div>