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

import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useState } from "react";
import { useToast } from "@/components/ui/use-toast";
import { MapPin, Phone, Mail, Clock, MessageCircle } from "lucide-react";
import { useReveal } from "@/lib/useReveal";

type ContactForm = {
  name: string;
  email: string;
  subject: string;
  message: string;
  phone?: string;
  affiliation?: string;
  preferredContact?: string;
  bestTime?: string;
};

const Contact = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm<ContactForm>();
  const { toast } = useToast();
  const [submitting, setSubmitting] = useState(false);

const onSubmit = (data: ContactForm) => {
    setSubmitting(true);
    // Save to localStorage as a simple portal for now
    const existing = JSON.parse(localStorage.getItem("cqt_contact_submissions" ) || "[]");
    existing.unshift({ ...data, createdAt: new Date().toISOString() });
    localStorage.setItem("cqt_contact_submissions", JSON.stringify(existing));

setTimeout(() => {
      setSubmitting(false);
      toast({ title: "Message sent", description: "Thank you — we will get back to you soon." });
      reset();
    }, 600);
  };

useReveal();

return (
    <section id="contact" className="py-16">
      <div className="container mx-auto px-4">
  <div className="grid lg:grid-cols-12 gap-8 items-stretch">
          {/* Left - Contact Info & Map */}
          <div className="lg:col-span-6 flex flex-col h-full space-y-6">
            <div className="bg-gradient-to-r from-quantum-dark/80 to-quantum-navy p-6 rounded-xl text-white shadow-lg reveal slide-left" style={{ animationDelay: '0ms' }}>
              <h3 className="text-xl font-bold">Get in touch</h3>
              <p className="text-sm text-white/90 mt-2">We’re here to answer your questions about research, collaboration, and career opportunities.</p>
            </div>

<div className="flex-1 grid gap-4 overflow-auto">
              <div className="group flex items-start gap-4 bg-card p-4 rounded-lg shadow transition-transform transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-quantum/40 border border-transparent hover:border-secondary/30 reveal card-anim transition-colors hover:bg-secondary/90 hover:text-white" style={{ animationDelay: '120ms' }}>
                <div className="p-3 rounded-lg bg-secondary/10 text-secondary transition-all group-hover:bg-card group-hover:text-secondary group-hover:scale-105">
                  <MapPin className="h-6 w-6" />
                </div>
                <div>
                  <h4 className="font-semibold group-hover:text-white">Visit Us</h4>
                  <p className="text-sm text-muted-foreground group-hover:text-white/90">IIIT Delhi, Okhla Industrial Estate, New Delhi - 110020, India</p>
                </div>
              </div>

<div className="group flex items-start gap-4 bg-card p-4 rounded-lg shadow transition-transform transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-quantum/40 border border-transparent hover:border-secondary/30 reveal card-anim transition-colors hover:bg-secondary/90 hover:text-white" style={{ animationDelay: '200ms' }}>
                <div className="p-3 rounded-lg bg-secondary/10 text-secondary transition-all group-hover:bg-card group-hover:text-secondary group-hover:scale-105">
                  <Phone className="h-6 w-6" />
                </div>
                <div>
                  <h4 className="font-semibold group-hover:text-white">Call / WhatsApp</h4>
                  <a href="#" className="text-sm text-muted-foreground block group-hover:text-white/90">Will be updated</a>
                  <a href="#" target="_blank" rel="noreferrer" className="text-sm text-secondary mt-1 inline-block group-hover:text-white">Open WhatsApp</a>
                </div>
              </div>

<div className="group flex items-start gap-4 bg-card p-4 rounded-lg shadow transition-transform transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-quantum/40 border border-transparent hover:border-secondary/30 reveal card-anim transition-colors hover:bg-secondary/90 hover:text-white" style={{ animationDelay: '280ms' }}>
                <div className="p-3 rounded-lg bg-secondary/10 text-secondary transition-all group-hover:bg-card group-hover:text-secondary group-hover:scale-105">
                  <Mail className="h-6 w-6" />
                </div>
                <div>
                  <h4 className="font-semibold group-hover:text-white">Email</h4>
                  <a href="mailto:cqt@iiitd.ac.in" className="text-sm text-muted-foreground group-hover:text-white/90">cqt@iiitd.ac.in</a>
                </div>
              </div>

<div className="group flex items-start gap-4 bg-card p-4 rounded-lg shadow transition-transform transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-quantum/40 border border-transparent hover:border-secondary/30 reveal card-anim transition-colors hover:bg-secondary/90 hover:text-white" style={{ animationDelay: '360ms' }}>
                <div className="p-3 rounded-lg bg-secondary/10 text-secondary transition-all group-hover:bg-card group-hover:text-secondary group-hover:scale-105">
                  <Clock className="h-6 w-6" />
                </div>
                <div>
                  <h4 className="font-semibold group-hover:text-white">Office Hours</h4>
                  <p className="text-sm text-muted-foreground group-hover:text-white/90">Mon - Fri: 9:30 AM - 6:00 PM</p>
                </div>
              </div>
            </div>

<div className="overflow-hidden rounded-lg h-64 shadow mt-6 mx-auto w-full reveal scale-in" style={{ animationDelay: '440ms' }}>
              <iframe
                title="IIIT Delhi map"
                src="https://www.google.com/maps?q=IIIT%20Delhi%20Okhla%20Industrial%20Estate&output=embed"
                className="w-full h-full border-0"
                loading="lazy"
              />
            </div>
          </div>

{/* Right - Form */}
          <div className="lg:col-span-6 flex flex-col h-full">
            <div className="bg-card p-6 rounded-xl shadow-lg reveal text-foreground scale-in flex flex-col h-full" style={{ animationDelay: '200ms' }}>
              <h3 className="text-2xl font-bold mb-2">Send us a message</h3>
              <p className="text-sm text-muted-foreground mb-6">Fill out the form and we'll get back to you as soon as possible.</p>

<form onSubmit={handleSubmit(onSubmit)} className="grid grid-cols-1 gap-4">
                <div className="grid sm:grid-cols-2 gap-4">
                  <div className="reveal" style={{ animationDelay: '240ms' }}>
                    <label className="block text-sm font-medium mb-1">Name</label>
                    <Input {...register("name", { required: "Name is required" })} />
                    {errors.name && <p className="text-xs text-destructive mt-1">{errors.name.message}</p>}
                  </div>
                  <div className="reveal" style={{ animationDelay: '280ms' }}>
                    <label className="block text-sm font-medium mb-1">Email</label>
                    <Input type="email" {...register("email", { required: "Email is required" })} />
                    {errors.email && <p className="text-xs text-destructive mt-1">{errors.email.message}</p>}
                  </div>
                </div>

<div className="grid sm:grid-cols-2 gap-4">
                  <div className="reveal" style={{ animationDelay: '320ms' }}>
                    <label className="block text-sm font-medium mb-1">Phone</label>
                    <Input {...register("phone")} placeholder="+91-XXXXXXXXXX" />
                  </div>
                  <div className="reveal" style={{ animationDelay: '360ms' }}>
                    <label className="block text-sm font-medium mb-1">Affiliation</label>
                    <Input {...register("affiliation")} placeholder="University / Company" />
                  </div>
                </div>

<div className="grid sm:grid-cols-2 gap-4">
                  <div className="reveal" style={{ animationDelay: '400ms' }}>
                    <label className="block text-sm font-medium mb-1">Preferred contact</label>
                    <select {...register("preferredContact")} className="w-full rounded-md border border-input bg-background text-foreground p-2 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
                      <option value="email">Email</option>
                      <option value="phone">Phone / WhatsApp</option>
                    </select>
                  </div>
                  <div className="reveal" style={{ animationDelay: '440ms' }}>
                    <label className="block text-sm font-medium mb-1">Best time to contact</label>
                    <Input {...register("bestTime")} placeholder="Eg: Weekdays 10am-2pm" />
                  </div>
                </div>

<div className="reveal" style={{ animationDelay: '480ms' }}>
                  <label className="block text-sm font-medium mb-1">Subject</label>
                  <Input {...register("subject", { required: "Subject is required" })} />
                  {errors.subject && <p className="text-xs text-destructive mt-1">{errors.subject.message}</p>}
                </div>

<div className="reveal" style={{ animationDelay: '520ms' }}>
                  <label className="block text-sm font-medium mb-1">Message</label>
                  <Textarea {...register("message", { required: "Message is required" })} rows={12} />
                  {errors.message && <p className="text-xs text-destructive mt-1">{errors.message.message}</p>}
                </div>

<div className="flex items-center gap-4 pt-2 mt-auto">
                  <Button type="submit" className="px-6 btn-pop reveal" style={{ animationDelay: '560ms' }} disabled={submitting}>
                    {submitting ? "Sending..." : "Send Message"}
                  </Button>
                  <Button variant="ghost" onClick={() => { reset(); }} className="reveal" style={{ animationDelay: '600ms' }}>
                    Clear
                  </Button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;

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.