added new features to features section

Author: elliesimens

src/pages/components/FeaturesSection.tsx

@@ -14,14 +14,15 @@ import React from "react";
 
 const features = [
   {
-    name: "Prop Visualization",
-    description: "See how properties flow down the component tree",
-    icon: CogIcon,
+    name: "Time Travel Rendering",
+    description:
+      "Rewind to previous state changes from your DOM history with a simple click of a button",
+    icon: ClockIcon,
   },
   {
-    name: "Accessibility Debugging",
+    name: "Context Display Panel",
     description:
-      "Check how a screen reader reads your application per state change",
+      "Visualize the relationships of context providers and consumers, along with live context theme data",
     icon: EyeIcon,
   },
   {
@@ -31,10 +32,15 @@ const features = [
     icon: CameraIcon,
   },
   {
-    name: "Time Travel Rendering",
+    name: "Prop Visualization",
+    description: "See how properties flow down the component tree",
+    icon: CogIcon,
+  },
+  {
+    name: "Accessibility Debugging",
     description:
-      "Rewind to previous state changes from your DOM history with a simple click of a button",
-    icon: ClockIcon,
+      "Check how a screen reader reads your application per state change",
+    icon: EyeIcon,
   },
   {
     name: "Action Comparison & Snapshot Series",
@@ -48,6 +54,12 @@ const features = [
       "Visualize the latency trends for component render times on each state change",
     icon: PresentationChartLineIcon,
   },
+  {
+    name: "State History Diffing",
+    description:
+      "View the exact value differences in state changes, organized by snapshot",
+    icon: ArrowPathIcon,
+  },
   {
     name: "Download State History",
     description:
@@ -60,12 +72,6 @@ const features = [
       "Visualize the mapping of Atoms and Selectors to components in Recoil Apps",
     icon: MapIcon,
   },
-  {
-    name: "Context Display Panel",
-    description:
-      "Visualize the relationships of context providers and consumers, along with live context theme data",
-    icon: EyeIcon,
-  },
 ];
 
 export default function FeaturesSection() {