changed the initiative and team pages style#41
changed the initiative and team pages style#41Abhinav-Vishwakarma merged 1 commit intoABES-CodeChef:stagingfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request introduces a significant redesign of the Offerings/Initiatives section with an interactive wheel component, updates the Team page styling, and implements several backend improvements. However, the PR description doesn't accurately reflect the full scope of changes - notably omitting a major backend migration from raw SQL to Prisma ORM.
Changes:
- Redesigned Offerings/Initiatives section with an interactive wheel component featuring rotation animations, hover effects, and responsive layouts
- Updated Team page with new animations and improved mobile responsiveness
- Migrated entire backend from raw PostgreSQL queries to Prisma ORM with schema definitions and migrations
- Replaced native alert() notifications with react-hot-toast for better UX across all components
Reviewed changes
Copilot reviewed 6 out of 12 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/Offering.jsx | Complete rewrite implementing interactive wheel component with responsive design |
| src/components/TeamGrid.jsx | Added framer-motion animations and fixed formatting/spacing |
| src/pages/TeamPage.jsx | Updated container height constraints |
| src/components/PinContainer.jsx | Removed unused component |
| src/App.css | Removed old offering styles, added spin animation |
| src/main.jsx | Added Toaster component for notifications |
| src/pages/EventRegistration.jsx | Replaced alert with toast notification |
| src/pages/AdminDashboard.jsx | Replaced alerts with toast notifications |
| src/components/Landing.jsx | Replaced alert with toast notification |
| src/components/FloatingNavbar.jsx | Updated z-index values and formatting |
| backend/config/db.js | Complete rewrite to use Prisma with PostgreSQL adapter |
| backend/server.js | Migrated admin initialization to Prisma |
| backend/controllers/*.js | All controllers migrated from raw SQL to Prisma Client |
| backend/prisma/schema.prisma | New Prisma schema with User, Event, Registration models |
| backend/prisma/migrations/*.sql | Database migration files for Prisma |
| package.json | Added react-hot-toast and updated dependencies |
| backend/package.json | Added @prisma/adapter-pg and @prisma/client |
| public/wheel/*.svg | New SVG assets for wheel component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <h2 className="text-9xl font-semibold tracking-tighter">Teams</h2> | ||
| </div> | ||
| <motion.div | ||
| className="pointer-events-none sticky top-50 z-20 -translate-y-1/2 text-center text-white mix-blend-difference" |
There was a problem hiding this comment.
Invalid CSS class value. The class top-50 is not a valid Tailwind CSS class. Tailwind CSS spacing values don't include '50'. Use top-1/2 for 50% positioning, or bracket notation like top-[50%] for arbitrary values.
| className="pointer-events-none sticky top-50 z-20 -translate-y-1/2 text-center text-white mix-blend-difference" | |
| className="pointer-events-none sticky top-1/2 z-20 -translate-y-1/2 text-center text-white mix-blend-difference" |
| <h2 className="text-[8px] uppercase sm:text-[10px] md:text-[36px] lg:text-[44px] lg:pl-0 pl-16 font-bold text-white mb-[4px] sm:mb-[50px] md:mb-[60px] lg:mb-[100px] font-montserrat tracking-wide leading-tight whitespace-pre-line"> | ||
| {content.title} | ||
| </h2> | ||
| <p className="text-white/80 text-[6px] pb-[10px] sm:text-[8px] md:text-[2px] lg:text-[28px] lg:pl-0 pl-9 font-medium font-manrope leading-relaxed md:leading-[100%] tracking-normal"> |
There was a problem hiding this comment.
The font size text-[2px] is extremely small (2 pixels) and will be unreadable on most devices. This appears to be a typo. Based on the pattern in surrounding lines (text-[6px], text-[8px], text-[28px]), this should likely be text-[12px] or text-[14px] for the md breakpoint.
| <p className="text-white/80 text-[6px] pb-[10px] sm:text-[8px] md:text-[2px] lg:text-[28px] lg:pl-0 pl-9 font-medium font-manrope leading-relaxed md:leading-[100%] tracking-normal"> | |
| <p className="text-white/80 text-[6px] pb-[10px] sm:text-[8px] md:text-[14px] lg:text-[28px] lg:pl-0 pl-9 font-medium font-manrope leading-relaxed md:leading-[100%] tracking-normal"> |
| { name: 'Rohit Bhardwaj', role: 'Vice-president', row: 2, col: 0, transformOrigin: 'right bottom', img: 'rohit-bhaiya.jpg', linkedin: 'https://linkedin.com/in/dev-rohitbhardwaj', tech: ['Solidity', 'Web3', 'Open Source'] }, | ||
| { name: 'Lavish Aggarwal', role: 'Vice-president', row: 2, col: 3, transformOrigin: 'left bottom', img: 'lavish-bhaiya.jpg', linkedin: 'https://linkedin.com/in/lavishagrwl', tech: ['JavaScript', 'Python', 'React.js'] }, | ||
| { name: 'Abhinav Vishwakarma', role: 'Development Lead', row: 3, col: 1, transformOrigin: 'left bottom', img: 'abhinav-bhaiya.jpg', linkedin: 'https://linkedin.com/in/abhinav-vishwakarma-fsd', tech: ['Canva', 'Python', 'Video Editing'] }, | ||
| { name: 'Ramyak Jain', role: 'Event Lead', row: 3, col: 2, transformOrigin: 'right bottom', img: 'ramayk bhaiya.jpg', linkedin: 'https://linkedin.com/in/ramyak-jain', tech: ['Graphic Designer', 'Content Writing', 'Wed Designer'] }, |
There was a problem hiding this comment.
Typo in spelling: "Wed Designer" should be "Web Designer".
| { name: 'Ramyak Jain', role: 'Event Lead', row: 3, col: 2, transformOrigin: 'right bottom', img: 'ramayk bhaiya.jpg', linkedin: 'https://linkedin.com/in/ramyak-jain', tech: ['Graphic Designer', 'Content Writing', 'Wed Designer'] }, | |
| { name: 'Ramyak Jain', role: 'Event Lead', row: 3, col: 2, transformOrigin: 'right bottom', img: 'ramayk bhaiya.jpg', linkedin: 'https://linkedin.com/in/ramyak-jain', tech: ['Graphic Designer', 'Content Writing', 'Web Designer'] }, |
| { name: 'Sakhi Vishnoi', role: 'Graphics Lead', row: 6, col: 3, transformOrigin: 'left bottom', img: 'sakshi didi.jpg', linkedin: 'https://linkedin.com/in/sakshi-vishnoi-7770b2315', tech: ['Flutter', 'DSA', 'C++'] }, | ||
| { name: 'Anvesh Srivastava ', role: 'Backend Developer', row: 7, col: 0, transformOrigin: 'right bottom', img: 'anvesh-bhaiya.jpg', linkedin: 'https://linkedin.com/in/anvesh-srivastava', tech: ['Node.js', 'RestAPI', 'MongoDB'] }, | ||
| { name: 'kaif azmi', role: 'Frontend Developer', row: 7, col: 2, transformOrigin: 'left bottom', img: 'kaif-bhaiya.jpg', linkedin: 'https://linkedin.com/in/kaifazmi', tech: ['React', 'CSS', 'JavaScript'] }, | ||
| { name: "Bhaskar Dwivedi", role: 'Mobile Developer', row: 8, col: 1, transformOrigin: 'left bottom', img: 'bhaskar-bhaiya.jpg', linkedin: 'https://linkedin.com/in/bhaskar-dwi', tech: ['React Native', 'Flutter', 'TailwidCSS'] }, |
There was a problem hiding this comment.
Typo in spelling: "TailwidCSS" should be "TailwindCSS".
| { name: "Bhaskar Dwivedi", role: 'Mobile Developer', row: 8, col: 1, transformOrigin: 'left bottom', img: 'bhaskar-bhaiya.jpg', linkedin: 'https://linkedin.com/in/bhaskar-dwi', tech: ['React Native', 'Flutter', 'TailwidCSS'] }, | |
| { name: "Bhaskar Dwivedi", role: 'Mobile Developer', row: 8, col: 1, transformOrigin: 'left bottom', img: 'bhaskar-bhaiya.jpg', linkedin: 'https://linkedin.com/in/bhaskar-dwi', tech: ['React Native', 'Flutter', 'TailwindCSS'] }, |
| animate={{ opacity: 1 }} | ||
| exit={{ opacity: 0 }} | ||
| className="fixed inset-0 z-40 bg-black/95 md:hidden" | ||
| className="fixed inset-0 z-40000 bg-black/95 md:hidden" |
There was a problem hiding this comment.
The z-index value z-40000 is not a standard Tailwind CSS class. Tailwind CSS only provides z-index utilities up to z-50 by default. Either use an arbitrary value with bracket notation like z-[40000], or reconsider if such a high z-index is necessary.
| className="fixed inset-0 z-40000 bg-black/95 md:hidden" | |
| className="fixed inset-0 z-[40000] bg-black/95 md:hidden" |
| setIsMobile(false); | ||
| setWheelConfig({ radius: 450, rotateOffset: -200, scale: 0.8 }); | ||
| } else { | ||
| setSlideAmount(200); |
There was a problem hiding this comment.
The slideAmount for mobile is set to 200px, which may be too small for the content width (max-w-[200px]). This could cause content overlap or misalignment. Consider increasing this value to ensure proper spacing between items, or verify that the content widths align with the slide distances across all breakpoints.
| setSlideAmount(200); | |
| setSlideAmount(240); |
| initial={{ y: 0, opacity: 1 }} | ||
| className={cn( | ||
| "fixed top-0 inset-x-0 z-50 flex items-center justify-between px-6 sm:px-8 py-3 transition-all duration-300", | ||
| "fixed top-0 inset-x-0 z-50000 flex items-center justify-between px-6 sm:px-8 py-3 transition-all duration-300", |
There was a problem hiding this comment.
The z-index value z-50000 is not a standard Tailwind CSS class. Tailwind CSS only provides z-index utilities up to z-50 by default. Either use an arbitrary value with bracket notation like z-[50000], or reconsider if such a high z-index is necessary. The same issue exists on line 131.
| "fixed top-0 inset-x-0 z-50000 flex items-center justify-between px-6 sm:px-8 py-3 transition-all duration-300", | |
| "fixed top-0 inset-x-0 z-[50000] flex items-center justify-between px-6 sm:px-8 py-3 transition-all duration-300", |
| { name: 'Anvesh Srivastava ', role: 'Backend Developer', row: 7, col: 0, transformOrigin: 'right bottom', img: 'anvesh-bhaiya.jpg', linkedin: 'https://linkedin.com/in/anvesh-srivastava', tech: ['Node.js', 'RestAPI', 'MongoDB'] }, | ||
| { name: 'kaif azmi', role: 'Frontend Developer', row: 7, col: 2, transformOrigin: 'left bottom', img: 'kaif-bhaiya.jpg', linkedin: 'https://linkedin.com/in/kaifazmi', tech: ['React', 'CSS', 'JavaScript'] }, | ||
| { name: "Bhaskar Dwivedi", role: 'Mobile Developer', row: 8, col: 1, transformOrigin: 'left bottom', img: 'bhaskar-bhaiya.jpg', linkedin: 'https://linkedin.com/in/bhaskar-dwi', tech: ['React Native', 'Flutter', 'TailwidCSS'] }, | ||
| { name: 'Dhruv Khare', role: 'Design Systems', row: 9, col: 0, transformOrigin: 'right bottom', img: 'dhruv-bhaiya.jpg', linkedin: 'https://linkedin.com/in/dhruvkhare-softwaredev', tech: ['RestAPI', 'MonogoDB', 'Express.js'] }, |
There was a problem hiding this comment.
Typo in spelling: "MonogoDB" should be "MongoDB".
| { name: 'Dhruv Khare', role: 'Design Systems', row: 9, col: 0, transformOrigin: 'right bottom', img: 'dhruv-bhaiya.jpg', linkedin: 'https://linkedin.com/in/dhruvkhare-softwaredev', tech: ['RestAPI', 'MonogoDB', 'Express.js'] }, | |
| { name: 'Dhruv Khare', role: 'Design Systems', row: 9, col: 0, transformOrigin: 'right bottom', img: 'dhruv-bhaiya.jpg', linkedin: 'https://linkedin.com/in/dhruvkhare-softwaredev', tech: ['RestAPI', 'MongoDB', 'Express.js'] }, |
| // useEffect(() => { | ||
| // const interval = setInterval(() => { | ||
| // setActiveIndex((prev) => (prev + 1) % totalItems); | ||
| // }, 4000); | ||
| // return () => clearInterval(interval); | ||
| // }, []); | ||
|
|
There was a problem hiding this comment.
Commented-out code should be removed rather than left in the codebase. If auto-rotation functionality is planned for future implementation, consider creating a GitHub issue to track it instead of leaving dead code in the repository.
| // useEffect(() => { | |
| // const interval = setInterval(() => { | |
| // setActiveIndex((prev) => (prev + 1) % totalItems); | |
| // }, 4000); | |
| // return () => clearInterval(interval); | |
| // }, []); |
Abhinav-Vishwakarma
merged commit 85eb373
into
ABES-CodeChef:staging
🚀 Description
This PR addresses layout inconsistencies in the Offering/Initiatives section, specifically focusing on the interactive wheel component and content alignment for mobile devices. The updates ensure that text content is correctly "fixed" (synchronized) with the wheel's rotation and improves readability on smaller screens.
🛠️ Changes Made
📱 Mobile Optimization
wheelConfigto refine therotateOffsetandscalefor mobile viewports, ensuring the wheel doesn't overlap text awkwardly.pl-[40px]).slideAmountlogic (set to210pxfor mobile) to ensure the active content item centers perfectly during transitions.🎨 UI/UX Enhancements
translateXanimation speed with the wheel's rotation for a "pinned" effect.sm:pl-[100000px]) that were causing horizontal overflow and layout breaking.📸 Visual Comparison
40pxfrom the left with clear hierarchy.ScreenShot