Repository navigation
Feat/roadmap accordion #44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
TusharSaini999
merged 4 commits into
QuCodeXClub:main
from
codesbyashmit:feat/roadmap-accordion
Apr 22, 2026
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
6302d82
Update (#39)
TusharSaini999 2f13ba2
style: fill FAQ asymmetric dead zone with venue and unstop cards
codesbyashmit e194256
feat: implemented interactive accordion UI for roadmap timeline
codesbyashmit 6b5342b
Merge branch 'main' into feat/roadmap-accordion
TusharSaini999 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,9 +1,9 @@ | ||||||||||||||||||||||||||
| import { useRef } from "react"; | ||||||||||||||||||||||||||
| import { useState, useRef } from "react"; | ||||||||||||||||||||||||||
| import { | ||||||||||||||||||||||||||
| ClipboardList, ClipboardX, PartyPopper, ScanSearch, | ||||||||||||||||||||||||||
| Trophy, CheckCircle2, Target, BookOpen | ||||||||||||||||||||||||||
| Trophy, CheckCircle2, Target, BookOpen, ChevronDown | ||||||||||||||||||||||||||
| } from "lucide-react"; | ||||||||||||||||||||||||||
| import { motion, useScroll, useSpring, useMotionValue, useTransform } from "framer-motion"; | ||||||||||||||||||||||||||
| import { motion, AnimatePresence, useScroll, useSpring, useMotionValue, useTransform } from "framer-motion"; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const events = [ | ||||||||||||||||||||||||||
| { | ||||||||||||||||||||||||||
|
|
@@ -81,6 +81,8 @@ const events = [ | |||||||||||||||||||||||||
| ]; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const PipelineCard = ({ title, description, instructions, deliverables, evaluation, Icon }) => { | ||||||||||||||||||||||||||
| const [isOpen, setIsOpen] = useState(false); | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const x = useMotionValue(0); | ||||||||||||||||||||||||||
| const y = useMotionValue(0); | ||||||||||||||||||||||||||
| const mouseXSpring = useSpring(x, { stiffness: 150, damping: 15 }); | ||||||||||||||||||||||||||
|
|
@@ -94,6 +96,8 @@ const PipelineCard = ({ title, description, instructions, deliverables, evaluati | |||||||||||||||||||||||||
| y.set((e.clientY - rect.top) / rect.height - 0.5); | ||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const hasDetails = instructions || deliverables || evaluation; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| return ( | ||||||||||||||||||||||||||
| <motion.div | ||||||||||||||||||||||||||
| style={{ perspective: 1000 }} | ||||||||||||||||||||||||||
|
|
@@ -103,55 +107,84 @@ const PipelineCard = ({ title, description, instructions, deliverables, evaluati | |||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||
| <motion.div | ||||||||||||||||||||||||||
| style={{ rotateX, rotateY, transformStyle: "preserve-3d" }} | ||||||||||||||||||||||||||
| className="roadmap-card relative overflow-hidden rounded-2xl border shadow-sm hover:shadow-lg p-6 sm:p-7 transition-all duration-500 text-left" | ||||||||||||||||||||||||||
| onClick={() => setIsOpen(!isOpen)} | ||||||||||||||||||||||||||
| className="roadmap-card relative overflow-hidden rounded-2xl border shadow-sm hover:shadow-lg p-6 sm:p-7 transition-all duration-500 text-left cursor-pointer bg-white" | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
| className="roadmap-card relative overflow-hidden rounded-2xl border shadow-sm hover:shadow-lg p-6 sm:p-7 transition-all duration-500 text-left cursor-pointer bg-white" | |
| className="roadmap-card relative overflow-hidden rounded-2xl border shadow-sm hover:shadow-lg p-6 sm:p-7 transition-all duration-500 text-left cursor-pointer" |
Comment on lines
108
to
+111
Copilot
AI
Apr 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The accordion toggle is implemented by attaching onClick to a non-interactive div without keyboard handlers or ARIA state. For accessibility, use a button element (or add role="button", tabIndex={0}, onKeyDown for Enter/Space) and expose aria-expanded / aria-controls tied to the collapsible region so keyboard and screen-reader users can operate it.
Comment on lines
+152
to
+155
Copilot
AI
Apr 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The detail rows force text-(--text-dark), which overrides the existing .roadmap-card-detail theme styles from globals.css and will reduce contrast in dark mode (since --text-dark is a dark color). Drop the explicit text-(--text-dark) utility and let .roadmap-card-detail control the color per theme (or use a theme-safe token like --text-body).
Comment on lines
+172
to
+177
Copilot
AI
Apr 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The evaluation panel adds bg-(--bg-card-dark) and forces text-(--text-dark) on items, which overrides .roadmap-card-eval / .roadmap-card-eval-item theme-specific styles in globals.css and can break dark-mode readability. Prefer relying on the existing roadmap card palette classes (or use theme-aware tokens that match both modes).
Suggested change
| <div className="roadmap-card-eval p-3 border shadow-sm rounded-lg space-y-2 mt-2 bg-(--bg-card-dark)"> | |
| <div className="roadmap-card-eval-title font-bold text-xs uppercase tracking-tighter flex items-center gap-2"> | |
| <ScanSearch size={14} /> Evaluation Criteria | |
| </div> | |
| {evaluation.map((item, i) => ( | |
| <div key={i} className="roadmap-card-eval-item text-xs sm:text-sm flex items-center gap-2 text-(--text-dark)"> | |
| <div className="roadmap-card-eval p-3 border shadow-sm rounded-lg space-y-2 mt-2"> | |
| <div className="roadmap-card-eval-title font-bold text-xs uppercase tracking-tighter flex items-center gap-2"> | |
| <ScanSearch size={14} /> Evaluation Criteria | |
| </div> | |
| {evaluation.map((item, i) => ( | |
| <div key={i} className="roadmap-card-eval-item text-xs sm:text-sm flex items-center gap-2"> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The FAQ states the registration deadline is "30th April 2026 at 3:00 PM IST", but the timeline (
src/components/timeline.jsxevent "Registration Closes") still says no entries after 11:59 PM / midnight. Please align these two user-facing sources to the same cutoff time to avoid conflicting information.