Link environment sites from homepage

website/index.html

@@ -73,6 +73,17 @@
         font-weight: 700;
       }
 
+      .pipeline a {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .pipeline a:hover,
+      .pipeline a:focus-visible {
+        color: #5eead4;
+        text-decoration: underline;
+      }
+
       .environment {
         display: inline-flex;
         align-items: center;
@@ -97,9 +108,9 @@
       </p>
       <ul class="pipeline" aria-label="Promotion flow">
         <li>dev branch</li>
-        <li>DEV site</li>
-        <li>STAGING approval</li>
-        <li>PROD release</li>
+        <li><a href="http://web-dev.max.test.scrumdapp.open-ict.hu">DEV site</a></li>
+        <li><a href="http://web-staging.max.test.scrumdapp.open-ict.hu">STAGING site</a></li>
+        <li><a href="http://web-prod.max.test.scrumdapp.open-ict.hu">PROD site</a></li>
       </ul>
       <div class="environment">Current environment: {{ .Values.environment }}</div>
     </main>