/ var / www / html / cqt / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxr-xr-x
About.tsx	2.85 KB	-rw-r--r--
AdminLayout.tsx	4.85 KB	-rw-r--r--
Contact.tsx	10.4 KB	-rw-r--r--
DataTable.tsx	4.98 KB	-rw-r--r--
Footer.tsx	12.02 KB	-rw-r--r--
Hero.tsx	11.92 KB	-rw-r--r--
NavLink.tsx	751 B	-rw-r--r--
Navigation.tsx	24.92 KB	-rw-r--r--
News.tsx	3.48 KB	-rw-r--r--
ParticleNetwork.tsx	4.09 KB	-rw-r--r--
ProtectedRoute.tsx	813 B	-rw-r--r--
QuantumCircuit.tsx	3.47 KB	-rw-r--r--
RebuildWebsiteButton.tsx	4.28 KB	-rw-r--r--
Research.tsx	3.68 KB	-rw-r--r--
StatsCard.tsx	4.87 KB	-rw-r--r--
Team.tsx	6.63 KB	-rw-r--r--

Code Editor : Footer.tsx

import { Mail, MapPin, Phone, Linkedin, ExternalLink, ArrowRight } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
const logo = '/cqt_logo_with_iiitd.png';
import { motion } from "framer-motion";

const Footer = () => {
  const navigate = useNavigate();

// Function to handle navigation and scroll to top
  const handleNavigation = (path: string) => {
    navigate(path);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

const footerSections = {
    Research: [
      { name: "All Projects", path: "/research" },
      { name: "Quantum Computing", path: "/research?category=computing" },
      { name: "Quantum Communication", path: "/research?category=communication" },
      { name: "Quantum Sensing", path: "/research?category=sensing" },
      { name: "Publications", path: "/publications" },
      { name: "Labs & Facilities", path: "/labs" },
      { name: "Collaborations", path: "/research#collaborations" },
    ],
    Education: [
      { name: "All Programs", path: "/education" },
      { name: "Courses", path: "/education#courses" },
      { name: "Workshops & Events", path: "/workshops" },
      { name: "PhD Program", path: "/education#phd" },
      { name: "Master's Program", path: "/education#masters" },
      { name: "Student Resources", path: "/education#resources" },
    ],
    People: [
      { name: "Our Team", path: "/team" },
      { name: "Faculty", path: "/team#faculty" },
      { name: "Staff", path: "/team#staff" },
      { name: "PhD Scholar", path: "/team#phd-scholar" },
    ],
    About: [
      { name: "About CQT", path: "/about" },
      { name: "News & Updates", path: "/news" },
      { name: "Workshops & Events", path: "/workshops" },
      { name: "Lab Facilities", path: "/labs" },
      { name: "Partnerships", path: "/about#partners" },
      { name: "Contact Us", path: "/contact" },
    ],
  };

const socialLinks = [
    { icon: Linkedin, href: "https://www.linkedin.com/company/center-for-quantum-technologies-iiit-delhi/?trk=public_post_main-feed-card-text", label: "LinkedIn", color: "hover:text-blue-400" },
    { icon: Mail, href: "mailto:admin-cqt@iiitd.ac.in", label: "Email", color: "hover:text-red-400" },
  ];

const quickActions = [
    { name: "Research Portal", path: "/research", primary: true },
    { name: "Publications", path: "/publications", primary: false },
    { name: "Contact Us", path: "/contact", primary: false },
  ];

return (
    <footer className="bg-gradient-to-b from-quantum-navy to-black text-white relative overflow-hidden">
      {/* Decorative background pattern */}
      <div className="absolute inset-0 opacity-5">
        <div className="absolute inset-0" style={{
          backgroundImage: `radial-gradient(circle at 2px 2px, rgba(59, 130, 246, 0.3) 1px, transparent 0)`,
          backgroundSize: '40px 40px'
        }} />
      </div>

<div className="container mx-auto px-4 py-16 relative z-10">
        {/* Top Section - Logo, Description, and Quick Actions */}
        <div className="grid lg:grid-cols-3 gap-12 mb-16 pb-12 border-b border-gray-800">
          {/* Logo and Description */}
          <div className="lg:col-span-1">
            <button 
              onClick={() => handleNavigation("/")} 
              className="inline-block mb-6 group text-left"
            >
              <div className="flex items-center gap-3">
                <motion.img 
                  src={logo} 
                  alt="CQT Logo" 
                  className="h-16 w-auto object-contain transition-transform group-hover:scale-110 group-hover:rotate-6"
                  whileHover={{ rotate: 360 }}
                  transition={{ duration: 0.6 }}
                />
                <div className="flex flex-col">
                  <span className="text-sm font-semibold text-secondary">Centre for</span>
                  <span className="text-xl font-bold leading-tight">Quantum Technology</span>
                  <span className="text-xs text-gray-400">IIIT Delhi</span>
                </div>
              </div>
            </button>
            <p className="text-gray-400 text-sm leading-relaxed mb-6">
              Pioneering quantum research and education, advancing the frontiers of quantum computing, 
              communication, and sensing technologies to shape the future of science and innovation.
            </p>
            
            {/* Social Links */}
            <div className="flex items-center gap-4 mb-6">
              <span className="text-xs text-gray-500 uppercase tracking-wider">Follow Us:</span>
              <div className="flex gap-3">
                <motion.a
                  href="https://www.linkedin.com/company/center-for-quantum-technologies-iiit-delhi/?trk=public_post_main-feed-card-text"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="LinkedIn"
                  className="p-2 bg-white/5 rounded-lg border border-white/10 hover:text-blue-400 transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <Linkedin className="h-4 w-4" />
                </motion.a>
                <a
                  href="mailto:admin-cqt@iiitd.ac.in"
                  aria-label="Email"
                  className="p-2 bg-white/5 rounded-lg border border-white/10 hover:text-red-400 transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"
                >
                  <Mail className="h-4 w-4" />
                </a>
              </div>
            </div>
          </div>

{/* Quick Actions */}
          <div className="lg:col-span-2">
            <h3 className="text-lg font-bold mb-4 text-secondary">Quick Actions</h3>
            <div className="grid sm:grid-cols-3 gap-4">
              {quickActions.map((action) => (
                <button
                  key={action.name}
                  onClick={() => handleNavigation(action.path)}
                  className={`group relative overflow-hidden rounded-lg p-4 border transition-all duration-300 w-full ${
                    action.primary
                      ? 'bg-gradient-to-r from-secondary to-blue-500 border-secondary hover:shadow-lg hover:shadow-secondary/50'
                      : 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
                  }`}
                >
                  <div className="relative z-10 flex items-center justify-between">
                    <span className={`font-semibold ${action.primary ? 'text-white' : 'text-gray-300'}`}>
                      {action.name}
                    </span>
                    <ArrowRight className={`h-4 w-4 transition-transform group-hover:translate-x-1 ${action.primary ? 'text-white' : 'text-gray-400'}`} />
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>

{/* Main Footer Links */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
          {/* Footer Sections */}
          {Object.entries(footerSections).map(([category, links]) => (
            <div key={category}>
              <h3 className="font-bold text-base mb-4 text-white flex items-center gap-2">
                {category}
                <span className="w-8 h-0.5 bg-secondary" />
              </h3>
              <ul className="space-y-3">
                {links.map((link) => (
                  <li key={link.name}>
                    <button
                      onClick={() => handleNavigation(link.path)}
                      className="text-sm text-gray-400 hover:text-secondary transition-colors flex items-center gap-2 group text-left"
                    >
                      <span className="w-0 h-0.5 bg-secondary transition-all group-hover:w-3" />
                      {link.name}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          ))}

{/* Contact Information */}
          <div>
            <h3 className="font-bold text-base mb-4 text-white flex items-center gap-2">
              Contact
              <span className="w-8 h-0.5 bg-secondary" />
            </h3>
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <MapPin className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
                <div className="text-sm text-gray-400">
                  <p className="font-medium text-gray-300 mb-1">IIIT Delhi</p>
                  <p>Okhla Industrial Estate, Phase III</p>
                  <p>New Delhi - 110020, India</p>
                </div>
              </div>
              <a 
                href="#" 
                className="flex items-center gap-3 text-sm text-gray-400 hover:text-secondary transition-colors group"
              >
                <Phone className="h-5 w-5 text-secondary flex-shrink-0" />
                <span>Will be updated</span>
              </a>
              <a 
                href="mailto:admin-cqt@iiitd.ac.in" 
                className="flex items-center gap-3 text-sm text-gray-400 hover:text-secondary transition-colors group"
              >
                <Mail className="h-5 w-5 text-secondary flex-shrink-0" />
                <span>admin-cqt@iiitd.ac.in</span>
              </a>
              <div className="pt-4">
                <button 
                  onClick={() => handleNavigation("/contact")}
                  className="inline-flex items-center gap-2 text-sm font-semibold text-secondary hover:text-white transition-colors group"
                >
                  Get Directions
                  <ExternalLink className="h-3 w-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
                </button>
              </div>
            </div>
          </div>
        </div>

{/* Bottom Bar */}
        <div className="border-t border-gray-800 pt-8">
          <div className="flex flex-col lg:flex-row justify-between items-center gap-6">
            <div className="flex flex-col sm:flex-row items-center gap-4 text-sm text-gray-500">
              <p>
                © {new Date().getFullYear()} Centre for Quantum Technology, IIIT Delhi.
              </p>
              <span className="hidden sm:inline text-gray-700">|</span>
              <p>All rights reserved.</p>
            </div>
            <div className="flex flex-wrap justify-center gap-6">
              <button 
                onClick={() => handleNavigation("/contact")} 
                className="text-sm text-gray-500 hover:text-secondary transition-colors"
              >
                Contact
              </button>
              <a href="#" className="text-sm text-gray-500 hover:text-secondary transition-colors">
                Privacy Policy
              </a>
              <a href="#" className="text-sm text-gray-500 hover:text-secondary transition-colors">
                Terms of Use
              </a>
              <a href="#" className="text-sm text-gray-500 hover:text-secondary transition-colors">
                Accessibility
              </a>
              <a href="#" className="text-sm text-gray-500 hover:text-secondary transition-colors">
                Sitemap
              </a>
              <button 
                onClick={() => handleNavigation("/admin/login")} 
                className="text-sm text-gray-500 hover:text-secondary transition-colors font-medium"
              >
                Admin
              </button>
            </div>
          </div>
          
          {/* Additional Info */}
          <div className="mt-6 pt-6 border-t border-gray-800 text-center">
            <p className="text-xs text-gray-600">
              Developed with ❤️ for advancing quantum technology research and education
            </p>
          </div>
        </div>
      </div>

{/* Decorative bottom gradient */}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary via-blue-500 to-purple-500" />
    </footer>
  );
};

export default Footer;

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.