website feat: adding casestudies, blogs, tsc, roadmap, events, ambassadors page, tools page, dashboard and community page

This PR introduces several new pages and updates across the site to enhance navigation and improve overall user experience.

🔧 Changes Included

Added new pages:

Case Studies
Blogs
Technical Steering Committee (TSC)
Roadmap
Events
Ambassadors
tools page
community
dashboard

Fixes and updates:

Fixed mobile and desktop layout issues
Updated heading sizes for better hierarchy and consistency
Redesigned Roadmaps page
Updated Ambassadors page content and layout
Improved Blog desktop design
Added new graphics and assets where needed

related issues : #3669

Summary by CodeRabbit

New Features
- Added comprehensive dark mode support across the entire platform
- Launched new community events and updates hub with integrated calendar
- Redesigned case studies page with interactive carousel showcase
- Added blog post filtering and pagination with category tabs
- Introduced community tooling showcase section
Bug Fixes & Improvements
- Enhanced community pages with improved search and filtering capabilities
Documentation
- Updated Code of Conduct to version 3.0 with refined enforcement guidelines

Nov 06 '25 16:11 Shriya-Chauhan

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
Latest commit	7301e348f4c46543e1cf51b0b5957615ba7d40d2
Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/6941780a601daa00081cd949
Deploy Preview	https://deploy-preview-4553--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.

Nov 06 '25 16:11 netlify[bot]

[!IMPORTANT]

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR implements extensive website modernization including a Code of Conduct 3.0 update, dark mode support across UI components, new community-focused components (FeatureCard, TSCMemberCard, ToolingCard, UpcomingEventsSection), major page refactors with pagination/filtering (blog, case studies, community, TSC, ambassadors), new icon components, and configuration updates for community meetings and events.

Changes

Cohort / File(s)	Summary
Code of Conduct & Documentation `CODE_OF_CONDUCT.md`	Comprehensive rewrite from Contributor Covenant v2 to v3.0: updated title, pledge/intro sections, renamed "Our Standards" to "Encouraged Behaviors", reorganized unacceptable behaviors into 7 principles, replaced "Our Responsibilities" with "Restricted Behaviors", added detailed enforcement ladder (warning through permanent ban), expanded scope and reporting sections, updated attribution and links.
New Icon Components `components/icons/{Book,Clipboard,CodeBrackets,Document,Gear,LightBulb,Lightning,Microphone,Play,Plus,Star,Terminal,UsersGroup,Video}.tsx`	Added 13 new icon components with className prop support and SVG rendering. LightBulb renamed from IconLightBulb to IconLightbulb. Newsroom icon signature refactored from positional to destructured props.
Community Components (New) `components/community/{FeatureCard,TSCMemberCard,ToolingCard,ToolingsShowcase,UpcomingEventsSection}.tsx`	Five new community-focused components: FeatureCard (icon/title/description card), TSCMemberCard (TSC member profile with social links), ToolingCard (animated tool showcase), ToolingsShowcase (interactive tool selection), UpcomingEventsSection (paginated events grid with navigation).
Community Components (Updated) `components/community/{Card,Header,HomeCard}.tsx`	Added comprehensive dark mode styling (dark:bg-dark-card, dark:border-, dark:text-) and improved heading/paragraph component usage across small/large card variants and headers.
Layout & Dark Mode `components/layout/{BlogLayout,GenericLayout}.tsx`, `components/form/Select.tsx`, `components/tools/{CategoryDropdown,Toggle,Checkbox}.tsx`	Extensive dark mode support added via dark: Tailwind variants for backgrounds, text, borders, shadows. BlogLayout restructured with outer wrapper for background styling. Select component expanded with dark-mode option styling.
Navigation Components (Updated) `components/navigation/{BlogPostItem,EventPostItem,Filter,DocsNav,communityItems}.tsx`	BlogPostItem redesigned with new author layout and reading time display; EventPostItem refactored with gradient header and action button; Filter dependency arrays updated; DocsNav effect dependency extended; communityItems updated to replace Events with Events & Updates.
Newsroom & Blog Components `components/newsroom/{NewsroomBlogPosts,NewsroomSection,NewsroomYoutube}.tsx`, `components/newsroom/YouTubeCard.tsx`	Removed Swiper carousel logic, replaced with static grid layouts (3 posts/videos); NewsroomSection button target changed to /community/events-and-updates; YouTubeCard converted to anchor-based clickable structure.
Tools Components `components/tools/{Filters,FiltersDisplay,ToolsCard,ToolsDashboard,ToolsList}.tsx`	Added dark mode variants throughout; Filters updated with CardData extended API (visible/setVisible props); ToolsCard enhanced with descriptions, tags, and dark mode styling; ToolsDashboard scroll behavior dependency updated; comprehensive className refinements for interactions/transitions.
CaseStudyCard & Roadmap `components/CaseStudyCard.tsx`, `components/roadmap/{GoalCardRoadmapPage,RoadmapColumn,RoadmapItem,RoadmapPill}.tsx`	CaseStudyCard refactored to Next.js Link with responsive grid layout, logo, description, and Button CTA; Roadmap components updated with dark mode support and improved styling (connectors, pills, columns with className support).
Dependency Updates `components/AlgoliaSearch.tsx`, `components/dashboard/table/Filters.tsx`, `components/navigation/Filter.tsx`	Minor effect hook dependency array expansions (actionKey/children in SearchButton; setOpen in Filters; route/checks/data in Filter) to ensure re-runs on prop/state changes.
Styling & Globals `styles/globals.css`	Added dark-mode hooks (.dark overrides), line-clamp utilities (line-clamp-{3,4,6}), smooth gradient animation (.animate-gradient), and custom Swiper carousel styling for featured and case-studies sections with dark-mode pagination variants.
Page Refactors `pages/blog/index.tsx`	Added tab-based filtering (All Posts, Community, Conference, etc.), client-side pagination (postsPerPage responsive to screen size), filter/clear controls, page selector, and empty-state messaging; currentPage/activeTab state management.
Page Refactors `pages/casestudies/index.tsx`	Major refactor: renamed component Casestudies → CaseStudies; replaced static layout with Swiper carousel (case studies section), paginated adopters table, pagination controls, and modern hero/CTA sections.
Page Refactors `pages/community/{index,tsc,ambassadors}.tsx`, `pages/community/events-and-updates.tsx`	Community index simplified with CTA sections, ToolingsShowcase, and removed legacy Card components; TSC page complete overhaul with hero, stats, filterable/paginated member directory, search, and enriched member data; Ambassadors page restructured with feature cards, video section, contribution icons grid, token cards, and CTA; new events-and-updates page with multi-section layout (hero, features, events, blog, videos, newsletter).
Page Styling `pages/tools/index.tsx`, `pages/roadmap.tsx`	Tools page: expanded decorative hero with gradient orbs, badges (Open Source, Community Driven, Production Ready), and dark-mode page wrapper. Roadmap: rewrote hero section, added Our Goals grid (GoalCardRoadmapPage items), Outcomes section with Get Involved CTA, Roadmap Graph legend and styling updates.
Configuration & Types `config/meetings.json`	Updated/added meetings: "AsyncAPI Community WG Meeting" (replaced first entry), new "AsyncAPI Design WG Meeting" and "Governance Board Meeting", updated "Marketing WG Meeting" with new calendar/URL links; added banner and date fields.
Environment & Types `next-env.d.ts`, `types/components/navigation/BlogPostType.ts`, `types/pages/community/Community.ts`	Added next-env.d.ts with Next.js type references; extended BlogPostType enum with Conference, Engineering, Community members; extended Tsc interface with optional githubUrl, twitterUrl, linkedinUrl, reposList properties.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page as Blog/Case Studies Page
    participant Filter as Filter Component
    participant State as Page State
    participant Render as Render

    User->>Page: Visit page / click filter
    Page->>Filter: Pass onFilter callback
    User->>Filter: Select filter option
    Filter->>Page: onFilter(selected)
    Page->>State: Update filters, reset pagination
    State->>Page: Re-compute filtered/paginated posts
    Page->>Render: Re-render with currentPosts
    Render->>User: Display filtered page 1
    
    User->>Page: Click next page / select tab
    Page->>State: Update currentPage/activeTab
    State->>Page: Compute page slice
    Page->>Render: Render new slice
    Render->>User: Display new page content

sequenceDiagram
    participant ToolingsShowcase
    participant ToolData as Tool Selection State
    participant ToolingCard
    participant UI as Rendered Card

    ToolingsShowcase->>ToolData: Mount with first tool selected
    User->>ToolingsShowcase: Click tool tag
    ToolingsShowcase->>ToolData: Set isShuffling = true
    ToolData->>ToolingCard: Pass isShuffling prop
    ToolingCard->>UI: Apply rotation/translation animation
    ToolingsShowcase->>ToolingsShowcase: After 300ms timeout
    ToolingsShowcase->>ToolData: Update selected tool + isShuffling = false
    ToolData->>ToolingCard: Pass new tool data
    ToolingCard->>UI: Render new tool, clear animation
    UI->>User: Display selected tool

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

Page refactors (blog, case studies, community, TSC, ambassadors): Major structural changes with new filtering, pagination, and component composition; verify state management correctness and edge cases (empty states, boundary page navigation).
Configuration changes (config/meetings.json): Verify meeting entries are correctly structured and don't conflict with existing integrations; ensure calendar links and URLs are valid.
New community components (ToolingsShowcase, UpcomingEventsSection, TSCMemberCard): Review data flow, prop passing, and interaction logic; verify list rendering and pagination logic (off-by-one errors, ellipses handling).
Dark mode consistency: Verify dark: Tailwind classes are applied consistently across all updated components; check contrast ratios and readability in dark mode.
Type extensions (Tsc interface, BlogPostType enum): Ensure new fields (githubUrl, twitterUrl, linkedinUrl, reposList) are populated in data sources and used correctly across components.
Icon components standardization: Verify all new icon components follow consistent signature patterns (className prop, default empty string, SVG rendering).
Effect dependency arrays: Review updated dependencies in SearchButton, Filters, Filter, and DocsNav to ensure effects re-run at appropriate times and avoid stale closures.

Possibly related PRs

asyncapi/website#4475: Updates CODE_OF_CONDUCT.md with identical Contributor Covenant 3.0 rewrite (title, sections, enforcement ladder, attribution).
asyncapi/website#4410: Modifies config/meetings.json with overlapping meeting entry updates (AsyncAPI Community WG Meeting, Governance Board Meeting).
asyncapi/website#4403: Refactors pages/casestudies/index.tsx with layout and case studies rendering changes.

Suggested labels

do-not-merge

Suggested reviewers

derberg
akshatnema
sambhavgupta0705
anshgoyalevil
Mayaleeeee
vishvamsinh28
TRohit20

Poem

🐰 Hops and twitches with glee ✨

Dark nights now shimmer with care, A thousand icons in the air, Communities gather, events aligned, Pages reborn with filtering refined— The AsyncAPI warren shines anew, hoorah!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The title is partially related to the changeset—it mentions adding multiple pages but does not capture the full scope including dark mode styling, component refactoring, and styling updates that constitute a significant portion of the changes.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

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

Nov 06 '25 16:11 coderabbitai[bot]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :warning: Please upload report for BASE (website-ui@702e050). Learn more about missing BASE report.

Additional details and impacted files

@@              Coverage Diff               @@
##             website-ui     #4553   +/-   ##
==============================================
  Coverage              ?   100.00%           
==============================================
  Files                 ?        22           
  Lines                 ?       778           
  Branches              ?       144           
==============================================
  Hits                  ?       778           
  Misses                ?         0           
  Partials              ?         0

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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

Nov 07 '25 14:11 codecov[bot]

@Shriya-Chauhan Starting to review this, will complete the review by tomorrow.

Nov 12 '25 17:11 devilkiller-ag

The scrollbar should not appear at the bottom of the navmenu dropdown.

Nov 13 '25 17:11 devilkiller-ag

On load, the dark mode should appear instantly instead of showing a transition from light mode:

https://github.com/user-attachments/assets/32be8528-a64b-4f43-808e-7919c6ba604f

Nov 13 '25 17:11 devilkiller-ag

The font colour of the author's name in the case study and the title of the TOC should be changed to something lighter in the dark mode.

Also, the colour of the left border of the TOC is very sharp as compared to background in the dark mode, please change it.

ref: https://deploy-preview-4553--asyncapi-website.netlify.app/casestudies/adeogroup

Nov 13 '25 17:11 devilkiller-ag

The go-to page dropdown on the case studies page is not working:

https://github.com/user-attachments/assets/4f031cf0-46d1-459e-b208-d5b7c77c59d8

Nov 13 '25 17:11 devilkiller-ag

The pagination "go to page" dropdown should not go out of the screen, keep the height restricted to 3-4 options. Also, increase the width of the box and the dropdown to make the content fit correctly.

ref: https://deploy-preview-4553--asyncapi-website.netlify.app/blog

Nov 13 '25 17:11 devilkiller-ag

The hover background colour and the search icon color are too similar in dark mode, making it hard to recognise.

Nov 13 '25 17:11 devilkiller-ag

The pagination number text and background colors are too similar in dark mode, making them hard to read.

Also, the "Go to page" dropdown box width is too small, the text and the dropdown icon are overlapping.