Skip to content

Feature/refine home #27

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

Feature/refine home #27

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
e8a3f7c
feat: improve hero layout, light theme styling, and visual polish
nitinmohan18 Jun 28, 2026
45fbb63
fixed format
nitinmohan18 Jun 28, 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
2 changes: 1 addition & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
:root {
Expand Down
6 changes: 3 additions & 3 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,12 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<html lang="en" className="dark" suppressHydrationWarning>
<body className="flex min-h-[100dvh] flex-col overflow-x-hidden">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
defaultTheme="dark"
enableSystem={false}
Comment on lines 112 to +115

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

# Map the relevant files first, then inspect the small slices around the cited lines.
for f in app/layout.tsx components/theme-provider.tsx components/navbar.tsx; do
  echo "== $f =="
  ast-grep outline "$f" --view expanded || true
  echo
done

echo "== app/layout.tsx excerpt =="
sed -n '90,140p' app/layout.tsx

echo "== components/theme-provider.tsx excerpt =="
sed -n '1,120p' components/theme-provider.tsx

echo "== components/navbar.tsx excerpt =="
sed -n '1,220p' components/navbar.tsx

Repository: imuniqueshiv/HyperLearningTech

Length of output: 10837

Keep system-theme syncing on. Line 115 disables OS theme preference handling, so users who follow system light/dark no longer match their device. Keep defaultTheme="dark" and leave enableSystem enabled.

Suggested fix 
         <ThemeProvider
           attribute="class"
           defaultTheme="dark"
-          enableSystem={false}
+          enableSystem
           disableTransitionOnChange
         >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
defaultTheme="dark"
enableSystem={false}
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
🤖 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 `@app/layout.tsx` around lines 112 - 115, The ThemeProvider configuration
currently disables OS theme preference syncing by setting enableSystem to false,
which overrides users’ system light/dark choice. Update the ThemeProvider in
app/layout.tsx to keep defaultTheme set to dark while leaving enableSystem
enabled, using the ThemeProvider props shown in this diff.

disableTransitionOnChange
>
<a
Expand Down
13 changes: 13 additions & 0 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,19 @@ const SocialDropdown = ({
export default function Footer() {
return (
<footer className="relative -mt-10 border-t border-[#D8E2F0] dark:border-white/[0.04] bg-[#F5F7FF] dark:bg-[#020617] overflow-hidden">
{/* Light Mode Premium Dot Matrix Background */}
<div
className="absolute inset-0 pointer-events-none dark:hidden"
style={{
backgroundImage:
"radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.25) 1px, transparent 0)",
backgroundSize: "24px 24px",
}}
/>

{/* Light Mode Bottom Radial Glow */}
<div className="absolute bottom-[-150px] left-1/2 -translate-x-1/2 w-[80%] h-[400px] bg-gradient-to-t from-blue-500/15 to-transparent blur-[100px] rounded-full pointer-events-none dark:hidden" />

{/* Premium ambient light effect at the top */}
<div className="absolute top-0 inset-x-0 flex justify-center pointer-events-none">
<div className="w-[80%] h-[1px] bg-gradient-to-r from-transparent via-blue-500/10 dark:via-blue-500/20 to-transparent" />
Expand Down
47 changes: 26 additions & 21 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,9 @@ const navLinks = [
export default function Navbar() {
const [isOpen, setIsOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const { theme, setTheme } = useTheme();
const { theme, resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const currentTheme = mounted ? resolvedTheme : theme;
const router = useRouter();
const pathname = usePathname();
const [activeSection, setActiveSection] = useState<string>("/#Home");
Expand Down Expand Up @@ -119,7 +120,7 @@ export default function Navbar() {

return (
<header
className={`dark sticky top-0 z-50 transition-all duration-500 border-b border-white/10 ${
className={`sticky top-0 z-50 transition-all duration-500 border-b border-black/10 dark:border-white/10 ${
scrolled
? "bg-[#091A40]/85 shadow-[0_8px_30px_rgb(0,0,0,0.12)] backdrop-blur-xl supports-[backdrop-filter]:bg-[#091A40]/70"
: "bg-gradient-to-r from-[#061126] via-[#0D245A] to-[#061126]"
Expand All @@ -132,22 +133,22 @@ export default function Navbar() {
href="/"
className="group flex items-center gap-3.5 transition-opacity duration-300 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:focus-visible:ring-offset-[#0B1528] rounded-lg"
>
<div className="relative h-10 w-10 md:h-11 md:w-11 flex-shrink-0 transition-transform duration-300 group-hover:scale-[1.02]">
<div className="relative h-10 w-10 md:h-11 md:w-11 flex-shrink-0 transition-transform duration-300 group-hover:scale-[1.02] bg-white/95 rounded-[12px] p-1.5 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] border border-black/5 dark:bg-transparent dark:p-0 dark:shadow-none dark:border-transparent flex items-center justify-center">
<Image
src="/hl-logo.png"
alt="Hyper Learning Official Logo"
width={44}
height={44}
className="object-contain"
className="object-contain drop-shadow-sm dark:drop-shadow-none transition-all"
priority
/>
</div>

<div className="flex flex-col justify-center">
<span className="block text-lg md:text-[20px] font-extrabold tracking-tighter text-foreground dark:text-[#F4F5F7]">
<span className="block text-lg md:text-[20px] font-extrabold tracking-tighter text-[#F4F5F7]">
Hyper Learning
</span>
<p className="text-[11px] md:text-xs font-medium text-muted-foreground dark:text-[#94A3B8] mt-0.5">
<p className="text-[11px] md:text-xs font-medium text-[#94A3B8] mt-0.5">
AI-Powered Learning Platform
</p>
</div>
Expand All @@ -169,14 +170,14 @@ export default function Navbar() {
onClick={(e) => handleNavClick(e, link.href)}
className={`group relative px-4 py-2 text-[14.5px] tracking-[0.01em] transition-colors duration-200 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 ${
isActive
? "text-foreground font-semibold dark:text-white"
: "text-muted-foreground font-medium hover:text-foreground dark:text-slate-300 dark:hover:text-white"
? "text-white font-semibold"
: "text-slate-300 font-medium hover:text-white"
}`}
>
{isActive && (
<motion.div
layoutId="activeNavIndicator"
className="absolute inset-0 rounded-full bg-white border border-black/5 shadow-[0_1px_3px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.6)] dark:bg-white/[0.08] dark:border-white/[0.08] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.2)] dark:backdrop-blur-md"
className="absolute inset-0 rounded-full bg-white/[0.08] border border-white/[0.08] shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.2)] backdrop-blur-md"
transition={{
type: "spring",
stiffness: 350,
Expand All @@ -199,40 +200,42 @@ export default function Navbar() {
<div className="hidden items-center gap-3 md:flex">
{mounted && (
<button
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
onClick={() =>
setTheme(currentTheme === "dark" ? "light" : "dark")
}
aria-label="Toggle theme"
className="flex h-[34px] w-[68px] items-center overflow-hidden rounded-full border border-black/10 dark:border-white/15 bg-black/[0.02] dark:bg-black/20 shadow-[inset_0_1px_3px_rgba(0,0,0,0.06)] dark:shadow-[inset_0_2px_6px_rgba(0,0,0,0.3)] transition-all hover:border-black/20 dark:hover:border-white/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
>
<div
className={`flex h-full w-1/2 items-center justify-center transition-all duration-300 ${
theme !== "dark"
currentTheme !== "dark"
? "bg-white dark:bg-white/15 shadow-[0_1px_3px_rgba(0,0,0,0.1)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.2)]"
: "hover:bg-black/5 dark:hover:bg-white/5"
}`}
>
<Sun
strokeWidth={2.5}
className={`h-[15px] w-[15px] ${theme !== "dark" ? "text-amber-600 drop-shadow-sm" : "text-slate-500 dark:text-white/40"}`}
className={`h-[15px] w-[15px] ${currentTheme !== "dark" ? "text-amber-600 drop-shadow-sm" : "text-slate-500 dark:text-white/40"}`}
/>
</div>
<div
className={`flex h-full w-1/2 items-center justify-center transition-all duration-300 ${
theme === "dark"
currentTheme === "dark"
? "bg-white dark:bg-white/15 shadow-[0_1px_3px_rgba(0,0,0,0.1)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.2)]"
: "hover:bg-black/5 dark:hover:bg-white/5"
}`}
>
<Moon
strokeWidth={2.5}
className={`h-[15px] w-[15px] ${theme === "dark" ? "text-white drop-shadow-sm" : "text-slate-500 dark:text-white/40"}`}
className={`h-[15px] w-[15px] ${currentTheme === "dark" ? "text-white drop-shadow-sm" : "text-slate-500 dark:text-white/40"}`}
/>
</div>
</button>
)}

<Link
href="/sign-in"
className="flex h-[34px] items-center justify-center rounded-[14px] border border-black/10 dark:border-white/10 px-5 text-[14px] font-semibold text-foreground transition-all duration-300 bg-gradient-to-b from-black/[0.01] to-black/[0.05] dark:from-white/[0.08] dark:to-white/[0.01] backdrop-blur-md shadow-[inset_0_1px_0px_rgba(255,255,255,0.6),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_1px_2px_rgba(0,0,0,0.2)] hover:shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_2px_6px_rgba(0,0,0,0.08)] dark:hover:shadow-[inset_0_1px_0px_rgba(255,255,255,0.15),0_2px_8px_rgba(0,0,0,0.3)] hover:-translate-y-[0.5px] hover:border-black/20 dark:hover:border-white/20 dark:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
className="flex h-[34px] items-center justify-center rounded-[14px] border border-black/10 dark:border-white/10 px-5 text-[14px] font-semibold text-white transition-all duration-300 bg-gradient-to-b from-black/[0.01] to-black/[0.05] dark:from-white/[0.08] dark:to-white/[0.01] backdrop-blur-md shadow-[inset_0_1px_0px_rgba(255,255,255,0.6),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_1px_2px_rgba(0,0,0,0.2)] hover:shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_2px_6px_rgba(0,0,0,0.08)] dark:hover:shadow-[inset_0_1px_0px_rgba(255,255,255,0.15),0_2px_8px_rgba(0,0,0,0.3)] hover:-translate-y-[0.5px] hover:border-black/20 dark:hover:border-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
>
Sign In
</Link>
Expand All @@ -251,7 +254,7 @@ export default function Navbar() {
aria-expanded={isOpen}
aria-controls="mobile-menu"
aria-label={isOpen ? "Close menu" : "Open menu"}
className="rounded-xl p-2 text-foreground dark:text-white transition-colors hover:bg-black/5 dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 md:hidden"
className="rounded-xl p-2 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 md:hidden"
>
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
Expand Down Expand Up @@ -300,27 +303,29 @@ export default function Navbar() {

<div className="mt-6 flex flex-col gap-3 border-t border-border/50 dark:border-white/10 pt-6">
<button
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
onClick={() =>
setTheme(currentTheme === "dark" ? "light" : "dark")
}
aria-label="Toggle theme"
className="flex w-full items-center justify-between rounded-xl p-3 text-base font-medium text-foreground transition-colors hover:bg-black/5 dark:text-white/90 dark:hover:bg-white/10"
>
<span>Theme</span>
{mounted && (
<div className="flex h-[34px] w-[68px] items-center overflow-hidden rounded-full border border-black/20 dark:border-white/25 bg-transparent">
<div
className={`flex h-full w-1/2 items-center justify-center transition-colors ${theme !== "dark" ? "bg-black/10 dark:bg-white/20" : ""}`}
className={`flex h-full w-1/2 items-center justify-center transition-colors ${currentTheme !== "dark" ? "bg-black/10 dark:bg-white/20" : ""}`}
>
<Sun
strokeWidth={2.5}
className={`h-[15px] w-[15px] ${theme !== "dark" ? "text-amber-600" : "text-slate-500 dark:text-white/60"}`}
className={`h-[15px] w-[15px] ${currentTheme !== "dark" ? "text-amber-600" : "text-slate-500 dark:text-white/60"}`}
/>
</div>
<div
className={`flex h-full w-1/2 items-center justify-center transition-colors ${theme === "dark" ? "bg-black/10 dark:bg-white/20" : ""}`}
className={`flex h-full w-1/2 items-center justify-center transition-colors ${currentTheme === "dark" ? "bg-black/10 dark:bg-white/20" : ""}`}
>
<Moon
strokeWidth={2.5}
className={`h-[15px] w-[15px] ${theme === "dark" ? "text-white" : "text-slate-500 dark:text-white/60"}`}
className={`h-[15px] w-[15px] ${currentTheme === "dark" ? "text-white" : "text-slate-500 dark:text-white/60"}`}
/>
</div>
</div>
Expand Down
Loading
Loading