Add the Interactive mouse pointer and done some animation#128
Add the Interactive mouse pointer and done some animation#128sahil-dev17 wants to merge 1 commit intosamarsajad:mainfrom
Conversation
|
Someone is attempting to deploy a commit to the Samar Sajad's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi! The Vercel deployment check is failing due to authorization issues. Thank you! |
Please while sending a PR , follow the default template given. If failed to do that, your PR won't be merged no matter how good it is |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
First of all it changes to red color, which doesn't go well with the theme. keep a simple pointer. This one would give user the ick |
Mam , Can you also assign me the issue as of UI of website in that I will make the site more interactive !! |
| </motion.section> | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
Wrap everything after ReadMoreSection inside a named component (e.g. AboutSection).
Right now this file will not compile because hooks, variants, and JSX are floating outside a component.
| @@ -34,19 +137,83 @@ function AboutUs() { | |||
| setExpandedCard((prev) => (prev === title ? null : title)); | |||
There was a problem hiding this comment.
This line appears outside of any function.
It should live inside a handler function (e.g. handleToggle) declared inside the main component.
| } | ||
| }, | ||
| hover: { | ||
| rotate: 360, |
There was a problem hiding this comment.
Continuous rotation on hover can feel jumpy.
Consider limiting rotation (e.g. 15–30°) or using whileTap instead.
| import React, { useState } from 'react'; | ||
| import { motion } from 'framer-motion'; | ||
| import styles from './AboutSection.module.css'; | ||
|
|
There was a problem hiding this comment.
Inline styles bypass CSS optimizations and theming.
Consider moving gradient states into CSS classes and toggling via className.
| @@ -0,0 +1,26 @@ | |||
| /* Hide default cursor */ | |||
| body { | |||
| cursor: none !important; | |||
There was a problem hiding this comment.
Hides cursor everywhere, including:
input fields
buttons
text selection
On desktop, this can confuse users if your custom cursor JS fails to load.
| } | ||
|
|
||
| /* Show default cursor for touch devices */ | ||
| @media (hover: none) and (pointer: coarse) { |
There was a problem hiding this comment.
This is GOOD because:
Targets phones & tablets correctly
Prevents useless cursor effects
Avoids performance waste
3 participants
Description
Please include a summary of the changes and the related issue. Provide context explaining the reason for the PR.
Related Issue
Closes # (issue number)
Screenshot
If your PR includes visual changes, please add screenshots or GIFs to help reviewers understand the impact.
Checklist
Additional Notes
(Add any additional notes here)
Place this updated file as your PULL_REQUEST_TEMPLATE.md in one of the supported locations.