Update: committed latest changes#401
Conversation
✅ Deploy Preview for codifylearn ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@Roshansuthar1105 Please check the pr sir |
|
@Gupta-02 resolve the conflicts please. |
|
Okay wait |
| import React from 'react'; | ||
| import { motion } from 'framer-motion'; | ||
| import { useTheme } from '../context/ThemeContext'; | ||
|
|
There was a problem hiding this comment.
Reduce motion for accessibility
Respect prefers-reduced-motion for Framer Motion animations to improve accessibility.
Suggestion
const prefersReducedMotion = useReducedMotion();
| @@ -72,46 +73,48 @@ function NavBar() { | |||
|
|
|||
| </div> | |||
|
|
|||
There was a problem hiding this comment.
Move animation configs (initial, animate, transition) into reusable constants.
Use a shared Button component for CTA buttons to avoid duplication.
Add PropTypes or TypeScript for components like MobileMenu.
| // Each link: { to: string, label: string, icon: ReactIconComponent, group?: 'primary' | 'secondary' } | ||
| // Order matters for display. | ||
| import { FaHome, FaUser, FaCode, FaBookOpen, FaRoad, FaStickyNote, FaQuestionCircle, FaBookmark, FaUserFriends, FaEnvelope } from 'react-icons/fa'; | ||
|
|
There was a problem hiding this comment.
Extract repeated Tailwind classes into reusable utility classes.
Replace magic values like pt-32 sm:pt-40 with CSS variables linked to navbar height.
Ensure min-h-screen-minus-nav is documented in global styles.
| @@ -16,6 +16,7 @@ const Testimonials = lazy(() => import("../components/HomePageComponents/Testimo | |||
| const NewsLetter = lazy(() => import("../components/HomePageComponents/NewsLetter")); | |||
There was a problem hiding this comment.
Add aria-current="page" to active NavLinks.
Add aria-label to CTA buttons like “Watch Demo”.
Ensure video has aria-hidden="true" if it’s decorative.
👷 Deploy request for codifylearn pending review.Visit the deploys page to approve it
|
3 participants
UI / UX
focus-visiblering styles to all nav links (desktop + mobile) and CTA buttons.Code Quality / Structure
<Hero />component.@playwright/test,playwright.config.js,tests/navbar.spec.js).Tooling / Scripts
test:e2e,test:e2e:ui,test:e2e:headedto package.json.🧪 Testing
tests/navbar.spec.js) covering:📸 UI Changes (Summary)
(If you have screenshots, add them)
Before | After -- | -- Nav links hidden behind hamburger on large monitors | Full professional navbar visible on desktop Inline hero markup in Home.jsx | Modular Hero.jsx component No consistent focus ring | Accessible focus-visible ringsDocumentation Updates
Notable Notes / Follow-Up Suggestions
.env.exampleand adjusting server"start"script to usenode server.js(currently nodemon in production).npm run build+npm run test:e2e.Additional Notes
No breaking changes. Safe to deploy after visual regression review.
If you want, I can also generate suggested commit messages or a squash message—just say the word. Want me to proceed with the server runtime sanity check next or include an
UI / UX.env.example? Let me know.