modify the scanner feature

Author: dd-jy

_includes/my-scripts.html

@@ -0,0 +1,4 @@
+<link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+/>

_sass/my-inline.scss

@@ -224,3 +224,86 @@
     }
   }
 }
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+.column {
+  width: 100%;
+  padding: 0 1em 1em 1em;
+  text-align: center;
+}
+.feature_card {
+  width: 100%;
+  height: 100%;
+  padding: 2em 1.5em;
+  background: linear-gradient(#ffffff 50%, #b4023c 20%);
+  background-size: 100% 200%;
+  background-position: 0 2.5%;
+  border-radius: 15px;
+  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
+  //cursor: pointer;
+  //transition: 0.5s;
+}
+
+.feature_card h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #b4023c;//#1f194c;
+  margin: 1em 0em;
+}
+.feature_card p {
+  color: #575a7b;
+  font-size: 14px;
+  line-height: 1.6;
+  letter-spacing: 0.03em;
+}
+
+.feature_card > .feature_content {
+  text-align: left;
+}
+.icon-wrapper {
+  background-color: #bc0c3e;
+  position: relative;
+  margin: auto;
+  font-size: 30px;
+  height: 2.5em;
+  width: 2.5em;
+  color: #ffffff;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  transition: 0.5s;
+}
+.feature_card:hover {
+  background-position: 0 100%;
+}
+.feature_card:hover .icon-wrapper {
+  background-color: #ffffff;
+  color: #bc0c3e;
+}
+.feature_card:hover h3 {
+  color: #ffffff;
+}
+.feature_card:hover p {
+  color: #f0f0f0;
+}
+@media screen and (min-width: 768px) {
+  section {
+    padding: 0 2em;
+  }
+  .column {
+    flex: 0 50%;
+    max-width: 50%;
+  }
+}
+@media screen and (min-width: 992px) {
+  section {
+    padding: 1em 3em;
+  }
+  .column {
+    flex: 0 0 33.33%;
+    max-width: 33.33%;
+  }
+}

scanner/README.md

@@ -18,46 +18,38 @@ permalink: /scanner/
 FOSSLight Scanner can perform an analysis for open source compliance at once. It can perform open source analysis of source code, binary and dependency and generate the report that contains the open source information that can be extracted. You can use the report file with [FOSSLight Hub](/fosslight). Also, it can check whether an open source complies with the copyright/license writing rule.
 
 ## Features
-
-<div class="flex-container">
-  <div class="flex-contents">
-    <div>
-      <div id="feature_title">
-        Inclusive Scanning
-      </div>
-      <div id="feature_img">
-        <img src="https://img.icons8.com/dotty/80/000000/check-all.png"/>
+<div class="row">
+  <div class="column">
+    <div class="feature_card">
+      <div class="icon-wrapper">
+        <i class="fa-solid fa-magnifying-glass"></i>
       </div>
-      <div id="feature_content">
-        It can detect source code, binary as well as dependency.
+      <h3>Improving<br>Analysis Accuracy</h3>
+      <div class="feature_content">
+        <p>It supports source code string detection and snippet matching, and also supports binary analysis as well as dependency analysis for various package managers to increase the accuracy of open source analysis.
+        </p>
       </div>
     </div>
   </div>
-
-  <div class="flex-contents">
-    <div>
-      <div id="feature_title">
-        Integrated One
+  <div class="column">
+    <div class="feature_card">
+      <div class="icon-wrapper">
+        <i class="fas fa-gears"></i>
       </div>
-      <div id="feature_img">
-        <img src="https://img.icons8.com/wired/64/000000/workspace-one.png"/>
-      </div>
-      <div id="feature_content">
-        It can work from one command line through a single integrated package.
+      <h3>Fast & Light Independent Module</h3>
+      <div class="feature_content">
+        <p>Each scanner can run independently, so you can run only the target you want to scan (ex, source code, binary, dependency) quickly and lightly.</p>
       </div>
     </div>
   </div>
-
-  <div class="flex-contents">
-    <div>
-      <div id="feature_title">
-        Independent Module
-      </div>
-      <div id="feature_img">
-        <img src="https://img.icons8.com/dotty/80/000000/module.png"/>
+  <div class="column">
+    <div class="feature_card">
+      <div class="icon-wrapper">
+        <i class="fa-solid fa-share-nodes"></i>
       </div>
-      <div id="feature_content">
-        The scanner module can be used independently and lightly.
+      <h3>Scalability<br>through Hub</h3>
+      <div class="feature_content">
+        <p>Output file of scanners is directly available in the Hub, so you can use the open source information management functions and also generate SBOM.</p>
       </div>
     </div>
   </div>