Rework landing and navigation for gamified quest/achievement onboarding#7
Open
cto-new[bot] wants to merge 4 commits into
Open
Rework landing and navigation for gamified quest/achievement onboarding#7cto-new[bot] wants to merge 4 commits into
cto-new[bot] wants to merge 4 commits into
Conversation
…mified UX Refactored all landing, layout, NavBar, and Footer components to adopt a pixel-themed, 8-bit UI in line with a gaming/quest adventure feel. This change modernizes visual identity and amplifies engagement on the landing page. - Introduced new `PixelPanel`, `PixelButton`, `PixelTag`, and `PixelProgress` primitives for consistent 8-bit style - Overhauled NavBar, Footer, and wrappers to use pixel components and grid backgrounds, ensuring routing/session logic is preserved - Redesigned hero section featuring animated pixel-art landscape with React Three Fiber and gamified CTAs - Refactored features/steps into quest-style cards and tracker, using gamified copy and visuals - Enhanced layout spacing, backgrounds, and breakpoints for responsiveness with the new retro aesthetic No breaking changes or migrations required. User-visible overhaul of landing experience.
Rebuild Landing Page with Pixel-Themed, Gamified UI/UX
Reworked the Landing page architecture to use quest/achievement-themed layouts and improved the navigation UX. Introduced modular PixelCard and RetroBadge primitives and subcomponents for better reusability. Updated responsiveness, alignment, and copy hierarchy for a more gamified, intuitive onboarding experience. - Replaced section layout and order for clearer storytelling - Redesigned NavBar as HUD-style, added pixel tooltips, clearer CTAs, better mobile menu - Refactored Features, HowItWorks, AdditionalFeatures into quest and achievement grids using new primitives - Added PixelCard, RetroBadge, QuestCard, AchievementList components - Refined breakpoints and Tailwind utility usage for grid consistency - Sections now use consistent 8px grid and updated container spacing User navigation is more intuitive and all sections match the retro design system, improving onboarding.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
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.
Summary
This PR overhauls the landing page navigation and content flow, introducing an intuitive quest- and achievement-driven onboarding embedded in a retro, 8-bit themed system. The layout, components, and responsive styles have been reworked for immersion and clarity.
Details