From 56867ac031766ca9a582e0eca1e0a8114880f5f0 Mon Sep 17 00:00:00 2001
From: aryan-srivastava <aryanyash999@gmail.com>
Date: Thu, 13 Aug 2026 00:39:53 +0530
Subject: [PATCH 1/3] refactor: improve layout in PageHeader and features
 components.

Signed-off-by: aryan-srivastava <aryanyash999@gmail.com>
---
 src/components/layout/PageHeader/index.tsx | 83 ++++++++++++----------
 src/pages/features.tsx                     | 20 +++---
 2 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/components/layout/PageHeader/index.tsx b/src/components/layout/PageHeader/index.tsx
index 0bb9afa786..b772724d72 100644
--- a/src/components/layout/PageHeader/index.tsx
+++ b/src/components/layout/PageHeader/index.tsx
@@ -1,8 +1,9 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { Icon } from '@iconify/react';
 import WaveBorder from '@site/src/components/shapes/WaveBorder';
 import Markdown from '@site/src/components/utilities/Markdown';
 import BasicResourcesBox from '@site/src/components/content/BasicResourcesBox';
+
 type ImageSectionProps = LayoutProps & {
   image?: Image;
 };
@@ -14,22 +15,22 @@ type PageHeaderProps = LayoutProps &
     darkColor?: string;
     lightColor?: string;
     basicResources?: boolean;
-    instructions?: { [key:string]: any };
+    instructions?: { [key: string]: any };
   };
 
 type PageHeaderSupplementalInfoProps = PageHeaderProps & {
   image?: Image;
   basicResources?: boolean;
-}
+};
 
 type InstructionsProps = PageHeaderProps & {
-  instructions?: { [key:string]: any };
-}
+  instructions?: { [key: string]: any };
+};
 
 const TextBox = ({ grid, display, layout, title, description }: PageHeaderProps): JSX.Element => {
   return (
     <div className={`${grid} ${display} ${layout}`}>
-      <h1 className="mb-6 max-w-sm text-purple-700 dark:text-purple-500 lg:max-w-lg ">{title}</h1>
+      <h1 className="mb-6 max-w-sm text-purple-700 dark:text-purple-500 lg:max-w-lg">{title}</h1>
       <Markdown text={description} styles="leading-relaxed" />
     </div>
   );
@@ -38,64 +39,74 @@ const TextBox = ({ grid, display, layout, title, description }: PageHeaderProps)
 const Image = ({
   grid,
   display,
-  layout,// if array then {[key:string]: any}[];
+  layout,
   image = { path: 'images/optimized/podman-2-196w-172h.webp', alt: 'Podman Logo' },
 }: ImageSectionProps) => {
   return (
-    <div>
-      <img src={image.path} alt={image.alt} className={`${grid} ${display} ${layout}`} />
-    </div>
+    <img
+      src={image.path}
+      alt={image.alt}
+      className={`${grid} ${display} ${layout} h-auto max-h-48 w-auto object-contain`}
+    />
   );
 };
 
 function PageHeaderSupplementalInfo({ image, basicResources }: PageHeaderSupplementalInfoProps) {
   if (basicResources) {
-    return (
-      <BasicResourcesBox />
-    );
-  } 
-  return (
-    <Image image={image} layout="mb-8 lg:mb-0" />
-  );
+    return <BasicResourcesBox />;
+  }
+  return <Image image={image} layout="mb-4 md:mb-0" />;
 }
 
 function Instructions({ instructions }: InstructionsProps) {
   if (instructions) {
     return (
       <div>
-        <h3 className="text-gray-700 mb-4">{instructions.title}</h3>
+        <h3 className="mb-4 text-gray-700">{instructions.title}</h3>
         <p>{instructions.subtitle}</p>
-         <ul className="mb-10 mt-4 flex flex-col gap-6 sm:flex-row lg:mb-16 lg:gap-4 xl:flex-col">
-              <li>
-                <a
-                  href={instructions.button.path}
-                  className="no-underline hover:no-underline flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
-                  <span>{instructions.button.text}</span>
-                  <Icon icon={instructions.button.icon} className="order-first hidden lg:block" />
-                </a>
-              </li>
+        <ul className="mb-10 mt-4 flex flex-col gap-6 sm:flex-row lg:mb-16 lg:gap-4 xl:flex-col">
+          <li>
+            <a
+              href={instructions.button.path}
+              className="flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 no-underline underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:shadow-md hover:no-underline dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
+              <span>{instructions.button.text}</span>
+              <Icon icon={instructions.button.icon} className="order-first hidden lg:block" />
+            </a>
+          </li>
         </ul>
       </div>
-    )
+    );
   }
   return null;
 }
 
-function PageHeader({ title, description, image, lightColor = 'white', darkColor = 'gray-900', basicResources, instructions }: PageHeaderProps) {
+function PageHeader({
+  title,
+  description,
+  image,
+  lightColor = 'white',
+  darkColor = 'gray-900',
+  basicResources,
+  instructions,
+}: PageHeaderProps) {
   return (
     <header className={`bg-${lightColor} dark:bg-${darkColor}`}>
-      <div className="bg-gradient-to-r  from-blue-500 to-purple-700 dark:from-blue-700 dark:to-purple-900 lg:pt-8">
+      <div className="bg-gradient-to-r from-blue-500 to-purple-700 dark:from-blue-700 dark:to-purple-900 lg:pt-8">
         <WaveBorder />
       </div>
-      <div className="container flex flex-col md:flex-row justify-around">
-        <div>
-          <TextBox title={title} description={description} layout="mt-12 lg:mt-0 mb-8" />
+      <div className="container flex flex-col items-stretch gap-8 md:flex-row md:items-center md:justify-between md:gap-12 lg:py-5">
+        <div className="min-w-0 max-w-xl lg:max-w-2xl">
+          <TextBox title={title} description={description} layout={instructions ? 'mb-8' : ''} />
           <Instructions instructions={instructions} />
         </div>
-        <div className="w-[50%] ml-24">
-          <PageHeaderSupplementalInfo basicResources={basicResources} />
+        <div
+          className={
+            basicResources
+              ? 'flex w-full max-w-md shrink-0 justify-center md:justify-end'
+              : 'hidden shrink-0 md:flex md:justify-end'
+          }>
+          <PageHeaderSupplementalInfo image={image} basicResources={basicResources} />
         </div>
-
       </div>
     </header>
   );
diff --git a/src/pages/features.tsx b/src/pages/features.tsx
index e392ad1c4b..8c0669bdcb 100644
--- a/src/pages/features.tsx
+++ b/src/pages/features.tsx
@@ -18,15 +18,19 @@ function GetToKnowPodmanSection() {
   return (
     <section className="mb-8 mt-4 lg:mt-8 xl:mb-12">
       <SectionHeader title={knowPodman.title} textColor="text-blue-700 dark:text-blue-500" />
-      <div className="container flex flex-wrap justify-center gap-4 lg:gap-8">
+      <div className="container grid gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
         {knowPodman.cards.map((card, index) => {
           return (
-            <article key={index} className="mt-2 flex flex-col justify-start rounded-md p-4 text-center lg:mt-4">
-              <div>
-                <h3 className="mb-4 font-medium dark:text-blue-500 xl:mb-6">{card.title}</h3>
-                <Markdown text={card.description} styles="max-w-xs" />
-              </div>
-              <img src={card.image.path} alt={card.image.alt} className="order-first my-2 h-52 w-auto object-contain" />
+            <article
+              key={index}
+              className="flex h-full flex-col items-center rounded-lg bg-gray-50 p-6 pb-8 text-center shadow-md dark:bg-gray-700 dark:shadow-none lg:p-8">
+              <img
+                src={card.image.path}
+                alt={card.image.alt}
+                className="mb-6 h-40 w-auto object-contain"
+              />
+              <h3 className="mb-3 font-medium dark:text-blue-500">{card.title}</h3>
+              <Markdown text={card.description} styles="max-w-xs leading-relaxed" />
             </article>
           );
         })}
@@ -195,7 +199,7 @@ const LearnMoreSection = () => {
 function Features() {
   return (
     <Layout>
-      <PageHeader title={header.title} description={header.subtitle} />
+      <PageHeader title={header.title} description={header.subtitle} image={header.image} />
       <GetToKnowPodmanSection />
       <PodmanDesktopSection />
       <ManageContainersUISection />

From d1aa284d062fc6ac85cedb947819c9fec2d6448f Mon Sep 17 00:00:00 2001
From: aryan-srivastava <aryanyash999@gmail.com>
Date: Thu, 13 Aug 2026 00:51:54 +0530
Subject: [PATCH 2/3] feat: add Podman Desktop section with dynamic content

Signed-off-by: aryan-srivastava <aryanyash999@gmail.com>
---
 src/pages/features.tsx  | 36 +++++++++++++++++-------------------
 static/data/features.ts | 12 +++++++++++-
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/pages/features.tsx b/src/pages/features.tsx
index 8c0669bdcb..ab527feef6 100644
--- a/src/pages/features.tsx
+++ b/src/pages/features.tsx
@@ -9,7 +9,7 @@ import ColoringBookSection from '@site/src/components/content/ColoringBookSectio
 import FeaturesCarousel from '@site/src/components/content/FeaturesCarousel';
 import BlogArticlesList from '@site/src/components/content/BlogArticlesList';
 /* PAGE DATA */
-import { header, knowPodman, learnMore } from '@site/static/data/features';
+import { header, knowPodman, podmanDesktop, learnMore } from '@site/static/data/features';
 import PlayOnScroll from '@site/src/components/utilities/PlayOnScroll';
 import BasicResourcesBox from '@site/src/components/content/BasicResourcesBox';
 
@@ -41,24 +41,22 @@ function GetToKnowPodmanSection() {
 
 const PodmanDesktopSection = () => {
   return (
-    <section className="bg-gradient-to-b from-gray-50 to-gray-100 pb-5 dark:bg-gray-900 dark:from-gray-700/25 dark:to-gray-900">
-      <div className="align-center container flex justify-center">
-        <div className="flex-row content-center">
-          <h2 className="content-center">
-            <a className="hover:no-underline hover:text-white active:text-white visited:text-white dark:hover:text-white dark:active:text-white dark:visited:text-white text-4xl mb-5 px-5  bg-blue-500 no-underline text-white dark:bg-blue-700 dark:text-white" href="https://podman-desktop.io">Podman Desktop</a>
-          </h2>
-        </div>
-      </div>
-      <div className="container flex flex-col md:flex-row items-center">
-        <div id="imgdiv" className="mx-auto w-full md:w-auto">
-          <img id="pdlogo" className="mx-auto" src="logos/optimized/podman-desktop-logo-200w-198h.webp" />
-        </div>
-        <div className="md:w-1/2 xl:w-3/4">
-          <p className="my-8 align-middle text-2xl leading-relaxed">
-            <a className="font-semibold hover:text-purple-500 text-purple-900 no-underline text-2xl leading-releaxed" href="https://podman-desktop.io">Podman Desktop</a> is Podman's graphical application that makes it easy to install and work with Podman (and
-            other container engines) on Windows, MacOS, and Linux.
-          </p>
-        </div>
+    <section className="mb-8 mt-4 lg:mt-8 xl:mb-12">
+      <SectionHeader title={podmanDesktop.title} textColor="text-blue-700 dark:text-blue-500" />
+      <div className="container flex flex-col items-center gap-8 py-4 md:flex-row md:items-center md:gap-10 lg:gap-14">
+        <img
+          src={podmanDesktop.image.path}
+          alt={podmanDesktop.image.alt}
+          className="h-40 w-auto shrink-0 object-contain md:h-44 lg:h-48"
+        />
+        <p className="min-w-0 flex-1 text-xl leading-relaxed text-gray-700 dark:text-gray-100 md:text-2xl">
+          <a
+            className="font-semibold text-purple-700 no-underline hover:text-purple-500 dark:text-blue-500 dark:hover:text-blue-300"
+            href="https://podman-desktop.io">
+            {podmanDesktop.title}
+          </a>{' '}
+          {podmanDesktop.description}
+        </p>
       </div>
     </section>
   );
diff --git a/static/data/features.ts b/static/data/features.ts
index 06633d7eb0..ca43ae4544 100644
--- a/static/data/features.ts
+++ b/static/data/features.ts
@@ -41,6 +41,16 @@ const knowPodman = {
   ],
 };
 
+const podmanDesktop = {
+  title: 'Podman Desktop',
+  description:
+    'is Podman\'s graphical application that makes it easy to install and work with Podman (and other container engines) on Windows, MacOS, and Linux.',
+  image: {
+    path: 'logos/optimized/podman-desktop-logo-200w-198h.webp',
+    alt: 'Podman Desktop logo',
+  },
+};
+
 const carouselContent = [
   {
     title: 'Find',
@@ -113,4 +123,4 @@ const learnMore = {
   },
 };
 
-export { header, knowPodman, carouselContent, learnMore };
+export { header, knowPodman, podmanDesktop, carouselContent, learnMore };

From 47365a0a4c9adb27658a03817172ad65f1e1060b Mon Sep 17 00:00:00 2001
From: aryan-srivastava <aryanyash999@gmail.com>
Date: Thu, 13 Aug 2026 12:53:43 +0530
Subject: [PATCH 3/3] fix: update Podman Desktop image visibility for
 responsive design

Signed-off-by: aryan-srivastava <aryanyash999@gmail.com>
---
 src/pages/features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/features.tsx b/src/pages/features.tsx
index ab527feef6..5adbccfd12 100644
--- a/src/pages/features.tsx
+++ b/src/pages/features.tsx
@@ -47,7 +47,7 @@ const PodmanDesktopSection = () => {
         <img
           src={podmanDesktop.image.path}
           alt={podmanDesktop.image.alt}
-          className="h-40 w-auto shrink-0 object-contain md:h-44 lg:h-48"
+          className="h-40 w-auto shrink-0 object-contain hidden md:block md:h-44 lg:h-48"
         />
         <p className="min-w-0 flex-1 text-xl leading-relaxed text-gray-700 dark:text-gray-100 md:text-2xl">
           <a