Skip to content

refactor: optimize universities page layout and card design #16

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
imuniqueshiv merged 3 commits into from
Jun 27, 2026
Merged

refactor: optimize universities page layout and card design #16

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
425c2e1
refactor: optimize universities page layout and card design
nitinmohan18 Jun 27, 2026
1cadf9d
style: apply Prettier formatting
nitinmohan18 Jun 27, 2026
cdf5f65
Merge branch 'main' into feature/layout-transition
imuniqueshiv Jun 27, 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
27 changes: 26 additions & 1 deletion app/(public)/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
import Stats from "@/features/landing/stats";
import Features from "@/features/landing/features";
import AIDemo from "@/features/landing/ai-demo";
import Testimonials from "@/features/landing/testimonials";
import FAQ from "@/features/landing/faq";
import { Suspense } from "react";

export default function AboutPage() {
return <div>About Page</div>;
return (
<>
<Suspense fallback={<div className="h-40" />}>
<Stats />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<Features />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<AIDemo />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<Testimonials />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<FAQ />
</Suspense>
</>
);
}
20 changes: 0 additions & 20 deletions app/(public)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,14 @@
import Hero from "@/features/landing/hero";
import Stats from "@/features/landing/stats";
import Features from "@/features/landing/features";
import AIDemo from "@/features/landing/ai-demo";
import Universities from "@/features/landing/universities";
import Testimonials from "@/features/landing/testimonials";
import FAQ from "@/features/landing/faq";
import { Suspense } from "react";

export default function HomePage() {
return (
<>
<Hero />
<Suspense fallback={<div className="h-40" />}>
<Stats />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<Features />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<AIDemo />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<Universities />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<Testimonials />
</Suspense>
<Suspense fallback={<div className="h-96" />}>
<FAQ />
</Suspense>
</>
);
}
138 changes: 84 additions & 54 deletions features/landing/universities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
"use client";

import Link from "next/link";

Check warning on line 3 in features/landing/universities.tsx

View workflow job for this annotation

GitHub Actions / Format · Lint · Typecheck · Build 

'Link' is defined but never used
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { GraduationCap, ArrowRight, Sparkles, Search } from "lucide-react";
import {
GraduationCap,
ArrowRight,
Sparkles,
Search,
Building2,

Check warning on line 11 in features/landing/universities.tsx

View workflow job for this annotation

GitHub Actions / Format · Lint · Typecheck · Build 

'Building2' is defined but never used
BookOpen,

Check warning on line 12 in features/landing/universities.tsx

View workflow job for this annotation

GitHub Actions / Format · Lint · Typecheck · Build 

'BookOpen' is defined but never used
Clock,

Check warning on line 13 in features/landing/universities.tsx

View workflow job for this annotation

GitHub Actions / Format · Lint · Typecheck · Build 

'Clock' is defined but never used
} from "lucide-react";

const universities = [
{
Expand All @@ -22,7 +30,7 @@
fullName: "Dr. A.P.J. Abdul Kalam Technical University",
description:
"Future expansion planned with syllabus mapping, PYQs, and AI-powered learning resources.",
branches: ["Coming Soon"],
branches: ["CSE", "IT", "ECE", "ME", "CE"],
status: "Coming Soon",
href: "#",
},
Expand All @@ -32,7 +40,7 @@
fullName: "Rajasthan Technical University",
description:
"Planned support for engineering students with AI-assisted learning workflows.",
branches: ["Coming Soon"],
branches: ["CSE", "AI/ML", "IT", "EE", "ME"],
status: "Coming Soon",
href: "#",
},
Expand All @@ -53,38 +61,44 @@
});

return (
<section
id="Universities"
className="relative overflow-hidden border-b border-border bg-background py-24"
>
{/* Background Glows - No grid pattern */}
<section className="relative flex min-h-[115vh] flex-col justify-center overflow-hidden border-none bg-background pt-16 pb-32">
{/* Background Glows & Patterns */}
<div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
<div className="absolute inset-0 -z-10">
<div className="absolute left-[-10%] top-20 h-[500px] w-[500px] rounded-full bg-blue-500/5 blur-[120px]" />
<div className="absolute right-[-10%] bottom-0 h-[500px] w-[500px] rounded-full bg-indigo-500/5 blur-[120px]" />
<div className="absolute left-[-10%] top-20 h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-[120px]" />
<div className="absolute right-[-10%] bottom-0 h-[500px] w-[500px] rounded-full bg-indigo-500/10 blur-[120px]" />
</div>

<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div
id="Universities"
className="relative mx-auto w-full max-w-7xl px-6 lg:px-8 scroll-mt-[12vh]"
>
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="mx-auto mb-16 max-w-3xl text-center"
className="mx-auto mb-6 max-w-3xl text-center"
>
<span className="inline-flex items-center gap-2 rounded-full border border-blue-200/60 bg-blue-50/80 px-4 py-2 text-sm font-semibold text-blue-700 shadow-sm backdrop-blur-md dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-400">
<GraduationCap className="h-4 w-4 text-blue-600 dark:text-blue-400" />
University Support
</span>
<div className="mb-6 flex items-center justify-center">
<div className="group relative inline-flex items-center gap-2 rounded-full border border-blue-500/30 bg-blue-950/40 px-4 py-1.5 text-sm font-semibold text-blue-300 shadow-[0_0_20px_rgba(37,99,235,0.15)] backdrop-blur-xl transition-all hover:border-blue-400/60 hover:bg-blue-900/50 hover:shadow-[0_0_30px_rgba(37,99,235,0.3)]">
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/10 via-transparent to-indigo-500/10 pointer-events-none opacity-50 group-hover:opacity-100 transition-opacity" />
<GraduationCap className="relative z-10 h-4 w-4 text-blue-400 drop-shadow-[0_0_5px_rgba(96,165,250,0.5)]" />
<span className="relative z-10 tracking-wide">
University Support
</span>
</div>
</div>

<h2 className="mt-6 text-4xl font-extrabold tracking-tight text-foreground md:text-5xl">
<h2 className="text-3xl font-black tracking-tight text-foreground sm:text-4xl lg:text-5xl">
Learn Across
<span className="block bg-gradient-to-r from-[#1D4ED8] to-indigo-600 bg-clip-text text-transparent">
<span className="block bg-gradient-to-r from-blue-600 via-indigo-500 to-purple-600 bg-clip-text text-transparent pb-1">
Universities
</span>
</h2>

<p className="mt-6 text-lg leading-relaxed text-muted-foreground">
<p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground/90">
Hyper Learning is designed to evolve into a multi-university
learning platform. Start with RGPV and expand to universities across
India.
Expand All @@ -97,98 +111,114 @@
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
viewport={{ once: true }}
className="mx-auto mb-16 max-w-2xl"
className="mx-auto mb-10 max-w-2xl"
>
<div className="relative group">
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Search className="h-5 w-5 text-muted-foreground group-focus-within:text-[#1D4ED8] transition-colors" />
</div>
<div className="relative group flex items-center justify-between rounded-full border border-white/10 bg-white/[0.03] p-2 shadow-2xl backdrop-blur-xl transition-all focus-within:border-blue-500/50 focus-within:bg-white/[0.05] focus-within:shadow-[0_0_30px_rgba(37,99,235,0.15)]">
<input
type="text"
aria-label="Search universities"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search universities by name, branch, or location..."

@coderabbitai coderabbitai Bot Jun 27, 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

Align the placeholder with the actual filter.

The UI promises location search here, but this component only filters by university text and branches. Either add a location field to the predicate or drop “location” from the placeholder.

🤖 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 `@features/landing/universities.tsx` at line 111, The search placeholder in the
universities landing component is misleading because the current filter logic
only matches university text and branches, not location. Update the search
behavior in the universities filter/predicate to also handle location if that is
intended, using the relevant search handler in universities.tsx, or change the
placeholder text to match the actual fields being searched so the UI and logic
stay aligned.

className="w-full rounded-2xl border border-border bg-background/50 py-4 pl-12 pr-4 text-sm text-foreground shadow-sm backdrop-blur-md transition-all focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8]"
className="w-full bg-transparent px-6 py-3 text-base text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
/>
<div className="group/lens relative mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] text-white/50 backdrop-blur-2xl transition-all duration-500 hover:scale-110 hover:border-white/20 hover:bg-white/10 hover:text-white hover:shadow-[0_0_30px_rgba(255,255,255,0.15)] cursor-pointer active:scale-95 overflow-hidden">
<div className="absolute inset-0 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] pointer-events-none" />
<div className="absolute inset-0 -translate-x-[150%] bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 ease-out group-hover/lens:translate-x-[150%]" />
<Search className="relative z-10 h-[18px] w-[18px] drop-shadow-md transition-transform duration-300 group-hover/lens:scale-110" />
</div>
</div>
</motion.div>

{/* Cards */}
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
<AnimatePresence mode="popLayout">
{filteredUniversities.length > 0 ? (
filteredUniversities.map((university) => (
<motion.div
layout
key={university.id}
onClick={() => {
if (university.status === "Available") {
window.location.href = university.href;
}
Comment on lines +141 to +144

@coderabbitai coderabbitai Bot Jun 27, 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 | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== File outline ==\n'
ast-grep outline features/landing/universities.tsx --view expanded || true

printf '\n== Targeted excerpt (120-220) ==\n'
sed -n '120,220p' features/landing/universities.tsx

printf '\n== Navigation-related search in file ==\n'
rg -n --hidden --no-ignore-vcs 'window\.location\.href|router\.push|<Link\b|role="link"|tabIndex|onKeyDown|onKeyUp|onKeyPress|button' features/landing/universities.tsx || true

Repository: imuniqueshiv/HyperLearningTech

Length of output: 6264

🏁 Script executed:

#!/bin/bash
set -euo pipefail

sed -n '1,110p' features/landing/universities.tsx

Repository: imuniqueshiv/HyperLearningTech

Length of output: 5265

Restore semantic navigation for the available cards.

The card is a clickable motion.div using window.location.href, and the visible “Explore University” CTA is also a div, so keyboard users can’t focus or activate it. Use a real Link/button (or add full keyboard semantics plus router.push()), especially for the internal /rgpv route.

🤖 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 `@features/landing/universities.tsx` around lines 130 - 133, The clickable
university card in the landing universities component is using
window.location.href on a motion.div and the “Explore University” CTA is still a
div, so restore semantic navigation by switching the card/CTA to a real Link or
button in universities.tsx. Update the available-card interaction in the render
logic around university.status and the Explore University CTA so keyboard users
can tab to and activate it, and use router.push or Link for the internal /rgpv
route instead of direct window.location.href.

}}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={{ duration: 0.3 }}
className="group relative overflow-hidden rounded-3xl border border-border bg-background/80 p-8 shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-200 hover:shadow-xl dark:hover:border-blue-500/30"
className={`group relative flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/5 to-transparent p-5 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:border-blue-500/30 hover:shadow-blue-500/20 dark:from-white/5 dark:to-transparent ${
university.status === "Available" ? "cursor-pointer" : ""
}`}
>
<div className="absolute inset-0 rounded-3xl border border-white/5 transition-colors pointer-events-none group-hover:border-blue-500/20" />
{/* Hover Glow */}
<div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-blue-100 blur-3xl dark:bg-blue-500/20" />
<div className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
<div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-blue-500/20 blur-3xl dark:bg-blue-500/20" />
</div>

{/* Badge */}
<div className="relative z-10 mb-6 flex items-center justify-between">
<div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-blue-100 bg-blue-50 text-[#1D4ED8] dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-400">
<div className="relative z-10 mb-4 flex items-center justify-between">
<div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-blue-500/20 bg-blue-500/10 text-blue-600 shadow-[inset_0_0_20px_rgba(59,130,246,0.1)] dark:text-blue-400">
<GraduationCap className="h-7 w-7" />
</div>

<span
className={`rounded-full border px-3 py-1 text-xs font-semibold ${
className={`inline-flex items-center rounded-lg border px-3 py-1 text-xs font-bold uppercase tracking-wider ${
university.status === "Available"
? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400"
: "border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-500/20 dark:bg-orange-500/10 dark:text-orange-400"
? "border-emerald-500/20 bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"
: "border-orange-500/20 bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400"
}`}
>
{university.status}
</span>
</div>

{/* Content */}
<div className="relative z-10">
<h3 className="text-3xl font-bold text-foreground">
<div className="relative z-10 flex flex-1 flex-col">
<h3 className="text-2xl font-black tracking-tight text-foreground">
{university.name}
</h3>

<p className="mt-2 text-sm text-muted-foreground">
<p className="mt-1 text-xs font-bold uppercase tracking-wider text-[#1D4ED8] dark:text-blue-400">
{university.fullName}
</p>

<p className="mt-6 leading-7 text-muted-foreground">
<p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">
{university.description}
</p>

<div className="mt-8 flex flex-wrap gap-2">
<div className="mt-4 mb-6 flex flex-wrap gap-2">
{university.branches.map((branch) => (
<span
key={branch}
className="rounded-full border border-border bg-muted/30 px-3 py-1 text-xs font-medium text-muted-foreground"
className={`rounded-lg px-2.5 py-1 text-xs font-bold ring-1 ring-inset ${
university.status === "Available"
? "bg-blue-50 text-blue-700 ring-blue-700/10 dark:bg-blue-500/10 dark:text-blue-300 dark:ring-blue-500/20"
: "bg-white/[0.02] text-white/50 ring-white/10"
}`}
>
{branch}
</span>
))}
</div>

{university.status === "Available" ? (
<Link
href={university.href}
className="mt-8 inline-flex items-center gap-2 font-semibold text-[#1D4ED8] transition-colors hover:text-[#1E40AF] dark:text-blue-400 dark:hover:text-blue-300"
>
Explore University
<ArrowRight className="h-4 w-4" />
</Link>
) : (
<div className="mt-8 inline-flex items-center gap-2 text-muted-foreground">
<Sparkles className="h-4 w-4" />
Planned Expansion
</div>
)}
<div className="mt-auto pt-6">
{university.status === "Available" ? (
<div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3.5 text-sm font-bold text-white shadow-[0_0_30px_rgba(37,99,235,0.3)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_40px_rgba(37,99,235,0.5)] active:translate-y-0 active:shadow-[0_0_36px_rgba(37,99,235,0.45)] overflow-hidden">
<div className="absolute inset-0 rounded-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)] pointer-events-none" />
<span className="relative z-10 flex items-center gap-2">
Explore University
<ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover/btn:translate-x-1.5" />
</span>
</div>
) : (
<div className="flex w-full items-center justify-start gap-2 py-3.5 text-sm font-medium text-muted-foreground/70">
<Sparkles className="h-4 w-4 opacity-70" />
Planned Expansion
</div>
)}
</div>
</div>
</motion.div>
))
Expand Down
Loading