fix(ui): correct Tailwind classes and add missing alt text

[ritikahirwar8168-dev]

Summary

This PR fixes three small but user-facing UI issues on the Podman website: invalid Tailwind utility classes in the community meetings grid, a stray typo in the features carousel tab styling, and a missing alt attribute on the Podman Desktop logo. Together, these changes improve layout alignment on the community page and accessibility on the features page.

Fixes #643
Fixes #645
Fixes #646

Also closes #638 and #641 (duplicate reports of the same issues).

---

Problem

1. Invalid Tailwind classes in community meetings grid (#645 / #641)

In CommunityMeetingsCardGrid, the layout used CSS property-style class names instead of valid Tailwind utilities:

// Before
<div className="justify-content-center align-items-center custom-card-grid-root flex">

...

<div className="align-items-center card-container ... justify-center ...">

Tailwind does not ship justify-content-center or align-items-center. The browser ignores those classes, so the meetings card grid and its child containers were not centered as intended.

Affected page: /community

---

2. Stray 0 class in features carousel (#643 / #638)

In FeaturesCarousel, the inactive tab state included a leading 0 in the class string:

// Before

: '0 bg-white text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:shadow-gray-700'

That 0 is treated as a literal class name and adds invalid markup. It does not break rendering in most browsers, but it is a clear typo and should be removed.

Affected page: /features

---

3. Missing alt on Podman Desktop logo (#646)

On the features page, the Podman Desktop logo image had no alt attribute:

// Before

<img id="pdlogo" className="mx-auto" src="logos/optimized/podman-desktop-logo-200w-198h.webp" />

Without alt, screen readers fall back to reading the filename, which hurts accessibility and fails WCAG 2.1 image text-alternative guidance. Other images in the codebase already follow the alt pattern (e.g. ThumbCard, PageHeader, ColoringBookSection).

Affected page: /features

---

Solution

1. Use correct Tailwind centering utilities

// After

<div className="custom-card-grid-root flex items-center justify-center">

...

<div className="card-container mb-4 flex flex-1 flex-col flex-wrap items-center justify-center ...">

File changed: src/components/layout/CommunityMeetingsCardGrid/index.tsx

---

2. Remove stray 0 from inactive tab classes

// After

: 'bg-white text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:shadow-gray-700'

File changed: src/components/content/FeaturesCarousel/index.tsx

---

3. Add descriptive alt text to Podman Desktop logo

// After

<img

id="pdlogo"

className="mx-auto"

src="logos/optimized/podman-desktop-logo-200w-198h.webp"

alt="Podman Desktop logo"

/>

File changed: src/pages/features.tsx

---

Files Changed

File	Change
src/components/layout/CommunityMeetingsCardGrid/index.tsx	Replace invalid Tailwind classes with items-center / justify-center
src/components/content/FeaturesCarousel/index.tsx	Remove stray 0 from inactive tab class string
src/pages/features.tsx	Add alt="Podman Desktop logo" to logo image

---

Test Plan

• Run yarn build locally and confirm the site builds without errors.

• Visit /community and verify the community meetings card grid is centered correctly on desktop and mobile.

• Visit /features and confirm the features carousel tabs still render correctly for active and inactive states.

• Inspect the Podman Desktop logo on /features and confirm alt="Podman Desktop logo" is present.

• Optionally test with a screen reader or browser accessibility tools to confirm the logo is announced correctly.

• Toggle dark mode on both pages and confirm layout/styling are unchanged aside from the intended centering fix.

---

Screenshots / Recordings

N/A — these are minor CSS/class and accessibility fixes with no visual redesign intended. The main visible change should be improved centering on the community meetings grid.

---

Checklist

• Certify you wrote the patch or otherwise have the right to pass it on as an open-source patch by signing all commits (git commit -s).

• Referenced issues using Fixes: #643, Fixes: #645, and Fixes: #646 in the commit message.

• PR description, commit message, and GitHub comments are human-written, per LLM Policy.

---

Additional Notes

This is a focused, low-risk UI fix with no dependency changes, no new components, and no changes to page data or routing. It aligns with existing project conventions for image alt attributes and Tailwind utility usage elsewhere in the codebase.

[ritikahirwar8168-dev]

@ashley-cui , could you please review..