website: updated images with latest screenshots for the Features section (#662)

* website: updated images with latest screenshots for the Features section

Signed-off-by: Dev Kumar <devskumar99@gmail.com>

* website: added section for pods in features page

Signed-off-by: Dev Kumar <devskumar99@gmail.com>

* website: format and lint fix

Signed-off-by: Dev Kumar <devskumar99@gmail.com>

* website: updated tray icon image to match with theme

Signed-off-by: Dev Kumar <devskumar99@gmail.com>

Signed-off-by: Dev Kumar <devskumar99@gmail.com>

website/src/pages/features/index.tsx

@@ -132,23 +132,47 @@ function FeatureManageResources() {
   );
 }
 
+function FeatureManagePods() {
+  return (
+    <div>
+      <section className="text-gray-600 bg-zinc-200 dark:bg-zinc-800 dark:text-gray-400 body-font">
+        <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+          <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+            <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
+              Create and start Pods with Podman
+              <br className="hidden lg:inline-block" />
+            </h1>
+            <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
+              Select containers to run as a Pod.
+            </p>
+            <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
+              Play Kubernetes YAML locally without Kubernetes.
+            </p>
+            <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
+              Generate Kubernetes YAML from Pods.
+            </p>
+          </div>
+          <div className="lg:w-5/6 md:w-4/5 w-5/6 flex flex:col gap-10">
+            <ThemedImage
+              className="py-4"
+              alt="Manage Pods"
+              sources={{
+                light: useBaseUrl('img/features/manage-pods.png'),
+                dark: useBaseUrl('img/features/manage-pods.png'),
+              }}
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
 function FeatureDDExtensions() {
   return (
-    <section className="text-gray-600 bg-zinc-200 dark:bg-zinc-800 dark:text-gray-400 body-font">
+    <section className="text-gray-600 bg-zinc-100 dark:bg-zinc-900 dark:text-gray-400 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
-        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
-          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
-            Import Docker Desktop extensions
-          </h1>
-
-          <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
-            Specify OCI image of a Docker Desktop extension to import it.
-          </p>
-          <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
-            For example: security scanner or deploy to OpenShift extensions.
-          </p>
-        </div>
-        <div className="w-5/6 mb-10 md:mb-0">
+        <div className="lg:w-5/6 md:w-4/5 w-5/6 flex flex:col gap-10">
           <ThemedImage
             className="py-4"
             alt="Pull image and manage registries"
@@ -158,6 +182,18 @@ function FeatureDDExtensions() {
             }}
           />
         </div>
+        <div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">
+            Import Docker Desktop extensions
+          </h1>
+          <br className="hidden lg:inline-block" />
+          <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
+            Specify OCI image of a Docker Desktop extension to import it.
+          </p>
+          <p className="leading-relaxed list-item dark:text-gray-200 text-gray-800">
+            For example: security scanner or deploy to OpenShift extensions.
+          </p>
+        </div>
       </div>
     </section>
   );
@@ -172,6 +208,7 @@ export default function Home(): JSX.Element {
       <FeatureManageImages />
       <FeatureManagementFromTrayIcon />
       <FeatureManageResources />
+      <FeatureManagePods />
       <FeatureDDExtensions />
     </Layout>
   );