Skip to content

feat: embed dashboard, refine premium UI, and add lag-free scroll ani… #104

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

feat: embed dashboard, refine premium UI, and add lag-free scroll ani… #104

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
41 changes: 35 additions & 6 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
"use client";

import Link from "next/link";
import { GraduationCap, BookOpen, FileText, Sparkles } from "lucide-react";
import { motion } from "framer-motion";

import { QuickActionCard } from "@/components/dashboard/quick-action-card";
import { RecentActivityCard } from "@/components/dashboard/recent-activity-card";
Expand All @@ -23,7 +26,13 @@ export default function DashboardPage() {
<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-slate-200/60 bg-white/80 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-xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] group transition-all duration-300 dark:hover:border-blue-400/30">
<motion.div
initial={{ opacity: 0, y: 30, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.7, ease: [0.25, 1, 0.5, 1] }}
className="relative w-full overflow-hidden rounded-[24px] border border-slate-200/60 bg-white/80 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-xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] 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]" />
Expand Down Expand Up @@ -86,11 +95,21 @@ export default function DashboardPage() {
</div>
</div>
</div>
</div>
</motion.div>

<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">
<motion.div
initial={{ opacity: 0, y: 30, scale: 0.96 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{
duration: 0.6,
delay: 0.1,
ease: [0.25, 1, 0.5, 1],
}}
className="col-span-1 lg:col-span-7 flex flex-col gap-5"
>
<div className="flex items-center justify-between px-1 shrink-0">
<h2 className="text-xl font-bold tracking-tight text-foreground">
Start your journey
Expand Down Expand Up @@ -124,10 +143,20 @@ export default function DashboardPage() {
type="file"
/>
</div>
</div>
</motion.div>

{/* 3. Quick Actions (Right side grid) */}
<div className="col-span-1 lg:col-span-5 flex flex-col gap-5">
<motion.div
initial={{ opacity: 0, y: 30, scale: 0.96 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{
duration: 0.6,
delay: 0.2,
ease: [0.25, 1, 0.5, 1],
}}
className="col-span-1 lg:col-span-5 flex flex-col gap-5"
>
<div className="flex items-center justify-between px-1 shrink-0">
<h2 className="text-xl font-bold tracking-tight text-foreground">
Quick Actions
Expand Down Expand Up @@ -163,7 +192,7 @@ export default function DashboardPage() {
colorVariant="purple"
/>
</div>
</div>
</motion.div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/rgpv/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import UniversityHero from "@/components/university/university-hero";
import BranchGrid from "@/components/university/branch-grid";
import QuickAccess from "@/components/university/quick-access";
import DashboardPage from "@/app/dashboard/page";

export default function RGPVPage() {
return (
Expand Down Expand Up @@ -33,8 +33,8 @@ export default function RGPVPage() {
{/* Branch Selection */}
<BranchGrid />

{/* Academic Navigation */}
<QuickAccess />
{/* Dashboard */}
<DashboardPage />
</div>
</main>
);
Expand Down
204 changes: 104 additions & 100 deletions components/university/branch-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,46 +49,48 @@ export default function BranchGrid() {
return (
<section
id="branches"
className="relative overflow-hidden border-b border-border bg-background py-16 md:py-20 lg:py-24"
className="relative overflow-hidden border-y border-slate-200 bg-slate-50/30 py-16 transition-colors duration-500 md:py-20 lg:py-24 dark:border-white/10 dark:bg-background"
>
{/* Background Glow */}
<div className="absolute inset-0 -z-10">
<div className="absolute left-0 top-0 h-[500px] w-[500px] rounded-full bg-blue-500/5 blur-[120px]" />
<div className="absolute right-0 bottom-0 h-[500px] w-[500px] rounded-full bg-indigo-500/5 blur-[120px]" />
{/* Premium Glowing Top Separator */}
<div className="absolute inset-x-0 top-0 h-px w-full bg-gradient-to-r from-transparent via-blue-600/50 to-transparent dark:via-blue-400/30" />
<div className="absolute inset-x-0 top-0 h-24 w-full bg-gradient-to-b from-blue-500/5 to-transparent dark:from-blue-400/5" />

{/* Premium Wavy Aurora Background */}
<div className="absolute inset-0 -z-10 overflow-hidden">
{/* Sweeping Wavy Gradient Blobs */}
<div className="absolute -left-[20%] top-[-10%] h-[70%] w-[60%] -rotate-12 rounded-[100%] bg-gradient-to-br from-blue-400/20 to-blue-100/5 blur-[120px] dark:from-blue-900/20 dark:to-transparent" />
<div className="absolute -right-[10%] top-[10%] h-[80%] w-[50%] rotate-12 rounded-[100%] bg-gradient-to-bl from-indigo-400/20 to-purple-200/5 blur-[120px] dark:from-indigo-900/20 dark:to-transparent" />
<div className="absolute -bottom-[20%] left-[10%] h-[60%] w-[80%] -rotate-6 rounded-[100%] bg-gradient-to-tr from-purple-400/20 to-blue-200/5 blur-[120px] dark:from-purple-900/20 dark:to-transparent" />
</div>

<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Header */}
<motion.div
initial={{
opacity: 0,
y: 20,
}}
whileInView={{
opacity: 1,
y: 0,
}}
viewport={{ once: true }}
transition={{
duration: 0.5,
}}
initial={{ opacity: 0, y: 30, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.7, ease: [0.25, 1, 0.5, 1] }}
className="mx-auto mb-10 md:mb-12 lg:mb-16 max-w-3xl text-center"
>
<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-600 dark:text-blue-400 md:px-4 md:py-2 md:text-sm">
<div className="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/5 px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 md:px-4 md:py-1.5 md:text-sm">
<span className="relative flex h-1.5 w-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-blue-500"></span>
</span>
Engineering Branches
</div>

<h2 className="mt-4 text-3xl font-extrabold tracking-tight text-foreground md:text-4xl lg:text-5xl">
<h2 className="mt-5 text-4xl font-black tracking-tight text-foreground md:text-5xl lg:text-6xl">
Choose Your
<span className="block bg-gradient-to-r from-[#1D4ED8] to-indigo-600 bg-clip-text text-transparent">
<span className="mt-2 block bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 bg-clip-text pb-1 text-transparent drop-shadow-sm dark:from-blue-400 dark:via-indigo-400 dark:to-purple-400 sm:mt-3">
Branch
</span>
</h2>

<p className="mt-4 text-base leading-relaxed text-muted-foreground md:text-lg">
Browse branch-specific syllabus, previous year questions, Hyper AI
learning resources, and academic content organized semester by
semester.
<p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground/90 dark:text-muted-foreground/80 md:text-lg">
Access high-quality academic content, analyze previous year
questions, and accelerate your learning with Hyper AI—intelligently
organized by semester.
</p>
</motion.div>

Expand All @@ -100,73 +102,74 @@ export default function BranchGrid() {

const CardContent = (
<motion.div
initial={{
opacity: 0,
y: 20,
}}
whileInView={{
opacity: 1,
y: 0,
}}
viewport={{ once: true }}
initial={{ opacity: 0, y: 30, scale: 0.96 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{
duration: 0.4,
delay: index * 0.06,
duration: 0.5,
delay: index * 0.05,
ease: [0.25, 1, 0.5, 1],
}}
className="group relative h-full overflow-hidden rounded-xl border border-border bg-card/50 p-4 backdrop-blur-xl transition-all duration-300 hover:border-blue-500/30 hover:shadow-lg hover:-translate-y-0.5"
className="group relative h-full overflow-hidden rounded-xl border border-slate-200/60 bg-gradient-to-bl from-blue-50/80 via-white to-white p-4 shadow-[0_2px_20px_rgba(0,0,0,0.04)] transition-all duration-500 hover:border-blue-300/50 hover:shadow-[0_8px_30px_rgba(59,130,246,0.09)] hover:-translate-y-1 dark:border-white/10 dark:bg-white/[0.03] dark:bg-none dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] dark:hover:border-blue-500/30"
>
{/* Glow */}
<div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div className="absolute -right-10 -top-10 h-24 w-24 rounded-full bg-blue-500/10 blur-2xl" />
{/* Premium Inner Glow on Hover (Light Mode Only) */}
<div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:hidden">
<div className="absolute -right-8 -top-8 h-36 w-36 rounded-full bg-blue-400/[0.17] blur-2xl" />
<div className="absolute -left-8 -top-8 h-28 w-28 rounded-full bg-blue-400/[0.08] blur-2xl" />
</div>

{/* Header */}
<div className="relative z-10 flex items-start justify-between">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#1D4ED8]/10 sm:h-10 sm:w-10">
<Icon className="h-4 w-4 text-[#1D4ED8] sm:h-5 sm:w-5" />
<div className="relative z-10 flex h-full flex-col">
{/* Header */}
<div className="flex items-start justify-between">
<div className="flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center rounded-lg border border-blue-500/10 bg-blue-500/5 text-blue-600 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-400">
<Icon className="h-4 w-4 sm:h-5 sm:w-5" />
</div>

<div className="inline-flex items-center gap-1.5 rounded-full border border-slate-200/60 bg-slate-50/80 px-2 py-0.5 text-[10px] font-medium text-slate-600 dark:border-white/[0.08] dark:bg-white/[0.02] dark:text-slate-300 sm:text-[11px]">
<div
className={`h-1.5 w-1.5 rounded-full ${
branch.status === "Available"
? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.6)]"
: "bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.6)]"
}`}
/>
{branch.status === "Available" ? "Live" : "Soon"}
</div>
</div>

<span
className={`rounded-full px-2 py-0.5 text-[10px] font-semibold sm:text-xs ${
branch.status === "Available"
? "border border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
: "border border-orange-500/20 bg-orange-500/10 text-orange-600 dark:text-orange-400"
}`}
>
{branch.status === "Available" ? "Live" : "Soon"}
</span>
</div>

{/* Content */}
<div className="relative z-10 mt-3">
<h3 className="text-xl font-black tracking-tight text-foreground sm:text-2xl">
{branch.id.toUpperCase()}
</h3>
{/* Content */}
<div className="mt-3 flex-1">
<h3 className="text-xl font-bold tracking-tight text-foreground sm:text-2xl">
{branch.id.toUpperCase()}
</h3>

<p className="mt-1 text-xs text-muted-foreground line-clamp-2 sm:text-sm">
{branch.name}
</p>
<p className="mt-1 text-xs text-muted-foreground line-clamp-2 sm:text-sm">
{branch.name}
</p>

<div className="mt-3 inline-flex rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground sm:text-xs">
{config.subjects}
<div className="mt-3 inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-[10px] font-medium text-slate-600 shadow-sm sm:text-xs dark:border-white/10 dark:bg-white/[0.05] dark:text-zinc-300">
<div className="h-1.5 w-1.5 rounded-full bg-blue-500/80"></div>
{config.subjects}
</div>
</div>
</div>

{/* Footer */}
<div className="relative z-10 mt-4 flex items-center justify-between">
{branch.status === "Available" ? (
<>
<span className="text-xs font-semibold text-[#1D4ED8] sm:text-sm">
Explore
{/* Footer */}
<div className="mt-4 flex items-center justify-between border-t border-slate-100 pt-3 dark:border-white/[0.08]">
{branch.status === "Available" ? (
<div className="flex w-full items-center justify-between group/btn">
<span className="text-xs font-semibold text-foreground transition-colors group-hover:text-blue-600 dark:group-hover:text-blue-400 sm:text-sm">
Explore
</span>
<div className="flex h-6 w-6 sm:h-7 sm:w-7 items-center justify-center rounded-full bg-blue-500/5 transition-all duration-300 group-hover:bg-blue-500/10 text-blue-600 dark:text-blue-400 group-hover:translate-x-1">
<ArrowRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
</div>
</div>
) : (
<span className="text-[10px] font-medium text-muted-foreground sm:text-xs">
Planned
</span>

<ArrowRight className="h-3.5 w-3.5 text-[#1D4ED8] transition-transform duration-300 group-hover:translate-x-0.5 sm:h-4 sm:w-4" />
</>
) : (
<span className="text-[10px] font-medium text-muted-foreground sm:text-xs">
Planned
</span>
)}
)}
</div>
</div>
</motion.div>
);
Expand All @@ -176,7 +179,7 @@ export default function BranchGrid() {
<Link
key={branch.id}
href={`/rgpv/${branch.slug}`}
className="block"
className="block focus:outline-none"
>
{CardContent}
</Link>
Expand All @@ -187,31 +190,32 @@ export default function BranchGrid() {
})}
</div>

{/* Bottom Notice */}
{/* Bottom Section - Premium Floating Text */}
<motion.div
initial={{
opacity: 0,
y: 20,
}}
whileInView={{
opacity: 1,
y: 0,
}}
viewport={{ once: true }}
transition={{
duration: 0.5,
}}
className="mt-10 rounded-2xl border border-border bg-card/40 p-6 text-center backdrop-blur-xl md:mt-12 lg:mt-16 md:p-8"
initial={{ opacity: 0, y: 30, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.7, delay: 0.2, ease: [0.25, 1, 0.5, 1] }}
className="relative mx-auto mt-32 max-w-3xl text-center"
>
<h3 className="text-lg font-bold text-foreground md:text-2xl">
Expanding Across Engineering Disciplines
{/* Ethereal background glow */}
<div className="pointer-events-none absolute inset-0 -z-10 mx-auto h-full w-full max-w-lg bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-400/20 via-transparent to-transparent blur-3xl dark:from-blue-600/15" />

<h3 className="text-3xl font-black tracking-tight text-slate-900 dark:text-white md:text-4xl lg:text-5xl">
Built for Every{" "}
<span className="bg-gradient-to-b from-slate-900 to-slate-500 bg-clip-text text-transparent dark:from-white dark:to-slate-400">
Engineering Discipline
</span>
</h3>

<p className="mx-auto mt-2 max-w-3xl text-sm text-muted-foreground md:text-base">
Hyper Learning is being structured to support every major RGPV
engineering branch through syllabus-driven learning, AI-generated
academic resources, and previous year question analysis.
<p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-slate-600 dark:text-slate-400 md:text-lg">
Hyper Learning is expanding to support all major RGPV branches. We
combine structured academic curriculums with AI-powered resources to
deliver a seamless, high-quality learning experience.
</p>

{/* Elegant fading divider */}
<div className="mx-auto mt-12 h-px w-3/4 bg-gradient-to-r from-transparent via-slate-200 to-transparent dark:via-white/10" />
</motion.div>
</div>
</section>
Expand Down
Loading
Loading