Skip to content

improved mobile layout #107

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 18, 2026
Merged

improved mobile layout #107

Show file tree
Hide file tree
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
34 changes: 17 additions & 17 deletions app/(public)/cgpa-calculator/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,7 +514,7 @@ export default function CgpaCalculatorPage() {

<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
{/* Placement Eligibility Radar */}
<div className="p-6 sm:p-8 md:p-10 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.08] bg-indigo-50/90 dark:bg-slate-900/50 dark:bg-gradient-to-br dark:from-white/[0.05] dark:to-transparent backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] ring-1 ring-inset ring-transparent dark:ring-white/[0.05] relative overflow-hidden">
<div className="px-2 py-4 md:p-8 lg:p-10 md:rounded-[2.5rem] lg:rounded-[3rem] md:border md:border-white/80 md:dark:border-white/[0.08] md:bg-indigo-50/90 md:dark:bg-slate-900/50 md:dark:bg-gradient-to-br md:dark:from-white/[0.05] md:dark:to-transparent md:backdrop-blur-3xl md:shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] md:dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] md:ring-1 md:ring-inset md:ring-transparent md:dark:ring-white/[0.05] relative overflow-hidden">
<div className="flex items-center gap-3 mb-8 relative z-10">
<div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
<Briefcase className="w-5 h-5" />
Expand Down Expand Up @@ -559,24 +559,24 @@ export default function CgpaCalculatorPage() {
}
className={`group flex items-center justify-between p-4 rounded-2xl text-left transition-all duration-300 ${
radarTier === tier.id
? "bg-indigo-50/50 dark:bg-white/[0.04] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]"
: "bg-transparent hover:bg-slate-50/50 dark:hover:bg-white/[0.02]"
? "bg-indigo-50 dark:bg-white/[0.06] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)] border border-indigo-100/50 dark:border-white/10 md:border-transparent"
: "bg-white dark:bg-white/[0.02] md:bg-transparent border border-slate-200/60 dark:border-white/[0.05] md:border-transparent shadow-sm md:shadow-none hover:bg-slate-50/80 dark:hover:bg-white/[0.04]"
}`}
>
<span
className={`font-semibold transition-colors ${
radarTier === tier.id
? "text-indigo-700 dark:text-white"
: "text-slate-600 group-hover:text-slate-900 dark:text-slate-500 dark:group-hover:text-slate-300"
: "text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-white"
}`}
>
{tier.label}
</span>
<span
className={`text-[13px] font-bold px-3 py-1 rounded-full transition-colors ${
className={`text-[12px] md:text-[13px] font-bold px-3 py-1 rounded-full transition-colors ${
radarTier === tier.id
? "bg-indigo-600 text-white shadow-sm dark:bg-white dark:text-slate-900"
: "bg-slate-100 text-slate-500 group-hover:bg-slate-200 dark:bg-transparent dark:text-slate-500 group-hover:dark:text-slate-400"
: "bg-slate-100 text-slate-500 group-hover:bg-slate-200 dark:bg-white/[0.06] dark:text-slate-400 group-hover:dark:text-slate-300"
}`}
>
{tier.cutoff}+
Expand All @@ -589,8 +589,8 @@ export default function CgpaCalculatorPage() {
{(() => {
if (!radarTier) {
return (
<div className="p-6 rounded-2xl border border-dashed border-slate-200 dark:border-white/10 text-center">
<p className="text-sm font-medium text-slate-500 dark:text-slate-400">
<div className="p-6 rounded-2xl border border-dashed border-slate-300 md:border-slate-200 dark:border-white/10 text-center bg-white/50 md:bg-transparent dark:bg-white/[0.01] md:dark:bg-transparent">
<p className="text-sm font-medium text-slate-600 md:text-slate-500 dark:text-slate-400">
Select a career path above to unlock tailored insights
and view your eligibility status.
</p>
Expand All @@ -609,8 +609,8 @@ export default function CgpaCalculatorPage() {

if (!currentCgpa || isNaN(current)) {
return (
<div className="p-6 rounded-2xl border border-dashed border-slate-200 dark:border-white/10 text-center">
<p className="text-sm font-medium text-slate-500 dark:text-slate-400">
<div className="p-6 rounded-2xl border border-dashed border-slate-300 md:border-slate-200 dark:border-white/10 text-center bg-white/50 md:bg-transparent dark:bg-white/[0.01] md:dark:bg-transparent">
<p className="text-sm font-medium text-slate-600 md:text-slate-500 dark:text-slate-400">
Enter your current CGPA above to see your eligibility
status for this path.
</p>
Expand All @@ -620,13 +620,13 @@ export default function CgpaCalculatorPage() {

if (current >= required) {
return (
<div className="flex gap-4 p-5 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20">
<div className="flex gap-4 p-5 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 md:border-emerald-100 dark:border-emerald-500/20 shadow-sm md:shadow-none">
<ShieldCheck className="w-6 h-6 text-emerald-600 dark:text-emerald-400 shrink-0" />
<div>
<h4 className="font-bold text-emerald-800 dark:text-emerald-300 mb-1">
Safe Zone
</h4>
<p className="text-[13px] text-emerald-700 dark:text-emerald-400/80 leading-relaxed font-medium">
<p className="text-[13px] text-emerald-800/80 md:text-emerald-700 dark:text-emerald-400/80 leading-relaxed font-medium">
Your CGPA comfortably meets the standard{" "}
{required.toFixed(1)} cutoff for this tier. Focus
heavily on DSA and interview prep!
Expand All @@ -636,13 +636,13 @@ export default function CgpaCalculatorPage() {
);
} else if (current >= required - 0.5) {
return (
<div className="flex gap-4 p-5 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20">
<div className="flex gap-4 p-5 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200/80 md:border-amber-200 dark:border-amber-500/20 shadow-sm md:shadow-none">
<AlertTriangle className="w-6 h-6 text-amber-500 dark:text-amber-400 shrink-0" />
<div>
<h4 className="font-bold text-amber-800 dark:text-amber-300 mb-1">
Borderline
</h4>
<p className="text-[13px] text-amber-700 dark:text-amber-400/80 leading-relaxed font-medium">
<p className="text-[13px] text-amber-800/80 md:text-amber-700 dark:text-amber-400/80 leading-relaxed font-medium">
You are very close to the {required.toFixed(1)}{" "}
cutoff. Pushing your CGPA up slightly in remaining
semesters will safely unlock this tier.
Expand All @@ -652,13 +652,13 @@ export default function CgpaCalculatorPage() {
);
} else {
return (
<div className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20">
<div className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-red-50 dark:bg-red-500/10 border border-red-200/80 md:border-red-100 dark:border-red-500/20 shadow-sm md:shadow-none">
<AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400 shrink-0" />
<div>
<h4 className="font-bold text-red-800 dark:text-red-300 mb-1">
Action Required
</h4>
<p className="text-[13px] text-red-700 dark:text-red-400/80 leading-relaxed font-medium">
<p className="text-[13px] text-red-800/80 md:text-red-700 dark:text-red-400/80 leading-relaxed font-medium">
You are currently falling short of the{" "}
{required.toFixed(1)} cutoff. Don&apos;t panic! Set{" "}
<strong className="text-red-800 dark:text-red-300">
Expand All @@ -677,7 +677,7 @@ export default function CgpaCalculatorPage() {
</div>

{/* Pro-Tips for Boosting SGPA */}
<div className="p-6 sm:p-8 md:p-10 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.08] bg-blue-50/90 dark:bg-slate-900/50 dark:bg-gradient-to-br dark:from-white/[0.05] dark:to-transparent backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] ring-1 ring-inset ring-transparent dark:ring-white/[0.05] relative overflow-hidden">
<div className="px-2 py-4 md:p-8 lg:p-10 md:rounded-[2.5rem] lg:rounded-[3rem] md:border md:border-white/80 md:dark:border-white/[0.08] md:bg-blue-50/90 md:dark:bg-slate-900/50 md:dark:bg-gradient-to-br md:dark:from-white/[0.05] md:dark:to-transparent md:backdrop-blur-3xl md:shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] md:dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] md:ring-1 md:ring-inset md:ring-transparent md:dark:ring-white/[0.05] relative overflow-hidden">
<div className="flex items-center gap-3 mb-8">
<div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
<Lightbulb className="w-5 h-5" />
Expand Down
26 changes: 13 additions & 13 deletions components/dashboard/auth-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ export function DashboardAuthOverlay({
<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]" />
</div>

<div className="relative z-10 flex flex-col items-center px-8 py-10 text-center sm:px-10 sm:py-12">
<div className="relative z-10 flex flex-col items-center px-5 py-6 sm:px-10 sm:py-12 text-center">
{/* Dynamic Lock Icon with floating + pulse */}
<motion.div
className="relative mb-5"
className="relative mb-3 sm:mb-5"
animate={{ y: [0, -6, 0] }}
transition={{
duration: 4,
Expand All @@ -73,27 +73,27 @@ export function DashboardAuthOverlay({
ease: "easeInOut",
}}
/>
<div className="relative flex h-16 w-16 items-center justify-center rounded-2xl border border-blue-100 bg-gradient-to-b from-blue-50 to-white shadow-sm dark:border-cyan-500/20 dark:from-cyan-500/10 dark:to-transparent">
<div className="relative flex h-12 w-12 sm:h-16 sm:w-16 items-center justify-center rounded-2xl border border-blue-100 bg-gradient-to-b from-blue-50 to-white shadow-sm dark:border-cyan-500/20 dark:from-cyan-500/10 dark:to-transparent">
<Lock
className="h-7 w-7 text-blue-600 dark:text-cyan-400"
className="h-5 w-5 sm:h-7 sm:w-7 text-blue-600 dark:text-cyan-400"
strokeWidth={1.8}
/>
</div>
</motion.div>

{/* Premium Badge */}
<div className="mb-4 inline-flex items-center gap-1.5 rounded-full border border-amber-200/60 bg-amber-50/80 px-3 py-1 text-[11px] font-semibold text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400">
<div className="mb-3 sm:mb-4 inline-flex items-center gap-1.5 rounded-full border border-amber-200/60 bg-amber-50/80 px-3 py-1 text-[10px] sm:text-[11px] font-semibold text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400">
<Sparkles className="h-3 w-3" />
Personalized Dashboard
</div>

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

{/* Description — explains WHY login is needed */}
<p className="mx-auto mt-3 max-w-sm text-[13.5px] leading-relaxed text-slate-500 dark:text-slate-400">
<p className="mx-auto mt-2 sm:mt-3 max-w-sm text-[12px] sm:text-[13.5px] leading-snug sm:leading-relaxed text-slate-500 dark:text-slate-400 px-2">
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">
Expand All @@ -112,7 +112,7 @@ export function DashboardAuthOverlay({
</p>

{/* Onboarding Steps */}
<div className="mt-6 flex w-full max-w-xs flex-col items-start gap-0 mx-auto">
<div className="mt-4 sm:mt-6 flex w-full max-w-[280px] sm:max-w-xs flex-col items-start gap-0 mx-auto">
{onboardingSteps.map((step, i) => (
<div key={step.label} className="flex items-start gap-3">
{/* Step indicator dot + connector */}
Expand All @@ -131,12 +131,12 @@ export function DashboardAuthOverlay({
)}
</div>
{i < onboardingSteps.length - 1 && (
<div className="h-4 w-px bg-slate-200 dark:bg-white/10" />
<div className="h-2.5 sm:h-4 w-px bg-slate-200 dark:bg-white/10" />
)}
</div>
{/* Step label */}
<span
className={`pt-[1px] text-[12.5px] font-medium ${
className={`pt-[1px] text-[11.5px] sm:text-[12.5px] font-medium ${
step.isLast
? "text-blue-600 dark:text-cyan-400 font-semibold"
: "text-slate-500 dark:text-slate-400"
Expand All @@ -149,7 +149,7 @@ export function DashboardAuthOverlay({
</div>

{/* Action Buttons */}
<div className="mt-8 flex w-full flex-col gap-3 sm:flex-row sm:gap-3">
<div className="mt-5 sm:mt-8 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-5 py-3 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)]"
Expand All @@ -170,14 +170,14 @@ export function DashboardAuthOverlay({
{onPreview && (
<button
onClick={onPreview}
className="mt-6 text-[13px] font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
className="mt-4 sm:mt-6 text-[12px] sm:text-[13px] font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
>
Just browsing? Preview dashboard
</button>
)}

{/* Personalization-focused bottom text */}
<div className="mt-5 flex items-center justify-center gap-1.5 text-[11px] text-slate-400 dark:text-slate-500">
<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" />
Your University
Expand Down
Loading