Skip to content

resize card #113

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.

Sign up for GitHub

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
nitinmohan18 merged 1 commit into from
Jul 25, 2026
Merged

resize card #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 89 additions & 76 deletions components/dashboard/auth-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function DashboardAuthOverlay({
const containerRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start 90%", "start 10%"],
offset: ["start 45%", "start 10%"],
});

// Snappy, premium spring (PhonePe style)
Expand All @@ -47,104 +47,117 @@ export function DashboardAuthOverlay({

return (
<motion.div ref={containerRef} className="absolute inset-0 z-50">
{/* Frosted Backdrop — opacity linked to scroll */}
{/* Frosted Backdrop — covers dashboard section */}
<motion.div
style={{ opacity }}
className="absolute inset-0 bg-slate-200/50 backdrop-blur-[10px] dark:bg-[#0a0a12]/55 dark:backdrop-blur-[8px]"
className="absolute inset-0 bg-slate-900/20 backdrop-blur-[12px] dark:bg-[#0a0a12]/65 dark:backdrop-blur-[12px]"
/>
Comment on lines +50 to 54

@coderabbitai coderabbitai Bot Jul 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Files:"
git ls-files | rg '(^|/)auth-overlay\.tsx$|package\.json$|tailwind\.config|postcss\.config' || true

echo
echo "auth-overlay outline:"
f=$(git ls-files | rg '(^|/)auth-overlay\.tsx$' | head -n1 || true)
if [ -n "${f:-}" ]; then
  wc -l "$f"
  ast-grep outline "$f" || true
  echo
  echo "auth-overlay relevant lines:"
  cat -n "$f" | sed -n '1,220p'
fi

echo
echo "Search pointer-events usage in dashboard auth-overlay:"
if [ -n "${f:-}" ]; then
  rg -n "pointer-events|auth-overlay|containerRef|Frosted Backdrop|Fixed Card Container" "$f" .
fi

Repository: imuniqueshiv/HyperLearningTech

Length of output: 26480

🌐 Web query:

MDN pointer-events none auto auto defaults click target element background CSS

💡 Result:

The CSS property pointer-events controls whether an element can be the target of pointer events, such as mouse clicks, hovers, or touch interactions [1][2]. Key behaviors: auto: This is the initial, default value [1][3]. It allows the element to behave as if the pointer-events property were not specified, meaning it will react to pointer events and can serve as a target [1]. none: This value instructs the browser to ignore the element as a target for pointer events [1][4]. Instead, the pointer event will pass through the element and target whatever is underneath it (e.g., an element positioned behind it in the Z-axis) [1][4][2]. Important nuances: 1. Subtree inheritance: While an element with pointer-events: none is ignored, its descendants can still receive events if they have pointer-events set to a different value (e.g., auto) [1][4]. 2. Event propagation: Even if an element is set to none, it may still trigger event listeners during the event capture and bubble phases if an event is targeting a child element that is pointer-event-active [1][4]. 3. Keyboard navigation: Elements with pointer-events: none remain focusable via sequential keyboard navigation (e.g., using the Tab key) [1][4]. 4. Pointer enter/leave events: The pointerenter and pointerleave events may still fire on an element with pointer-events: none when the pointer enters or leaves one of its descendants [4]. For general HTML elements, auto and none are the primary values used [2]. Other values exist (such as visiblePainted, fill, or stroke) but are primarily reserved for use within SVG content [1][2].

Citations:

Make the frosted backdrop passive while the overlay is invisible.

The absolute inset-0 backdrop has no pointer-events-none, so it receives hits at the same z-index as the container and can block dashboard clicks even when opacity is 0. Add pointer-events-none so only the card UI explicitly opts back into pointer events when needed.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/dashboard/auth-overlay.tsx` around lines 50 - 54, Add
pointer-events-none to the backdrop motion.div’s className in the frosted
backdrop section, ensuring the invisible overlay cannot intercept dashboard
clicks while preserving the card UI’s explicit pointer-event behavior.


{/* Wrapper: Sticky scrolling on Mobile, Static absolute centering on Desktop */}
<div className="absolute inset-x-0 top-16 bottom-16 sm:inset-0 pointer-events-none">
{/* Fixed Card Container — viewport-pinned so it never scrolls away */}
<motion.div
style={{ opacity }}
className="fixed inset-0 z-[60] flex items-center justify-center pointer-events-none"
>
<div
style={{ perspective: "1000px" }}
className="sticky top-[15vh] translate-y-0 sm:absolute sm:top-1/2 sm:-translate-y-1/2 flex w-full justify-center px-4 pointer-events-auto"
className="w-full flex justify-center px-4 pointer-events-auto"
>
{/* Floating Card - Scale, Opacity, Y, and 3D Rotate linked to smooth scroll */}
<motion.div
style={{ scale, opacity, y, rotateX }}
className="relative w-full max-w-md overflow-hidden rounded-2xl border border-blue-200/80 bg-white/95 shadow-[0_30px_100px_-20px_rgba(30,58,138,0.35),0_10px_40px_-10px_rgba(30,58,138,0.2),inset_0_1px_0_rgba(255,255,255,1)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-[#111119]/95 dark:shadow-[0_20px_60px_-12px_rgba(0,0,0,0.6)]"
className="relative w-full max-w-[440px] overflow-hidden rounded-3xl border border-slate-200/90 bg-white p-6 sm:p-8 shadow-[0_25px_70px_-15px_rgba(30,58,138,0.18),0_10px_30px_-10px_rgba(0,0,0,0.04)] backdrop-blur-2xl dark:border-white/[0.08] dark:bg-[#111119] dark:shadow-[0_20px_60px_-12px_rgba(0,0,0,0.8)]"
>
{/* Top Gradient Accent Line */}
<div className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-transparent via-blue-600 to-transparent dark:via-cyan-400" />
{/* Light Mode Ambient Background Mesh */}
<div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden dark:hidden">
<div className="absolute left-1/2 -top-24 h-56 w-72 -translate-x-1/2 rounded-full bg-gradient-to-b from-blue-400/20 via-indigo-300/10 to-transparent blur-3xl" />
<div className="absolute -bottom-20 -right-20 h-48 w-48 rounded-full bg-indigo-400/15 blur-3xl" />
<div className="absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-blue-400/15 blur-3xl" />
</div>

{/* Subtle ambient glow (dark mode) */}
<div className="pointer-events-none absolute inset-0 hidden dark:block">
<div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[200px] w-[300px] rounded-full bg-cyan-500/10 blur-[80px]" />
{/* Dark Mode Ambient Background Glow */}
<div className="pointer-events-none absolute inset-0 -z-10 hidden dark:block">
<div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[220px] w-[320px] rounded-full bg-cyan-500/15 blur-[80px]" />
</div>

<div className="relative z-10 flex flex-col items-center px-5 py-6 sm:px-8 sm:py-8 text-center">
{/* Dynamic Lock Icon with floating + pulse */}
{/* Top Gradient Accent Rim */}
<div className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-blue-500/20 via-blue-600 to-indigo-600/20 dark:from-cyan-500/30 dark:via-cyan-400 dark:to-blue-500/30" />

<div className="relative z-10 flex flex-col items-center text-center">
{/* Floating Glowing Lock Header */}
<motion.div
className="relative mb-3 sm:mb-5"
animate={{ y: [0, -6, 0] }}
className="relative mb-4 sm:mb-5"
animate={{ y: [0, -5, 0] }}
transition={{
duration: 4,
repeat: Infinity,
ease: "easeInOut",
}}
>
{/* Outer pulsing glow ring */}
{/* Pulsing Backlight */}
<motion.div
className="absolute -inset-3 rounded-3xl bg-blue-500/15 blur-xl dark:bg-cyan-500/15"
className="absolute -inset-3 rounded-full bg-gradient-to-tr from-blue-500/20 via-indigo-500/20 to-cyan-500/20 blur-xl dark:from-cyan-500/30 dark:via-blue-500/20 dark:to-cyan-400/20"
animate={{
opacity: [0.4, 0.8, 0.4],
scale: [0.95, 1.05, 0.95],
opacity: [0.5, 0.9, 0.5],
scale: [0.95, 1.08, 0.95],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut",
}}
/>
<div className="relative flex h-12 w-12 sm:h-14 sm:w-14 items-center justify-center rounded-2xl border border-blue-200 bg-gradient-to-b from-blue-100 to-blue-50 shadow-[0_12px_24px_-8px_rgba(37,99,235,0.4),inset_0_1px_2px_rgba(255,255,255,1)] dark:border-cyan-500/20 dark:from-cyan-500/10 dark:to-transparent dark:shadow-none">

<div className="relative flex h-14 w-14 sm:h-16 sm:w-16 items-center justify-center rounded-2xl border border-blue-200/80 bg-gradient-to-br from-blue-50 via-white to-indigo-50/80 shadow-[0_8px_20px_-4px_rgba(59,130,246,0.25),inset_0_1px_1px_rgba(255,255,255,1)] dark:border-cyan-500/30 dark:bg-gradient-to-br dark:from-cyan-500/15 dark:via-cyan-950/20 dark:to-blue-900/20 dark:shadow-none">
<Lock
className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-cyan-400"
strokeWidth={1.8}
className="h-6 w-6 sm:h-7 sm:w-7 text-blue-600 dark:text-cyan-400"
strokeWidth={2}
/>
</div>
</motion.div>

{/* Premium Badge */}
<div className="mb-3 inline-flex items-center gap-1.5 rounded-full border border-amber-200/60 bg-amber-50/80 px-3 py-1 text-[10px] font-semibold text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400">
<Sparkles className="h-2.5 w-2.5" />
{/* Unified Glowing Badge */}
<div className="mb-3 inline-flex items-center gap-1.5 rounded-full border border-blue-200/70 bg-gradient-to-r from-blue-50/90 to-indigo-50/90 px-3.5 py-1 text-[11px] font-semibold text-blue-700 shadow-sm dark:border-cyan-500/30 dark:bg-gradient-to-r dark:from-cyan-500/15 dark:to-blue-500/15 dark:text-cyan-300">
<Sparkles className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
Personalized Dashboard
</div>

{/* Heading */}
<h2 className="text-xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-2xl px-2">
{/* Title */}
<h2 className="text-xl font-black tracking-tight text-slate-900 dark:text-white sm:text-2xl">
Unlock Your Personalized Dashboard
</h2>

{/* Description — explains WHY login is needed */}
<p className="mx-auto mt-2 max-w-[340px] text-[12px] sm:text-[13px] leading-snug text-slate-500 dark:text-slate-400 px-2">
{/* Subtitle / Description */}
<p className="mt-2.5 max-w-[350px] text-[12px] sm:text-[13px] leading-relaxed text-slate-600 dark:text-slate-400">
Create an account and complete your profile to unlock a
dashboard tailored to your{" "}
<span className="font-semibold text-slate-700 dark:text-slate-300">
<span className="font-semibold text-slate-900 dark:text-slate-200">
University
</span>
,{" "}
<span className="font-semibold text-slate-700 dark:text-slate-300">
<span className="font-semibold text-slate-900 dark:text-slate-200">
Branch
</span>
, and{" "}
<span className="font-semibold text-slate-700 dark:text-slate-300">
<span className="font-semibold text-slate-900 dark:text-slate-200">
Semester
</span>
. Access your syllabus, previous year questions, AI tutor,
notes, and learning progress — all in one place.
. Access your syllabus, previous year questions, AI tutor, and
learning progress.
</p>

{/* Onboarding Steps */}
<div className="mt-4 sm:mt-5 flex w-full max-w-[280px] sm:max-w-[300px] flex-col items-start gap-0 mx-auto">
{/* Onboarding Timeline */}
<div className="my-5 flex w-full max-w-[310px] flex-col gap-2 rounded-2xl border border-slate-100 bg-slate-50/70 p-3.5 dark:border-white/[0.06] dark:bg-white/[0.03]">
{onboardingSteps.map((step, i) => (
<div key={step.label} className="flex items-start gap-3">
{/* Step indicator dot + connector */}
<div className="flex flex-col items-center">
<div
key={step.label}
className="flex items-center justify-between gap-3 text-left"
>
<div className="flex items-center gap-2.5">
<div
className={`flex h-5 w-5 items-center justify-center rounded-full border text-[10px] font-bold ${
className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold transition-colors ${
step.isLast
? "border-blue-400 bg-blue-500/10 text-blue-600 dark:border-cyan-400 dark:bg-cyan-500/10 dark:text-cyan-400"
: "border-slate-200 bg-slate-50 text-slate-400 dark:border-white/10 dark:bg-white/[0.04] dark:text-slate-500"
? "border border-blue-500/40 bg-blue-500 text-white shadow-[0_2px_8px_rgba(59,130,246,0.3)] dark:border-cyan-400 dark:bg-cyan-400 dark:text-slate-950"
: "border border-slate-200 bg-white text-slate-500 shadow-2xs dark:border-white/10 dark:bg-white/[0.06] dark:text-slate-400"
}`}
>
{step.isLast ? (
Expand All @@ -153,73 +166,73 @@ export function DashboardAuthOverlay({
<span>{i + 1}</span>
)}
</div>
{i < onboardingSteps.length - 1 && (
<div className="h-2 sm:h-3 w-px bg-slate-200 dark:bg-white/10" />
)}
<span
className={`text-[12px] font-medium ${
step.isLast
? "font-semibold text-blue-600 dark:text-cyan-400"
: "text-slate-600 dark:text-slate-400"
}`}
>
{step.label}
</span>
</div>
{/* Step label */}
<span
className={`pt-[1.5px] text-[11.5px] sm:text-[12px] font-medium ${
step.isLast
? "text-blue-600 dark:text-cyan-400 font-semibold"
: "text-slate-500 dark:text-slate-400"
}`}
>
{step.label}
</span>

{step.isLast && (
<span className="rounded-full bg-blue-100/80 px-2 py-0.5 text-[9.5px] font-bold text-blue-700 dark:bg-cyan-500/20 dark:text-cyan-300">
Final Step
</span>
)}
</div>
))}
</div>

{/* Action Buttons */}
<div className="mt-5 sm:mt-6 flex w-full flex-col gap-2.5 sm:flex-row sm:gap-3">
{/* CTA Buttons */}
<div className="flex w-full flex-col gap-2.5 sm:flex-row sm:gap-3">
<Link
href="/sign-up"
className="group flex flex-1 items-center justify-center gap-2 rounded-xl bg-gradient-to-b from-blue-500 via-blue-600 to-blue-700 px-4 py-2.5 text-[13px] sm:text-[14px] font-bold text-white shadow-[0_4px_12px_-4px_rgba(37,99,235,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all hover:scale-[1.02] hover:shadow-[0_6px_20px_-4px_rgba(37,99,235,0.5)] active:scale-[0.98] dark:from-cyan-400 dark:via-blue-500 dark:to-blue-700 dark:shadow-[0_4px_16px_-4px_rgba(6,182,212,0.3),inset_0_1px_1px_rgba(255,255,255,0.15)]"
className="group relative flex flex-1 items-center justify-center gap-2 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 via-blue-600 to-indigo-600 px-4 py-3 text-[13.5px] font-bold text-white shadow-[0_6px_20px_-4px_rgba(37,99,235,0.45)] transition-all duration-300 hover:shadow-[0_10px_28px_-4px_rgba(37,99,235,0.55)] hover:-translate-y-0.5 active:translate-y-0 dark:from-cyan-500 dark:via-cyan-500 dark:to-blue-600 dark:text-slate-950 dark:shadow-[0_6px_20px_-4px_rgba(6,182,212,0.4)]"
>
<UserPlus className="h-4 w-4" />
Create Account
<span>Create Account</span>
</Link>
<Link
href="/sign-in"
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 text-[13px] sm:text-[14px] font-bold text-slate-700 shadow-sm transition-all hover:scale-[1.02] hover:border-blue-200 hover:bg-blue-50/50 hover:text-blue-700 hover:shadow-md active:scale-[0.98] dark:border-white/10 dark:bg-white/[0.04] dark:text-white dark:hover:border-white/10 dark:hover:bg-white/[0.07] dark:hover:text-white"
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-[13.5px] font-bold text-slate-800 shadow-[0_2px_6px_rgba(0,0,0,0.04)] transition-all duration-300 hover:border-blue-300 hover:bg-blue-50/40 hover:text-blue-700 hover:shadow-[0_4px_12px_rgba(59,130,246,0.1)] hover:-translate-y-0.5 active:translate-y-0 dark:border-white/10 dark:bg-white/[0.05] dark:text-white dark:hover:border-white/20 dark:hover:bg-white/[0.1]"
>
<LogIn className="h-4 w-4" />
Sign In
<LogIn className="h-4 w-4 text-slate-500 dark:text-slate-400" />
<span>Sign In</span>
</Link>
</div>

{/* Preview Button */}
{/* Preview CTA Option */}
{onPreview && (
<button
onClick={onPreview}
className="mt-4 sm:mt-5 text-[11px] sm:text-[12px] font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
className="mt-3.5 text-[12px] font-semibold text-slate-500 transition-colors hover:text-blue-600 dark:text-slate-400 dark:hover:text-cyan-400"
>
Just browsing? Preview dashboard
</button>
)}

{/* Personalization-focused bottom text */}
<div className="mt-4 sm:mt-5 flex items-center justify-center gap-1.5 text-[9.5px] sm:text-[11px] text-slate-400 dark:text-slate-500">
<span className="inline-flex items-center gap-1">
<GraduationCap className="h-3 w-3" />
{/* Feature Pills Footer */}
<div className="mt-5 flex flex-wrap items-center justify-center gap-1.5 pt-3 border-t border-slate-100 dark:border-white/[0.06]">
<span className="inline-flex items-center gap-1 rounded-full bg-slate-100/80 px-2.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-white/[0.04] dark:text-slate-400">
<GraduationCap className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
Your University
</span>
<span>•</span>
<span className="inline-flex items-center gap-1">
<GitBranch className="h-3 w-3" />
<span className="inline-flex items-center gap-1 rounded-full bg-slate-100/80 px-2.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-white/[0.04] dark:text-slate-400">
<GitBranch className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
Your Branch
</span>
<span>•</span>
<span className="inline-flex items-center gap-1">
<CalendarDays className="h-3 w-3" />
<span className="inline-flex items-center gap-1 rounded-full bg-slate-100/80 px-2.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-white/[0.04] dark:text-slate-400">
<CalendarDays className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
Your Semester
</span>
</div>
</div>
</motion.div>
</div>
</div>
</motion.div>
</motion.div>
);
}
Loading