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

import { useEffect, useRef, useState } from 'react';
import { motion, useInView } from 'framer-motion';
import { LucideIcon } from 'lucide-react';

interface StatsCardProps {
  icon: LucideIcon;
  value: number;
  suffix?: string;
  label: string;
  delay?: number;
  color?: string;
}

export default function StatsCard({
  icon: Icon,
  value,
  suffix = '',
  label,
  delay = 0,
  color = 'rgba(59, 130, 246, 0.8)',
}: StatsCardProps) {
  const [count, setCount] = useState(0);
  const [tilt, setTilt] = useState({ x: 0, y: 0 });
  const cardRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(cardRef, { once: true });

// Counter animation
  useEffect(() => {
    if (!isInView) return;

const duration = 2000; // 2 seconds
    const steps = 60;
    const increment = value / steps;
    let currentStep = 0;

const timer = setInterval(() => {
      currentStep++;
      if (currentStep >= steps) {
        setCount(value);
        clearInterval(timer);
      } else {
        setCount(Math.floor(increment * currentStep));
      }
    }, duration / steps);

return () => clearInterval(timer);
  }, [isInView, value]);

// 3D tilt effect on mouse move
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;

const rect = cardRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

const centerX = rect.width / 2;
    const centerY = rect.height / 2;

const tiltX = (y - centerY) / 10;
    const tiltY = (centerX - x) / 10;

setTilt({ x: tiltX, y: tiltY });
  };

const handleMouseLeave = () => {
    setTilt({ x: 0, y: 0 });
  };

return (
    <motion.div
      ref={cardRef}
      initial={{ opacity: 0, y: 50, scale: 0.8 }}
      animate={isInView ? { opacity: 1, y: 0, scale: 1 } : {}}
      transition={{ duration: 0.6, delay, ease: [0.25, 0.46, 0.45, 0.94] }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        transform: `perspective(1000px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
        transition: 'transform 0.2s ease-out',
      }}
      className="relative group"
    >
      {/* Glow effect */}
      <div
        className="absolute inset-0 rounded-2xl blur-xl opacity-0 group-hover:opacity-50 transition-opacity duration-500"
        style={{ backgroundColor: color }}
      />

{/* Card */}
      <div className="relative backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl p-6 shadow-2xl hover:shadow-3xl transition-all duration-300">
        {/* Background gradient */}
        <div
          className="absolute inset-0 rounded-2xl opacity-10"
          style={{
            background: `linear-gradient(135deg, ${color} 0%, transparent 100%)`,
          }}
        />

{/* Shine effect */}
        <div className="absolute inset-0 rounded-2xl overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
        </div>

{/* Content */}
        <div className="relative z-10">
          <div className="flex items-center justify-between mb-4">
            <div
              className="p-3 rounded-xl"
              style={{ backgroundColor: color }}
            >
              <Icon className="h-6 w-6 text-white" />
            </div>
            
            {/* Animated dot */}
            <div className="relative">
              <div
                className="w-2 h-2 rounded-full animate-quantum-pulse"
                style={{ backgroundColor: color }}
              />
            </div>
          </div>

<div className="space-y-1">
            <div className="text-4xl font-bold text-white flex items-baseline gap-1">
              <motion.span
                key={count}
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.2 }}
              >
                {count}
              </motion.span>
              {suffix && <span className="text-2xl">{suffix}</span>}
            </div>
            <p className="text-gray-300 text-sm font-medium">{label}</p>
          </div>

{/* Decorative corner elements */}
          <div className="absolute top-2 right-2 w-16 h-16 opacity-20">
            <div className="absolute top-0 right-0 w-8 h-0.5" style={{ backgroundColor: color }} />
            <div className="absolute top-0 right-0 w-0.5 h-8" style={{ backgroundColor: color }} />
          </div>
          <div className="absolute bottom-2 left-2 w-16 h-16 opacity-20">
            <div className="absolute bottom-0 left-0 w-8 h-0.5" style={{ backgroundColor: color }} />
            <div className="absolute bottom-0 left-0 w-0.5 h-8" style={{ backgroundColor: color }} />
          </div>
        </div>
      </div>
    </motion.div>
  );
}

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.