[Site] Fixed Features Page

Signed-off-by: Nikhil Sharma <[email protected]>

docs/_sass/features.scss

@@ -17,8 +17,32 @@
 		box-shadow: 0px 0px 10px #eee;
 		width: 100%;
 
+		&_li{
+			margin: 0 15px;
+			margin: 0 25px;
+			margin-left: 35px;
+			text-align: left;
+			list-style:circle;
+			text-align: center;
+			border-bottom: 1.5px solid rgb(233, 233, 233);
+
+		}
+
+
 		.highlighted {
-			font-size: 1.2em
+			text-align: center;
+			height: 70px;
+			letter-spacing: 1px;
+			font-weight: 600;
+			color: #272727d3;
+			font-size: 1.2em;
+			padding: 20px 15px;
+			padding: 30px 15px;
+			background-color: rgb(247, 247, 247);
+			border-top-right-radius:0;
+			border-top-left-radius: 0;
+			box-shadow: inset 0 2px 12.5px rgba(0,0,0,0.01);
+			text-transform: capitalize;
 		}
 
 		.features-cta {
@@ -45,6 +69,7 @@
 		@media #{$desktop} {
 			-webkit-flex: 1;
 			flex: 1;
+			min-width: 220px;
 		}
 
 		li {
@@ -56,11 +81,31 @@
 				margin: 0;
 				color: #fff;
 				font-weight: bold;
+				font-size: 1.75rem;
 			}	
 		}
 	}
 }
 
+@media(max-width:1025px){
+	.highlighted{
+		height: 90px !important;
+	}
+}
+
+@media(max-width:875px){
+	.features .feature li{
+		padding: 30px 0;
+	}
+}
+
+@media(max-width:750px){
+	.highlighted{
+		height: 60px !important;
+	}
+}
+
+
 .faq {
 	@media #{$desktop} {
 		@include columns(2);

docs/_sass/layout.scss

@@ -132,6 +132,8 @@ section + section {
 
 .page h2 {
   text-align: center;
+  margin: 2.5rem 0;
+	text-transform: capitalize; 
 }
 
 blockquote {

docs/collections/_pages/features.html

@@ -10,66 +10,95 @@
     features:
       - text: Manage any service mesh
         highlight: true
+        featureli: false
+        fea: false
       - text: Consul, Istio, Linkerd, Network Service Mesh, Open Service Mesh, App Mesh, Kuma, Traefik Mesh, Citrix Service Mesh, Octarine
         highlight: false
+        featureli: true
+
       - text: Explore service mesh functionality with 10 different sample applications
         highlight: false
+        featureli: true
+
       - text: Validate each service mesh's compliance with Service Mesh Interface (SMI) specifications
         highlight: false
+        featureli: true
       - text: 
         highlight: 
       - text: 
         highlight: 
     call_to_action:
-      link: /#getting-started
+      link: https://docs.meshery.io/functionality/lifecycle-management#lifecycle-management
       text: Get started
   - name: Configuration
     color: "#00B39F"
     features:
       - text: Operatore with best practices
         highlight: true
+        featureli: false
+
       - text: Built-in industry patterns and known best practices
         highlight: false
+        featureli: true
+
       - text: Apply custom configuration to your service mesh
         highlight: false
+        featureli: true
+
       - text: Advanced reporting
         highlight: false
+        featureli: true
       - text: 
         highlight: 
       - text: 
         highlight: 
       - text: 
         highlight: 
     call_to_action:
-      link: /#getting-started
+      link: https://docs.meshery.io/functionality/lifecycle-management#configuration-management
       text: Get started
   - name: Performance
     color: "#00B39F"
     features:
       - text: Assess the performance of your service mesh
         highlight: true
+        featureli: false
+
       - text: Distributed performance analysis supporting 3 different types of load generators
         highlight: false
+        featureli: true
+
       - text: Built-in statistical analysis of service latency quartiles
         highlight: false
+        featureli: true
+
       - text: Integration with Prometheus and Grafana
         highlight: false
+        featureli: true
+        featurellast: false
       - text: Baseline and track deltas of workload performance over time.
         highlight: false
+        featureli: true
+        featurellast: true
     call_to_action:
-      link: /#getting-started
+      link: https://docs.meshery.io/functionality/performance-management
       text: Get started
   - name: Wasm Filters
     color: "#00B39F"
     features:
-      - text: Webassembly based sandbox programs that can modify your envoy proxies
+      - text: WebAssembly based sandbox programs that can modify your envoy proxies
         highlight: true
+        featureli: false
+
       - text: Modify Istio service mesh proxies to add custom functionalities
         highlight: false
+        featureli: true
+
       - text: Integration with Prometheus and Grafana
         highlight: false
+        featureli: true
     call_to_action:
-      link: /#getting-started
+      link: https://docs.meshery.io/functionality/filter-management
       text: Get started
 <!-- faq:
   - question: What types of payment do you accept?
@@ -89,7 +118,7 @@
 				<h3>{{ feature.name }}</h3>
 			</li>
 			{% for item in feature.features %}
-				<li {% if item.highlight %} class="highlighted"{% endif %}>{{ item.text }}</li>
+				<li {% if item.featureli %} class="feature_li" {% endif %} {% if item.highlight %} class="highlighted"{% endif %}>{{ item.text }}</li>
 			{% endfor %}
 
 			{% if feature.call_to_action %}