From c9fa7fa7df57721f865513476c236a4b5f02f881 Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Sun, 19 Jul 2026 10:28:46 +0530 Subject: [PATCH] fix: perfect dashboard auth overlay positioning on mobile and desktop --- app/(public)/cgpa-calculator/page.tsx | 2 +- app/(public)/creators/page.tsx | 2 +- app/dashboard/page.tsx | 2 +- components/contact/ContactSection.tsx | 5 +- components/dashboard/auth-overlay.tsx | 302 +++++++++++------------ features/landing/ai-demo.tsx | 2 +- features/landing/cgpa-feature.tsx | 2 +- features/landing/faq.tsx | 2 +- features/landing/features.tsx | 2 +- features/landing/hero.tsx | 330 +++++++++++++++++--------- features/landing/stats.tsx | 2 +- 11 files changed, 379 insertions(+), 274 deletions(-) diff --git a/app/(public)/cgpa-calculator/page.tsx b/app/(public)/cgpa-calculator/page.tsx index 5792df7..ceada9d 100644 --- a/app/(public)/cgpa-calculator/page.tsx +++ b/app/(public)/cgpa-calculator/page.tsx @@ -70,7 +70,7 @@ export default function CgpaCalculatorPage() { }, [calculateRequiredSgpa]); return ( -
+
{/* Ultra-Premium Dynamic Ambient Background */}
{/* Orb 1: Top Left Blue */} diff --git a/app/(public)/creators/page.tsx b/app/(public)/creators/page.tsx index 30c7eda..f859fa5 100644 --- a/app/(public)/creators/page.tsx +++ b/app/(public)/creators/page.tsx @@ -82,7 +82,7 @@ export default function TeamPage() { }; return ( -
+
{/* Hero */}
{/* Subtle Ambient Glows */} diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 4d20bb8..43e0325 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -57,7 +57,7 @@ export default function DashboardPage() { {/* Top Section Divider for visual separation from Universities */} -
+
diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx index a1d9dfa..3661020 100644 --- a/components/contact/ContactSection.tsx +++ b/components/contact/ContactSection.tsx @@ -36,7 +36,10 @@ export default function ContactSection() { }; return ( -
+
{/* Top Section Divider */}
diff --git a/components/dashboard/auth-overlay.tsx b/components/dashboard/auth-overlay.tsx index e9203b8..3486f19 100644 --- a/components/dashboard/auth-overlay.tsx +++ b/components/dashboard/auth-overlay.tsx @@ -31,170 +31,178 @@ export function DashboardAuthOverlay({ animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.6, ease: [0.25, 1, 0.5, 1] }} - className="absolute inset-0 z-50 flex items-center justify-center px-4" + className="absolute inset-0 z-50" > {/* Frosted Backdrop — lighter blur so dashboard content is recognizable */}
- {/* Floating Card */} - - {/* Top Gradient Accent Line */} -
- - {/* Subtle ambient glow (dark mode) */} -
-
-
- -
- {/* Dynamic Lock Icon with floating + pulse */} + {/* Wrapper: Sticky scrolling on Mobile, Static absolute centering on Desktop */} +
+
+ {/* Floating Card */} - {/* Outer pulsing glow ring */} - -
- + {/* Top Gradient Accent Line */} +
+ + {/* Subtle ambient glow (dark mode) */} +
+
- - {/* Premium Badge */} -
- - Personalized Dashboard -
+
+ {/* Dynamic Lock Icon with floating + pulse */} + + {/* Outer pulsing glow ring */} + +
+ +
+ - {/* Heading */} -

- Unlock Your Personalized Dashboard -

+ {/* Premium Badge */} +
+ + Personalized Dashboard +
- {/* Description — explains WHY login is needed */} -

- Create an account and complete your profile to unlock a dashboard - tailored to your{" "} - - University - - ,{" "} - - Branch - - , and{" "} - - Semester - - . Access your syllabus, previous year questions, AI tutor, notes, - and learning progress — all in one place. -

+ {/* Heading */} +

+ Unlock Your Personalized Dashboard +

- {/* Onboarding Steps */} -
- {onboardingSteps.map((step, i) => ( -
- {/* Step indicator dot + connector */} -
-
- {step.isLast ? ( - - ) : ( - {i + 1} - )} -
- {i < onboardingSteps.length - 1 && ( -
- )} -
- {/* Step label */} - - {step.label} + {/* Description — explains WHY login is needed */} +

+ Create an account and complete your profile to unlock a + dashboard tailored to your{" "} + + University + + ,{" "} + + Branch + + , and{" "} + + Semester + . Access your syllabus, previous year questions, AI tutor, + notes, and learning progress — all in one place. +

+ + {/* Onboarding Steps */} +
+ {onboardingSteps.map((step, i) => ( +
+ {/* Step indicator dot + connector */} +
+
+ {step.isLast ? ( + + ) : ( + {i + 1} + )} +
+ {i < onboardingSteps.length - 1 && ( +
+ )} +
+ {/* Step label */} + + {step.label} + +
+ ))}
- ))} -
- {/* Action Buttons */} -
- - - Create Account - - - - Sign In - -
+ {/* Action Buttons */} +
+ + + Create Account + + + + Sign In + +
- {/* Preview Button */} - {onPreview && ( - - )} + {/* Preview Button */} + {onPreview && ( + + )} - {/* Personalization-focused bottom text */} -
- - - Your University - - • - - - Your Branch - - • - - - Your Semester - -
+ {/* Personalization-focused bottom text */} +
+ + + Your University + + • + + + Your Branch + + • + + + Your Semester + +
+
+
- +
); } diff --git a/features/landing/ai-demo.tsx b/features/landing/ai-demo.tsx index 8188c66..e9a451a 100644 --- a/features/landing/ai-demo.tsx +++ b/features/landing/ai-demo.tsx @@ -117,7 +117,7 @@ export default function AIDemo() { }; return ( -
+
{/* Premium High-Contrast Background Elements */}
{/* Light Mode Blobs */} diff --git a/features/landing/cgpa-feature.tsx b/features/landing/cgpa-feature.tsx index cd692fd..bd01042 100644 --- a/features/landing/cgpa-feature.tsx +++ b/features/landing/cgpa-feature.tsx @@ -14,7 +14,7 @@ import { export default function CgpaFeature() { return ( -
+
{/* Ultra-Premium Ambient Background */}
diff --git a/features/landing/faq.tsx b/features/landing/faq.tsx index 5d5384c..7150271 100644 --- a/features/landing/faq.tsx +++ b/features/landing/faq.tsx @@ -38,7 +38,7 @@ export default function FAQ() { }; return ( -
+
{/* Premium High-Contrast Background Elements */}
{/* Light Mode Blobs - Premium prominent pastel mesh */} diff --git a/features/landing/features.tsx b/features/landing/features.tsx index eb632c5..ef6c19b 100644 --- a/features/landing/features.tsx +++ b/features/landing/features.tsx @@ -31,7 +31,7 @@ export default function Features() { }; return ( -
+
{/* Premium High-Contrast Background Elements */}
{/* Light Mode Blobs - Premium prominent pastel mesh */} diff --git a/features/landing/hero.tsx b/features/landing/hero.tsx index 795d95c..2b6ec5d 100644 --- a/features/landing/hero.tsx +++ b/features/landing/hero.tsx @@ -1,9 +1,15 @@ "use client"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import Link from "next/link"; import { ArrowRight, BrainCircuit, CheckCircle2 } from "lucide-react"; -import { motion, Variants, animate, useInView } from "framer-motion"; +import { + motion, + Variants, + animate, + useInView, + AnimatePresence, +} from "framer-motion"; function Counter({ from = 0, @@ -43,6 +49,29 @@ function Counter({ } export default function Hero() { + const [typedText, setTypedText] = useState(""); + const [messageSent, setMessageSent] = useState(false); + const fullText = "Explain Big O notation with an example."; + + useEffect(() => { + let i = 0; + const timer = setTimeout(() => { + const interval = setInterval(() => { + setTypedText(fullText.slice(0, i + 1)); + i++; + if (i >= fullText.length) { + clearInterval(interval); + setTimeout(() => { + setMessageSent(true); + setTypedText(""); + }, 200); + } + }, 15); + return () => clearInterval(interval); + }, 400); + return () => clearTimeout(timer); + }, []); + const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { @@ -57,14 +86,14 @@ export default function Hero() { const itemVariants: Variants = { hidden: { opacity: 0, - y: 20, + y: 30, }, visible: { opacity: 1, y: 0, transition: { - duration: 0.6, - ease: [0.25, 0.1, 0.25, 1], + duration: 1, + ease: [0.16, 1, 0.3, 1], }, }, }; @@ -81,7 +110,7 @@ export default function Hero() { return (
{/* Background Layers */}
@@ -102,7 +131,7 @@ export default function Hero() {
-
+
{/* Left Content */} {/* Eyebrow pill */} -
-
- +
+
+ Smart learning for engineers
@@ -128,7 +157,7 @@ export default function Hero() { > Master
- + Engineering . @@ -163,19 +192,19 @@ export default function Hero() { variants={itemVariants} className="mt-12 grid grid-cols-2 gap-3 sm:flex sm:flex-wrap sm:gap-4" > -
+
AI-powered notes
-
+
Syllabus mapped
-
+
Topic-wise PYQs
-
+
@@ -209,7 +238,7 @@ export default function Hero() { Start Learning
@@ -270,17 +299,23 @@ export default function Hero() { {/* Right Mockup */} {/* Right Mockup */} - {/* Glowing aura for Light Mode behind AI card */} -
-
+ {/* Glowing aura for Light Mode behind AI card (Moving Gradient) - Hidden in Dark Mode */} + + {/* Extremely subtle static aura for Dark Mode to create depth without flashiness */} +
+ {/* Chat Header */} -
-
+
+
-
- {/* User Message */} -
-
- Explain Big O notation with an example. -
-
+
+ + {messageSent && ( + + {/* User Message */} + +
+ {fullText} +
+ - {/* Hyper AI Message */} -
-
-
- -
- - Hyper AI - -
+ {/* Hyper AI Message */} + +
+
+ +
+ + Hyper AI + +
-
-
-

- Big O notation represents the maximum growth rate of an - algorithm as input size increases. -

- -

- For example, Linear Search has{" "} - - O(n) - {" "} - complexity because each element may need to be checked - once. -

-
-
-
+
+
+ + Big O notation represents the maximum growth rate + of an algorithm as input size increases. + - {/* Related Questions */} -
-
-
-

- Related Previous Year Questions -

-
+ + For example, Linear Search has{" "} + + O(n) + {" "} + complexity because each element may need to be + checked once. + +
+
+ -
-
-
- - - Dec 2025 — Q1(b) - -
- -
- -
-
- - - Jun 2025 — Q3(a) - -
- -
- -
-
- - - Dec 2024 — Q2 - -
- -
-
-
+ {/* Related Questions */} + +
+
+

+ Related Previous Year Questions +

+
+ +
+
+
+ + + Dec 2025 — Q1(b) + +
+ +
-
- - Ask Hyper AI anything... +
+
+ + + Jun 2025 — Q3(a) + +
+ +
+
+ + + )} + + + + + {typedText || "Ask Hyper AI anything..."} + {!messageSent && ( + + )} -
+
-
+
-
+
diff --git a/features/landing/stats.tsx b/features/landing/stats.tsx index 3e6b7bf..3b2d914 100644 --- a/features/landing/stats.tsx +++ b/features/landing/stats.tsx @@ -83,7 +83,7 @@ export default function Stats() { }; return ( -
+
{/* Premium High-Contrast Background Elements */}
{/* Light Mode Blobs - Premium prominent pastel mesh */}