Multiple banners - #24
Merged
Merged
Conversation
Convert SocialProofSection into an accessible rotating banner carousel. Adds randomized banner order, timed rotation, pause-on-hover/focus, and reduced-motion support. Implements enter/exit animations, pixel dissolve effect, banner visuals (time block and production timeline), and indicator controls with ARIA attributes. Extracts timing constants and updates styles for responsive layout and animation keyframes.
Adds a new 'open-source' banner to the social proof carousel that displays the live GitHub star count for the Autobase repository. The component fetches the count from the GitHub API and caches it in sessionStorage for 15 minutes to minimize API calls. Includes a fallback count (4300) for when the API is unavailable. Also adds subtitle support to banners with accent styling.
Introduce an 'Extensions' banner to the SocialProofSection to showcase PostgreSQL extensions. Adds EXTENSION_NAMES constant, new banner entry, and BannerVisual rendering that links to /docs/extensions/list (with aria-label and focus-visible support). Styles updated (styles.module.css): layout/height adjustments for banners/slides, extensionCatalog styles (grid, featured item, CTA), and responsive tweaks for smaller viewports. Files changed: src/components/SocialProofSection/index.js and styles.module.css.
Compute and display how long Autobase has been in production. Adds AUTOBASE_INITIAL_RELEASE_DATE and a hourly refresh constant, plus getProductionHistory, formatProductionAge, and useProductionHistory hook. Uses the dynamic age as the banner accent for the production-history banner, updates BannerVisual to render the current year range, and adjusts rendering to apply a new .afterText style for the banner's trailing text. Includes interval cleanup and minor banner data updates.
Remove the "VIEW ALL EXTENSIONS" CTA from the SocialProofSection BannerVisual and clean up unused .catalogCta CSS rules. Updated selectors to only target .catalogHeader and its <b> child.
Reduce banner height, padding, and gap spacing on mobile devices (max-width: 600px) for a more compact and optimized layout on smaller screens.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Convert SocialProofSection into an accessible rotating banner carousel. Adds randomized banner order, timed rotation, pause-on-hover/focus, and reduced-motion support.