feat: upgrade UI design system with Orange, White & Dark Purple theme
This commit is contained in:
Amudieshwar A G
@@ -39,17 +39,16 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
whileHover={{ y: -6, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }}
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="bg-white border border-[#E8ECF4] rounded-[20px] p-5 flex flex-col gap-4 relative"
|
||||
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
|
||||
className="bg-white border border-[#E9E5EE] rounded-2xl p-5 flex flex-col gap-4 relative shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)] hover:shadow-[0_12px_35px_-6px_rgba(19,9,36,0.08)] hover:border-[#FF6B00]/30"
|
||||
>
|
||||
{/* Avatar + Name */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
<div
|
||||
className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-bold text-lg shrink-0 shadow-sm"
|
||||
style={{ background: `linear-gradient(135deg, ${from}, ${to})`, fontFamily: 'Poppins, sans-serif' }}
|
||||
style={{ background: `linear-gradient(135deg, ${from}, ${to})`, fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
@@ -57,10 +56,10 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-[#22C55E] border-2 border-white rounded-full z-10 shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-[#1E293B] text-sm leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<h3 className="font-bold text-[#1A0B2E] text-sm leading-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
{faculty.name}
|
||||
</h3>
|
||||
<p className="text-xs text-[#FF7A00] font-medium mt-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-xs text-[#FF6B00] font-semibold mt-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{faculty.designation}
|
||||
</p>
|
||||
</div>
|
||||
@@ -68,27 +67,27 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
|
||||
{/* Details */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-xs text-[#475569]">
|
||||
<Building2 className="w-3.5 h-3.5 text-[#94A3B8] shrink-0" />
|
||||
<div className="flex items-center gap-2 text-xs text-[#4A3E5E]">
|
||||
<Building2 className="w-3.5 h-3.5 text-[#9E91B6] shrink-0" />
|
||||
<span style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.department}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact & Actions */}
|
||||
<div className="flex items-center gap-2 pt-2 border-t border-[#E5E7EB] mt-auto">
|
||||
<div className="flex items-center gap-2 pt-2 border-t border-[#E9E5EE] mt-auto">
|
||||
<button
|
||||
onClick={() => setShowEmailOptions(true)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-medium text-[#475569] transition-all hover:bg-gray-50 border border-transparent hover:border-gray-200"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-semibold text-[#4A3E5E] transition-all hover:bg-purple-50/50 border border-transparent hover:border-[#E9E5EE]"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
aria-label={`Email ${faculty.name}`}
|
||||
>
|
||||
<Mail className="w-3.5 h-3.5" />
|
||||
<Mail className="w-3.5 h-3.5 text-[#FF6B00]" />
|
||||
Email
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-medium transition-all hover:bg-[#FFF7ED]"
|
||||
style={{ color: '#F97316', fontFamily: 'Poppins, sans-serif' }}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-bold transition-all hover:bg-[#FFF7ED]"
|
||||
style={{ color: '#FF6B00', fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
View Profile
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
|
||||
@@ -13,14 +13,13 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ y: -6, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.15)' }}
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="bg-white border border-[#E5E7EB] rounded-2xl p-6 flex flex-col gap-4 group cursor-pointer"
|
||||
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
|
||||
className="bg-white border border-[#E9E5EE] rounded-2xl p-6 flex flex-col gap-4 group cursor-pointer shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)] hover:shadow-[0_12px_35px_-6px_rgba(19,9,36,0.08)] hover:border-[#FF6B00]/30"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110"
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-105"
|
||||
style={{ backgroundColor: feature.bgColor, color: feature.color }}
|
||||
>
|
||||
{IconComponent && <IconComponent className="w-6 h-6" />}
|
||||
@@ -29,12 +28,12 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className="text-base font-semibold text-[#1E293B] mb-1.5"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
className="text-base font-bold text-[#1A0B2E] mb-1.5"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#94A3B8] leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-sm text-[#4A3E5E] leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -42,9 +41,9 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
|
||||
{/* Arrow */}
|
||||
<Link
|
||||
to={feature.path}
|
||||
className="flex items-center gap-1.5 text-sm font-semibold transition-all duration-200 w-fit"
|
||||
className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider transition-all duration-200 w-fit"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
fontFamily: 'Plus Jakarta Sans, sans-serif',
|
||||
color: feature.color,
|
||||
}}
|
||||
aria-label={`Explore ${feature.title}`}
|
||||
|
||||
@@ -1,123 +1,239 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { GraduationCap, MapPin, Phone, Mail, ArrowRight } from 'lucide-react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
GraduationCap, MapPin, Phone, Mail, ArrowRight, Sparkles,
|
||||
BookOpen, Bot, Map, Bus, UserCheck, Users, MessageCircle, Wrench, Code2, Trophy
|
||||
} from 'lucide-react';
|
||||
|
||||
const quickLinks = [
|
||||
{ label: 'Home', path: '/' },
|
||||
{ label: 'Notes & PYQs', path: '/notes' },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant' },
|
||||
{ label: '3D Campus Map', path: '/campus' },
|
||||
{ label: 'Bus Routes', path: '/bus-routes' },
|
||||
{ label: 'Faculty Directory', path: '/faculty' },
|
||||
{ label: 'Events', path: '/events' },
|
||||
{ label: 'Community', path: '/community' },
|
||||
{ label: 'Dev Hub', path: '/collab' },
|
||||
const exploreLinks = [
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
|
||||
{ label: 'Student Toolkit', path: '/toolkit', icon: Wrench },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot },
|
||||
{ label: 'Faculty Directory', path: '/faculty', icon: UserCheck },
|
||||
{ label: 'LeetCode Arena', path: '/leetcode', icon: Trophy },
|
||||
];
|
||||
|
||||
const campusLinks = [
|
||||
{ label: 'Campus Map', path: '/campus', icon: Map },
|
||||
{ label: 'Bus Routes', path: '/bus-routes', icon: Bus },
|
||||
{ label: 'Student Clubs', path: '/events', icon: Users },
|
||||
{ label: 'Freshers Q&A', path: '/community', icon: MessageCircle },
|
||||
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2 },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
const location = useLocation();
|
||||
const isHome = location.pathname === '/';
|
||||
|
||||
return (
|
||||
<footer className="bg-[#1E293B] text-white">
|
||||
{/* CTA Banner */}
|
||||
<div style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} className="py-12">
|
||||
<div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Ready to explore RIT?
|
||||
</h3>
|
||||
<p className="text-orange-100 mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Everything a fresher needs — all in one place.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/ai-assistant"
|
||||
className="flex items-center gap-2 bg-white text-[#F97316] px-6 py-3 rounded-xl font-semibold transition-all hover:shadow-lg hover:-translate-y-0.5"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
<div className="w-full relative z-20">
|
||||
{/* ─── 1. CTA Banner (Floating Overlay Box - Only on Home Page) ────────── */}
|
||||
{isHome && (
|
||||
<div className="container-custom relative z-20 -mb-20 lg:-mb-24 px-4">
|
||||
<motion.div
|
||||
whileHover={{ y: -3 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="relative overflow-hidden rounded-3xl p-8 lg:p-12 shadow-2xl border border-orange-400/30"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FB923C 100%)',
|
||||
}}
|
||||
>
|
||||
Ask Chatbot
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* Ambient Background Lighting */}
|
||||
<div className="absolute -right-16 -top-16 w-64 h-64 bg-white/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -left-16 -bottom-16 w-64 h-64 bg-black/10 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
{/* Main Footer */}
|
||||
<div className="container-custom py-14">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
{/* Brand */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2.5 mb-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
|
||||
>
|
||||
<GraduationCap className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div>
|
||||
<div className="text-[10px] text-slate-400">Rajalakshmi Institute of Technology</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm leading-relaxed mb-5" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Your all-in-one guide to campus life at RIT. Notes, chatbot, bus routes, 3D campus map, and developer hub — built for students.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Quick Navigation
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{quickLinks.map((link) => (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className="text-slate-400 hover:text-[#F97316] text-sm transition-colors flex items-center gap-1.5 group py-1"
|
||||
<div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="text-center md:text-left">
|
||||
<div className="inline-flex items-center gap-1.5 px-3.5 py-1 rounded-full bg-white/15 backdrop-blur-md text-white text-xs font-bold uppercase tracking-wider mb-3 border border-white/20">
|
||||
<Sparkles className="w-3.5 h-3.5 text-amber-200" />
|
||||
<span>RIT Student Portal</span>
|
||||
</div>
|
||||
<h3
|
||||
className="text-2xl lg:text-3xl xl:text-4xl font-extrabold text-white tracking-tight"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
Ready to explore RIT?
|
||||
</h3>
|
||||
<p
|
||||
className="text-orange-100 text-sm lg:text-base mt-2 max-w-xl font-medium"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-[#F97316] opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
Everything a fresher needs — semester notes, campus map, chatbot, bus routes, and developer tools all in one place.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link to="/ai-assistant" className="shrink-0">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, boxShadow: '0 20px 30px -10px rgba(0,0,0,0.3)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2.5 bg-white text-[#EA580C] px-7 py-3.5 rounded-2xl font-bold text-sm lg:text-base shadow-xl transition-all cursor-pointer group"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<span>Ask Chatbot</span>
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ─── 2. Main Footer Section (Deep Royal Dark Purple) ──────────── */}
|
||||
<footer className={`bg-[#130924] text-slate-300 relative z-10 pb-24 lg:pb-28 ${isHome ? 'pt-32 lg:pt-36' : 'pt-28 lg:pt-36'}`}>
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-12 gap-12 xl:gap-14 items-start">
|
||||
{/* Column 1: Brand Info (xl:col-span-4) */}
|
||||
<div className="xl:col-span-4 flex flex-col gap-5">
|
||||
<Link to="/" className="flex items-center gap-3.5 group w-fit">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-orange-500 to-amber-500 flex items-center justify-center shadow-lg shadow-orange-500/25 group-hover:scale-105 transition-transform shrink-0">
|
||||
<GraduationCap className="w-6.5 h-6.5 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-extrabold text-white text-xl tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
RIT Freshers Hub
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-purple-300/80 uppercase tracking-wider mt-0.5">
|
||||
Rajalakshmi Institute of Technology
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<p className="text-slate-300/80 text-sm lg:text-base leading-relaxed max-w-md" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Your official student companion for RIT campus life. Access study resources, competitive coding ranks, project collaboration, and campus navigation.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2.5 mt-2 flex-wrap">
|
||||
<span className="px-3.5 py-1.5 rounded-xl bg-[#1E0C36] border border-[#3A1968] text-xs font-semibold text-orange-400">
|
||||
Official Student Portal
|
||||
</span>
|
||||
<span className="px-3.5 py-1.5 rounded-xl bg-emerald-500/15 border border-emerald-500/25 text-xs font-semibold text-emerald-400">
|
||||
Active 24/7
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 2: Academics & Tools (xl:col-span-2) */}
|
||||
<div className="xl:col-span-2">
|
||||
<h4
|
||||
className="!text-white font-extrabold text-xs lg:text-sm uppercase tracking-widest mb-6 lg:mb-7 flex items-center gap-2.5"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-orange-500 shadow-xs shadow-orange-500/50" />
|
||||
Academics
|
||||
</h4>
|
||||
<ul className="space-y-4 lg:space-y-4.5">
|
||||
{exploreLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<li key={link.path}>
|
||||
<Link
|
||||
to={link.path}
|
||||
className="text-slate-300/80 hover:text-orange-400 text-sm lg:text-base font-medium transition-colors inline-flex items-center gap-3 group py-1"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
<Icon className="w-4.5 h-4.5 text-purple-400/60 group-hover:text-orange-400 transition-colors shrink-0" />
|
||||
<span>{link.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 3: Campus Life (xl:col-span-3) */}
|
||||
<div className="xl:col-span-3">
|
||||
<h4
|
||||
className="!text-white font-extrabold text-xs lg:text-sm uppercase tracking-widest mb-6 lg:mb-7 flex items-center gap-2.5"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-orange-500 shadow-xs shadow-orange-500/50" />
|
||||
Campus Life
|
||||
</h4>
|
||||
<ul className="space-y-4 lg:space-y-4.5">
|
||||
{campusLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<li key={link.path}>
|
||||
<Link
|
||||
to={link.path}
|
||||
className="text-slate-300/80 hover:text-orange-400 text-sm lg:text-base font-medium transition-colors inline-flex items-center gap-3 group py-1"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
<Icon className="w-4.5 h-4.5 text-purple-400/60 group-hover:text-orange-400 transition-colors shrink-0" />
|
||||
<span>{link.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 4: Reach Us (xl:col-span-3) */}
|
||||
<div className="xl:col-span-3">
|
||||
<h4
|
||||
className="!text-white font-extrabold text-xs lg:text-sm uppercase tracking-widest mb-6 lg:mb-7 flex items-center gap-2.5"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-orange-500 shadow-xs shadow-orange-500/50" />
|
||||
Reach Us
|
||||
</h4>
|
||||
<ul className="space-y-5 lg:space-y-6">
|
||||
<li className="flex items-start gap-4 text-slate-300 text-sm lg:text-base leading-relaxed">
|
||||
<div className="w-9 h-9 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<MapPin className="w-4.5 h-4.5 text-orange-400" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-white">Rajalakshmi Institute of Technology</span>
|
||||
<span className="text-slate-400 text-xs lg:text-sm mt-1">Kuthambakkam, Chennai - 600 124</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="flex items-center gap-4 text-slate-300 text-sm lg:text-base">
|
||||
<div className="w-9 h-9 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center shrink-0">
|
||||
<Phone className="w-4.5 h-4.5 text-orange-400" />
|
||||
</div>
|
||||
<a href="tel:+914423422890" className="hover:text-orange-400 transition-colors font-medium">
|
||||
+91 44 2342 2890
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="flex items-center gap-4 text-slate-300 text-sm lg:text-base">
|
||||
<div className="w-9 h-9 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center shrink-0">
|
||||
<Mail className="w-4.5 h-4.5 text-orange-400" />
|
||||
</div>
|
||||
<a href="mailto:info@rit.ac.in" className="hover:text-orange-400 transition-colors font-medium">
|
||||
info@rit.ac.in
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Campus Location & Contact
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3 text-slate-400 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<MapPin className="w-4 h-4 mt-0.5 shrink-0 text-[#F97316]" />
|
||||
<span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-slate-400 text-sm">
|
||||
<Phone className="w-4 h-4 shrink-0 text-[#F97316]" />
|
||||
<a href="tel:+914423422890" className="hover:text-[#F97316] transition-colors">+91 44 2342 2890</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-slate-400 text-sm">
|
||||
<Mail className="w-4 h-4 shrink-0 text-[#F97316]" />
|
||||
<a href="mailto:info@rit.ac.in" className="hover:text-[#F97316] transition-colors">info@rit.ac.in</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Bottom Copyright Bar */}
|
||||
<div className="border-t border-[#2A104E] bg-[#090314] py-9 lg:py-10 px-4 mt-20">
|
||||
<div className="container-custom flex flex-col sm:flex-row items-center justify-between gap-5">
|
||||
<p className="text-purple-300/70 text-sm lg:text-base font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
© {new Date().getFullYear()} RIT Freshers Hub. Built for Rajalakshmi Institute of Technology Students.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm lg:text-base font-medium text-purple-300/70">
|
||||
<a href="#" className="hover:text-orange-400 transition-colors">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<span className="text-purple-900">·</span>
|
||||
<a href="#" className="hover:text-orange-400 transition-colors">
|
||||
Terms of Use
|
||||
</a>
|
||||
<span className="text-purple-900">·</span>
|
||||
<a href="#" className="hover:text-orange-400 transition-colors">
|
||||
Accessibility
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-slate-700">
|
||||
<div className="container-custom py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<p className="text-slate-500 text-xs" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
© 2025 RIT Freshers Hub. All rights reserved.
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-xs text-slate-500">
|
||||
<a href="#" className="hover:text-[#F97316] transition-colors">Privacy Policy</a>
|
||||
<span>·</span>
|
||||
<a href="#" className="hover:text-[#F97316] transition-colors">Terms of Use</a>
|
||||
<span>·</span>
|
||||
<a href="#" className="hover:text-[#F97316] transition-colors">Accessibility</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -35,55 +35,44 @@ export default function Navbar() {
|
||||
}, []);
|
||||
|
||||
const checkIsActive = (linkPath: string) => {
|
||||
const [pathName, searchString] = linkPath.split('?');
|
||||
if (location.pathname !== pathName) return false;
|
||||
|
||||
if (pathName === '/notes') {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const hasToolkit = params.has('toolkit') || params.get('section') === 'toolkit';
|
||||
|
||||
if (searchString) {
|
||||
return hasToolkit;
|
||||
} else {
|
||||
return !hasToolkit;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
const [pathName] = linkPath.split('?');
|
||||
return location.pathname === pathName;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.nav
|
||||
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 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(255, 255, 255, 0.1)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-2.5">
|
||||
{/* Fixed Header Layout Wrapper */}
|
||||
<div className="fixed top-3 left-1/2 -translate-x-1/2 z-50 w-[96%] xl:w-[97%] max-w-[1560px] flex items-start justify-between gap-2.5 lg:gap-3.5 pointer-events-none px-1 lg:px-2">
|
||||
{/* Grey Rectangular Capsule Container (Logo + Links ending with LeetCode) */}
|
||||
<motion.nav
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className="pointer-events-auto flex items-center justify-between flex-1 min-w-0 pl-2.5 pr-4 lg:pl-3.5 lg:pr-5 py-2 transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]"
|
||||
style={{
|
||||
background: 'linear-gradient(to right, rgba(19, 9, 36, 0.88) 0%, rgba(30, 12, 54, 0.82) 50%, rgba(19, 9, 36, 0.88) 100%)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
}}
|
||||
>
|
||||
{/* Logo - RIT Event Hub Style */}
|
||||
<a href="/" className="flex items-center gap-2 group">
|
||||
<a href="/" className="flex items-center gap-1.5 lg:gap-2 group shrink-0">
|
||||
{/* Logo Image */}
|
||||
<motion.img
|
||||
whileHover={{ scale: 1.05 }}
|
||||
src="/logo.png"
|
||||
alt="RIT Logo"
|
||||
className="w-10 h-10 object-contain rounded-full shrink-0"
|
||||
className="w-8 h-8 lg:w-9 lg:h-9 object-contain rounded-full shrink-0"
|
||||
/>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="font-extrabold text-white text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<span className="font-extrabold text-white text-lg lg:text-xl xl:text-2xl tracking-tighter" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
rit
|
||||
</span>
|
||||
<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' }}>
|
||||
<div className="h-5 lg:h-6 w-[1px] bg-white/20 mx-1 lg:mx-1.5" />
|
||||
<div className="hidden sm:flex flex-col text-[7.5px] lg:text-[8px] xl: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>
|
||||
@@ -91,17 +80,17 @@ export default function Navbar() {
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
{/* Desktop Nav - Ends with LeetCode */}
|
||||
<div className="hidden md:flex items-center gap-0.5 lg:gap-0.5 xl:gap-1">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = checkIsActive(link.path);
|
||||
return (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className="relative px-1.5 lg:px-2.5 xl:px-3.5 py-1.5 rounded-lg text-[10px] lg:text-[11px] xl:text-xs font-semibold uppercase tracking-wider transition-all duration-200"
|
||||
className="relative px-1 lg:px-1.5 xl:px-2 2xl:px-2.5 py-1.5 rounded-lg text-[8.5px] lg:text-[9px] xl:text-[10px] 2xl:text-[11px] font-semibold uppercase tracking-wider transition-all duration-200 whitespace-nowrap shrink-0"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
fontFamily: 'Plus Jakarta Sans, sans-serif',
|
||||
color: isActive ? '#FFFFFF' : '#CBD5E1',
|
||||
}}
|
||||
>
|
||||
@@ -109,7 +98,7 @@ export default function Navbar() {
|
||||
<motion.div
|
||||
layoutId="nav-active"
|
||||
className="absolute inset-0 rounded-xl"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
|
||||
style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)' }}
|
||||
transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
|
||||
/>
|
||||
)}
|
||||
@@ -119,209 +108,209 @@ export default function Navbar() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Right Side: Auth + Mobile Toggle */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Pitch your Idea - RAISE Button */}
|
||||
<Link
|
||||
to="/raise"
|
||||
className="hidden lg:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-rose-500 via-pink-500 to-rose-600 hover:from-rose-600 hover:to-pink-600 text-white text-[11px] font-bold shadow-md shadow-rose-500/25 border border-white/20 transition-all duration-200 hover:scale-[1.03] active:scale-95 whitespace-nowrap"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5 text-amber-200" />
|
||||
<span>Pitch your Idea - RAISE</span>
|
||||
</Link>
|
||||
|
||||
{/* Auth Section */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="relative" ref={profileRef}>
|
||||
<button
|
||||
onClick={() => setIsProfileOpen(!isProfileOpen)}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-white/10 transition-all cursor-pointer"
|
||||
>
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-8 h-8 rounded-full border-2 border-white/30 object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-sm">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="hidden lg:flex flex-col items-start">
|
||||
<span className="text-white text-[11px] font-semibold leading-tight max-w-[100px] truncate">
|
||||
{user.name.split(' ')[0]}
|
||||
</span>
|
||||
{isVerifiedStudent && (
|
||||
<span className="flex items-center gap-0.5 text-[9px] text-emerald-400 font-bold">
|
||||
<ShieldCheck className="w-2.5 h-2.5" /> Verified
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ChevronDown className="w-3 h-3 text-slate-400 hidden lg:block" />
|
||||
</button>
|
||||
|
||||
{/* Profile Dropdown */}
|
||||
<AnimatePresence>
|
||||
{isProfileOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 8, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute right-0 top-full mt-2 w-64 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden z-50"
|
||||
>
|
||||
<div className="p-4 border-b border-slate-700/60">
|
||||
<div className="flex items-center gap-3">
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-10 h-10 rounded-full border-2 border-orange-500/40 object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-lg">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm font-bold truncate">{user.name}</p>
|
||||
<p className="text-slate-400 text-[11px] truncate">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
{isVerifiedStudent ? (
|
||||
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-emerald-500/15 border border-emerald-500/25">
|
||||
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-[11px] font-bold text-emerald-400">Verified RIT Student</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/15 border border-amber-500/25">
|
||||
<span className="text-[11px] font-semibold text-amber-400">
|
||||
Sign in with @ritchennai.edu.in for verified badge
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
setIsProfileOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-slate-300 hover:text-white hover:bg-red-500/15 text-xs font-semibold transition-all cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
) : (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={loginWithGoogle}
|
||||
className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl text-white text-[11px] font-semibold border border-white/15 hover:border-orange-500/40 hover:bg-white/5 transition-all cursor-pointer"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-3.5 h-3.5" />
|
||||
Sign In
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
{/* Mobile Toggle */}
|
||||
<div className="md:hidden flex items-center">
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => setIsMobileOpen(!isMobileOpen)}
|
||||
className="md:hidden w-11 h-11 rounded-xl flex items-center justify-center text-slate-200 hover:text-white bg-slate-800/60 hover:bg-slate-700/60 border border-slate-700/50 transition-all active:scale-95"
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-slate-200 hover:text-white bg-slate-800/60 hover:bg-slate-700/60 border border-slate-700/50 transition-all active:scale-95"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isMobileOpen ? <X className="w-5 h-5 stroke-[2.5]" /> : <Menu className="w-5 h-5 stroke-[2.5]" />}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<AnimatePresence>
|
||||
{isMobileOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="overflow-hidden md:hidden max-h-[80vh] overflow-y-auto"
|
||||
>
|
||||
<div className="px-4 pb-5 pt-3 grid grid-cols-2 gap-2 border-t border-white/10 bg-slate-950/90 backdrop-blur-2xl rounded-b-2xl">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = checkIsActive(link.path);
|
||||
return (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
onClick={() => setIsMobileOpen(false)}
|
||||
className="px-3.5 py-3 rounded-xl text-xs font-semibold uppercase tracking-wider flex items-center justify-center text-center transition-all min-h-[44px]"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
color: isActive ? '#FFFFFF' : '#CBD5E1',
|
||||
backgroundColor: isActive ? '#F97316' : 'rgba(255, 255, 255, 0.05)',
|
||||
border: isActive ? '1px solid #FB923C' : '1px solid rgba(255, 255, 255, 0.08)',
|
||||
{/* Mobile Menu Dropdown */}
|
||||
<AnimatePresence>
|
||||
{isMobileOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="absolute left-0 top-full mt-2 w-full overflow-hidden md:hidden max-h-[80vh] overflow-y-auto z-50"
|
||||
>
|
||||
<div className="px-4 pb-5 pt-3 grid grid-cols-2 gap-2 border border-white/10 bg-slate-950/95 backdrop-blur-2xl rounded-2xl shadow-2xl">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = checkIsActive(link.path);
|
||||
return (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
onClick={() => setIsMobileOpen(false)}
|
||||
className="px-3.5 py-3 rounded-xl text-xs font-semibold uppercase tracking-wider flex items-center justify-center text-center transition-all min-h-[44px]"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
color: isActive ? '#FFFFFF' : '#CBD5E1',
|
||||
backgroundColor: isActive ? '#F97316' : 'rgba(255, 255, 255, 0.05)',
|
||||
border: isActive ? '1px solid #FB923C' : '1px solid rgba(255, 255, 255, 0.08)',
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Mobile RAISE Button */}
|
||||
<Link
|
||||
to="/raise"
|
||||
onClick={() => setIsMobileOpen(false)}
|
||||
className="col-span-2 mt-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-rose-500 to-pink-600 border border-rose-400/40 shadow-md shadow-rose-500/20 transition-all active:scale-95"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-amber-200" />
|
||||
Pitch your Idea - RAISE Incubator
|
||||
</Link>
|
||||
|
||||
{/* Mobile Auth Button */}
|
||||
{!isAuthenticated ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
loginWithGoogle();
|
||||
setIsMobileOpen(false);
|
||||
}}
|
||||
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-white text-xs font-semibold border border-orange-500/40 bg-orange-500/10 hover:bg-orange-500/20 transition-all cursor-pointer"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In with Google
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
setIsMobileOpen(false);
|
||||
}}
|
||||
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-red-400 text-xs font-semibold border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 transition-all cursor-pointer"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Sign Out ({user?.name.split(' ')[0]})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
|
||||
{/* Mobile RAISE Button */}
|
||||
<Link
|
||||
to="/raise"
|
||||
onClick={() => setIsMobileOpen(false)}
|
||||
className="col-span-2 mt-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-rose-500 to-pink-600 border border-rose-400/40 shadow-md shadow-rose-500/20 transition-all active:scale-95"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-amber-200" />
|
||||
Pitch your Idea - RAISE
|
||||
</Link>
|
||||
|
||||
{/* Mobile Auth Button */}
|
||||
{!isAuthenticated ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
loginWithGoogle();
|
||||
setIsMobileOpen(false);
|
||||
}}
|
||||
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-white text-xs font-semibold border border-orange-500/40 bg-orange-500/10 hover:bg-orange-500/20 transition-all cursor-pointer"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In with Google
|
||||
</button>
|
||||
{/* Separate Top Right Section: Sign In on Top, RAISE Incubator Below */}
|
||||
<motion.div
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.05 }}
|
||||
className="hidden md:flex flex-col items-center gap-2 pointer-events-auto shrink-0"
|
||||
>
|
||||
{/* Sign Option (Top Right, Centered) */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="relative" ref={profileRef}>
|
||||
<button
|
||||
onClick={() => setIsProfileOpen(!isProfileOpen)}
|
||||
className="flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-slate-900/90 backdrop-blur-md border border-slate-700/80 hover:border-orange-500/50 hover:bg-slate-800/95 shadow-lg transition-all cursor-pointer min-w-[120px]"
|
||||
>
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-6 h-6 rounded-full border border-white/30 object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
setIsMobileOpen(false);
|
||||
}}
|
||||
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-red-400 text-xs font-semibold border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 transition-all cursor-pointer"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Sign Out ({user?.name.split(' ')[0]})
|
||||
</button>
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-xs">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
<span className="text-white text-xs lg:text-sm font-semibold max-w-[100px] truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{user.name.split(' ')[0]}
|
||||
</span>
|
||||
<ChevronDown className="w-4 h-4 text-slate-400" />
|
||||
</button>
|
||||
|
||||
{/* Profile Dropdown */}
|
||||
<AnimatePresence>
|
||||
{isProfileOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 8, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute right-0 top-full mt-2 w-64 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden z-50"
|
||||
>
|
||||
<div className="p-4 border-b border-slate-700/60">
|
||||
<div className="flex items-center gap-3">
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-10 h-10 rounded-full border-2 border-orange-500/40 object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-lg">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm font-bold truncate">{user.name}</p>
|
||||
<p className="text-slate-400 text-[11px] truncate">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
{isVerifiedStudent ? (
|
||||
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-emerald-500/15 border border-emerald-500/25">
|
||||
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-[11px] font-bold text-emerald-400">Verified RIT Student</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/15 border border-amber-500/25">
|
||||
<span className="text-[11px] font-semibold text-amber-400">
|
||||
Sign in with @ritchennai.edu.in for verified badge
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
logout();
|
||||
setIsProfileOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-slate-300 hover:text-white hover:bg-red-500/15 text-xs font-semibold transition-all cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
) : (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={loginWithGoogle}
|
||||
className="flex items-center justify-center gap-2 px-5 py-2 rounded-xl text-white text-xs lg:text-sm font-bold bg-slate-900/90 backdrop-blur-md border border-slate-700/80 hover:border-orange-500/60 hover:bg-slate-800/95 shadow-lg shadow-black/30 transition-all cursor-pointer min-w-[120px]"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-4 h-4 text-orange-400" />
|
||||
<span className="text-white">Sign In</span>
|
||||
</motion.button>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
|
||||
{/* RAISE Incubator Module (Below Sign Option) */}
|
||||
<Link
|
||||
to="/raise"
|
||||
className="flex items-center justify-center gap-1.5 px-3.5 py-1.5 lg:px-4 lg:py-2 rounded-xl bg-gradient-to-r from-rose-500 via-pink-500 to-rose-600 hover:from-rose-600 hover:to-pink-600 text-white text-[10.5px] lg:text-[11.5px] font-bold shadow-lg shadow-rose-500/25 border border-white/20 transition-all duration-200 hover:scale-[1.03] active:scale-95 whitespace-nowrap"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5 text-amber-200 shrink-0" />
|
||||
<span>Pitch your Idea - RAISE Incubator</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="h-20" />
|
||||
<div className="h-24" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,12 +28,12 @@ export default function SectionTitle({
|
||||
className={`inline-flex items-center gap-2 mb-3 ${isCenter ? 'mx-auto' : ''}`}
|
||||
>
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-xs font-semibold tracking-wider uppercase"
|
||||
className="px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
fontFamily: 'Plus Jakarta Sans, sans-serif',
|
||||
backgroundColor: '#FFF7ED',
|
||||
color: '#F97316',
|
||||
border: '1px solid #FED7AA',
|
||||
color: '#FF6B00',
|
||||
border: '1px solid #FFEDD5',
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
@@ -46,15 +46,15 @@ export default function SectionTitle({
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="text-3xl md:text-4xl font-bold"
|
||||
style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}
|
||||
className="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif', color: '#1A0B2E' }}
|
||||
>
|
||||
{title}{' '}
|
||||
{highlight && (
|
||||
<span
|
||||
className="relative inline-block"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #F97316, #FB923C)',
|
||||
background: 'linear-gradient(135deg, #FF6B00, #F97316)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
@@ -71,7 +71,7 @@ export default function SectionTitle({
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className={`mt-3 text-base text-[#475569] max-w-xl ${isCenter ? 'mx-auto' : ''}`}
|
||||
className={`mt-3 text-base text-[#4A3E5E] max-w-xl ${isCenter ? 'mx-auto' : ''}`}
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
{subtitle}
|
||||
|
||||
Reference in New Issue
Block a user