Skip to content

improve movile responsivness and light mode colour contrast #74

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

improve movile responsivness and light mode colour contrast #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ba568c
improve movile responsivness and light mode colour contrast
nitinmohan18 Jul 7, 2026
1395f32
fixed format
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
35 changes: 17 additions & 18 deletions app/(auth)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
LayoutDashboard,
BrainCircuit,
Sparkles,
Star,
Library,
FileText,
Target,
Expand All @@ -21,34 +20,34 @@ export default function AuthLayout({
{/* Main Split Content */}
<div className="flex flex-1 w-full min-h-[600px]">
{/* Left Side - Brand & Features (Hidden on Mobile) */}
<div className="relative hidden w-1/2 flex-col items-center justify-center overflow-hidden bg-slate-950 dark:bg-black lg:flex border-r border-border/50">
<div className="relative hidden w-1/2 flex-col items-center justify-center overflow-hidden bg-slate-50 dark:bg-black lg:flex border-r border-border/50">
{/* Background Gradients & Effects */}
<div className="absolute inset-0 z-0">
<div className="absolute -left-[10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-[120px]" />
<div className="absolute -right-[10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/10 blur-[120px]" />
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-10 mix-blend-overlay" />
<div className="absolute -left-[10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/20 dark:bg-blue-500/10 blur-[120px]" />
<div className="absolute -right-[10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/20 dark:bg-indigo-500/10 blur-[120px]" />
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] dark:opacity-10 mix-blend-overlay" />
</div>

{/* Top Logo - Large like Instagram */}
<div className="absolute top-12 left-12 z-10">
<div className="relative flex h-[72px] w-[72px] items-center justify-center overflow-hidden rounded-[1.25rem] bg-gradient-to-tr from-blue-600 via-indigo-500 to-purple-500 p-[2px] shadow-2xl">
<div className="flex h-full w-full items-center justify-center rounded-[1.1rem] bg-black">
<div className="relative flex h-[72px] w-[72px] items-center justify-center overflow-hidden rounded-[1.25rem] bg-gradient-to-tr from-blue-600 via-indigo-500 to-purple-500 p-[2px] shadow-[0_8px_30px_rgba(99,102,241,0.2)] dark:shadow-2xl">
<div className="flex h-full w-full items-center justify-center rounded-[1.1rem] bg-white dark:bg-black">
<Image
src="/hl-logo.png"
alt="Hyper Learning Logo"
width={44}
height={44}
className="object-contain invert brightness-0"
className="object-contain dark:invert dark:brightness-0 opacity-90 dark:opacity-100"
/>
</div>
</div>
</div>

{/* Center Premium Content */}
<div className="relative z-10 flex flex-col items-center text-center px-8 py-4 max-w-[540px] mt-8">
<h1 className="text-[36px] font-semibold tracking-tight text-slate-100 xl:text-[42px] leading-[1.2]">
<h1 className="text-[36px] font-semibold tracking-tight text-slate-900 dark:text-slate-100 xl:text-[42px] leading-[1.2]">
Elevate your engineering journey with a{" "}
<span className="bg-gradient-to-br from-blue-400 to-indigo-400 bg-clip-text text-transparent font-bold">
<span className="bg-gradient-to-br from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent font-bold">
personalized AI tutor
</span>
.
Expand Down Expand Up @@ -229,7 +228,7 @@ export default function AuthLayout({
{/* Global Footer */}
<footer className="w-full py-4 px-6 bg-zinc-50 dark:bg-black border-t border-border/40 text-[12px]">
<div className="mx-auto max-w-[1280px]">
<div className="flex flex-col items-center gap-3 text-center lg:flex-row lg:flex-wrap lg:items-center lg:justify-center lg:gap-x-4 lg:gap-y-2 lg:text-left">
<div className="flex flex-col items-center gap-4 text-center lg:flex-row lg:flex-wrap lg:items-center lg:justify-center lg:gap-x-4 lg:gap-y-2 lg:text-left">
<Link
href="/"
className="inline-flex shrink-0 items-center gap-2 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
Expand All @@ -247,39 +246,39 @@ export default function AuthLayout({
</span>
</Link>

<div className="flex items-center gap-6 text-[12px] font-medium text-muted-foreground">
<div className="flex flex-wrap justify-center items-center gap-4 lg:gap-6 text-[12px] font-medium text-muted-foreground">
<Link
href="/about"
className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
>
About
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
</Link>
<Link
href="/contact"
className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
>
Contact
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
</Link>
<Link
href="/creators"
className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
>
Creators
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
</Link>
<Link
href="/#Contact"
className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
>
Feedback
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
</Link>
</div>

<div className="flex items-center gap-1.5 text-[11px] text-muted-foreground/70 max-w-[400px] lg:max-w-none text-center lg:text-left">
<span>Disclaimer:</span>
<div className="flex flex-col lg:flex-row items-center gap-1 lg:gap-1.5 text-[11px] text-muted-foreground/70 max-w-[400px] lg:max-w-none text-center lg:text-left mt-2 lg:mt-0">
<span className="font-semibold">Disclaimer:</span>
<span>
Some content may contain errors. Please cross-check and share
corrections via our feedback section.
Expand Down
4 changes: 3 additions & 1 deletion app/(auth)/sign-in/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ export default function SignInPage() {
<div className="w-full border-t border-border/50" />
</div>
<div className="relative flex justify-center text-xs font-semibold uppercase tracking-wider">
<span className="bg-background px-4 text-muted-foreground">Or</span>
<span className="bg-zinc-50 dark:bg-[#0A0A0A] px-4 text-muted-foreground">
Or
</span>
</div>
</div>

Expand Down
4 changes: 3 additions & 1 deletion app/(auth)/sign-up/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ export default function SignUpPage() {
<div className="w-full border-t border-border/50" />
</div>
<div className="relative flex justify-center text-xs font-semibold uppercase tracking-wider">
<span className="bg-background px-4 text-muted-foreground">Or</span>
<span className="bg-zinc-50 dark:bg-[#0A0A0A] px-4 text-muted-foreground">
Or
</span>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export default function DashboardPage() {
Quick Actions
</h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5 flex-1">
<div className="grid grid-cols-2 gap-3 sm:gap-5 flex-1">
<QuickActionCard
title="Universities"
description="Explore institutions."
Expand Down
2 changes: 1 addition & 1 deletion components/auth/auth-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function AuthInput({
id={id}
type={type}
placeholder={placeholder}
className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] px-4 py-3.5 text-sm transition-all focus:border-blue-500 focus:bg-white dark:focus:bg-white/[0.05] focus:outline-none focus:ring-4 focus:ring-blue-500/10 placeholder:text-zinc-400 dark:placeholder:text-white/30"
className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.03] px-4 py-3.5 text-sm transition-all focus:border-blue-500 focus:bg-white dark:focus:bg-white/[0.05] focus:outline-none focus:ring-4 focus:ring-blue-500/10 placeholder:text-zinc-400 dark:placeholder:text-white/30"
required={required}
list={suggestions ? `${id}-suggestions` : undefined}
/>
Expand Down
2 changes: 1 addition & 1 deletion components/auth/oauth-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export function OAuthButton() {
return (
<button
type="button"
className="flex w-full items-center justify-center gap-3 rounded-full border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] px-4 py-3 text-[15px] font-semibold text-foreground transition-all hover:bg-zinc-100 dark:hover:bg-white/[0.08] focus:outline-none focus:ring-4 focus:ring-zinc-500/10"
className="flex w-full items-center justify-center gap-3 rounded-full border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.03] px-4 py-3 text-[15px] font-semibold text-foreground transition-all hover:bg-zinc-50 dark:hover:bg-white/[0.08] focus:outline-none focus:ring-4 focus:ring-zinc-500/10"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
41 changes: 35 additions & 6 deletions components/contact/ContactSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@
transition:
box-shadow 0.4s ease,
border-color 0.4s ease;
overflow: hidden;
}

/* Soft golden border glow only on hover */
Expand Down Expand Up @@ -794,13 +795,10 @@
.cardGlowTopRight {
display: none;
}
/* The signal ring and floating dots were previously disabled here for GPU performance.
Enabled as per request. */
.signalRing {
display: none;
}
.floatingDot1,
.floatingDot2,
.floatingDot3 {
display: none;
animation: signalPulseMobile 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.sectionDivider {
display: none;
Expand All @@ -810,6 +808,17 @@
}
}

@keyframes signalPulseMobile {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1.7);
opacity: 0;
}
}

/* ===== LIGHT MODE OVERRIDES ===== */
:global(html:not(.dark)) .contactSection {
background: linear-gradient(
Expand Down Expand Up @@ -1149,3 +1158,23 @@
transform: translate(2px, -2px);
}
}

@media (max-width: 768px) {
/* Fix Light Mode Mobile Overrides */
:global(html:not(.dark)) .cardSubtitle {
margin-bottom: 12px;
padding-bottom: 12px;
}
:global(html:not(.dark)) .form {
gap: 8px;
}
:global(html:not(.dark)) .inputGroup {
padding: 0px 8px;
}
:global(html:not(.dark)) .input {
padding: 8px 8px 8px 4px;
}
:global(html:not(.dark)) .submitBtn {
height: 42px;
}
}
33 changes: 18 additions & 15 deletions features/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,22 +205,22 @@ export default function Hero() {
{/* CTA buttons row */}
<motion.div
variants={itemVariants}
className="mt-8 mb-4 flex flex-row gap-[16px]"
className="mt-8 mb-4 flex flex-col sm:flex-row gap-3 md:gap-[16px] w-full sm:w-auto"
>
<a
href="#Universities"
onClick={scrollToUniversities}
className="group flex cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[#4f46e5] to-[#6366f1] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98]"
className="group flex justify-center cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[#4f46e5] to-[#6366f1] px-[20px] py-[12px] text-[14px] md:px-[32px] md:py-[18px] md:text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98] w-full sm:w-auto"
>
Start Learning
<div className="flex h-[22px] w-[22px] items-center justify-center rounded-[6px] bg-white/15">
<div className="flex h-[20px] w-[20px] md:h-[22px] md:w-[22px] items-center justify-center rounded-[6px] bg-white/15">
<ArrowRight className="h-3.5 w-3.5" />
</div>
</a>

<Link
href="/about"
className="flex cursor-pointer items-center gap-2 rounded-[12px] border border-[#D8E2F0] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[#C4D2E5] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[#94a3b8] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[#e2e8f0]"
className="flex justify-center cursor-pointer items-center gap-2 rounded-[12px] border border-[#D8E2F0] bg-transparent px-[20px] py-[12px] text-[14px] md:px-[28px] md:py-[15px] md:text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[#C4D2E5] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[#94a3b8] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[#e2e8f0] w-full sm:w-auto"
>
Explore platform ↗
</Link>
Expand All @@ -233,31 +233,34 @@ export default function Hero() {
/>

{/* Stats row */}
<motion.div variants={itemVariants} className="mt-2 flex flex-row">
<div className="pr-[32px]">
<div className="text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
<motion.div
variants={itemVariants}
className="mt-4 flex flex-row items-center justify-between sm:justify-start"
>
<div className="pr-2 sm:pr-[32px]">
<div className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
<Counter to={25} />
<span className="text-[#6366f1]">+</span>
</div>
<div className="mt-1 text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
<div className="mt-0.5 sm:mt-1 text-[9px] sm:text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
Years of PYQs
</div>
</div>
<div className="border-l border-slate-200 px-[32px] dark:border-white/10">
<div className="text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
<div className="border-l border-slate-200 px-2 sm:px-[32px] dark:border-white/10">
<div className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
<Counter to={100} />
<span className="text-[#6366f1]">%</span>
</div>
<div className="mt-1 text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
<div className="mt-0.5 sm:mt-1 text-[9px] sm:text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
Syllabus Mapped
</div>
</div>
<div className="border-l border-slate-200 pl-[32px] dark:border-white/10">
<div className="text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
<div className="border-l border-slate-200 pl-2 sm:pl-[32px] dark:border-white/10">
<div className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
<Counter to={24} />
<span className="text-[#6366f1]">/7</span>
</div>
<div className="mt-1 text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
<div className="mt-0.5 sm:mt-1 text-[9px] sm:text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
AI Assistant
</div>
</div>
Expand All @@ -271,7 +274,7 @@ export default function Hero() {
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
className="relative mx-auto mt-16 flex w-full max-w-[500px] justify-center lg:mt-0 lg:max-w-none lg:justify-end"
className="hidden md:flex relative mx-auto mt-16 w-full max-w-[500px] justify-center lg:mt-0 lg:max-w-none lg:justify-end"
>
{/* 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" />
Expand Down
Loading