feat: complete team section UI redesign with tabs, animations, & centered layouts by BeeXD · Pull Request #7 · ManaviP/dev3.0

BeeXD · 2026-04-20T19:07:58Z

…ered layouts

netlify · 2026-04-20T19:08:02Z

✅ Deploy Preview for devhack3 ready!

Name	Link
🔨 Latest commit	`fd9dc1f`
🔍 Latest deploy log	https://app.netlify.com/projects/devhack3/deploys/69e91f8c092a7900081ebc61
😎 Deploy Preview	https://deploy-preview-7--devhack3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

vercel · 2026-04-20T19:08:03Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devhack3	Ready	Preview, Comment	Apr 22, 2026 7:20pm

Copilot

Pull request overview

This PR redesigns the Team section into a tabbed, animated layout with a modal bio viewer, and re-enables the Team section in the main app navigation.

Changes:

Replaced the previous carousel-based Team UI with a new tabbed layout and modal bio popup in Team.tsx.
Added coin divider animation styles to index.css.
Re-enabled <Team /> rendering and added a “Team” navbar link in App.tsx.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 10 comments.

File	Description
src/sections/Team.tsx	Full UI rebuild: tabs, animated team cards, coin dividers, and bio modal.
src/index.css	Adds `spinY` keyframes and `.coin` / `.animate-spin-y` styles used by the new divider.
src/components/TeamCarousel.tsx	Removes the old carousel component (now unused).
src/App.tsx	Imports/renders the Team section and adds “Team” to desktop + mobile nav links.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-20T19:11:47Z

+        { top: 4, left: 4 } as React.CSSProperties,
+        { top: 4, right: 4 } as React.CSSProperties,
+        { bottom: 4, left: 4 } as React.CSSProperties,
+        { bottom: 4, right: 4 } as React.CSSProperties,
+      ].map((pos, ri) => (


React.CSSProperties is referenced here, but React isn’t imported in this module. In TS this will fail to type-check. Import React (or import CSSProperties as a type) and update these casts accordingly.

Copilot · 2026-04-20T19:11:48Z

+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(26,26,26,0.8)] backdrop-blur-sm p-4"


For accessibility, the modal overlay/container should expose dialog semantics. Consider adding role="dialog" and aria-modal="true" (and ideally associating a label via aria-labelledby).

Copilot · 2026-04-20T19:11:48Z

-          />
-        </motion.div>
-      </AnimatePresence>
+        {/* Header block condtionally rendered */}


Typo in comment: “condtionally” → “conditionally”.

Suggested change

{/* Header block condtionally rendered */}

{/* Header block conditionally rendered */}

Copilot · 2026-04-20T19:11:48Z

+  { id: '1', name: 'Trisha', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' },
+  { id: '2', name: 'S Shreenidhi', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' },


Spelling in user-visible role text: “Co ordinator” should be “Coordinator” (currently shown in the card and modal).

Suggested change

{ id: '1', name: 'Trisha', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' },

{ id: '2', name: 'S Shreenidhi', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' },

{ id: '1', name: 'Trisha', role: 'Student Coordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' },

{ id: '2', name: 'S Shreenidhi', role: 'Student Coordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' },

Copilot · 2026-04-20T19:11:49Z

+.animate-spin-y {
+  animation: spinY 3s linear infinite;
+}
+


.animate-spin-y runs an infinite animation; consider a prefers-reduced-motion: reduce override to disable/simplify it for users who prefer reduced motion.

Suggested change

@media (prefers-reduced-motion: reduce) {

.animate-spin-y {

animation: none;

}

}

Copilot · 2026-04-20T19:11:49Z

+  if (selectedBio) {
+    if (typeof window !== 'undefined') document.body.style.overflow = 'hidden';
+  } else {
+    if (typeof window !== 'undefined') document.body.style.overflow = 'auto';
+  }


Directly mutating document.body.style.overflow during render introduces side effects on every render and can leave the page stuck (e.g., if the component unmounts while the modal is open). Move this into a useEffect that runs when selectedBio changes and add a cleanup to restore the previous overflow value.

Copilot · 2026-04-20T19:11:49Z

+      className="group relative bg-[#fff9f4] border-[3px] border-[#1a1a1a] shadow-[6px_6px_0px_#1a1a1a] hover:shadow-[8px_8px_0px_#f97028] transition-all cursor-pointer flex flex-col h-full overflow-hidden w-full max-w-[280px] sm:max-w-[300px] shrink-0"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onClickBio(member)}
+    >


The card container has an onClick handler and the nested “SHOW BIO” button also triggers onClickBio. Clicking the button will bubble and invoke the handler twice. Stop propagation in the button handler, or remove one of the click handlers.

Copilot · 2026-04-20T19:11:49Z

+      className="group relative bg-[#fff9f4] border-[3px] border-[#1a1a1a] shadow-[6px_6px_0px_#1a1a1a] hover:shadow-[8px_8px_0px_#f97028] transition-all cursor-pointer flex flex-col h-full overflow-hidden w-full max-w-[280px] sm:max-w-[300px] shrink-0"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onClickBio(member)}
+    >


This card is interactive (click opens the modal) but it’s not keyboard accessible because it’s a div. Use a semantic button/a, or add role="button", tabIndex={0}, and handle Enter/Space key presses.

Copilot · 2026-04-20T19:11:50Z

+              <button
+                className="absolute top-4 right-4 w-10 h-10 border-2 border-[#1a1a1a] flex items-center justify-center font-bold font-mono hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"
+                onClick={() => setSelectedBio(null)}
+              >
+                X


The close button content is just "X"; add an aria-label (e.g., "Close") so screen readers announce it properly.

Copilot · 2026-04-20T19:11:50Z

+                <a
+                  href={selectedBio.twitter || '#'}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"
+                >
+                  Twitter/X
+                </a>
+                <a
+                  href={selectedBio.linkedin || '#'}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"
+                >
+                  LinkedIn
+                </a>


These social links fall back to href="#" when the profile URL is missing, which is a broken UX (and still opens a new tab). Conditionally render the links only when a real URL exists, or render a disabled state.

Suggested change

<a

href={selectedBio.twitter || '#'}

target="_blank"

rel="noreferrer"

className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"

>

Twitter/X

</a>

<a

href={selectedBio.linkedin || '#'}

target="_blank"

rel="noreferrer"

className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"

>

LinkedIn

</a>

{selectedBio.twitter ? (

<a

href={selectedBio.twitter}

target="_blank"

rel="noreferrer"

className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"

>

Twitter/X

</a>

) : (

<span

aria-disabled="true"

className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest opacity-50 cursor-not-allowed"

>

Twitter/X

</span>

)}

{selectedBio.linkedin ? (

<a

href={selectedBio.linkedin}

target="_blank"

rel="noreferrer"

className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors"

>

LinkedIn

</a>

) : (

<span

aria-disabled="true"

className="flex-1 py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-widest opacity-50 cursor-not-allowed"

>

LinkedIn

</span>

)}

…d groovy font

sreenidhis29 and others added 4 commits April 20, 2026 23:18

Fix responsiveness and added date sticker

fe1df0f

fix scroll issue ft mobile

29bfe14

added submarine for vertical timeline hehe

2ea4259

feat: complete team section UI redesign with tabs, animations, & cent…

eb17a58

…ered layouts

Copilot AI review requested due to automatic review settings April 20, 2026 19:07

Copilot started reviewing on behalf of BeeXD April 20, 2026 19:08 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

feat: redesign themes and team sections with mobile responsiveness an…

fd9dc1f

…d groovy font

vercel Bot deployed to Preview April 22, 2026 19:20 View deployment

ManaviP force-pushed the main branch from 2ea4259 to 9f8821d Compare April 25, 2026 00:18

	{/* Header block condtionally rendered */}
	{/* Header block conditionally rendered */}

		{ id: '1', name: 'Trisha', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' },
		{ id: '2', name: 'S Shreenidhi', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' },

+@media (prefers-reduced-motion: reduce) {
+  .animate-spin-y {
+    animation: none;
+  }
+}

Conversation

BeeXD commented Apr 20, 2026

Uh oh!

netlify Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for devhack3 ready!

Uh oh!

vercel Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Apr 20, 2026 •

edited

Loading

vercel Bot commented Apr 20, 2026 •

edited

Loading