Skip to content

improve background colour and overall visual heirerchy of dashboard… #66

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 3 commits into from
Jul 7, 2026
+246 −106
Merged

improve background colour and overall visual heirerchy of dashboard… #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b97c54
improve background colour and overall visual heirerchy of dashboard…
nitinmohan18 Jul 7, 2026
f37cbc7
fixed eslint
nitinmohan18 Jul 7, 2026
53b886f
fixed format
nitinmohan18 Jul 7, 2026
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
114 changes: 90 additions & 24 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,103 @@ import { RecentActivityCard } from "@/components/dashboard/recent-activity-card"

export default function DashboardPage() {
return (
<div className="relative w-full bg-background pt-16 pb-12 animate-in fade-in duration-700">
<div className="relative w-full bg-background dark:bg-transparent pt-16 pb-12 animate-in fade-in duration-700 z-0">
{/* Background Layers */}
<div className="absolute inset-0 -z-10 overflow-hidden">
{/* Light Mode Wavy Refraction Background (Properly visible at the top) */}
<div
className="absolute inset-0 dark:hidden"
style={{
backgroundImage: `
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath fill='%234a6cf7' fill-opacity='0.10' d='M0,400 C320,500 420,300 720,400 C1020,500 1120,300 1440,400 L1440,0 L0,0 Z'/%3E%3Cpath fill='%236e8efb' fill-opacity='0.14' d='M0,500 C320,400 420,600 720,500 C1020,400 1120,600 1440,500 L1440,0 L0,0 Z'/%3E%3Cpath fill='%234a6cf7' fill-opacity='0.08' d='M0,600 C320,700 420,500 720,600 C1020,700 1120,500 1440,600 L1440,0 L0,0 Z'/%3E%3C/svg%3E"),
linear-gradient(to top, #f0f4ff, #ffffff)
`,
backgroundSize: "cover, auto",
backgroundPosition: "center, top",
backgroundRepeat: "no-repeat, no-repeat",
WebkitMaskImage:
"linear-gradient(to bottom, black 0%, black 50%, transparent 100%)",
maskImage:
"linear-gradient(to bottom, black 0%, black 50%, transparent 100%)",
}}
/>
</div>

{/* Top Section Divider for visual separation from Universities */}
<div className="absolute inset-x-0 top-0 h-px w-full bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />

<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="flex flex-col gap-8">
{/* 1. Premium Welcome Banner (Full Width) */}
<div className="relative w-full overflow-hidden rounded-[24px] border border-border/80 bg-gradient-to-br from-card to-background p-8 sm:p-10 shadow-sm group">
<div className="absolute inset-0 -z-10 opacity-30 transition-opacity duration-500 group-hover:opacity-60">
<div className="absolute -left-[5%] -top-[10%] h-[300px] w-[300px] rounded-full bg-blue-600/20 blur-[100px]" />
<div className="absolute right-[5%] bottom-[10%] h-[300px] w-[300px] rounded-full bg-indigo-600/20 blur-[100px]" />
<div className="relative w-full overflow-hidden rounded-[24px] border border-blue-100/50 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 dark:border-blue-400/15 dark:bg-slate-900/60 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent backdrop-blur-2xl p-8 shadow-sm dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] group transition-all duration-300 dark:hover:border-blue-400/30">
{/* Ambient Background Glow (Dark Mode only) */}
<div className="hidden dark:block absolute inset-0 -z-10 opacity-[0.12] transition-opacity duration-500 group-hover:opacity-[0.24]">
<div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[300px] w-[500px] rounded-full bg-cyan-500/24 blur-[100px]" />
</div>

<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 relative z-10">
<div className="flex flex-col gap-3">
<div className="inline-flex items-center rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1 text-xs font-semibold text-blue-400 w-fit">
Student Dashboard
</div>
<h1 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
Welcome Back 👋
<div className="relative z-10 flex flex-col items-center text-center gap-5">
<div className="inline-flex items-center rounded-full border border-blue-200 bg-blue-100 px-4 py-1 text-xs font-semibold text-blue-700 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-400 dark:shadow-[0_0_15px_rgba(6,182,212,0.1)] backdrop-blur-md">
Student Dashboard
</div>

<div className="flex flex-col items-center gap-2.5">
<h1 className="text-3xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">
Welcome Back, Alex{" "}
<span className="inline-block animate-wave">👋</span>
</h1>
<p className="max-w-xl text-[15px] leading-relaxed text-muted-foreground font-medium">
Pick up where you left off. Access your syllabus, study your
AI-generated notes, and practice with past year questions.
<p className="max-w-2xl text-[14.5px] leading-relaxed text-zinc-600 dark:text-zinc-400 font-medium mt-1">
Pick up where you left off. Access your personalized syllabus,
study your AI-generated notes, and practice with past year
questions.
</p>
</div>

{/* Decorative Activity Pulse (Hidden on mobile) */}
<div className="absolute right-6 top-1/2 -translate-y-1/2 hidden md:flex flex-col items-end gap-1.5 opacity-60 transition-opacity hover:opacity-100">
<svg
width="100"
height="24"
viewBox="0 0 120 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-cyan-500/50"
>
{/* Faint Background Track */}
<path
d="M0 15H30L35 10L42 22L50 5L58 28L65 15H120"
stroke="currentColor"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-20"
/>
{/* Live Pulse (subtle) */}
<path
d="M0 15H30L35 10L42 22L50 5L58 28L65 15H120"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="animate-pulse-line opacity-80"
/>
</svg>
<div className="flex items-center gap-1.5 mr-1">
<span className="relative flex h-1.5 w-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60"></span>
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500/80"></span>
</span>
<span className="text-[9px] font-semibold tracking-widest text-zinc-500 dark:text-zinc-400 uppercase">
Workspace Active
</span>
</div>
</div>
</div>
</div>

<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
{/* 2. Continue Learning Section (Left side) */}
<div className="col-span-1 lg:col-span-7 flex flex-col gap-5">
<div className="flex items-center justify-between px-1">
<div className="flex items-center justify-between px-1 shrink-0">
<h2 className="text-xl font-bold tracking-tight text-foreground">
Continue Learning
</h2>
Expand All @@ -49,36 +113,38 @@ export default function DashboardPage() {
View all history &rarr;
</Link>
</div>
<div className="grid grid-cols-1 gap-5">
<div className="flex flex-col gap-5 flex-1">
<RecentActivityCard
title="Mathematics-III (BT-401)"
subtitle="RGPV • CSE • Semester 4"
href="/rgpv/cse/semester-4/bt-401"
timeAgo="2 hours ago"
progressText="Unit 2: Laplace Transform"
statusColor="bg-emerald-500"
progressValue={75}
theme="cyan"
type="book"
/>
<RecentActivityCard
title="Data Structures (BT-402)"
title="Analysis Design of Algorithm (CS-402)"
subtitle="RGPV • CSE • Semester 4"
href="/rgpv/cse/semester-4/bt-402"
href="/rgpv/cse/semester-4/cs-402"
timeAgo="Yesterday"
progressText="Viewing June-2024 PYQ"
statusColor="bg-orange-500"
progressValue={40}
theme="orange"
type="file"
/>
</div>
</div>

{/* 3. Quick Actions (Right side grid) */}
<div className="col-span-1 lg:col-span-5 flex flex-col gap-5">
<div className="flex items-center justify-between px-1">
<div className="flex items-center justify-between px-1 shrink-0">
<h2 className="text-xl font-bold tracking-tight text-foreground">
Quick Actions
</h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5 flex-1">
<QuickActionCard
title="Universities"
description="Explore institutions."
Expand Down
18 changes: 18 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,21 @@
transparent 50%
);
}

/* Activity Pulse Animation */
@keyframes pulse-line {
0% {
stroke-dashoffset: 170;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -170;
}
}

.animate-pulse-line {
stroke-dasharray: 170;
animation: pulse-line 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
75 changes: 35 additions & 40 deletions components/dashboard/quick-action-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Link from "next/link";
import { ArrowRight, LucideIcon } from "lucide-react";
import { LucideIcon } from "lucide-react";

type ColorVariant = "blue" | "indigo" | "emerald" | "purple";

Expand All @@ -20,36 +20,20 @@ export function QuickActionCard({
}: QuickActionCardProps) {
const variants = {
blue: {
wrapper:
"hover:border-[#1D4ED8]/30 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30",
iconBox:
"bg-blue-50 text-[#1D4ED8] group-hover:bg-[#1D4ED8] group-hover:text-white dark:bg-blue-500/10 dark:text-blue-400 dark:group-hover:bg-blue-500 dark:group-hover:text-white",
title: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400",
arrow: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400",
wrapper: "hover:border-blue-500/30 focus-visible:ring-blue-500",
iconBox: "bg-blue-500/10 text-blue-400 border-blue-500/20",
},
indigo: {
wrapper:
"hover:border-indigo-500/30 focus-visible:ring-indigo-500 dark:hover:border-indigo-500/30",
iconBox:
"bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500 dark:group-hover:text-white",
title: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
arrow: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
wrapper: "hover:border-purple-500/30 focus-visible:ring-purple-500",
iconBox: "bg-purple-500/10 text-purple-400 border-purple-500/20",
},
emerald: {
wrapper:
"hover:border-emerald-500/30 focus-visible:ring-emerald-500 dark:hover:border-emerald-500/30",
iconBox:
"bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500 dark:group-hover:text-white",
title: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
arrow: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
wrapper: "hover:border-emerald-500/30 focus-visible:ring-emerald-500",
iconBox: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
},
purple: {
wrapper:
"hover:border-purple-500/30 focus-visible:ring-purple-500 dark:hover:border-purple-500/30",
iconBox:
"bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white dark:bg-purple-500/10 dark:text-purple-400 dark:group-hover:bg-purple-500 dark:group-hover:text-white",
title: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
arrow: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
wrapper: "hover:border-amber-500/30 focus-visible:ring-amber-500",
iconBox: "bg-amber-500/10 text-amber-400 border-amber-500/20",
},
};

Expand All @@ -58,30 +42,41 @@ export function QuickActionCard({
return (
<Link
href={href}
className={`group relative flex flex-col gap-3 overflow-hidden rounded-[20px] border border-black/10 dark:border-white/[0.08] bg-black/[0.02] dark:bg-white/[0.03] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-transform hover:-translate-y-1 hover:shadow-xl hover:bg-black/[0.04] dark:hover:bg-white/[0.05] hover:border-blue-500/30 ${style.wrapper}`}
className={`group relative flex flex-col justify-between h-full overflow-hidden rounded-[20px] border border-zinc-200/80 bg-white p-5 shadow-[0_8px_24px_rgba(149,157,165,0.15)] hover:border-blue-200 hover:shadow-[0_8px_24px_rgba(96,165,250,0.2)] hover:-translate-y-1 transition-all duration-300 dark:bg-slate-900/60 dark:border-blue-400/15 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] dark:hover:shadow-[0_15px_40px_rgba(0,0,0,0.4)] dark:hover:border-blue-400/30 ${style.wrapper}`}
>
<div className="absolute inset-0 bg-gradient-to-br from-black/5 dark:from-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
{/* Subtle Radial Glow on the Right Edge (Only in Dark Mode or very faint in Light Mode) */}
<div
className={`absolute top-0 -right-20 w-48 h-full rounded-full blur-[50px] opacity-[0.02] dark:opacity-[0.05] transition-opacity duration-300 group-hover:opacity-[0.04] dark:group-hover:opacity-[0.12] ${
colorVariant === "blue"
? "bg-blue-500"
: colorVariant === "indigo"
? "bg-purple-500"
: colorVariant === "emerald"
? "bg-emerald-500"
: "bg-amber-500"
}`}
/>

<div className="relative z-10 flex items-center justify-between">
<div
className={`flex h-12 w-12 items-center justify-center rounded-xl transition-colors duration-300 ${style.iconBox}`}
>
<Icon className="h-6 w-6" />
</div>
<div className="absolute inset-0 bg-gradient-to-br from-zinc-100/50 dark:from-white/[0.02] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />

{/* Top Section: Icon */}
<div className="relative z-10 flex items-start justify-between">
<div
className={`flex h-8 w-8 items-center justify-center rounded-full bg-background border border-border opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:bg-[#1D4ED8]/10 group-hover:border-[#1D4ED8]/20 group-hover:text-[#1D4ED8] ${style.arrow}`}
className={`flex h-[42px] w-[42px] items-center justify-center rounded-[12px] shadow-sm dark:shadow-inner border border-zinc-200/60 bg-zinc-50 dark:border-white/[0.08] dark:bg-[#0c1017] transition-colors ${style.iconBox}`}
>
<ArrowRight className="h-4 w-4" />
<Icon
className="h-5 w-5 dark:drop-shadow-[0_0_8px_currentColor]"
strokeWidth={2}
/>
</div>
</div>

<div className="relative z-10 mt-1">
<h3
className={`font-bold text-[15px] sm:text-base tracking-tight text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 ${style.title}`}
>
{/* Bottom Section: Text */}
<div className="relative z-10 mt-8 flex flex-col gap-0.5">
<h3 className="font-bold text-[15px] tracking-tight text-zinc-900 dark:text-white leading-snug">
{title}
</h3>
<p className="mt-1 text-[13px] sm:text-sm leading-relaxed text-muted-foreground font-medium line-clamp-2">
<p className="text-[12.5px] font-medium text-zinc-500 dark:text-zinc-400">
{description}
</p>
</div>
Expand Down
Loading
Loading