Skip to content

refactor(ui): improve hero AI card, optimize page lengths, and polish… #28

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
Jun 29, 2026
Merged

refactor(ui): improve hero AI card, optimize page lengths, and polish… #28

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
2 changes: 1 addition & 1 deletion components/university/university-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function UniversityHero() {
<div className="absolute left-[-10%] top-[-10%] h-[600px] w-[600px] rounded-full bg-blue-500/10 blur-[100px]" />{" "}
<div className="absolute right-[-5%] top-[15%] h-[500px] w-[500px] rounded-full bg-indigo-500/10 blur-[100px]" />{" "}
</div>
<div className="mx-auto max-w-7xl px-6 py-24 lg:px-8">
<div className="mx-auto max-w-7xl px-6 pt-24 pb-28 lg:px-8">
<div className="grid items-center gap-16 lg:grid-cols-[1.1fr_0.9fr] lg:gap-24">
{/* Left Side */}
<motion.div
Expand Down
47 changes: 23 additions & 24 deletions features/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function Hero() {
return (
<section
id="Home"
className="relative overflow-hidden border-b border-border bg-gradient-to-b from-[#FCFCFE] via-[#F8FAFC] to-white dark:bg-none dark:bg-transparent"
className="relative overflow-hidden scroll-mt-24 border-b border-border bg-gradient-to-b from-[#FCFCFE] via-[#F8FAFC] to-white dark:bg-none dark:bg-transparent"
>
{/* Background Layers */}
<div className="absolute inset-0 -z-10 overflow-hidden">
Expand All @@ -97,7 +97,7 @@ export default function Hero() {
<div className="absolute right-[-5%] top-[15%] h-[500px] w-[500px] rounded-full bg-purple-500/[0.02] blur-[160px] dark:bg-indigo-500/10" />
</div>

<div className="mx-auto max-w-7xl px-6 pb-20 pt-16 lg:px-8 lg:pb-28 lg:pt-20">
<div className="mx-auto max-w-7xl px-6 pb-24 pt-16 lg:px-8 lg:pb-32 lg:pt-20">
<div className="grid items-center gap-16 lg:grid-cols-[1.3fr_0.7fr] lg:gap-8">
{/* Left Content */}
<motion.div
Expand Down Expand Up @@ -269,9 +269,9 @@ export default function Hero() {
>
{/* Glowing aura for Light Mode behind AI card */}
<div className="absolute inset-0 -z-10 rounded-[24px] bg-indigo-500/20 blur-[60px] dark:bg-transparent" />
<div className="relative w-full max-w-[440px] origin-top scale-[1.05] overflow-hidden rounded-[24px] border border-white/[0.04] bg-[#13151A]/95 p-6 shadow-[0_40px_80px_-20px_rgba(0,0,0,0.12)] backdrop-blur-sm font-sans lg:origin-left lg:scale-[1.08] dark:shadow-[0_30px_60px_-15px_rgba(255,255,255,0.07)]">
<div className="relative w-full max-w-[440px] origin-top scale-[1.05] overflow-hidden rounded-[24px] border border-indigo-100 dark:border-white/[0.06] bg-gradient-to-br from-indigo-100 via-white/80 to-purple-100 dark:bg-none dark:bg-white/5 p-6 shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl font-sans lg:origin-left lg:scale-[1.08]">
{/* Chat Header */}
<div className="-mt-6 -mx-6 mb-5 flex items-center gap-3 border-b border-white/[0.04] bg-white/[0.02] px-6 pt-6 pb-4 backdrop-blur-sm">
<div className="-mt-6 -mx-6 mb-5 flex items-center gap-3 border-b border-indigo-100 dark:border-white/[0.06] bg-[#F4F7FF] dark:bg-white/[0.02] px-6 pt-6 pb-4 backdrop-blur-md">
<div className="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-r from-[#5964F4] to-[#7D52F5] shadow-[0_0_12px_rgba(99,102,241,0.4)]">
<BrainCircuit
className="h-[18px] w-[18px] text-white"
Expand All @@ -280,12 +280,12 @@ export default function Hero() {
</div>

<div className="flex flex-col justify-center">
<h3 className="text-[14px] font-[600] leading-tight text-[#f0f0f5]">
<h3 className="text-[14px] font-[600] leading-tight text-slate-800 dark:text-[#f0f0f5]">
Hyper AI
</h3>
<div className="mt-1 flex items-center gap-1.5">
<div className="h-1.5 w-1.5 rounded-full bg-[#34d399] shadow-[0_0_5px_rgba(52,211,153,0.6)]" />
<p className="text-[12px] font-medium leading-tight text-gray-400">
<p className="text-[12px] font-medium leading-tight text-slate-500 dark:text-gray-400">
Online • Ready to Help
</p>
</div>
Expand All @@ -295,7 +295,7 @@ export default function Hero() {
<div className="space-y-4">
{/* User Message */}
<div className="flex justify-end">
<div className="max-w-[85%] rounded-[20px_20px_6px_20px] bg-gradient-to-r from-[#5964F4] to-[#7D52F5] px-4 py-2.5 text-[13px] font-medium text-white shadow-[0_3px_10px_rgba(99,102,241,0.3)]">
<div className="max-w-[85%] rounded-[20px_20px_6px_20px] bg-gradient-to-r from-[#5B6EFF] to-[#8B5CF6] px-4 py-2.5 text-[13px] font-medium text-white shadow-[0_3px_10px_rgba(91,110,255,0.3)]">
Explain Big O notation with an example.
</div>
</div>
Expand All @@ -314,14 +314,14 @@ export default function Hero() {
</span>
</div>

<div className="w-full rounded-[16px] border border-white/5 bg-white/[0.05] px-5 py-4">
<div className="w-full rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white/80 dark:bg-white/[0.09] px-5 py-4">
<div className="space-y-2">
<p className="text-[13px] leading-[1.7] text-[#c8ccd8]">
<p className="text-[13px] leading-[1.7] text-slate-600 dark:text-[#c8ccd8]">
Big O notation represents the maximum growth rate of an
algorithm as input size increases.
</p>

<p className="text-[13px] leading-[1.7] text-[#c8ccd8]">
<p className="text-[13px] leading-[1.7] text-slate-600 dark:text-[#c8ccd8]">
For example, Linear Search has{" "}
<span className="font-semibold text-[#60a5fa]">
O(n)
Expand All @@ -334,59 +334,58 @@ export default function Hero() {
</div>

{/* Related Questions */}
<div className="flex flex-col overflow-hidden rounded-[16px] border border-white/5 bg-white/[0.05]">
<div className="flex flex-col overflow-hidden rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white dark:bg-white/[0.05]">
<div className="flex items-center gap-2 px-5 pb-1.5 pt-3">
<div className="h-1.5 w-1.5 rounded-full bg-indigo-400 shadow-[0_0_4px_rgba(129,140,248,0.5)]" />
<p className="text-[10px] font-bold uppercase tracking-widest text-[#818cf8]">
Related Previous Year Questions
</p>
</div>

<div className="flex flex-col divide-y divide-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-white/[0.02]">
<div className="flex flex-col divide-y divide-indigo-50 dark:divide-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="flex items-center gap-3">
<CheckCircle2
className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
strokeWidth={2.5}
/>
<span className="text-[13px] font-medium text-[#d1d5db]">
<span className="text-[13px] font-medium text-slate-600 dark:text-[#d1d5db]">
Dec 2025 — Q1(b)
</span>
</div>
<ArrowRight className="h-4 w-4 text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
<ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
</div>

<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="flex items-center gap-3">
<CheckCircle2
className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
strokeWidth={2.5}
/>
<span className="text-[13px] font-medium text-[#d1d5db]">
<span className="text-[13px] font-medium text-slate-600 dark:text-[#d1d5db]">
Jun 2025 — Q3(a)
</span>
</div>
<ArrowRight className="h-4 w-4 text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
<ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
</div>

<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="flex items-center gap-3">
<CheckCircle2
className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
strokeWidth={2.5}
/>
<span className="text-[13px] font-medium text-[#d1d5db]">
<span className="text-[13px] font-medium text-slate-600 dark:text-[#d1d5db]">
Dec 2024 — Q2
</span>
</div>
<ArrowRight className="h-4 w-4 text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
<ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
</div>
</div>
</div>

{/* Input Box */}
<div className="group mt-3 flex items-center justify-between rounded-[16px] border border-transparent bg-white/[0.04] px-4 py-3.5 shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-500/50 hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]">
<span className="text-[13px] font-medium text-[#6b7280]">
<div className="group mt-3 flex items-center justify-between rounded-[16px] border border-indigo-100 dark:border-transparent bg-white/90 dark:bg-white/[0.04] px-4 py-3.5 shadow-sm dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-300/50 dark:hover:border-indigo-500/50 hover:shadow-[0_4px_20px_-10px_rgba(99,102,241,0.2)] dark:hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]">
<span className="text-[13px] font-medium text-slate-400 dark:text-[#6b7280]">
Ask Hyper AI anything...
</span>
<div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] bg-gradient-to-r from-indigo-500 to-purple-500 shadow-[0_4px_12px_rgba(168,85,247,0.25)] transition-transform hover:scale-105">
Expand Down
6 changes: 3 additions & 3 deletions features/landing/universities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,9 @@ export default function Universities() {
</div>

<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-blue-600 via-indigo-500 to-purple-600 bg-clip-text text-transparent pb-1">
Universities
One Platform,
<span className="block bg-gradient-to-r from-blue-600 via-indigo-500 to-purple-600 bg-clip-text text-transparent pb-4 -mb-3">
Every University
</span>
</h2>

Expand Down
Loading