Skip to content

feat: refactor landing page design schemas #121

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
ayush00git merged 1 commit into from
Aug 13, 2026
Merged

feat: refactor landing page design schemas #121

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
15 changes: 3 additions & 12 deletions app/src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Mail, Phone, MapPin, ChevronDown } from 'lucide-react';
import { Mail, MapPin, ChevronDown } from 'lucide-react';
import { Link, useNavigate } from 'react-router-dom';

type Profile = { department?: string; hostel?: string; building?: string } | null;
Expand Down Expand Up @@ -137,20 +137,11 @@ export function Footer() {
</li>
<li>
<a
href="tel:+911972254011"
className="flex items-center gap-2.5 hover:text-white transition-colors"
>
<Phone className="w-4 h-4 shrink-0 text-[#666666]" />
<span>+91-1972-254011</span>
</a>
</li>
<li>
<a
href="mailto:registrar@nith.ac.in"
href="mailto:admin.cccms@nith.ac.in"
className="flex items-center gap-2.5 hover:text-white transition-colors"
>
<Mail className="w-4 h-4 shrink-0 text-[#666666]" />
<span>registrar@nith.ac.in</span>
<span>admin.cccms@nith.ac.in</span>
</a>
</li>
</ul>
Expand Down
66 changes: 49 additions & 17 deletions app/src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { ChevronDown, Menu, X, User } from 'lucide-react';
import { ChevronDown, Menu, X, User, LogOut } from 'lucide-react';
import { Link } from 'react-router-dom';

export function Navbar() {
Expand All @@ -25,6 +25,11 @@ export function Navbar() {
setLoginDropdownOpen(false);
};

const handleLogout = async () => {
try { await fetch('/api/auth/logout', { method: 'POST' }); } catch { /* ignore */ }
window.location.href = '/';
};

return (
<nav className="bg-[#111111] text-white sticky top-0 z-30">
<div className="container mx-auto px-4 sm:px-6">
Expand Down Expand Up @@ -71,19 +76,28 @@ export function Navbar() {
</li>

<li>
<button className="block px-4 py-3 hover:bg-white/10 transition-colors">
<a href="mailto:admin.cccms@nith.ac.in" className="block px-4 py-3 hover:bg-white/10 transition-colors">
Contact Us
</button>
</a>
</li>
</ul>

{/* Desktop Right - Profile / Login */}
<div className="flex items-center text-sm font-medium">
{isAuth === true ? (
<Link to="/profile" className="flex items-center gap-2 px-4 py-3 hover:bg-white/10 transition-colors text-white">
<User className="w-4 h-4" />
<span>Profile</span>
</Link>
<>
<button
onClick={handleLogout}
className="flex items-center gap-2 px-4 py-3 hover:bg-white/10 transition-colors text-white cursor-pointer"
>
<LogOut className="w-4 h-4" />
<span>Logout</span>
</button>
<Link to="/profile" className="flex items-center gap-2 px-4 py-3 hover:bg-white/10 transition-colors text-white">
<User className="w-4 h-4" />
<span>Profile</span>
</Link>
</>
) : (
<div className="relative group">
<button className="flex items-center gap-1.5 px-4 py-3 hover:bg-white/10 transition-colors text-white">
Expand All @@ -108,10 +122,19 @@ export function Navbar() {
<span className="text-sm font-semibold text-white/80">Menu</span>
<div className="flex items-center gap-2">
{isAuth === true ? (
<Link to="/profile" className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors">
<User className="w-3.5 h-3.5" />
Profile
</Link>
<>
<button
onClick={handleLogout}
className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors cursor-pointer"
>
<LogOut className="w-3.5 h-3.5" />
Logout
</button>
<Link to="/profile" className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors">
<User className="w-3.5 h-3.5" />
Profile
</Link>
</>
) : (
<Link to="/faculty/login" className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors">
<User className="w-3.5 h-3.5" />
Expand All @@ -138,10 +161,19 @@ export function Navbar() {

{/* User Profile / Login Option in Mobile Drawer */}
{isAuth === true ? (
<Link to="/profile" onClick={closeMobile} className="flex items-center gap-2 px-5 py-3 hover:bg-white/10 transition-colors border-b border-white/5 text-[#16a34a] font-semibold">
<User className="w-4 h-4" />
<span>Profile</span>
</Link>
<div className="flex items-stretch border-b border-white/5">
<button
onClick={() => { closeMobile(); handleLogout(); }}
className="flex items-center gap-2 px-5 py-3 hover:bg-white/10 transition-colors cursor-pointer"
>
<LogOut className="w-4 h-4" />
<span>Logout</span>
</button>
<Link to="/profile" onClick={closeMobile} className="flex items-center gap-2 px-5 py-3 hover:bg-white/10 transition-colors text-[#16a34a] font-semibold">
<User className="w-4 h-4" />
<span>Profile</span>
</Link>
</div>
) : (
<div className="border-b border-white/5">
<button
Expand Down Expand Up @@ -207,9 +239,9 @@ export function Navbar() {
Guidelines
</button>

<button className="block w-full text-left px-5 py-3 hover:bg-white/10 transition-colors">
<a href="mailto:admin.cccms@nith.ac.in" className="block w-full text-left px-5 py-3 hover:bg-white/10 transition-colors">
Contact Us
</button>
</a>
</div>
)}
</nav>
Expand Down
140 changes: 30 additions & 110 deletions app/src/pages/Landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@ function getPostRoute(profile: NonNullable<Profile>): string {
export function Landing() {
const [profile, setProfile] = useState<Profile>(null);
const [isAuth, setIsAuth] = useState<boolean | null>(null);
const [showLoginMenu, setShowLoginMenu] = useState(false);
const [showLoginMenu, setShowLoginMenu] = useState(false);
const [showSignupMenu, setShowSignupMenu] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const signupMenuRef = useRef<HTMLDivElement>(null);
const navigate = useNavigate();

useEffect(() => {
Expand All @@ -33,6 +35,9 @@ export function Landing() {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
setShowLoginMenu(false);
}
if (signupMenuRef.current && !signupMenuRef.current.contains(e.target as Node)) {
setShowSignupMenu(false);
}
}
document.addEventListener('mousedown', handleClick);
return () => document.removeEventListener('mousedown', handleClick);
Expand All @@ -51,7 +56,7 @@ export function Landing() {
<MainLayout>

{/* Hero */}
<section className="relative bg-white border-b border-[#E5E5E5]">
<section className="relative bg-white flex-grow flex flex-col">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1111111a_1px,transparent_1px),linear-gradient(to_bottom,#1111111a_1px,transparent_1px)] bg-[size:32px_32px]" />
<div className="relative z-10 container mx-auto px-6 py-16 flex flex-col items-center text-center">
<div className="inline-flex items-center border border-[#111111] rounded-lg px-3 py-1 text-xs font-bold uppercase tracking-widest text-[#111111] mb-6">
Expand Down Expand Up @@ -88,120 +93,35 @@ export function Landing() {
</Link>
</div>
</div>
</div>
</div>
</section>

{/* Main Content */}
<main className="container mx-auto px-6 py-12 flex-grow">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">

{/* Portal Access — first in DOM so it's top on mobile; pushed to col 3 on desktop */}
<div className="md:order-3 border border-[#111111] rounded-lg overflow-hidden flex flex-col">
<div className="bg-[#111111] text-white px-5 py-3">
<span className="text-sm font-bold">Portal Access</span>
</div>
<div className="p-5 flex-grow flex flex-col gap-3">

{isAuth === true && (
<Link
to="/profile"
className="w-full bg-[#16a34a] hover:bg-[#15803d] text-white text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
{isAuth !== true && (
<div className="relative" ref={signupMenuRef}>
<button
onClick={() => setShowSignupMenu(prev => !prev)}
className="inline-flex items-center gap-2 border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold px-6 py-3 rounded-lg transition-colors duration-200 cursor-pointer"
>
My Profile
</Link>
)}
{isAuth === false && (
<p className="text-xs text-[#666666] text-center pb-1">
<span className="font-semibold text-[#111111]">New here?</span> Sign up to create your profile.
</p>
)}

<Link
to="/faculty/login"
className="w-full border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
>
Login as Faculty / Staff
</Link>
<Link
to="/warden/login"
className="w-full border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
>
Login as Warden
</Link>
<Link
to="/centre-head/login"
className="w-full border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
>
Login as Centre Head
</Link>

<div className="mt-auto pt-4 border-t border-[#E5E5E5]">
<p className="text-xs text-[#666666] mb-2 font-medium">Estate Office Administration</p>
<Link
to="/staff/login"
className="w-full bg-[#222222] hover:bg-[#000000] text-white text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200 block"
Create an Account
</button>
<div
className={`absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-[#222222] border border-[#333333] rounded-lg shadow-xl overflow-hidden z-50 min-w-[190px] transition-all duration-200 origin-top ${
showSignupMenu ? 'opacity-100 scale-y-100 pointer-events-auto' : 'opacity-0 scale-y-95 pointer-events-none'
}`}
>
Staff Login — XEN / AE / JE
</Link>
</div>
</div>
</div>

{/* Notices — col 1 on desktop */}
<div className="md:order-1 border border-[#111111] rounded-lg overflow-hidden flex flex-col">
<div className="bg-[#111111] text-white px-5 py-3 flex items-center justify-between">
<span className="text-sm font-bold">Estate Office Notices</span>
<button className="text-xs border border-white/30 hover:border-white px-2.5 py-1 rounded-lg transition-colors">
View All
</button>
</div>
<div className="p-5 flex-grow overflow-y-auto space-y-4">
{[
{ tag: 'Urgent', tagBg: '#FCEBEA', title: 'Scheduled power outage in Main Admin Block due to HT panel maintenance.', date: '20 May 2026' },
{ tag: 'New', tagBg: '#E6F7ED', title: 'Water supply disruption in Kailash Boys Hostel for pipe repair work.', date: '18 May 2026' },
{ tag: 'Info', tagBg: '#E8F4F9', title: 'Annual AC servicing schedule released for Departmental Buildings.', date: '15 May 2026' },
{ tag: 'Notice', tagBg: '#F5F5F5', title: 'Road resurfacing work to begin near Admin block from June 1st.', date: '12 May 2026' },
].map(({ tag, tagBg, title, date }) => (
<div key={title} className="border-b border-[#E5E5E5] pb-4 last:border-0 last:pb-0">
<span
className="inline-flex items-center border border-[#111111] rounded-lg px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-[#111111] mb-1.5"
style={{ backgroundColor: tagBg }}
>
{tag}
</span>
<p className="text-sm text-[#111111] font-medium leading-snug mb-1">{title}</p>
<span className="text-xs text-[#666666]">{date}</span>
</div>
))}
</div>
</div>

{/* Filing Guidelines — col 2 on desktop */}
<div className="md:order-2 border border-[#111111] rounded-lg overflow-hidden flex flex-col">
<div className="bg-[#111111] text-white px-5 py-3">
<span className="text-sm font-bold">Filing Guidelines</span>
</div>
<div className="p-5 flex-grow space-y-4">
{[
{ step: '01', text: 'Select the correct category — Civil or Electrical — to ensure proper routing.' },
{ step: '02', text: 'Provide the exact building and room number in the complaint description.' },
{ step: '03', text: 'Only Wardens may file complaints for hostel common areas.' },
{ step: '04', text: 'Do not file duplicate complaints for the same issue.' },
].map(({ step, text }) => (
<div key={step} className="flex gap-4 items-start">
<span className="flex-shrink-0 text-xs font-bold text-[#666666] w-6 pt-0.5">{step}</span>
<p className="text-sm text-[#111111] leading-snug">{text}</p>
<Link to="/faculty/signup" className="block px-5 py-3 text-sm font-medium text-white hover:bg-[#333333] transition-colors border-b border-[#333333] cursor-pointer">
Signup as Faculty / Staff
</Link>
<Link to="/warden/signup" className="block px-5 py-3 text-sm font-medium text-white hover:bg-[#333333] transition-colors border-b border-[#333333] cursor-pointer">
Signup as Warden
</Link>
<Link to="/centre-head/signup" className="block px-5 py-3 text-sm font-medium text-white hover:bg-[#333333] transition-colors cursor-pointer">
Signup as Centre Head
</Link>
</div>
))}
<a href="#" className="inline-flex items-center gap-1 text-sm font-bold text-[#111111] hover:underline mt-2">
Read Complete Manual <ArrowRight className="w-3.5 h-3.5" />
</a>
</div>
</div>
)}
</div>

</div>
</main>
</section>

</MainLayout>
);
Expand Down
Loading