Enhance layout and styling of sponsors section

[guptaavinash09]

This PR reworks the sponsor section to fix the whitespace issue by making a few key changes, including getting rid of the weird gaps and improving the logo sizing.

Before	After

Please review and let me know if any changes are needed.

Fixes #4564

Summary by CodeRabbit

• Style
  • Improved sponsor section layout with enhanced grid spacing
  • Added interactive hover effects to sponsor items, including background changes and subtle shadows
  • Enhanced sponsor logo animations with scale effects on hover
  • Updated sponsor container styling for better visual presentation with rounded corners

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	bdfb35f
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69137d6a918a1a0008fe7786
😎 Deploy Preview	https://deploy-preview-4572--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.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[asyncapi-bot]

We require all PRs to follow Conventional Commits specification.
More details 👇🏼

 No release type found in pull request title "Enhance layout and styling of sponsors section". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[coderabbitai]

Walkthrough

The PR updates sponsor components with styling improvements. PlatinumSponsors.tsx transitions from fixed-width responsive layout to a flexible grid system with gap utilities and replaces anchor styling with flex-based, interactive containers featuring hover effects. SponsorImage.tsx adds a hover scale animation and increases maximum image height.

Changes

Cohort / File(s)	Change Summary
Sponsor Container & Layout components/sponsors/PlatinumSponsors.tsx	Container grid switched from fixed widths (md:px-4) to flexible gap-based layout (gap-x-8, gap-y-8, px-4, sm:gap-x-12, sm:gap-y-10); list item widths removed in favor of grid-governed sizing; anchor elements redesigned with flex layout, hover effects (bg-white, shadow-lg), rounded corners, and transitions.
Sponsor Image Styling components/sponsors/SponsorImage.tsx	Image className expanded to add hover scale animation (group-hover:scale-110) and transition effects (transition-transform duration-300 ease-in-out); maximum height increased from sm:max-h-12 to max-h-16.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Changes are purely styling-focused with no logic modifications
• Limited scope across two UI component files
• Homogeneous updates following consistent patterns (Tailwind class modifications)

Possibly related PRs

• fix: normalize the logos of sponsors  #3534: Directly modifies the same sponsor UI components (PlatinumSponsors.tsx and SponsorImage.tsx).

Suggested labels

ready-to-merge

Suggested reviewers

• derberg
• akshatnema
• devilkiller-ag
• sambhavgupta0705
• Mayaleeeee

Poem

🐰 With grid and gaps, the sponsors gleam so bright,
Hover scales and shadows dance with delight,
Flex containers flex with newfound grace,
Each platinum partner now has breathing space! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Enhance layout and styling of sponsors section' clearly summarizes the main changes across both modified files, which involve grid layout improvements, spacing adjustments, and enhanced styling/hover effects.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ 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 (406151e) to head (bdfb35f).

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4572   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          799       799           
  Branches       146       146           
=========================================
  Hits           799       799           

☔ 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	43
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

components/sponsors/PlatinumSponsors.tsx (1)

12-12: Fix the incorrect documentation.

The comment states "This component displays Silver Sponsors" but the component is actually PlatinumSponsors and uses platinumSponsors data.

Apply this diff:

-  * This component displays Silver Sponsors.
+  * This component displays Platinum Sponsors.

🧹 Nitpick comments (1)

components/sponsors/PlatinumSponsors.tsx (1)

26-26: Consider specifying transition properties for better performance.

The transition-all utility can be less performant than targeting specific properties. Since you're animating background and shadow on hover, consider being more specific.

Apply this diff:

-              className='group relative flex min-h-24 items-center justify-center rounded-lg p-4 transition-all duration-300 ease-in-out hover:bg-white hover:shadow-lg'
+              className='group relative flex min-h-24 items-center justify-center rounded-lg p-4 transition-[background-color,box-shadow] duration-300 ease-in-out hover:bg-white hover:shadow-lg'

📜 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 406151e and bdfb35f.

📒 Files selected for processing (2)

• components/sponsors/PlatinumSponsors.tsx (1 hunks)
• components/sponsors/SponsorImage.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

components/sponsors/PlatinumSponsors.tsx (1)

components/sponsors/PlatinumSponsorsList.ts (1)

• platinumSponsors (3-18)

⏰ 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). (2)

• GitHub Check: Lighthouse CI
• GitHub Check: Test NodeJS PR - windows-latest

🔇 Additional comments (3)

components/sponsors/SponsorImage.tsx (1)

16-23: LGTM! Hover animation and sizing improvements are well-implemented.

The transition effects integrate nicely with the group class added to the parent anchor in PlatinumSponsors.tsx. The increased max-height from max-h-9 sm:max-h-12 to max-h-16 provides better logo visibility.

components/sponsors/PlatinumSponsors.tsx (2)

20-20: Good use of gap utilities for consistent spacing.

The responsive gap utilities effectively address the whitespace issues mentioned in the PR objectives while maintaining a clean, flexible layout.

---

22-22: LGTM! Simplified list item styling.

Removing fixed-width classes in favor of container-based sizing improves layout flexibility and maintainability.