FIX : Added a new Card design and changed text elements in footer #105
Conversation
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TiltedCard
participant framer-motion
User->>TiltedCard: Mouse moves over card
TiltedCard->>framer-motion: Update motion values (x, y)
framer-motion-->>TiltedCard: Provide animated rotation (rotateX, rotateY)
TiltedCard-->>User: Render tilted card with smooth 3D effect
User->>TiltedCard: Mouse leaves card
TiltedCard->>framer-motion: Reset rotation to zero
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
Frontend/src/components/TiltedCard.tsx (1)
1-57: Well-implemented 3D tilt component with smooth animations.The TiltedCard component is well-structured with proper TypeScript typing and clean framer-motion integration. The math for mouse position normalization is correct, and the spring animations provide smooth user interaction.
Consider these minor enhancements:
+// Add accessibility support +import { ReactNode, useRef, useCallback } from "react"; const TiltedCard = ({ children, className = "" }: TiltedCardProps) => { + // Memoize handlers for better performance + const handleMouseMove = useCallback((e: React.MouseEvent) => { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; // ... rest of the logic - }; + }, [x, y]); + const handleMouseLeave = useCallback(() => { x.set(0); y.set(0); - }; + }, [x, y]); return ( <motion.div ref={ref} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} + role="presentation" + aria-hidden="true" // ... rest of propsFrontend/src/pages/HomePage.tsx (1)
441-441: Remove duplicate comment block.The closing comment is redundant and should be removed for cleaner code.
-{/* Edited the cards for "why choose inpact ai? " */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
Frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
Frontend/package.json(1 hunks)Frontend/src/components/TiltedCard.tsx(1 hunks)Frontend/src/pages/HomePage.tsx(3 hunks)Frontend/tsconfig.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Saahi30
PR: AOSSIE-Org/InPactAI#98
File: Frontend/src/pages/CollaborationDetails.tsx:234-234
Timestamp: 2025-07-14T11:45:01.864Z
Learning: In frontend-only PRs, hardcoded URLs (like dummy PDF URLs for contracts) and mock data are acceptable and intentional placeholders for UI development, to be replaced during backend integration phase.
🪛 Biome (1.9.4)
Frontend/src/pages/HomePage.tsx
[error] 337-338: This block statement doesn't serve any purpose and can be safely removed.
Standalone block statements without any block-level declarations are redundant in JavaScript and can be removed to simplify the code.
(lint/complexity/noUselessLoneBlockStatements)
[error] 338-339: This block statement doesn't serve any purpose and can be safely removed.
Standalone block statements without any block-level declarations are redundant in JavaScript and can be removed to simplify the code.
(lint/complexity/noUselessLoneBlockStatements)
🔇 Additional comments (4)
Frontend/tsconfig.json (1)
10-10: LGTM: Path mapping configuration updated correctly.The change from
"./src/*"to"src/*"is a standard TypeScript configuration adjustment that aligns with modern module resolution practices and supports the new component imports.Frontend/package.json (1)
33-33: Framer-Motion v12.23.6: Version & Security Verified
- npm confirms
framer-motion@12.23.6exists and is the current stable release.npm auditreports zero moderate-or-higher vulnerabilities after generating a lockfile.- This bump (12.5.0 → 12.23.6) is a semver-compatible minor update within major version 12, so there should be no breaking changes.
No further action required.
Frontend/src/pages/HomePage.tsx (2)
2-2: Import statement correctly added for TiltedCard component.The import path and statement are properly structured for the new component.
964-1000: Footer styling enhancements look good.The addition of glow effects using
drop-shadowCSS provides better visibility and visual appeal. The implementation is clean and maintains consistency across all footer elements.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
Frontend/src/pages/HomePage.tsx (2)
337-338: Remove useless block statements.These standalone block statements serve no purpose and should be removed as previously identified.
352-435: Fix TiltedCard props mismatch.The props passed to TiltedCard don't match the component's interface as previously identified. Remove the invalid props from both TiltedCard instances.
🧹 Nitpick comments (1)
Frontend/src/pages/HomePage.tsx (1)
964-964: Clean up comment formatting.The comment has formatting and grammar issues that should be cleaned up for better readability.
- {/* Changed the footer all text with glow elements , for proper visibility------- By Praneet " */} + {/* Added glow effects to footer text for improved visibility - by Praneet */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
Frontend/src/pages/HomePage.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Saahi30
PR: AOSSIE-Org/InPactAI#98
File: Frontend/src/pages/CollaborationDetails.tsx:234-234
Timestamp: 2025-07-14T11:45:01.864Z
Learning: In frontend-only PRs, hardcoded URLs (like dummy PDF URLs for contracts) and mock data are acceptable and intentional placeholders for UI development, to be replaced during backend integration phase.
🪛 Biome (1.9.4)
Frontend/src/pages/HomePage.tsx
[error] 337-338: This block statement doesn't serve any purpose and can be safely removed.
Standalone block statements without any block-level declarations are redundant in JavaScript and can be removed to simplify the code.
(lint/complexity/noUselessLoneBlockStatements)
[error] 338-339: This block statement doesn't serve any purpose and can be safely removed.
Standalone block statements without any block-level declarations are redundant in JavaScript and can be removed to simplify the code.
(lint/complexity/noUselessLoneBlockStatements)
🔇 Additional comments (2)
Frontend/src/pages/HomePage.tsx (2)
2-2: Import statement looks good.The TiltedCard import is correctly structured and follows standard conventions.
976-997: Footer styling enhancements look good.The glow effects using
drop-shadowutilities are properly implemented and should improve text visibility on the dark footer background. The color changes from gray to white with purple hover effects are appropriate for the design.
PraneetBose
changed the title
📝 Description:
Updated the "Why Choose Inpact AI?" section cards and gives a more better visibility to the test and button of the footer section.
🔧 Changes Made
The following changes are been made ;-
📷 Screenshots or Visual Changes (if applicable)
✅ Checklist
Summary by CodeRabbit
New Features
Enhancements
Chores