Conversation
…ctionality - Implemented a desktop dropdown menu with GitHub and Sponsor links. - Created a mobile menu with navigation links and theme toggle. - Added theme toggle functionality with animations for light, dark, and system preferences. - Introduced a chevron-down icon for dropdown indicators. - Enhanced mobile menu with GSAP animations for smoother transitions.
…ity and functionality
…sibility and consistency
…e theme toggle in navigation bar
…yling adjustments
…nization and maintainability
…es for improved layout and structure
…onally load analytics script in production
…lwind CSS classes for dark mode support
…r improved performance and layout
…layout and accessibility
…button styling for improved user experience
… on scroll into view
simonhamp
requested changes
Aug 28, 2025
simonhamp
left a comment
simonhamp
left a comment
Member
There was a problem hiding this comment.
This is in great shape @HassanZahirnia 🙏🏼
Only one thing I've spotted is to do with the new menu buttons on mobile. On my iPhone 16 Pro, the "Desktop" menu goes off the edge of the screen
It would be great if the box could position appropriately in the viewport
Member
|
One other comment, that's not directly related to this PR as it was visible before: when opening the mobile menu (the 3 dashes on the top-right), there's quite a bit of jank esp. on mobile devices. I think there may be too much animation happening as that flyover appears and the browser has some trouble keeping up |
Collaborator
Author
|
Thank you @simonhamp ! 🙌🌸 ✅ I've fixed the dropdown alignment on mobile. |
simonhamp
approved these changes
Aug 28, 2025
HassanZahirnia
deleted the
hassan/asg-36-enhance-the-homepage-to-feel-more-mobile-focused-and
branch
August 28, 2025 17:29
SimonTingle
pushed a commit
to SimonTingle/nativephp.com
that referenced
this pull request
Sep 19, 2026
* 🚀 Upgrade theme toggle * ✨ Add responsive navbar components with theme toggle and dropdown functionality - Implemented a desktop dropdown menu with GitHub and Sponsor links. - Created a mobile menu with navigation links and theme toggle. - Added theme toggle functionality with animations for light, dark, and system preferences. - Introduced a chevron-down icon for dropdown indicators. - Enhanced mobile menu with GSAP animations for smoother transitions. * ✨ Refactor desktop dropdown menu for improved accessibility and functionality * ✨ Enhance device dropdown with improved styles and accessibility features * ✨ Refactor device dropdown components for improved structure and accessibility * ✨ Update device icons and dropdown components for improved accessibility and functionality * ✨ Refactor device dropdown components for improved layout and accessibility * ✨ Update device dropdown styles for improved visual feedback and accessibility * ✨ Update device dropdown and navigation bar styles for improved accessibility and consistency * ✨ Enhance theme toggle functionality with improved preference cycling and hover hint * ✨ Update theme toggle hover hint for improved visibility and integrate theme toggle in navigation bar * ✨ Update device dropdown styles for improved spacing and visual consistency * 🎨 Refactor documentation components and update structure * 🚚 Rename early-adopter and mobile to pricing * ✨ Enhance mobile menu theme toggle with improved accessibility and styling adjustments * 🚚 Move hero section content to a separate component for improved organization and maintainability * 🚚 Refactor pricing, privacy policy, terms of service, and welcome pages for improved layout and structure * 💄 Add mockup images & decoration lines to hero section * ✨ Enhance hero section with video introduction and improved mockup layout * ✨ Add demo app section with links to Play Store, App Store, and GitHub * ✨ Enhance hero section with animated headline and video integration * 💄 Update hero section layout and styling for improved visuals * ✨ Add feature list to hero section * ✨ Refactor feature list into an infinite vertical marquee and conditionally load analytics script in production * 💄 Refactor icon components to use currentColor for fill and apply Tailwind CSS classes for dark mode support * 💄 Refactor icon components to use CSS variables for colors * 💄 Adjust margin for demo app section and refine marquee positioning for better layout * 💄 Update hero section styles for improved layout and accessibility * 💄 Add width, height, and loading attributes to hero section images for improved performance and layout * 💄 Update image classes in hero section for improved dark mode support and performance * ✨ Add Laravel welcome page * 💄 Enhance demo app section with animation and improved layout * 💄 Refactor animations in hero section to use GSAP for improved performance and consistency * 💄 Update hero section layout and styles for improved responsiveness and visual consistency * 💄 Update hero section typography and styles for improved responsiveness * 💄 Refactor hero section mockups and add horizontal marquee for feature list * 💄 Adjust spacing and layout in hero section for improved visual consistency * 💄 Enhance hero section styles for improved responsiveness on 2xl screens * 💄 Add introduction video for mobile viewport and clean up unused video section * 💄 Replace motion.js animations with GSAP for improved performance and smoother transitions * 💄 Adjust blur element positions for improved visual alignment in hero section * 💄 Update hero and partners sections for improved layout and styling; add featured sponsor card component * ♻️ Refactor sponsor components: replace featured sponsor card with featured partner card and update related references * 💄 Update featured partner card styles and enhance partners section layout * 💄 Add partner card component and update partners section for improved layout * 💄 Enhance featured partner card layout and styling; adjust partners section for improved spacing and alignment * 💄 Update styling for featured partner card and partners section; adjust padding and layout for improved responsiveness * 💄 Update featured partners layout and enhance partner call-to-action styling for improved visibility and engagement * 💄 Enhance partner call-to-action section with improved styling and responsiveness for better engagement * 💄 Add explainer section and phone wireframe illustration for enhanced user understanding * 💄 Add overflow handling and grid illustration to explainer section for improved layout and visual appeal * 💄 Enhance explainer section with additional vertical and horizontal lines for improved visual structure * 💄 Improve z-index and color consistency for lines and illustrations in explainer section for enhanced visual clarity * 💄 Update explainer section with enhanced phone wireframe illustration and additional PHP runtime details for improved user clarity * 💄 Enhance explainer section with phone wireframe illustration, PHP runtime details, and additional core components for improved user understanding * 💄 Refine layout and styling in explainer section for improved visual consistency and clarity * 💄 Adjust layout and spacing in explainer section, and add arrow illustrations for enhanced visual guidance * 💄 Adjust layout and spacing in explainer section for improved visual consistency and clarity * 💄 Update explainer section with enhanced descriptions, improved layout, and new icons for better user engagement and clarity * 💄 Add favorite tools card to explainer section * 💄 Refactor skills section for improved maintainability and consistency * 💄 Enhance layout and styling for improved responsiveness and visual consistency across components * 💄 Update explainer section with enhanced layout, improved spacing, and additional skills icons for better user engagement * 💄 Improve layout and styling for explainer and partners sections to enhance text alignment and visual consistency * 💄 Update hero component for improved text sizing and layout consistency across screen sizes * 💄 Update partners and explainer sections for improved text sizing and visual consistency * 💄 Update skill icons in explainer section and adjust text size in partners section for improved visual consistency * 💄 Add new SVG icons for document, browser, and startup components; enhance explainer section with step-by-step guide for better user engagement * 💄 Enhance explainer section with new layout and content; add category pills and improve SVG icons for better visual appeal * 💄 Add new icons for eCommerce, social apps, and field services; update existing icons to use currentColor for better theming support * 💄 Update category pill and explainer sections for improved layout and visual consistency; adjust padding, text sizes, and flex properties * 💄 Update icon components to use currentColor for improved theming support; adjust fill properties for better visual consistency * 💄 Update gradient backgrounds in explainer section for improved theming consistency * 💄 Enhance accessibility by adding aria attributes and improving link security with rel attributes across multiple components * 💄 Update explainer section layout for improved responsiveness; add health icon for enhanced visual representation * 💄 Update partner tagline and description for improved clarity and relevance * 💄 Adjust margin-top for the Marcel Talk section for improved layout consistency * 💄 Add route names for privacy policy and terms of service views for improved clarity * 💄 Refactor footer links for improved organization and clarity; update navigation structure and aria labels * 💄 Enhance footer navigation layout and animations for improved user experience; adjust spacing and remove redundant classes * 💄 Update hover text color for footer links to enhance visibility and consistency across themes * 💄 Refactor footer structure for improved accessibility and organization; update headings and aria labels * ✨ Add brand assets page and update navigation links for improved accessibility and clarity * 💄 Update brand assets page content for clarity and consistency; enhance accessibility and improve text structure * ✨ Add primary logo and download button to brand assets page; enhance layout and accessibility * 💄 Enhance primary logo section with hover effect and update download button styling for improved user experience * ✨ Add brand asset SVGs and create asset card component * ✨ Add grayscale SVG logo for NativePHP desktop version * ⬆️ Update Tailwind CSS and Vite dependencies * ✨ Add animation to asset list on scroll into view * ✨ Add GSAP animations for elements in explainer and partners sections on scroll into view * ✨ Refactor icon components to use CSS variables for colors and improve consistency * ✨ Update heading styles for consistency and add mini logo component * ✨ Adjust layout spacing and improve text styles in explainer section * ✨ Enhance hover and active states for device dropdown item styles * Add TestFlight button * Hide repo link (for now) * Remove video * Hide Mobile GitHub link (for now) * Fix Desktop GitHub link * Remove v1 banner * ✨ Add alignment option to device dropdowns and update class binding * 🔥 Refactor mobile menu component by removing GSAP animations and simplifying class bindings * Adjust banner copy --------- Co-authored-by: Simon Hamp <simon.hamp@me.com>
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
2 participants
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’s New
/mobilenow redirects to/pricing— the old Mobile landing page is now used as Pricing under the new mobile menu./brandpage (Accessible via right-click on NativePHP logo, or via the link in the footer)🧹 Cleanup
/componentsdirectory for easier long-term maintenance.✅ Notes for Reviewers
(I used the closest matches I could find as placeholders.)
🖼️ Screenshots