style: missing vertical spacing between navbar and announcement banner on tools, community, case studies, blog, and roadmap pages #4549

[erankitkr011]

Fixes #4549

Summary by CodeRabbit

• Style
  • Improved vertical spacing for announcement banners.
  • Enhanced roadmap cards with refined styling including updated backgrounds, borders, and shadows for better visual hierarchy.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	333cdc9
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/690cb84ac0f9120008ba47c5
😎 Deploy Preview	https://deploy-preview-4550--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

This PR adds vertical spacing to the AnnouncementHero component and applies styling classes to three card containers on the Roadmap page. Both changes are purely presentational, addressing visual spacing and design consistency without modifying any logic or data flow.

Changes

Cohort / File(s)	Summary
Announcement Hero Spacing components/campaigns/AnnouncementHero.tsx	Added top margin (mt-4) to the banner container div to increase vertical spacing below the navbar
Roadmap Card Styling pages/roadmap.tsx	Applied styling classes (white background, border, rounded corners, shadow, padding, and flex column layout with full height on large screens) to three roadmap outcome card containers

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify the mt-4 margin properly addresses spacing issues on all pages where AnnouncementHero is used
• Confirm the Roadmap card styling matches design specifications and renders correctly on all screen sizes

Possibly related PRs

• fix: banner overlapping with Navbar #4013: Modifies banner container and alignment classes in AnnouncementHero.tsx component
• fix: add AnnouncementBanner to all pages in website #3712: Adds and renders AnnouncementHero component across multiple page layouts
• fix: redesign 'Latest News' section in Community Newsroom #3982: Updates presentational classes in AnnouncementHero.tsx for layout and spacing adjustments

Suggested labels

ready-to-merge

Suggested reviewers

• derberg
• akshatnema
• sambhavgupta0705
• anshgoyalevil
• Mayaleeeee

Poem

🐰 Spacing blooms where margins grow,
Cards now styled from top to toe,
Visual gaps and borders bright,
UI breathing, oh what delight!
No more cramping, breathing room—
Design flourishes, no gloom! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR partially addresses issue #4549 by adding vertical spacing to AnnouncementHero.tsx and roadmap.tsx, but the changes do not appear to cover all five pages (Tools, Community, Case Studies, Blog) mentioned in the issue requirements.	Verify that changes have been applied to all five affected pages listed in issue #4549, or confirm which pages are addressed and update the title accordingly.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Out of Scope Changes check	✅ Passed	The code changes consist solely of styling modifications (margins and CSS classes) directly related to fixing the vertical spacing issue described in linked issue #4549, with no unrelated or out-of-scope changes detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The title clearly summarizes the main change: adding vertical spacing between navbar and announcement banner across multiple pages, which aligns with the raw_summary showing mt-4 added to AnnouncementHero and styling changes to roadmap cards.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b5a86b7) to head (333cdc9).

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4550   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          780       780           
  Branches       144       144           
=========================================
  Hits           780       780           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	41
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4550--asyncapi-website.netlify.app/

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b5a86b7 and 333cdc9.

📒 Files selected for processing (2)

• components/campaigns/AnnouncementHero.tsx (1 hunks)
• pages/roadmap.tsx (3 hunks)

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Lighthouse CI

🔇 Additional comments (1)

components/campaigns/AnnouncementHero.tsx (1)

64-64: Spacing change verified across all affected pages.

The mt-4 addition to the internal container div in AnnouncementHero is a component-level change that consistently applies to all affected pages. All five pages mentioned in the PR—Tools, Community, Case Studies, Blog, and Roadmap—use GenericLayout, which renders the AnnouncementHero component. This design ensures uniform spacing without needing page-specific modifications.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Clarify the relationship between goal card styling and PR objective.

These changes add visual styling (white background, border, shadow, padding, flex layout) to the three goal cards, which improves their presentation. However, the PR objective states the purpose is to fix "missing vertical spacing between navbar and announcement banner."

It's unclear how styling these goal cards relates to the navbar/announcement spacing issue. Consider whether these changes should be in a separate PR for better change tracking and clarity.

If these changes are addressing a separate styling concern on the Roadmap page, please update the PR description to reflect the additional scope. Otherwise, consider moving these changes to a dedicated PR.

Also applies to: 552-552, 575-575

🤖 Prompt for AI Agents

In pages/roadmap.tsx around lines 524, 552 and 575, the added card styling
(bg-white, border, shadow, p-6, flex, etc.) is unrelated to the stated PR
objective (fixing vertical spacing between navbar and announcement banner).
Either remove/revert these styling changes from this PR (restore the previous
classNames at those lines and move the styling edits into a new branch/PR), or
keep them but update the PR description to explicitly state the additional scope
(styling changes to the goal cards) and why they are included; implement one of
these two options and push the corresponding commit(s).