Skip to content

feat: implementing ui #79

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

feat: implementing ui #79

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
04daeb8
feat: implementing ui
ayush00git May 30, 2026
3be230b
fix: auth pages ui
ayush00git May 31, 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
572 changes: 370 additions & 202 deletions app/src/components/ComplaintCard.tsx
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 29 additions & 17 deletions app/src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,47 @@ import { Mail, Phone, MapPin } from 'lucide-react';

export function Footer() {
return (
<footer className="bg-[#1e1e1e] text-gray-300 py-5 border-t-4 border-[#ff9900] mt-auto">
<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 gap-8">
<footer className="bg-[#111111] text-white mt-auto">
<div className="container mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-3 gap-10">
<div>
<h3 className="text-white font-bold text-lg mb-4">NIT Hamirpur</h3>
<p className="text-sm leading-relaxed mb-4">
National Institute of Technology Hamirpur is a public technical university located in Hamirpur, Himachal Pradesh, India.
The Estate Office is responsible for the overall maintenance of the campus.
<h3 className="font-bold text-base mb-3">NIT Hamirpur</h3>
<p className="text-sm text-[#999999] leading-relaxed">
National Institute of Technology Hamirpur is a public technical university in Himachal Pradesh.
The Estate Office oversees campus maintenance and infrastructure.
</p>
</div>

<div>
<h3 className="font-bold text-base mb-3">Quick Links</h3>
<ul className="text-sm text-[#999999] space-y-2">
<li><a href="#" className="hover:text-white transition-colors">Lodge a Complaint</a></li>
<li><a href="#" className="hover:text-white transition-colors">Track Complaint Status</a></li>
<li><a href="#" className="hover:text-white transition-colors">Filing Guidelines</a></li>
<li><a href="#" className="hover:text-white transition-colors">Staff Portal</a></li>
</ul>
</div>

<div>
<h3 className="text-white font-bold text-lg mb-4">Contact Us</h3>
<ul className="text-sm space-y-3">
<li className="flex items-start">
<MapPin className="w-5 h-5 mr-2 text-[#ff9900] shrink-0" />
<span>National Institute of Technology, Anu, Hamirpur, Himachal Pradesh 177005</span>
<h3 className="font-bold text-base mb-3">Contact Us</h3>
<ul className="text-sm text-[#999999] space-y-3">
<li className="flex items-start gap-2.5">
<MapPin className="w-4 h-4 shrink-0 mt-0.5 text-[#666666]" />
<span>NIT Hamirpur, Anu, Hamirpur, Himachal Pradesh 177005</span>
</li>
<li className="flex items-center">
<Phone className="w-5 h-5 mr-2 text-[#ff9900] shrink-0" />
<li className="flex items-center gap-2.5">
<Phone className="w-4 h-4 shrink-0 text-[#666666]" />
<span>+91-1972-254011</span>
</li>
<li className="flex items-center">
<Mail className="w-5 h-5 mr-2 text-[#ff9900] shrink-0" />
<li className="flex items-center gap-2.5">
<Mail className="w-4 h-4 shrink-0 text-[#666666]" />
<span>registrar@nith.ac.in</span>
</li>
</ul>
</div>
</div>
<div className="container mx-auto px-4 mt-8 pt-6 border-t border-gray-700 text-sm text-center">
<p>&copy; {new Date().getFullYear()} National Institute of Technology Hamirpur. All Rights Reserved.</p>

<div className="border-t border-[#222222] py-4 text-center text-xs text-[#555555]">
&copy; {new Date().getFullYear()} National Institute of Technology Hamirpur. All Rights Reserved.
</div>
</footer>
);
Expand Down
36 changes: 19 additions & 17 deletions app/src/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,30 @@ import { Link } from 'react-router-dom';

export function Header() {
return (
<header className="bg-white py-2 shadow-sm relative z-20">
<div className="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<Link to="/" className="flex items-center space-x-4 mb-4 md:mb-0">
<img
src="/logo nith.png"
alt="NITH Logo"
className="w-18 h-18 object-contain"
<header className="bg-white border-b border-[#E5E5E5] py-4">
<div className="container mx-auto px-6 flex items-center justify-between">
<Link to="/" className="flex items-center gap-5">
<img
src="/logo nith.png"
alt="NITH Logo"
className="w-16 h-16 object-contain"
/>
<div className="text-center md:text-left flex flex-col">
<h1 className="text-xl md:text-2xl font-bold text-[#2d2d2d] leading-tight">
<div className="flex flex-col">
<span className="text-sm font-semibold text-[#666666] tracking-wide">
राष्ट्रीय प्रौद्योगिकी संस्थान हमीरपुर
</h1>
<h2 className="text-lg md:text-xl font-bold text-[#2d2d2d] leading-tight">
</span>
<span className="text-xl font-bold text-[#111111] leading-tight">
National Institute of Technology Hamirpur
</h2>
<p className="text-xs text-gray-600 mt-1">
An Institute of National Importance under Ministry of Education, Govt. of India
</p>
</span>
<span className="text-xs text-[#666666] mt-0.5">
An Institute of National Importance · Ministry of Education, Govt. of India
</span>
</div>
</Link>
<div className="flex space-x-4">
{/* Right side logos could go here */}

<div className="hidden md:flex flex-col items-end gap-1">
<span className="text-xs font-bold uppercase tracking-widest text-[#666666]">Estate Office</span>
<span className="text-lg font-bold text-[#111111]">Complaint Management</span>
</div>
</div>
</header>
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/layout/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ interface MainLayoutProps {

export function MainLayout({ children }: MainLayoutProps) {
return (
<div className="flex flex-col min-h-screen bg-gray-50">
<div className="flex flex-col min-h-screen bg-white">
<TopBar />
<Header />
<Navbar />

<div className="flex-grow flex flex-col">
{children}
</div>
Expand Down
67 changes: 41 additions & 26 deletions app/src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,54 @@
import { Search, ChevronDown } from 'lucide-react';
import { ChevronDown } from 'lucide-react';
import { Link } from 'react-router-dom';

export function Navbar() {
return (
<nav className="bg-[#4a4a4a] text-white shadow-md sticky top-0 z-30">
<div className="container mx-auto px-4">
<ul className="flex flex-wrap items-center justify-center text-sm md:text-base font-semibold">
<li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">
<Link to="/">Home</Link>
<nav className="bg-[#111111] text-white sticky top-0 z-30">
<div className="container mx-auto px-6">
<ul className="flex items-center text-sm font-medium">
<li>
<Link to="/" className="block px-4 py-3 hover:bg-white/10 transition-colors">
Home
</Link>
</li>
<li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer flex items-center group relative">
Lodge Complaint <ChevronDown className="ml-1 w-4 h-4" />
<div className="absolute top-full left-0 hidden group-hover:block bg-white text-gray-800 shadow-lg min-w-[200px] rounded-b border border-gray-100">
<Link to="/faculty/signup" className="block px-4 py-2 hover:bg-gray-100">Faculty</Link>
<Link to="/warden/signup" className="block px-4 py-2 hover:bg-gray-100">Warden</Link>
<Link to="/centre-head/signup" className="block px-4 py-2 hover:bg-gray-100">Centre Head</Link>

<li className="relative group">
<button className="flex items-center gap-1 px-4 py-3 hover:bg-white/10 transition-colors w-full">
Lodge Complaint <ChevronDown className="w-3.5 h-3.5 opacity-60" />
</button>
<div className="absolute top-full left-0 hidden group-hover:block bg-white text-[#111111] shadow-lg border border-[#E5E5E5] rounded-b-lg min-w-[180px] z-50">
<Link to="/faculty/signup" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Faculty</Link>
<Link to="/warden/signup" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Warden</Link>
<Link to="/centre-head/signup" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Centre Head</Link>
</div>
</li>
<li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">Track Status</li>
<li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer flex items-center">
Estate Office Administration <ChevronDown className="ml-1 w-4 h-4" />

<li>
<button className="block px-4 py-3 hover:bg-white/10 transition-colors">
Track Status
</button>
</li>
<li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">Guidelines</li>
<li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">Contact Us</li>

<li className="ml-auto px-4 py-1 flex items-center">
<div className="relative flex items-center">
<input
type="text"
placeholder="Search..."
className="pl-9 pr-4 py-1 w-44 text-xs bg-white/10 hover:bg-white/15 focus:bg-white/20 text-white placeholder-gray-300 rounded-full border border-white/10 focus:border-[#ff9900] outline-none transition-all duration-300 focus:w-52"
/>
<Search className="absolute left-3 w-3.5 h-3.5 text-gray-300 pointer-events-none" />

<li className="relative group">
<button className="flex items-center gap-1 px-4 py-3 hover:bg-white/10 transition-colors">
Administration <ChevronDown className="w-3.5 h-3.5 opacity-60" />
</button>
<div className="absolute top-full left-0 hidden group-hover:block bg-white text-[#111111] shadow-lg border border-[#E5E5E5] rounded-b-lg min-w-[180px] z-50">
<Link to="/staff/login" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Staff Login</Link>
</div>
</li>

<li>
<button className="block px-4 py-3 hover:bg-white/10 transition-colors">
Guidelines
</button>
</li>

<li>
<button className="block px-4 py-3 hover:bg-white/10 transition-colors">
Contact Us
</button>
</li>
</ul>
</div>
</nav>
Expand Down
26 changes: 11 additions & 15 deletions app/src/components/layout/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
export function TopBar() {
return (
<div className="bg-[#2d2d2d] text-white py-1 px-4 text-xs">
<div className="bg-[#222222] border-b border-[#333333] py-1.5 px-4 text-xs text-[#999999]">
<div className="container mx-auto flex justify-between items-center">
<div className="flex space-x-4">
<a href="#" className="hover:text-[#ff9900]">Grey Scale</a>
<span className="text-gray-400">|</span>
<a href="#" className="hover:text-[#ff9900]">Light Mode</a>
<span className="text-gray-400">|</span>
<a href="#" className="hover:text-[#ff9900]">Intranet</a>
<span className="text-gray-400">|</span>
<a href="#" className="hover:text-[#ff9900]">eOffice</a>
<span className="text-gray-400">|</span>
<a href="#" className="hover:text-[#ff9900]">Webmail</a>
<div className="flex items-center space-x-4">
<a href="#" className="hover:text-white transition-colors">Intranet</a>
<span className="text-[#444444]">|</span>
<a href="#" className="hover:text-white transition-colors">eOffice</a>
<span className="text-[#444444]">|</span>
<a href="#" className="hover:text-white transition-colors">Webmail</a>
</div>
<div className="flex space-x-4">
<a href="#" className="hover:text-[#ff9900]">Directory</a>
<span className="text-gray-400">|</span>
<a href="#" className="hover:text-[#ff9900]">Contact Us</a>
<div className="flex items-center space-x-4">
<a href="#" className="hover:text-white transition-colors">Directory</a>
<span className="text-[#444444]">|</span>
<a href="#" className="hover:text-white transition-colors">Contact Us</a>
</div>
</div>
</div>
Expand Down
Loading
Loading