const { useState, useEffect, useRef } = React; const { motion, useScroll, useTransform, AnimatePresence } = window.Motion; // --- DUMMY ICONS (SVG) --- const ChevronDown = () => ( ); const Molecule = () => ( ); const Brain = () => ( ); const Dna = () => ( ); const Search = () => ( ); // --- COMPONENTS --- const SectionDivider = () => (
); const NewsIcon = () => ( ); const navLinks = [ { label: 'About', href: '#about' }, { label: 'Research', href: '#research' }, { label: 'People', href: '#team' }, { label: 'Publications', href: '#publications' }, { label: 'Glimpse', href: '#glimpse' } ]; const Navbar = () => { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); // Lock body scroll when mobile menu is open useEffect(() => { document.body.style.overflow = mobileOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [mobileOpen]); return ( <>
{/* Logo */}
Ashoka University
{/* Lab Name */}

Computational Disease
Genomics Group

{/* Desktop Navigation Links */}
{navLinks.map((item) => ( {item.label} ))} Contact Us
{/* Mobile Hamburger Button */}
{/* Mobile Menu Overlay */} {mobileOpen && ( <> {/* Backdrop */} setMobileOpen(false)} className="fixed inset-0 bg-ink/40 backdrop-blur-sm z-[55] lg:hidden" /> {/* Slide-in Panel */}
setMobileOpen(false)} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.35 }} className="mt-8 bg-ink text-bone text-center font-sans text-xs font-bold uppercase tracking-[0.15em] py-4 rounded-full shadow-lg hover:bg-olive-800 transition-all duration-300" > Contact Us
{/* Branding at bottom of drawer */}

Computational Disease
Genomics Group

Ashoka University

 )} ); }; const Hero = () => { const { scrollY } = useScroll(); const y1 = useTransform(scrollY, [0, 1000], [0, 400]); const opacity1 = useTransform(scrollY, [0, 600], [1, 0]); return (
{/* Abstract Animated Glow Background */}
{/* Subtle grid pattern */}
{/* Small Decorative Dark Elements - Top Right */}
{[...Array(15)].map((_, i) => (
))}
{/* Hero Text */} Decoding
genomes {/* Decorative underline */} for
health {SITE_CONTENT.hero.subtitle} Explore The Lab {/* Hero Visuals: DNA Overlay */} {/* New People DNA Illustration (Center offset to avoid overlap) */}
People in DNA structure
{/* DNA helix */}
Genomics and molecular biology illustration
); }; const About = () => (
{/* Subtle decorative background */}
{/* Section label */} {/* Big heading */} Our Science {/* Gold accent divider */} {/* Paragraphs — each individually animated with proper spacing */}
{SITE_CONTENT.about.paragraphs.map((para, idx) => { return ( {para} ); })}
); // --- Research Area Expandable Card --- const ResearchArea = ({ area, idx, isExpanded, onToggle }) => { const gradientAccents = [ 'from-gold-500/20 via-gold-300/10 to-transparent', 'from-sage-600/20 via-sage-400/10 to-transparent', 'from-olive-600/20 via-olive-400/10 to-transparent' ]; const accentDots = ['bg-gold-500', 'bg-sage-600', 'bg-olive-600']; const hoverGlows = [ 'group-hover:shadow-[0_20px_60px_-15px_rgba(212,168,83,0.25)]', 'group-hover:shadow-[0_20px_60px_-15px_rgba(126,153,128,0.25)]', 'group-hover:shadow-[0_20px_60px_-15px_rgba(107,112,92,0.25)]' ]; return ( ); }; const Research = () => { const [expandedIdx, setExpandedIdx] = useState(null); const researchAreas = SITE_CONTENT.research.areas; const diseaseAreas = SITE_CONTENT.research.diseaseAreas; return (
{/* Decorative background */}

Focus Areas

Our Research

{/* Research Areas — 3 horizontal cards */}
{researchAreas.map((area, idx) => ( setExpandedIdx(expandedIdx === idx ? null : idx)} /> ))}
{/* Expanded content — notepad style, full width below the cards */} {expandedIdx !== null && (
{/* Red margin line */}
{/* Notepad holes */}
{Array.from({ length: 12 }).map((_, i) => (
))}

{researchAreas[expandedIdx].title}

{researchAreas[expandedIdx].paragraphs.map((para, pIdx) => ( {para} ))}
)} {/* Disease Focus Areas — full width below */}
{/* Subtle glow and abstract backdrop */}

Current Disease
Focus Areas

Spanning cardiovascular, respiratory, metabolic & autoimmune domains

{diseaseAreas.map((disease, idx) => (
{disease} ))}
{/* Bold rounded orange line on the right */}
); }; // --- Premium Team Card (Photo-Forward, Editorial Magazine Style) --- const TeamCard = ({ member, delay, idx, onSelect }) => { const hasPhoto = member.photo && member.photo.trim() !== ''; const monogramGradients = [ 'linear-gradient(145deg, #1a1f16 0%, #2a3024 40%, #1a1f16 100%)', 'linear-gradient(145deg, #1c2026 0%, #2a3038 40%, #1c2026 100%)', 'linear-gradient(145deg, #221f1a 0%, #352f26 40%, #221f1a 100%)', 'linear-gradient(145deg, #1a2220 0%, #263432 40%, #1a2220 100%)', 'linear-gradient(145deg, #201a24 0%, #342a3a 40%, #201a24 100%)' ]; return (
{/* Full Photo Background */}
{hasPhoto ? ( {member.name} ) : (
{member.initials}
)}
{/* Gradient overlay */}
{/* Gold top accent — animates on hover */}
{/* Frosted bottom bar */}
{/* Role & Education */}
{member.role} {member.education && ( <> {member.education} )}
{/* Name */}

{member.name}

{/* View profile — fades in on hover */}
View Profile
); }; const Team = () => { const teamMembers = SITE_CONTENT.team; const [selectedMember, setSelectedMember] = useState(null); // Close modal on Escape key press useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'Escape') setSelectedMember(null); }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, []); return (
{/* Subtle decorative background */}

The People

Meet the Lab

Researchers and students driving genomics innovation at Ashoka University

{/* Grid layout - Adjusted to 4 columns for larger cards */}
{teamMembers.map((member, idx) => (
setSelectedMember(member)} />
))}
{/* --- Premium Profile Modal --- */} {selectedMember && ( setSelectedMember(null)} className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 md:p-10 bg-black/60 backdrop-blur-lg overflow-y-auto" > e.stopPropagation()} className="max-w-[1100px] w-full bg-[#111411] border border-white/[0.08] rounded-[28px] shadow-[0_40px_100px_-20px_rgba(0,0,0,0.8)] overflow-hidden flex flex-col md:flex-row relative my-auto max-h-[90vh] md:max-h-[85vh] min-h-[500px]" > {/* Left: Portrait (40%) */}
{selectedMember.photo && selectedMember.photo.trim() !== "" ? ( <> {selectedMember.name} {/* Gradient fade into right panel */}
) : (
{selectedMember.initials}
)} {/* Gold shimmer divider */}
{/* Right: Content (60%) */}
{/* Close */} {/* Header */}
{selectedMember.role} {selectedMember.education && ( <> {selectedMember.education} )}

{selectedMember.name}

{/* Tags */}
Genomics Ashoka University
{/* Divider */}
{/* Bio */}
About

{selectedMember.desc}

{/* Social Connect */}
Connect
{selectedMember.linkedin && ( )} {selectedMember.github && ( )} {selectedMember.twitter && ( )}
)}
); }; // --- GlimpseDeck Component (Interactive Coverflow) --- const GlimpseDeck = ({ items }) => { const validItems = items.filter(item => item && item.image && item.image.trim() !== ""); // Start with the middle item in the center const [centerIdx, setCenterIdx] = React.useState(Math.floor((validItems.length - 1) / 2)); if (validItems.length === 0) return null; return (
{validItems.map((item, i) => { const spread = 15; // Rotation spread in degrees const offset = i - centerIdx; // Distance from the currently centered item const rotation = offset * spread; const isActive = i === centerIdx; // Active item is highest z-index, others fall behind based on distance from center const zIndex = 50 - Math.abs(offset); return (
setCenterIdx(i)} className="absolute cursor-pointer transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)]" style={{ zIndex: zIndex, transform: isActive ? 'scale(1.15) translateY(-30px)' : `translateX(${offset * 110}px) translateY(${Math.abs(offset) * 20}px) rotate(${rotation}deg) scale(${1 - Math.abs(offset) * 0.08})`, }} > {/* Polaroid Wrapper */}
{item.title
{/* Text content under photo - hidden if empty */} {(item.title || item.description || item.date) && (
{item.title &&

{item.title}

} {item.description &&

{item.description}

} {item.date && (
{item.date}
)}
)}
); })}
); }; // --- Glimpse Section Component --- const Glimpse = () => { const items = SITE_CONTENT.glimpse || []; return (

Gallery

Glimpse

); }; // --- PUBLICATIONS DATA --- const publicationsData = SITE_CONTENT.publications; const Publications = () => { const [expandedCategory, setExpandedCategory] = useState(null); const toggleCategory = (idx) => { setExpandedCategory(expandedCategory === idx ? null : idx); }; // Category accent colors for visual distinction const categoryColors = [ { accent: '#D4A853', bg: 'bg-gold-500' }, // Cardiovascular { accent: '#7E9980', bg: 'bg-sage-600' }, // Brain { accent: '#6B705C', bg: 'bg-olive-600' }, // Structural { accent: '#A67D2D', bg: 'bg-gold-700' } // Pathogen ]; return (
{/* Subtle decorative background */}
{/* Header */}
Publications {/* Broad area of research */}

{publicationsData.note}

{/* Research Categories */}
{publicationsData.categories.map((category, catIdx) => ( {/* Category Header — clickable to expand */} {/* Expanded papers list */} {expandedCategory === catIdx && ( {category.papers.map((pub, pubIdx) => (
{/* Left accent */}
{/* Number + Journal badge */}
{pub.num}. {pub.journal} ({pub.year}) {pub.pmid && PMID: {pub.pmid}}
{/* Title */}
{pub.title}
{/* Authors */}

{pub.authors}

{/* External link icon */}
))} )} ))}
{/* News/Highlights Section */}

In the News

News & Highlights
{publicationsData.news.map((item, idx) => (

{item.text}

))}
{/* Bottom Google Scholar link */} View All on Google Scholar
) } const Footer = () => ( ); const App = () => { return (
{/* Global Background Fading Circles */}
); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();