refactor use cases html css js (#200)

* refactor use cases html css js

* change aria-selected on tab select

* add keyboard navigation

* add preventDefault for keyboard navigation

* remove not needed !important

* rename d-flex, flex1
remove important

* format using 2 spaces

* remove utility class usage

* add new line

* merge duplicate

* add newline

* show background only for hover, focus, selected tab

* prevent default only for arrows, enter

* use boolean in dict

* add mobile tabs

* test: upds scrns

* build: use new ruby

---------

Co-authored-by: Paul Keen <[email protected]>

.dev/Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1
 
-ARG RUBY_VERSION=3.3.4
+ARG RUBY_VERSION=3.3.6
 
 FROM ruby:$RUBY_VERSION-alpine
 

postcss.config.js

@@ -26,7 +26,7 @@ const purgecss = require("@fullhuman/postcss-purgecss")({
     ],
 
     greedy: [
-      /^swiper-/, /^is-/, /^has-/, /^js-/, /^fl-builder-content/, /^fl-col/, /^fl-node/, /^technologies-component/, /^footer-component/
+      /^swiper-/, /^is-/, /^has-/, /^js-/, /^fl-builder-content/, /^fl-col/, /^fl-node/, /^technologies-component/, /^footer-component/, /^use-cases/
     ]
   },
 })

themes/beaver/assets/css/use-cases-dynamic.css

@@ -0,0 +1,172 @@
+.use-cases > .heading {
+  color: #1a8cff;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.use-cases .subheading {
+  font-size: 60px;
+  color: #121212;
+  margin-left: 200px;
+  margin-right: 200px;
+  text-align: center;
+}
+
+@media (max-width: 1115px) {
+  .use-cases .subheading {
+    margin-left: 50px;
+    margin-right: 50px
+  }
+}
+
+@media (max-width: 860px) {
+  .use-cases .subheading {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 10px
+  }
+}
+
+.use-cases .description {
+  margin-left: 300px;
+  margin-right: 300px;
+  margin-top: 20px;
+  text-align: center;
+}
+
+@media (max-width: 1115px) {
+  .use-cases .description {
+    margin-left: 50px;
+    margin-right: 50px
+  }
+}
+
+
+
+.use-cases .tab-title {
+  display: none;
+}
+
+@media (min-width: 860px) {
+  .use-cases .tab-title {
+    display: block;
+  }
+  .use-cases .tab-title-mobile {
+    display: none;
+  }
+}
+
+.use-cases .tabs-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 60px;
+}
+
+.use-cases .tab-title, .use-cases .tab-title-mobile {
+  color: #121212;
+  border: none;
+  border-radius: 14px;
+  padding: 28px 35px;
+  font-size: 20px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.use-cases .tab-title:hover, .use-cases .tab-title:focus, .use-cases .tab-title[aria-selected="true"], .use-cases .tab-title-mobile {
+  background-color: #f5f6f8;
+}
+
+.use-cases .tab-title-mobile {
+  border-radius: 0;
+  padding: 20px;
+  font-size: 16px;
+  border-bottom: 2px solid #e7e7e7;
+  margin: 0;
+}
+
+.use-cases .tab-title-mobile:last-child {
+  border-bottom: none;
+}
+
+@media (max-width: 860px) {
+  .use-cases .description {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 15px;
+  }
+}
+
+@media (min-width: 860px) {
+  .use-cases .tabs {
+    width: 43%;
+  }
+
+  .use-cases .tabs-container {
+    flex-direction: row;
+  }
+}
+
+.use-cases .tab-panels {
+  flex: 1;
+  padding-left: 100px
+}
+
+@media (max-width: 1115px) {
+  .use-cases .tab-panels {
+    padding-left: 50px
+  }
+}
+
+@media (max-width: 860px) {
+  .use-cases .tab-panels {
+    padding-left: 0;
+  }
+
+  .use-cases .tab-panel {
+    padding: 20px 0;
+  }
+}
+
+.use-cases .tab-panel .heading {
+  font-size: 45px;
+  margin-bottom: 30px;
+  margin-top: 0;
+}
+
+@media (max-width: 860px) {
+  .use-cases .tab-panel .heading {
+    font-size: 30px;
+    margin-bottom: 20px;
+  }
+}
+
+
+.use-cases .tab-panel .item {
+  margin-bottom: 10px;
+}
+
+.use-cases .tab-panel .list {
+  list-style: none;
+  margin-bottom: 36px;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+.use-cases .tab-panel .item {
+  background-image: url({{ (resources.Get "img/icons/theme/homepage_tick_circle.svg" | fingerprint).RelPermalink }});
+  background-repeat: no-repeat;
+  background-position: 0 50%; /* Center the bullet vertically */
+  background-size: 24px 24px; /* Size of the bullet */
+  padding-left: 36px; /* Space for the bullet */
+}
+
+.use-cases .action-button {
+  background-color: #007af4;
+  font-weight: 700;
+  padding: 12px 25px;
+  text-decoration: none;
+  border-radius: 25px;
+  color: #fff;
+  display: inline-block;
+}