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

Name	Size	Permission	Action
AboutPage.tsx	464 B	-rw-r--r--
AdminDashboard.tsx	6.63 KB	-rw-r--r--
AdminLogin.tsx	4.9 KB	-rw-r--r--
ContactPage.tsx	403 B	-rw-r--r--
CourseDetailPage.tsx	17.14 KB	-rw-r--r--
CoursesManager.tsx	15.6 KB	-rw-r--r--
EducationPage.tsx	23.77 KB	-rw-r--r--
Index.tsx	1.25 KB	-rw-r--r--
LabsManager.tsx	13.28 KB	-rw-r--r--
LabsPage.tsx	12.33 KB	-rw-r--r--
NewsDetailPage.tsx	10.51 KB	-rw-r--r--
NewsManager.tsx	11.66 KB	-rw-r--r--
NewsPage.tsx	11.77 KB	-rw-r--r--
NotFound.tsx	727 B	-rw-r--r--
PersonPage.tsx	1.67 KB	-rw-r--r--
PublicationsManager.tsx	12.17 KB	-rw-r--r--
PublicationsPage.tsx	15.17 KB	-rw-r--r--
ResearchDetailPage.tsx	16.93 KB	-rw-r--r--
ResearchManager.tsx	15.75 KB	-rw-r--r--
ResearchPage.tsx	14.3 KB	-rw-r--r--
TeamManager.tsx	12.4 KB	-rw-r--r--
TeamPage.tsx	781 B	-rw-r--r--
WorkshopDetailPage.tsx	19.23 KB	-rw-r--r--
WorkshopsManager.tsx	16.05 KB	-rw-r--r--
WorkshopsPage.tsx	7.63 KB	-rw-r--r--

Code Editor : LabsPage.tsx

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Navigation from '../components/Navigation';
import Footer from '../components/Footer';
import { FlaskConical, MapPin, Calendar, Users, CheckCircle, Zap, Award } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';

interface Lab {
  id: string;
  name: string;
  description: string;
  area: string;
  location: string;
  established: string;
  head: string;
  equipment: string[];
  capabilities: string[];
  image: string;
  category: string;
  status: string;
  features: {
    name: string;
    description: string;
  }[];
}

const LabsPage = () => {
  const [labs, setLabs] = useState<Lab[]>([]);
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    fetch('/data/labs.json')
      .then(res => res.json())
      .then(data => {
        setLabs(data);
        setIsLoading(false);
      })
      .catch(err => {
        console.error('Error loading labs:', err);
        setIsLoading(false);
      });
  }, []);

const categories = ['All', ...Array.from(new Set(labs.map(l => l.category)))];
  const filteredLabs = selectedCategory === 'All' 
    ? labs 
    : labs.filter(lab => lab.category === selectedCategory);

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Hero Section */}
      <section className="relative pt-24 md:pt-32 pb-16 md:pb-20 overflow-hidden bg-gradient-to-b from-primary/5 to-background">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/10 to-secondary/10" />
        <div className="absolute inset-0">
          <div className="absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl animate-float" />
          <div className="absolute bottom-10 right-10 w-96 h-96 bg-accent/20 rounded-full blur-3xl animate-float-delayed" />
        </div>

<div className="container mx-auto px-4 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center max-w-4xl mx-auto"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-semibold mb-6">
              <FlaskConical className="w-4 h-4" />
              World-Class Infrastructure
            </div>
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-4 md:mb-6 bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
              Labs & Facilities
            </h1>
            <p className="text-base sm:text-lg md:text-xl text-muted-foreground mb-6 md:mb-8 max-w-3xl mx-auto">
              State-of-the-art laboratories and facilities equipped with cutting-edge technology for groundbreaking quantum research.
            </p>

{/* Stats */}
            <div className="grid grid-cols-2 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-primary">{labs.length}</div>
                <div className="text-sm text-muted-foreground">Total Facilities</div>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.3 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-accent">2,800+</div>
                <div className="text-sm text-muted-foreground">Sq Ft Area</div>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
                className="bg-card/80 backdrop-blur-sm rounded-xl p-4 border border-border"
              >
                <div className="text-3xl font-bold text-secondary">{categories.length - 1}</div>
                <div className="text-sm text-muted-foreground">Research Areas</div>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </section>

{/* Category Filter */}
      <section className="py-12 bg-muted/30 backdrop-blur-sm border-y border-border">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
              {categories.map(cat => (
                <button
                  key={cat}
                  onClick={() => setSelectedCategory(cat)}
                  className={`px-4 sm:px-6 py-2 rounded-full text-sm sm:text-base font-semibold transition-all duration-300 ${
                    selectedCategory === cat
                      ? 'bg-gradient-to-r from-primary to-accent text-primary-foreground shadow-lg'
                      : 'bg-card text-foreground hover:bg-muted border border-border'
                  }`}
                >
                  {cat}
                </button>
              ))}
            </div>
            <div className="mt-4 text-center text-sm text-muted-foreground">
              Showing {filteredLabs.length} of {labs.length} facilities
            </div>
          </div>
        </div>
      </section>

{/* Labs Grid */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-7xl mx-auto">
            {isLoading ? (
              <div className="text-center py-12">
                <div className="animate-spin w-12 h-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4" />
                <p className="text-muted-foreground">Loading facilities...</p>
              </div>
            ) : (
              <div className="grid md:grid-cols-2 gap-6 md:gap-8">
                {filteredLabs.map((lab, index) => (
                  <motion.div
                    key={lab.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Card className="h-full overflow-hidden hover:shadow-2xl transition-all duration-300 group border-2 border-border">
                      {/* Image */}
                      <div className="relative h-48 sm:h-56 md:h-64 overflow-hidden">
                        <img
                          src={lab.image}
                          alt={lab.name}
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                        <div className="absolute bottom-4 left-4 right-4">
                          <span className={`px-3 py-1 rounded-full text-xs font-semibold mb-2 inline-block ${
                            lab.status === 'Operational' ? 'bg-green-500 text-white' : 'bg-yellow-500 text-white'
                          }`}>
                            {lab.status}
                          </span>
                          <h3 className="text-2xl font-bold text-white">{lab.name}</h3>
                        </div>
                      </div>

<CardContent className="p-4 sm:p-6">
                        {/* Category Badge */}
                        <span className="px-3 py-1 bg-primary/10 text-primary text-xs sm:text-sm font-semibold rounded-full mb-4 inline-block">
                          {lab.category}
                        </span>

<p className="text-foreground mb-4 leading-relaxed break-words">
                          {lab.description}
                        </p>

{/* Details */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6 pb-6 border-b border-border">
                          <div>
                            <div className="text-sm text-muted-foreground mb-1">Area</div>
                            <div className="font-semibold text-foreground">{lab.area}</div>
                          </div>
                          <div>
                            <div className="text-sm text-muted-foreground mb-1">Established</div>
                            <div className="font-semibold text-foreground">{lab.established}</div>
                          </div>
                          <div className="sm:col-span-2">
                            <div className="text-sm text-muted-foreground mb-1">Location</div>
                            <div className="font-semibold text-foreground flex items-center gap-2 break-words">
                              <MapPin className="w-4 h-4 text-primary" />
                              {lab.location}
                            </div>
                          </div>
                          <div className="sm:col-span-2">
                            <div className="text-sm text-muted-foreground mb-1">Lab Head</div>
                            <div className="font-semibold text-foreground flex items-center gap-2 break-words">
                              <Users className="w-4 h-4 text-accent" />
                              {lab.head}
                            </div>
                          </div>
                        </div>

{/* Key Features */}
                        <div className="mb-6">
                          <h4 className="font-bold text-foreground mb-3 flex items-center gap-2">
                            <Zap className="w-5 h-5 text-yellow-500" />
                            Key Features
                          </h4>
                          <div className="space-y-3">
                            {lab.features.map((feature, idx) => (
                              <div key={idx} className="bg-gradient-to-r from-primary/10 to-accent/10 rounded-lg p-3">
                                <div className="font-semibold text-foreground text-sm mb-1">
                                  {feature.name}
                                </div>
                                <div className="text-sm text-muted-foreground">
                                  {feature.description}
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>

{/* Equipment */}
                        <div className="mb-6">
                          <h4 className="font-bold text-foreground mb-3">Major Equipment</h4>
                          <ul className="space-y-2">
                            {lab.equipment.slice(0, 5).map((item, idx) => (
                              <li key={idx} className="flex items-start gap-2 text-sm text-foreground break-words">
                                <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>

{/* Capabilities */}
                        <div>
                          <h4 className="font-bold text-foreground mb-3">Research Capabilities</h4>
                          <div className="flex flex-wrap gap-2">
                            {lab.capabilities.map((cap, idx) => (
                              <span
                                key={idx}
                                className="px-3 py-1 bg-accent/10 text-accent text-xs sm:text-sm rounded-full break-words"
                              >
                                {cap}
                              </span>
                            ))}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

<Footer />
    </div>
  );
};

export default LabsPage;

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.