Repository navigation
feat: marketing-landing-page - #917
Merged
Merged
Conversation
Elevate the marketing landing page (issue 0xVida#865) with scroll-driven micro-animations and a polished first impression. - src/app/page.tsx: above-the-fold (navbar, announcement, hero) animates in on load; every section below is wrapped in <Reveal> to fade-and-rise into view on scroll. Reuses the existing high-fidelity section components. - src/components/Reveal.tsx: scroll-reveal wrapper built on one IntersectionObserver per section (no animation library), unobserving after reveal and honouring prefers-reduced-motion via CSS. - src/components/ScrollProgress.tsx: top reading-progress bar updated inside requestAnimationFrame with a passive listener (no re-renders per scroll). - globals.css: reduced-motion-aware smooth scrolling for anchor navigation. Performance: GPU-only transforms, IntersectionObserver + rAF, and next/image (hero priority, below-fold lazy) keep it light. Verified via tsc --noEmit, eslint, next build (all pass) + functional screenshots (hero, full page, mobile).
|
@Miracle656 is attempting to deploy a commit to the vidatg's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Miracle656 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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.
What & why
Implements issue #865 — Landing Page for Stellar Developer Community. Elevates the marketing landing page into a sleek, modern experience with scroll-driven micro-animations, for a stunning first impression and high-conversion onboarding.
All changes are confined to the
frontend/directory.Acceptance criteria
IntersectionObserverper section (no animation library) that unobserves after revealing; the progress bar updates insiderequestAnimationFramewith a passive listener (zero re-renders per scroll); imagery usesnext/image(heropriority, below-the-fold lazy). All animations honourprefers-reduced-motion.Deliverable + supporting files
src/app/page.tsx(marketing version) — composes the existing high-fidelity sections (Hero, Features, Products, News, Trust, Templates, Pricing, CTA) with on-load entrance + scroll-reveal animations.src/components/Reveal.tsx— reusable scroll-reveal wrapper (IntersectionObserver, reduced-motion aware).src/components/ScrollProgress.tsx— rAF-driven top progress bar.src/app/globals.css— reduced-motion-awarescroll-behavior: smooth.Verified output
Screenshots
Captured via system Chrome — hero (above the fold), the full page with all scroll-revealed sections, and mobile. Drag the images into this description:
landing-hero.pnglanding-full.pnglanding-mobile.png