/ 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 : Hero.tsx

import { useEffect, useRef, useState } from 'react';
import { ArrowRight, FlaskConical, Users, FileText, ChevronDown } from "lucide-react";
import { motion, useScroll, useTransform } from 'framer-motion';
import { Button } from "@/components/ui/button";
import { Link } from 'react-router-dom';
import heroImage from "@/assets/hero-quantum.jpg";
import ParticleNetwork from './ParticleNetwork';
import QuantumCircuit from './QuantumCircuit';
import StatsCard from './StatsCard';
import { useResearch, usePublications, usePeople, useLabs } from '@/lib/dataLoader';

const Hero = () => {
  const [typedText, setTypedText] = useState('');
  const [isTypingComplete, setIsTypingComplete] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const fullText = "Quantum Future";
  const heroRef = useRef<HTMLElement>(null);
  
  // Fetch data for stats
  const { data: research = [] } = useResearch();
  const { data: publications = [] } = usePublications();
  const { data: people = [] } = usePeople();
  const { data: labs = [] } = useLabs();
  
  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ["start start", "end start"]
  });

// Parallax effects
  const y = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.5, 0]);

// Typing animation
  useEffect(() => {
    let currentIndex = 0;
    const typingInterval = setInterval(() => {
      if (currentIndex <= fullText.length) {
        setTypedText(fullText.slice(0, currentIndex));
        currentIndex++;
      } else {
        setIsTypingComplete(true);
        clearInterval(typingInterval);
      }
    }, 100);

return () => clearInterval(typingInterval);
  }, []);

// Track mouse position for magnetic button effect
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
    };

window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

// Magnetic button effect
  const handleMagneticEffect = (e: React.MouseEvent<HTMLButtonElement>) => {
    const button = e.currentTarget;
    const rect = button.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    
    button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px) scale(1.05)`;
  };

const handleMagneticReset = (e: React.MouseEvent<HTMLButtonElement>) => {
    const button = e.currentTarget;
    button.style.transform = 'translate(0, 0) scale(1)';
  };

return (
    <section 
      ref={heroRef}
      className="relative min-h-screen flex items-center justify-center overflow-hidden"
    >
      {/* Background Image with Parallax */}
      <motion.div 
        style={{ y }}
        className="absolute inset-0 z-0"
      >
        <img
          src={heroImage}
          alt="Quantum Technology"
          className="w-full h-full object-cover scale-110"
        />
        <div className="absolute inset-0 bg-gradient-to-br from-quantum-dark/95 via-quantum-dark/90 to-blue-900/85" />
      </motion.div>

{/* Quantum Circuit Pattern */}
      <div className="absolute inset-0 z-0">
        <QuantumCircuit />
      </div>

{/* Particle Network */}
      <div className="absolute inset-0 z-0">
        <ParticleNetwork 
          particleCount={80}
          maxDistance={150}
          particleColor="rgba(59, 130, 246, 0.6)"
          lineColor="rgba(59, 130, 246, 0.15)"
        />
      </div>

{/* Animated Floating Elements */}
      <div className="absolute inset-0 z-0 overflow-hidden">
        <motion.div
          animate={{
            y: [0, -30, 0],
            rotate: [0, 5, 0],
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl"
        />
        <motion.div
          animate={{
            y: [0, 40, 0],
            rotate: [0, -5, 0],
          }}
          transition={{
            duration: 10,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 1,
          }}
          className="absolute top-1/3 right-1/4 w-40 h-40 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full blur-3xl"
        />
        <motion.div
          animate={{
            y: [0, -25, 0],
            x: [0, 20, 0],
          }}
          transition={{
            duration: 12,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 2,
          }}
          className="absolute bottom-1/3 left-1/3 w-36 h-36 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-full blur-3xl"
        />
      </div>

{/* Content */}
      <motion.div 
        style={{ opacity }}
        className="container mx-auto px-4 z-10 pt-20"
      >
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Column - Text Content */}
            <div className="space-y-8">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full mb-6">
                  <div className="w-2 h-2 bg-secondary rounded-full animate-quantum-pulse" />
                  <span className="text-secondary text-sm font-semibold tracking-wider uppercase">
                    IIIT Delhi
                  </span>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
              >
                <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-tight mb-4">
                  <span className="block mb-2">Advancing the</span>
                  <span className="block bg-gradient-to-r from-secondary via-blue-400 to-purple-400 bg-clip-text text-transparent animate-gradient-shift">
                    {typedText}
                    {!isTypingComplete && (
                      <span className="inline-block w-1 h-16 ml-2 bg-secondary animate-typing-cursor align-middle" />
                    )}
                  </span>
                </h1>
              </motion.div>
              
              <motion.p
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.6 }}
                className="text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed"
              >
                Pioneering research and education in quantum computing, quantum communication, 
                and quantum sensing technologies.
              </motion.p>

<motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.8 }}
                className="flex flex-col sm:flex-row gap-4 pt-4"
              >
                <Link to="/research">
                  <Button 
                    size="lg" 
                    className="relative bg-gradient-to-r from-secondary to-blue-500 hover:from-secondary/90 hover:to-blue-600 text-white font-semibold group overflow-hidden shine-effect transition-all duration-300"
                    onMouseMove={handleMagneticEffect}
                    onMouseLeave={handleMagneticReset}
                  >
                    <span className="relative z-10 flex items-center">
                      Explore Research
                      <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                    </span>
                  </Button>
                </Link>
                <Link to="/team">
                  <Button 
                    size="lg" 
                    variant="outline"
                    className="relative border-2 border-white/50 text-white hover:bg-white hover:text-quantum-dark font-semibold backdrop-blur-sm bg-white/5 transition-all duration-300"
                    onMouseMove={handleMagneticEffect}
                    onMouseLeave={handleMagneticReset}
                  >
                    Join Our Team
                  </Button>
                </Link>
              </motion.div>

{/* Key Features Pills */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 1 }}
                className="flex flex-wrap gap-3 pt-4"
              >
                {['Quantum Computing', 'Quantum Communication', 'Quantum Sensing'].map((tag, index) => (
                  <motion.span
                    key={tag}
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: 1.2 + index * 0.1 }}
                    className="px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-sm text-gray-200 hover:bg-white/20 transition-colors cursor-default"
                  >
                    {tag}
                  </motion.span>
                ))}
              </motion.div>
            </div>

{/* Right Column - Stats Cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <StatsCard
                icon={FlaskConical}
                value={research.length}
                suffix="+"
                label="Research Projects"
                delay={0.6}
                color="rgba(59, 130, 246, 0.8)"
              />
              <StatsCard
                icon={FileText}
                value={publications.length}
                suffix="+"
                label="Publications"
                delay={0.8}
                color="rgba(147, 51, 234, 0.8)"
              />
              <StatsCard
                icon={Users}
                value={people.length}
                suffix="+"
                label="Researchers"
                delay={1}
                color="rgba(236, 72, 153, 0.8)"
              />
              <StatsCard
                icon={FlaskConical}
                value={labs.length}
                suffix="+"
                label="Lab Facilities"
                delay={1.2}
                color="rgba(14, 165, 233, 0.8)"
              />
            </div>
          </div>
        </div>
      </motion.div>

{/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, delay: 2 }}
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20"
      >
        <motion.div
          animate={{ y: [0, 10, 0] }}
          transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
          className="flex flex-col items-center gap-2 cursor-pointer"
          onClick={() => window.scrollBy({ top: window.innerHeight, behavior: 'smooth' })}
        >
          <span className="text-white/70 text-sm uppercase tracking-wider">Scroll</span>
          <div className="w-6 h-10 border-2 border-white/50 rounded-full p-1">
            <motion.div
              animate={{ y: [0, 16, 0] }}
              transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
              className="w-1.5 h-3 bg-white rounded-full mx-auto"
            />
          </div>
          <ChevronDown className="h-5 w-5 text-white/70" />
        </motion.div>
      </motion.div>

{/* Bottom gradient fade */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent z-10" />
    </section>
  );
};

export default Hero;

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.