Skip to content

improved overall ui of header footer and home section and removed sea… #44

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
Jul 3, 2026
Merged

improved overall ui of header footer and home section and removed sea… #44

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
85 changes: 26 additions & 59 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,9 +184,9 @@ export default function Footer() {
{/* Premium Outer wrapper */}
<div className="relative mx-auto max-w-[1600px] px-6 py-10 md:px-12 lg:px-16 xl:px-20 z-10">
{/* Top Section */}
<div className="flex flex-col xl:flex-row xl:justify-between gap-10 xl:gap-8">
<div className="flex flex-col lg:flex-row lg:justify-between gap-12 lg:gap-8 xl:gap-16">
{/* Brand - Flexible Width */}
<div className="flex flex-col shrink-0 xl:w-[260px] xl:pr-6 pt-1.5">
<div className="flex flex-col lg:max-w-[280px]">
<Link
href="/"
className="group inline-flex items-center gap-3.5 w-fit"
Expand Down Expand Up @@ -256,10 +256,10 @@ export default function Footer() {
</div>

{/* Navigation Container */}
<div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:flex sm:flex-row sm:gap-8 xl:gap-10 shrink-0 w-full xl:w-auto">
<div className="grid grid-cols-2 gap-12 sm:gap-20 xl:pr-10 w-full lg:w-auto mt-4 lg:mt-0">
{/* Platform */}
<div className="flex flex-col sm:w-[130px] xl:border-l border-slate-200 dark:border-white/[0.03] xl:pl-8">
<h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
<div className="flex flex-col">
<h3 className="mb-4 text-[13px] font-extrabold uppercase tracking-[0.15em] text-slate-900 dark:text-white">
Comment on lines +259 to +262

@coderabbitai coderabbitai Bot Jul 3, 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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the relevant file and nearby layout classes
git ls-files components/footer.tsx
wc -l components/footer.tsx
sed -n '230,330p' components/footer.tsx

# Find the specific link class usages mentioned in the comment
rg -n 'whitespace-nowrap|grid-cols-2|gap-12|Privacy Policy|Student Login' components/footer.tsx

Repository: imuniqueshiv/HyperLearningTech

Length of output: 7827

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Read the footer layout around the main wrapper and the nav block
sed -n '170,235p' components/footer.tsx
sed -n '235,315p' components/footer.tsx

# Show the exact classes on the footer wrappers to understand mobile sizing
rg -n 'flex flex-col|lg:flex-row|justify-between|gap-12|w-full lg:w-auto|grid-cols-2|whitespace-nowrap|w-fit' components/footer.tsx

Repository: imuniqueshiv/HyperLearningTech

Length of output: 11587

Let these footer links wrap on very small screens. The same whitespace-nowrap class is used in both nav columns, and the 2-column mobile grid with gap-12 leaves too little room on narrow viewports, so longer items like “Student Login” and “Privacy Policy” can overflow. Dropping whitespace-nowrap or reducing the mobile gap would fix it.

🤖 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 `@components/footer.tsx` around lines 259 - 262, The footer link text in the
two nav columns is too constrained on very small screens, causing longer items
to overflow. Update the footer link styling in the footer component so the link
labels can wrap instead of using the non-wrapping behavior, and/or reduce the
mobile grid spacing in the footer’s 2-column layout to give the links enough
room.

Platform
</h3>
<div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
Expand All @@ -273,37 +273,9 @@ export default function Footer() {
<li key={item.name}>
<Link
href={item.href}
className="group flex w-fit items-center text-[14px] font-medium text-slate-500 dark:text-slate-400 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
className="group flex w-fit items-center text-[15px] font-semibold text-slate-700 dark:text-slate-300 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
>
<span className="mr-2.5 text-[14px] text-slate-300 dark:text-slate-700/50 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
•
</span>
{item.name}
</Link>
</li>
))}
</ul>
</div>

{/* Learning */}
<div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8">
<h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
Learning
</h3>
<div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
<ul className="space-y-3.5">
{[
{ name: "AI Notes", href: "/rgpv" },
{ name: "PYQs", href: "/rgpv" },
{ name: "AI Tutor", href: "/rgpv" },
{ name: "Syllabus", href: "/rgpv" },
].map((item) => (
<li key={item.name}>
<Link
href={item.href}
className="group flex w-fit items-center text-[14px] font-medium text-slate-500 dark:text-slate-400 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
>
<span className="mr-2.5 text-[14px] text-slate-300 dark:text-slate-700/50 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
<span className="mr-3 text-[15px] text-slate-400 dark:text-slate-600 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
•
</span>
{item.name}
Expand All @@ -314,12 +286,12 @@ export default function Footer() {
</div>

{/* Company */}
<div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8 col-span-2 sm:col-span-1">
<h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
<div className="flex flex-col">
<h3 className="mb-4 text-[13px] font-extrabold uppercase tracking-[0.15em] text-slate-900 dark:text-white">
Company
</h3>
<div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
<ul className="grid grid-cols-2 gap-x-4 gap-y-3.5 sm:flex sm:flex-col sm:gap-y-0 sm:space-y-3.5">
<div className="mb-5 h-[2px] w-[28px] rounded-full bg-slate-300 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-400 dark:to-indigo-400/50" />
<ul className="space-y-3.5">
{[
{ name: "About Us", href: "/about" },
{ name: "Contact", href: "/contact" },
Expand All @@ -329,9 +301,9 @@ export default function Footer() {
<li key={item.name}>
<Link
href={item.href}
className="group flex w-fit items-center text-[14px] font-medium text-slate-500 dark:text-slate-400 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
className="group flex w-fit items-center text-[15px] font-semibold text-slate-700 dark:text-slate-300 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
>
<span className="mr-2.5 text-[14px] text-slate-300 dark:text-slate-700/50 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
<span className="mr-3 text-[15px] text-slate-400 dark:text-slate-600 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
•
</span>
{item.name}
Expand All @@ -343,50 +315,45 @@ export default function Footer() {
</div>

{/* Feature Cards */}
<div className="w-full mt-4 xl:mt-0 xl:border-l xl:border-slate-200 dark:xl:border-white/[0.03] xl:pl-10">
<div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4 h-full">
<div className="w-full mt-8 lg:mt-0 lg:w-[320px] xl:w-[360px] shrink-0 lg:border-l lg:border-slate-200 dark:lg:border-white/[0.03] lg:pl-10">
<div className="grid grid-cols-2 gap-3 h-full">
{[
{
title: "AI-Powered",
desc: "Smarter learning for better results",
desc: "Smarter learning",
icon: Zap,
},
{
title: "Trusted & Secure",
desc: "Your data is safe and protected",
desc: "Data protected",
icon: Shield,
},
{
title: "Built for Engineers",
desc: "Designed by learners, for learners",
title: "For Engineers",
desc: "Designed by learners",
icon: Users,
},
{
title: "Always Updated",
desc: "New content & features added",
desc: "New content added",
icon: Bell,
},
].map((feature, idx) => (
<div
key={idx}
className="group relative flex h-full min-h-[140px] flex-col items-center justify-center overflow-hidden rounded-[16px] border border-[#D8E2F0] dark:border-white/[0.04] bg-gradient-to-b from-white to-[#FBFCFF] dark:bg-transparent dark:bg-gradient-to-b dark:from-white/[0.06] dark:to-white/[0.02] p-4 text-center shadow-[0_12px_30px_rgba(15,23,42,0.08)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] hover:-translate-y-1 hover:border-blue-200 dark:hover:border-blue-500/30 hover:shadow-[0_15px_40px_rgba(59,130,246,0.1)] dark:hover:shadow-[0_8px_32px_rgba(59,130,246,0.12),inset_0_1px_1px_rgba(255,255,255,0.05)]"
className="group relative flex h-full min-h-[90px] flex-col items-center justify-center overflow-hidden rounded-[12px] border border-[#D8E2F0] dark:border-white/[0.03] bg-gradient-to-b from-white to-[#FBFCFF] dark:bg-transparent dark:bg-gradient-to-b dark:from-white/[0.04] dark:to-white/[0.01] p-3 text-center transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-200 dark:hover:border-blue-500/20"
>
{/* Faint Inner Top Highlight */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/80 dark:via-white/30 to-transparent" />

{/* Icon with Radial Blue Glow */}
<div className="relative mb-3.5 flex items-center justify-center">
<div className="absolute inset-0 bg-blue-100 dark:bg-blue-500/20 blur-[12px] rounded-full transition-all duration-500 group-hover:bg-blue-200 dark:group-hover:bg-blue-500/40" />
<div className="relative mb-2 flex items-center justify-center">
<feature.icon
className="relative z-10 h-[22px] w-[22px] text-blue-600 dark:text-blue-400/80 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-110 group-hover:text-blue-500 dark:group-hover:text-blue-300 group-hover:drop-shadow-[0_0_12px_rgba(59,130,246,0.3)] dark:group-hover:drop-shadow-[0_0_12px_rgba(59,130,246,0.6)]"
strokeWidth={1.75}
className="h-[16px] w-[16px] text-blue-600/70 dark:text-blue-400/50 transition-all duration-300 group-hover:scale-110 group-hover:text-blue-500 dark:group-hover:text-blue-300"
strokeWidth={1.5}
/>
</div>

<h4 className="text-[13px] font-extrabold tracking-wide text-slate-900 dark:text-white/80 drop-shadow-sm dark:drop-shadow-[0_1px_2px_rgba(255,255,255,0.15)]">
<h4 className="text-[11px] font-semibold tracking-wide text-slate-700 dark:text-white/60">
{feature.title}
</h4>
<p className="mt-2 text-[11px] leading-[1.6] text-slate-500 dark:text-slate-300/80 font-medium">
<p className="mt-1 text-[9px] leading-[1.3] text-slate-400 dark:text-slate-400/60 font-medium">
{feature.desc}
</p>
</div>
Expand Down
Loading
Loading