Skip to content

Conversation

@vswee
Copy link
Collaborator

@vswee vswee commented Sep 4, 2025

Hero Section

  • The hero section has been refreshed with a modern two-column grid, creating balanced spacing and a layout that adapts smoothly to smaller screens.
  • Typography has been updated to be larger and bolder, with improved letter spacing and readability.
  • The call-to-action buttons (CTAs) now have consistent gaps and alignment, with normalised margins.
  • A subtle radial highlight has been added to the background of the page container top for extra visual depth.
  • The server image has been enlarged, and a gentle float animation has been applied to the invoice image.
  • Responsiveness has been improved with cleaner desktop-to-mobile transitions and refined breakpoints.

Integrations Grid

  • A new JavaScript feature introduces a subtle parallax effect on the links in the integrations grid, powered by IntersectionObserver and requestAnimationFrame.
  • Movement amplitudes and ranges have been increased, and support has been added for per-item data-depth overrides.
  • The grid respects the prefers-reduced-motion setting for accessibility.

Contributors Section

  • A staggered “pop-in” animation has been added to the individual grid icons, triggered on scroll-in via IntersectionObserver.
  • Animations are implemented as progressive enhancements, falling back gracefully when unsupported.

What is BTCPay Server?

  • Section updated to a modern video carousel

Changed Files

  • src/js/scripts.js: integrations parallax feature and contributors wave-in animation added; parallax intensity tuned.
  • src/css/styles.css: hero layout and typography modernised; background glow introduced; server image size increased; float animation added to the invoice image; CTA spacing and responsive rules refined.
  • src/css/page-styles.css: @keyframes popWave and related classes added to stage and trigger the contributors’ wave animation.
  • Additionally the render directive for the case studies has been modified to facilitate styling adjustments.

vswee added 13 commits September 3, 2025 02:10
Add a carousel
Todo: Improve mobile UI
On small screens, the active card uses full width (no overlap). Nav arrows shift below the card.
When the user taps play on a phone, the newly embedded YouTube iframe requests fullscreen automatically.
Added ensureMinCaseStudies(list) to pad the list up to 5 items using known fallbacks (Namecheap, Bitcoin Atlantis, Bitcoin People, Bitcoin Jungle, HodlHodl) if the JSON has fewer.
HTML is now re-organised in render_html to create the desired nesting.
-removed 900px width breakpoint
-minor animation added to BTCPay invoice sample
-unneeded local changes and test adjustments removed for branch publishing
-remove incomplete changes/modernisation journal
-summarise changes in PR
@pavlenex pavlenex requested a review from dstrukt September 11, 2025 07:45
@pavlenex
Copy link
Contributor

Thanks for pushing these updates @vswee, we have it in the backlog to redesign the site from scratch at some point, so we didn't really gave much love to the current itteration. I'd leave it to @dstrukt to check a preview and review.

@dstrukt
Copy link
Member

dstrukt commented Sep 11, 2025

Will get to this asap!

Thanks for looking into this @vswee!

For this PR, and future PRs, one thing that is helpful for the more visual or functional changes is screenshots or a quick screen recording of the work for reviewers.

@pavlenex
Copy link
Contributor

pavlenex commented Nov 3, 2025

cc @dstrukt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants