Final Products page.

src/pages/products/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import SEO from "../../components/seo";
+import ProductPage from "../../sections/Products";
+
+const Products = () => {
+  return (
+    <>
+      <ProductPage  />
+    </>
+  );
+};
+export default Products;
+export const Head = () => {
+  return <SEO title="Kubernetes management made collaborative"
+    description="Layer5, empowerer of engineers. At Layer5, we believe collaboration enables innovation, and infrastructure enables collaboration."
+    image="/images/Layer5-overview.svg" />;
+};

src/sections/General/Navigation/index.js

@@ -226,8 +226,6 @@ const Navigation = () => {
               <div className="mobile-dropdown">
                 <ul className="mobile-collapsed">
                   {Data.menuItems.map((menu, index) => (
-
-
                     <li
                       key={index}
                       className={

src/sections/General/Navigation/utility/menu-items.js

@@ -81,7 +81,7 @@ const Data = {
     },
     {
       name: "Products",
-      path: "/projects",
+      path: "/products",
       subItems: [
         {
           name: "Meshery",

src/sections/Products/collapsible-details.js

@@ -0,0 +1,85 @@
+import React from "react";
+import styled from "styled-components";
+import { MdExpandMore } from "@react-icons/all-files/md/MdExpandMore";
+import { RiArrowRightSLine } from "@react-icons/all-files/ri/RiArrowRightSLine";
+
+const FeatureDetailsWrapper = styled.div`
+display: inline;
+cursor: pointer;
+.open{
+    margin: 0rem;
+    list-style: none;
+    height:auto !important;
+    opacity:1 !important;
+    margin-bottom: 2rem;
+    transition:all .4s !important;
+   }
+   .toggle-icon{
+    width: 1.2rem; 
+    height: 1.2rem; 
+    fill: ${props => props.theme.primaryColor};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+p{
+    font-size: 0.9rem;
+    color: ${props => props.theme.greyC1C1C1ToGreyB3B3B3}; 
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 
+}
+.toggle-btn{
+    display:inline-block;
+    float: left;
+    vertical-align: middle;;
+   }
+   .closed{
+    opacity:1;
+    height:0;
+    transition:none;
+    visibility:hidden;
+   }
+   .open{
+    visibility:visible;
+   }
+ h5{
+   display: inline-block;
+   vertical-align: middle;
+ }
+`;
+
+const FeatureDetails = (props) => {
+  const [expand, setExpand] = React.useState(false);
+
+  return (
+    <FeatureDetailsWrapper>
+      <div onClick={function () {
+        setExpand(!expand);
+      }}>
+        {props.description ?
+          <div className="toggle-btn">
+            {expand ? (
+              <MdExpandMore
+                className="toggle-icon"
+                onClick={function () {
+                  setExpand(!expand);
+                }}
+              />
+            ) : (
+              <RiArrowRightSLine
+                className="toggle-icon"
+                onClick={function () {
+                  setExpand(!expand);
+                }}
+              />
+            )}
+          </div> : ""}
+        <h5>{props.category}</h5>
+        <div className="details">
+          <p className={`closed ${expand ? "open" : ""}`}>
+            {props.description}
+          </p>
+        </div>
+      </div>
+    </FeatureDetailsWrapper>
+  );
+};
+
+export default FeatureDetails;