Skip to content

Dashboard #65

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 6 commits into from
Jul 7, 2026
Merged

Dashboard #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
47da64f
added dashboard section
nitinmohan18 Jul 6, 2026
8c3b2d9
added seperation line between university sectionn and dashboard
nitinmohan18 Jul 6, 2026
59f39ee
restructure dashboard page
nitinmohan18 Jul 7, 2026
d720ed7
fixes colar of dashboard section and improving light mode visibility
nitinmohan18 Jul 7, 2026
4ebcb4b
fixed format
nitinmohan18 Jul 7, 2026
e34f812
Merge branch 'main' into dashboard
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
4 changes: 4 additions & 0 deletions app/(public)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Hero from "@/features/landing/hero";
import Universities from "@/features/landing/universities";
import ContactSection from "@/components/contact/ContactSection";
import DashboardPage from "@/app/dashboard/page";
import { Suspense } from "react";

export default function HomePage() {
Expand All @@ -10,6 +11,9 @@ export default function HomePage() {
<Suspense fallback={<div className="h-96" />}>
<Universities />
</Suspense>
<section id="Dashboard">
<DashboardPage />
</section>
<ContactSection />
</>
);
Expand Down
190 changes: 98 additions & 92 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,105 +6,111 @@ import { RecentActivityCard } from "@/components/dashboard/recent-activity-card"

export default function DashboardPage() {
return (
<div className="min-h-screen w-full bg-background pb-20 animate-in fade-in duration-700">
{/* 1. Premium Welcome Hero */}
<section className="relative overflow-hidden border-b border-border bg-card/30 dark:bg-card/10">
<div className="absolute inset-0 -z-10">
<div className="absolute -left-[10%] -top-[10%] h-[400px] w-[400px] rounded-full bg-[#1D4ED8]/10 blur-[120px] dark:bg-blue-500/20" />
<div className="absolute -right-[10%] -bottom-[10%] h-[400px] w-[400px] rounded-full bg-indigo-500/10 blur-[120px] dark:bg-indigo-500/20" />
</div>
<div className="relative w-full bg-background pt-16 pb-12 animate-in fade-in duration-700">
{/* 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 py-16 lg:px-8">
<div className="flex flex-col gap-4 lg:max-w-2xl">
<div className="inline-flex items-center rounded-full border border-blue-200/60 bg-blue-50/80 px-4 py-1.5 text-sm font-medium text-[#1D4ED8] shadow-sm backdrop-blur-md dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-400 w-fit">
Student Dashboard
<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>
<h1 className="text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
Welcome Back 👋
</h1>
<p className="mt-2 text-lg leading-relaxed text-muted-foreground">
Continue your learning journey with Hyper Learning. Access your
subjects, AI notes, and PYQs.
</p>
</div>
</div>
</section>

<div className="mx-auto max-w-7xl px-6 lg:px-8 mt-12 space-y-16">
{/* 2. Quick Action Cards */}
<section>
<div className="flex items-center justify-between mb-8">
<h2 className="text-2xl font-bold tracking-tight text-foreground">
Quick Actions
</h2>
</div>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
<QuickActionCard
title="Browse Universities"
description="Explore available institutions and branches."
href="/#Universities"
icon={GraduationCap}
colorVariant="blue"
/>
<QuickActionCard
title="View Syllabus"
description="Access detailed syllabus breakdowns."
href="/rgpv"
icon={BookOpen}
colorVariant="indigo"
/>
<QuickActionCard
title="Explore PYQs"
description="Practice with past year questions."
href="/rgpv"
icon={FileText}
colorVariant="emerald"
/>
<QuickActionCard
title="AI Assistant"
description="Get instant help from the AI tutor."
href="/rgpv"
icon={Sparkles}
colorVariant="purple"
/>
<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 👋
</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>
</div>
</div>
</div>
</section>

{/* 3. Continue Learning / Recent Activity */}
<section>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-8">
<h2 className="text-2xl font-bold tracking-tight text-foreground">
Continue Learning
</h2>
<Link
href="/rgpv"
className="text-sm font-medium text-[#1D4ED8] hover:underline dark:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] rounded-md px-1"
>
View all history
</Link>
</div>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
{/* 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">
<h2 className="text-xl font-bold tracking-tight text-foreground">
Continue Learning
</h2>
<Link
href="/rgpv"
className="text-sm font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
>
View all history &rarr;
</Link>
</div>
<div className="grid grid-cols-1 gap-5">
<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"
type="book"
/>
<RecentActivityCard
title="Data Structures (BT-402)"
subtitle="RGPV • CSE • Semester 4"
href="/rgpv/cse/semester-4/bt-402"
timeAgo="Yesterday"
progressText="Viewing June-2024 PYQ"
statusColor="bg-orange-500"
type="file"
/>
</div>
</div>

<div className="grid gap-6 md:grid-cols-2">
<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"
type="book"
/>
<RecentActivityCard
title="Data Structures (BT-402)"
subtitle="RGPV • CSE • Semester 4"
href="/rgpv/cse/semester-4/bt-402"
timeAgo="Yesterday"
progressText="Viewing June-2024 PYQ"
statusColor="bg-orange-500"
type="file"
/>
{/* 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">
<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">
<QuickActionCard
title="Universities"
description="Explore institutions."
href="/#Universities"
icon={GraduationCap}
colorVariant="blue"
/>
<QuickActionCard
title="Syllabus"
description="View breakdowns."
href="/rgpv"
icon={BookOpen}
colorVariant="indigo"
/>
<QuickActionCard
title="PYQs"
description="Practice questions."
href="/rgpv"
icon={FileText}
colorVariant="emerald"
/>
<QuickActionCard
title="AI Tutor"
description="Get instant help."
href="/rgpv"
icon={Sparkles}
colorVariant="purple"
/>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
);
Expand Down
29 changes: 18 additions & 11 deletions components/dashboard/quick-action-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,26 +58,33 @@ export function QuickActionCard({
return (
<Link
href={href}
className={`group relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 ${style.wrapper}`}
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}`}
>
<div
className={`flex h-12 w-12 items-center justify-center rounded-xl transition-colors ${style.iconBox}`}
>
<Icon className="h-6 w-6" />
<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" />

Comment on lines +61 to +64

@coderabbitai coderabbitai Bot Jul 7, 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.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the target component and related shared styles
git ls-files | rg 'components/dashboard/quick-action-card\.tsx|RecentActivityCard|style\.|tailwind|class-variance|variants'
printf '\n--- quick-action-card.tsx ---\n'
cat -n components/dashboard/quick-action-card.tsx | sed -n '1,220p'

printf '\n--- search for wrapper style definitions and focus-visible ring usage ---\n'
rg -n "focus-visible:ring|ring-2|ring-\[|style\.wrapper|RecentActivityCard|quick-action-card" components -S

Repository: imuniqueshiv/HyperLearningTech

Length of output: 11290

Add a focus-visible ring width. style.wrapper only adds focus-visible:ring-*, so this card has no visible focus ring without ring/ring-2 (as in RecentActivityCard).

🤖 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/quick-action-card.tsx` around lines 61 - 64, The
focus-visible state on QuickActionCard is missing a ring width, so the ring
color from style.wrapper won’t render visibly. Update the className in
quick-action-card so the card includes a ring width utility (for example
matching the pattern used by RecentActivityCard) while keeping the existing
focus-visible ring color from style.wrapper.

<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={`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}`}
>
<ArrowRight className="h-4 w-4" />
</div>
</div>
<div>

<div className="relative z-10 mt-1">
<h3
className={`font-semibold text-foreground transition-colors ${style.title}`}
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}`}
>
{title}
</h3>
<p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
<p className="mt-1 text-[13px] sm:text-sm leading-relaxed text-muted-foreground font-medium line-clamp-2">
{description}
</p>
</div>
<ArrowRight
className={`absolute bottom-6 right-6 h-5 w-5 text-muted-foreground opacity-0 transition-all duration-300 group-hover:opacity-100 ${style.arrow}`}
/>
</Link>
);
}
27 changes: 16 additions & 11 deletions components/dashboard/recent-activity-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,33 +25,38 @@ export function RecentActivityCard({
return (
<Link
href={href}
className="group flex flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:border-[#1D4ED8]/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30"
className="group relative flex flex-col justify-between overflow-hidden rounded-[20px] border border-black/10 dark:border-white/[0.08] bg-black/[0.02] dark:bg-white/[0.03] p-5 sm:p-6 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]"
>
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="flex gap-4">
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-[#1D4ED8]/10 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
<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" />

<div className="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="flex gap-4 items-center sm:items-start">
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-background border border-border text-muted-foreground transition-colors group-hover:bg-[#1D4ED8]/10 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
<Icon className="h-6 w-6" />
</div>
<div className="flex flex-col justify-center">
<h3 className="font-semibold text-foreground transition-colors group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
<h3 className="font-bold text-[15px] sm:text-base tracking-tight text-foreground group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
{title}
</h3>
<p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
<p className="mt-0.5 text-[13px] sm:text-sm font-medium text-muted-foreground">
{subtitle}
</p>
</div>
</div>
<div className="flex w-fit items-center gap-1.5 self-start rounded-md bg-muted/50 px-2.5 py-1 text-xs text-muted-foreground">
<div className="hidden sm:flex w-fit items-center gap-1.5 self-start rounded-md bg-background border border-border px-2.5 py-1 text-xs font-semibold text-muted-foreground">
<Clock className="h-3.5 w-3.5" />
<span>{timeAgo}</span>
</div>
</div>
<div className="mt-8 flex items-center justify-between border-t border-border pt-4">
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">

<div className="relative z-10 mt-6 flex items-center justify-between border-t border-border pt-4">
<div className="flex items-center gap-2.5 text-[13px] sm:text-sm font-medium text-muted-foreground">
<span className={`h-2 w-2 rounded-full ${statusColor}`} />
{progressText}
</div>
<div className="flex items-center text-sm font-medium text-[#1D4ED8] transition-colors dark:text-blue-400">
<div className="flex items-center text-[13px] sm:text-sm font-bold text-[#1D4ED8] transition-colors dark:text-blue-400">
Resume{" "}
<ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
<ChevronRight className="ml-0.5 h-4 w-4 transition-transform group-hover:translate-x-1" />
</div>
</div>
</Link>
Expand Down
14 changes: 10 additions & 4 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const navLinks = [
},
{
label: "Dashboard",
href: "/dashboard",
href: "/#Dashboard",
icon: LayoutDashboard,
},
{
Expand Down Expand Up @@ -101,11 +101,15 @@ export default function Navbar() {
.map((link) => link.href.substring(2));

let current = "";
// Use a viewing offset at 40% of the screen height (where the user's eyes naturally focus)
const viewingOffset = window.innerHeight * 0.4;

for (const section of sections) {
const element = document.getElementById(section);
if (element) {
const rect = element.getBoundingClientRect();
if (rect.top <= 120 && rect.bottom >= 120) {
// A section is active if this viewing offset falls within its top and bottom bounds
if (rect.top <= viewingOffset && rect.bottom >= viewingOffset) {
current = section;
break;
}
Expand Down Expand Up @@ -287,7 +291,8 @@ export default function Navbar() {
(pathname === "/" &&
link.href.startsWith("/#") &&
activeSection === link.href) ||
(pathname === link.href && !link.href.startsWith("/#"));
(pathname === link.href && !link.href.startsWith("/#")) ||
(pathname === "/dashboard" && link.label === "Dashboard");

const Icon = link.icon;

Expand Down Expand Up @@ -513,7 +518,8 @@ export default function Navbar() {
(pathname === "/" &&
link.href.startsWith("/#") &&
activeSection === link.href) ||
(pathname === link.href && !link.href.startsWith("/#"));
(pathname === link.href && !link.href.startsWith("/#")) ||
(pathname === "/dashboard" && link.label === "Dashboard");

return (
<Link
Expand Down
Loading