PozoAppUptoWebinar/TODO.md

Update Plan: Features Section Alignment Improvement

Target

Improve alignment of the "What do you get to see?" features section for better visual consistency and professional minimal layout.

Current Situation

• features-grid uses flexbox with flex-wrap and justify-content: center.
• feature-card has no fixed width or flex-basis, causing uneven spacing or alignment.
• Cards rely on natural flex width from content, which may cause inconsistent sizes.

Plan

1. Change .features-grid layout from flexbox to CSS grid for precise control.

   • Use grid-template-columns with repeat(auto-fit, minmax(250px, 1fr)) for responsive column number.
   • Set uniform gaps both vertically and horizontally (e.g., gap: 2rem).

2. Assign a max-width and consistent padding to .feature-card.

   • Ensure equal size cards across rows.
   • Use a slightly reduced box shadow for a minimal look.

3. Adjust .features-grid margin-top or padding for good spacing from headline.

4. Add media queries if necessary for smaller screen breakpoints for good stacking and consistent card width.

5. Maintain existing font sizes, colors, and icons but ensure consistent vertical alignment for icon, title, and description.

Follow-Up

• Test updated layout across desktop and mobile widths.
• Check for visual balanced spacing and alignment.
• Verify no overlap or overflow issues.

---

This plan will apply updates only to the features grid and card styles in src/Pages/Webinar/WebinarLandingPage.scss.

---

Please confirm if I can proceed with these precise alignment focused changes for the features section.