Skip to content

Fix/features hero section #680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aryan-Srivastava wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix/features hero section #680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56867ac
refactor: improve layout in PageHeader and features components.
Aryan-Srivastava Aug 12, 2026
d1aa284
feat: add Podman Desktop section with dynamic content
Aryan-Srivastava Aug 12, 2026
47365a0
fix: update Podman Desktop image visibility for responsive design
Aryan-Srivastava Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 47 additions & 36 deletions src/components/layout/PageHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};
Expand All @@ -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>
);
Expand All @@ -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>
);
Expand Down
56 changes: 29 additions & 27 deletions src/pages/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
);
})}
Expand All @@ -37,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 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
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>
);
Expand Down Expand Up @@ -195,7 +197,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 />
Expand Down
12 changes: 11 additions & 1 deletion static/data/features.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -113,4 +123,4 @@ const learnMore = {
},
};

export { header, knowPodman, carouselContent, learnMore };
export { header, knowPodman, podmanDesktop, carouselContent, learnMore };