added code example section

_layouts/home.html

@@ -82,6 +82,97 @@ layout: base
     </div>
   </section>
 
+  <section class="code-example">
+    <div class="container">
+      <div class="code-example-headings">
+        <h4>Using SimBricks</h4>
+        <h2>It's exteremly simple to create virtual Prototypes with SimBricks</h2>
+      </div>
+      <div class="code-example-code-feature-box">
+        <div class="code-section">
+          <div class="code" id="extensible">
+            <pre>
+class MemcachedServer(AppConfig):
+  def run_cmds(self, node: NodeConfig) -> tp.List[str]:
+    return ['memcached -u root -t 1 -c 4096']
+            </pre>
+          </div>
+          <div class="code" id="full-system">
+            <pre>
+server_config = I40eLinuxNode()
+server_config.ip = '10.0.0.2'
+server_config.app = IdleHost()
+server = Gem5Host(server_config)
+server_nic = I40eNIC()
+server.add_nic(server_nic)
+            </pre>
+          </div>
+        </div>
+        <div class="feature-section">
+          <div class="feature" id="extensible">
+            <span class="feature-extensible">Extensible</span>
+          </div>
+          <div class="feature" id="full-system">
+            <span class="feature-fullsystem">Full-System</span>
+          </div>
+          <div class="feature" id=""></div>
+        </div>
+      </div>
+    </div>
+    <script>
+      $(document).ready(function () {
+        const codeElements = document.querySelectorAll('.code');
+        const featureElements = document.querySelectorAll('.feature');
+
+        function highlight_code_and_feature(id) {
+          feature = $($(`#${id}.feature`)[0]);
+          code = $($(`#${id}.code`)[0]);
+          code.css('border-color', 'hsl(18, 89%, 57%)');
+          feature.css("border-color", "hsl(18, 89%, 57%)");
+        }
+
+        function remove_highlight_code_and_feature(id) {
+          feature = $($(`#${id}.feature`)[0]);
+          code = $($(`#${id}.code`)[0]);
+          code.css('border-color', 'hsl(0, 0%, 96%)');
+          feature.css('border-color', 'white');
+        }
+
+        function set_highlight_all_except_id(id, value) {
+          codeElements.forEach(code => {
+            if (code.id != id) {
+              c = $($(`#${code.id}`)[0]).css("opacity", value);
+            }
+          });
+        }
+
+        codeElements.forEach(code => {
+          code.addEventListener('mouseover', () => {
+            highlight_code_and_feature(code.id);
+            set_highlight_all_except_id(code.id, 0.3);
+          });
+
+          code.addEventListener('mouseout', () => {
+            remove_highlight_code_and_feature(code.id);
+            set_highlight_all_except_id(feature.id, 1);
+          });
+        });
+
+        featureElements.forEach(feature => {
+          feature.addEventListener('mouseover', () => {
+            highlight_code_and_feature(feature.id);
+            set_highlight_all_except_id(feature.id, 0.3);
+          });
+
+          feature.addEventListener('mouseout', () => {
+            remove_highlight_code_and_feature(feature.id);
+            set_highlight_all_except_id(feature.id, 1);
+          });
+        });
+      });
+    </script>
+  </section>
+
   <section class="product">
     <div class="container">
       <h2>Easy Virtual Prototyping with Modular Composition</h2>

_sass/home.scss

@@ -71,6 +71,89 @@ body.home {
     }
   }
 
+  section.code-example {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .code-example-headings {
+      text-align: center;
+      font-weight: bold;
+
+      h4 {
+        color: $col-sb-org;
+      }
+    }
+
+    div.code-example-code-feature-box {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-top: 10px;
+      margin-bottom: 10px;
+
+      .code-section {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        width: fit-content;
+        border-radius: $border-radius;
+        color: black;
+        background-color: $col-os-grey_l2;
+
+        .code {
+          opacity: 1;
+          border: solid 2px;
+          border-color: $col-os-grey_l2;
+          border-radius: $border-radius;
+          padding-left: 10px;
+          padding-right: 10px;
+
+          .pre {
+            opacity: 0;
+          }
+        }
+      }
+
+      .feature-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        .feature {
+          color: black;
+          font-size: xx-large;
+          padding: 20px;
+          border-radius: $border-radius;
+          border: solid 2px;
+          border-color: white;
+
+          span::before,
+          span::after {
+            content: "";
+            text-align: center;
+            font-family: $font-fa;
+            font-weight: bold;
+            font-size: xx-large;
+            color: $col-sb-org;
+            padding-bottom: -0.1rem;
+            padding-left: 1rem;
+            padding-right: 1rem;
+          }
+
+          span.feature-fullsystem::before {
+            content: "\f6ff";
+          }
+
+          span.feature-extensible::before {
+            content: "\f12e";
+          }
+        }
+      }
+    }
+  }
+
   section.advantages {
     @include sec-white;