Fix image loading issues and improve website performance and UI#393
Merged
Conversation
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
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.
🔗 View agent run: https://app.netlify.com/projects/arvio-tv/agent-runs/6a35534448f784cd908f353b
🤖 Agent: Claude
💬 Prompt: See screenshots. Some images are not loading. Also on pc the website is a bit slow and buggy. Perhaps you can fix all this while making the whole ui better and more proffesional.
✅ Result: The ARVIO landing page had a prominent broken element in its hero: the rotating 3D showcase pointed at five image files (
1.jpgthrough5.jpg) that don't exist in the project, so visitors saw empty dark cards instead of artwork. The same showcase was also a major source of the sluggish, janky feel on desktop, and a leftover developer note was being rendered as visible text on the page.What changed
Fixed the broken hero images. The showcase now displays real ARVIO screenshots that already ship with the site — Home, Live TV, Details, Collections, and the 4K HDR player. The cards were reshaped to a proper 16:9 aspect ratio so each screenshot fills its card exactly with no awkward cropping, and the rotation geometry was retuned so the cards sit in an evenly spaced, readable arc rather than overlapping.
Made the page faster and smoother on PC. Each of the five constantly-rotating cards was applying a live blur effect (
backdrop-filter) to whatever was behind it, forcing the browser to recompute an expensive blur on every animation frame. Since the cards now show solid screenshots, that blur was both invisible and wasteful, so it was removed. The cards were also given rendering hints (backface-visibilityandwill-change) so the browser composites the spinning carousel efficiently and hides cards as they turn away — eliminating the main cause of the stutter.Polished the presentation. Each showcase card now carries a small labelled caption so the rotating screenshots read as an intentional product tour. The bottom-of-card gradient was tuned for caption legibility, and the hover lift was refined. A developer placeholder note in the Screenshots section ("drop screenshots into /screenshots folder to replace placeholders") that was accidentally visible to visitors was replaced with proper caption copy.
All image references on the page were verified to resolve to files that actually exist, so there are no remaining missing assets.