feat: integrate all frontend modules and premium UI
This commit is contained in:
Amudieshwar A G
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Menu, X, GraduationCap, Bell } from 'lucide-react';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { NAV_LINKS } from '@/constants';
|
||||
|
||||
export default function Navbar() {
|
||||
@@ -25,54 +25,38 @@ export default function Navbar() {
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className={`fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'shadow-[0_8px_32px_rgba(0,0,0,0.12)] bg-white/90'
|
||||
: 'bg-white/80'
|
||||
}`}
|
||||
className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]"
|
||||
style={{
|
||||
background: 'linear-gradient(to right, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(15, 23, 42, 0.45) 100%)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(229,231,235,0.8)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-2.5">
|
||||
{/* Logo - RIT Event Hub Style */}
|
||||
<Link to="/" className="flex items-center gap-2 group">
|
||||
{/* Blue Circular Tree Icon */}
|
||||
<motion.div
|
||||
<a href="/" className="flex items-center gap-2 group">
|
||||
{/* Logo Image */}
|
||||
<motion.img
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
|
||||
style={{ background: 'linear-gradient(135deg, #1E40AF, #3B82F6)' }}
|
||||
>
|
||||
<svg viewBox="0 0 100 100" className="w-6.5 h-6.5 text-white" fill="none" stroke="currentColor" strokeWidth="6" strokeLinecap="round">
|
||||
{/* Minimalist Tree Branch Representation */}
|
||||
<path d="M50 85 V40" />
|
||||
<path d="M50 65 Q65 55 75 60" />
|
||||
<path d="M50 55 Q35 45 25 50" />
|
||||
<path d="M50 45 Q70 30 65 15" />
|
||||
<path d="M50 45 Q30 30 35 15" />
|
||||
<circle cx="50" cy="38" r="8" fill="white" stroke="none" />
|
||||
<circle cx="65" cy="15" r="5" fill="white" stroke="none" />
|
||||
<circle cx="35" cy="15" r="5" fill="white" stroke="none" />
|
||||
<circle cx="75" cy="60" r="5" fill="white" stroke="none" />
|
||||
<circle cx="25" cy="50" r="5" fill="white" stroke="none" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
src="/logo.png"
|
||||
alt="RIT Logo"
|
||||
className="w-10 h-10 object-contain rounded-full shrink-0"
|
||||
/>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="font-extrabold text-[#1E293B] text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<span className="font-extrabold text-white text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
rit
|
||||
</span>
|
||||
<div className="h-7 w-[1px] bg-gray-300 mx-2" />
|
||||
<div className="flex flex-col text-[8.5px] font-bold text-[#475569] leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<div className="h-7 w-[1px] bg-white/20 mx-2" />
|
||||
<div className="flex flex-col text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<span>RAJALAKSHMI</span>
|
||||
<span>INSTITUTE OF</span>
|
||||
<span>TECHNOLOGY</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</a>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
@@ -85,14 +69,14 @@ export default function Navbar() {
|
||||
className="relative px-4 py-2 rounded-xl text-xs font-semibold uppercase tracking-wider transition-all duration-200"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
color: isActive ? '#F97316' : '#475569',
|
||||
color: isActive ? '#FFFFFF' : '#CBD5E1',
|
||||
}}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId="nav-active"
|
||||
className="absolute inset-0 rounded-xl"
|
||||
style={{ backgroundColor: '#FFF7ED' }}
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
|
||||
transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
|
||||
/>
|
||||
)}
|
||||
@@ -104,35 +88,11 @@ export default function Navbar() {
|
||||
|
||||
{/* Right Side */}
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="hidden md:flex w-9 h-9 rounded-xl items-center justify-center text-[#94A3B8] hover:text-[#F97316] hover:bg-[#FFF7ED] transition-all"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<Bell className="w-4.5 h-4.5" />
|
||||
</motion.button>
|
||||
|
||||
{/* Profile styled as an orange LOG OUT pill button from Reference Image */}
|
||||
<Link to="/profile" className="hidden md:block">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03, boxShadow: '0 4px 15px rgba(249,115,22,0.3)' }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="px-5 py-2 rounded-full text-white font-bold text-[10.5px] tracking-wider uppercase transition-all"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
background: 'linear-gradient(135deg, #F97316, #FB923C)',
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
</motion.button>
|
||||
</Link>
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => setIsMobileOpen(!isMobileOpen)}
|
||||
className="md:hidden w-9 h-9 rounded-xl flex items-center justify-center text-[#475569] hover:bg-gray-100 transition-all"
|
||||
className="md:hidden w-9 h-9 rounded-xl flex items-center justify-center text-slate-300 hover:text-white hover:bg-white/10 transition-all"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isMobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
@@ -150,7 +110,7 @@ export default function Navbar() {
|
||||
transition={{ duration: 0.25 }}
|
||||
className="overflow-hidden md:hidden"
|
||||
>
|
||||
<div className="px-4 pb-4 pt-2 flex flex-col gap-1 border-t border-gray-100">
|
||||
<div className="px-4 pb-4 pt-2 flex flex-col gap-1 border-t border-white/10">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = location.pathname === link.path;
|
||||
return (
|
||||
@@ -160,8 +120,8 @@ export default function Navbar() {
|
||||
className="px-4 py-3 rounded-xl text-sm font-medium transition-all"
|
||||
style={{
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
color: isActive ? '#F97316' : '#475569',
|
||||
backgroundColor: isActive ? '#FFF7ED' : 'transparent',
|
||||
color: isActive ? '#FFFFFF' : '#CBD5E1',
|
||||
backgroundColor: isActive ? '#F97316' : 'transparent',
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
|
||||
Reference in New Issue
Block a user