fix(ui): remove expensive blurs and fix missing light/dark themes

[hussainjamal760]

Resolves: #539

Summary

This PR redesigns the "Running a container & listing running containers" section on the /get-started page with a modern, developer-focused interface while improving theme consistency and runtime performance.

The previous implementation had outdated styling, inconsistent light/dark mode contrast, and expensive visual effects that impacted scrolling performance. This update introduces a cleaner card-based layout, enhanced terminal presentation, and better integration with the existing Docusaurus theme system.

---

What's Changed

Modern Card-Based Layout

• Refactored the section into individual step cards for better content organization.
• Added improved spacing, borders, and subtle shadows for clearer visual separation.
• Created a cleaner hierarchy between explanations, commands, and notes.

---

Enhanced Terminal Experience

Improved the terminal snippets by enhancing the <CodeBlock> presentation:

• Added macOS-style terminal window controls:
  • 🔴 Red
  • 🟡 Yellow
  • 🟢 Green
• Improved command visibility and readability.
• Created a more realistic developer terminal experience while keeping the existing functionality intact.

---

Improved Light & Dark Mode Support

Fixed theme inconsistencies by aligning styles with the project's Tailwind configuration.

Changes include:

• Replaced unsupported or inconsistent color variants (such as slate) with configured gray variants.
• Improved contrast between:
  • Backgrounds
  • Text
  • Borders
  • Accent elements
• Ensured the section renders correctly in both Light and Dark modes.

---

Performance Improvements

Removed expensive CSS effects that were negatively affecting rendering performance:

• Removed:
  • backdrop-blur
  • blur-[120px]

Replaced them with lightweight alternatives that maintain visual depth without introducing unnecessary GPU workload or scroll lag.

---

Redesigned Callout Notes

Improved the presentation of informational notes by adding:

• Custom icons.
• Clear visual hierarchy.
• Accent left borders.
• Better spacing and readability.

This makes important guidance easier to discover while reading through the setup flow.

---

Why This Change?

This update improves both usability and maintainability by:

• Providing a more polished onboarding experience for new Podman users.
• Making terminal examples easier to understand.
• Ensuring consistent theme behavior.
• Reducing unnecessary rendering overhead.
• Aligning the page design with modern documentation standards.

---

Testing

Verified locally by testing the following scenarios:

• ✅ All container commands continue to work correctly.
• ✅ Light mode displays proper contrast and readability.
• ✅ Dark mode displays proper contrast and readability.
• ✅ Terminal blocks render correctly with the new styling.
• ✅ Notes and callouts display consistently.
• ✅ Scrolling performance is improved after removing heavy blur effects.

---

How to Test

1. Start the local development server:

   yarn start

2. Navigate to:

   /get-started
   

3. Scroll to the "Running a container & listing running containers" section.

4. Verify:

   • Step cards render correctly.
   • Terminal snippets display macOS-style controls.
   • Light and Dark mode themes remain readable.
   • Notes and callouts are styled correctly.
   • Scrolling remains smooth.

---

Screenshots

Light Mode

Dark Mode

[hiteshm0]

hi @hussainjamal760, every commit has to be signed-off ( commit -s), if you do so then the DCO test will pass.

NOTE: I'm a student aswell and not a maintainer.

[hussainjamal760]

hi @hussainjamal760, every commit has to be signed-off ( commit -s), if you do so then the DCO test will pass.

NOTE: I'm a student aswell and not a maintainer.

@hiteshm0 Thanks for catching that! I'll amend the commit with a sign-off.