{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "homepage",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/new-york/homepage/homepage.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  Globe,\n  Lightbulb,\n  FileText,\n  Menu,\n  X,\n  ArrowRight,\n  Mail,\n  MapPin,\n  ChevronRight,\n  Heart,\n  Users,\n  Quote,\n} from \"lucide-react\";\n\n// Brand colors matching GW\nconst brandColors = {\n  navy: \"#0a2240\",\n  navyLight: \"#1a3a5c\",\n  gold: \"#c9a227\",\n  goldLight: \"#d4b84a\",\n  cream: \"#f5f1e8\",\n  warmWhite: \"#faf9f7\",\n};\n\n// Navigation Component\nfunction Navigation() {\n  const [isOpen, setIsOpen] = useState(false);\n  const navItems = [\"Home\", \"About\", \"Team\", \"News\", \"Projects\", \"Innovations\", \"Publications\", \"Contact\"];\n\n  return (\n    <nav className=\"sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-sm\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"flex items-center justify-between h-20\">\n          {/* Logo */}\n          <div className=\"flex items-center gap-3\">\n            <div className=\"w-12 h-12 rounded-full flex items-center justify-center\" style={{ background: `linear-gradient(135deg, ${brandColors.navy} 0%, ${brandColors.navyLight} 100%)` }}>\n              <Globe className=\"w-6 h-6 text-white\" />\n            </div>\n            <div className=\"hidden sm:block\">\n              <p className=\"text-sm font-medium\" style={{ color: brandColors.navy }}>Center for Global</p>\n              <p className=\"text-sm font-medium\" style={{ color: brandColors.gold }}>Mental Health Equity</p>\n            </div>\n          </div>\n\n          {/* Desktop Navigation */}\n          <div className=\"hidden lg:flex items-center gap-1\">\n            {navItems.map((item) => (\n              <a\n                key={item}\n                href={`#${item.toLowerCase()}`}\n                className=\"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg transition-colors hover:bg-gray-50\"\n              >\n                {item}\n              </a>\n            ))}\n          </div>\n\n          {/* Mobile menu button */}\n          <button\n            onClick={() => setIsOpen(!isOpen)}\n            className=\"lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors\"\n          >\n            {isOpen ? <X className=\"w-6 h-6\" /> : <Menu className=\"w-6 h-6\" />}\n          </button>\n        </div>\n\n        {/* Mobile Navigation */}\n        {isOpen && (\n          <div className=\"lg:hidden py-4 border-t border-gray-100\">\n            <div className=\"flex flex-col gap-1\">\n              {navItems.map((item) => (\n                <a\n                  key={item}\n                  href={`#${item.toLowerCase()}`}\n                  className=\"px-4 py-3 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg transition-colors hover:bg-gray-50\"\n                  onClick={() => setIsOpen(false)}\n                >\n                  {item}\n                </a>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </nav>\n  );\n}\n\n// Hero Section\nfunction HeroSection() {\n  return (\n    <section className=\"relative overflow-hidden\" style={{ background: `linear-gradient(180deg, ${brandColors.navy} 0%, ${brandColors.navyLight} 100%)` }}>\n      {/* Background Pattern */}\n      <div className=\"absolute inset-0 opacity-10\">\n        <div className=\"absolute top-0 left-0 w-96 h-96 rounded-full bg-white blur-3xl transform -translate-x-1/2 -translate-y-1/2\" />\n        <div className=\"absolute bottom-0 right-0 w-96 h-96 rounded-full bg-white blur-3xl transform translate-x-1/2 translate-y-1/2\" />\n      </div>\n\n      <div className=\"relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32\">\n        <div className=\"grid lg:grid-cols-2 gap-12 lg:gap-16 items-center\">\n          {/* Content */}\n          <div className=\"text-center lg:text-left\">\n            <Badge className=\"mb-6 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase\" style={{ backgroundColor: `${brandColors.gold}20`, color: brandColors.gold, border: `1px solid ${brandColors.gold}40` }}>\n              The George Washington University\n            </Badge>\n            <h1 className=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6\">\n              Center for<br />\n              <span style={{ color: brandColors.gold }}>Global Mental Health</span>\n            </h1>\n            <p className=\"text-lg text-gray-300 max-w-xl mx-auto lg:mx-0 mb-8\">\n              Partnering with communities worldwide to promote mental health equity,\n              dismantle stigma, and develop sustainable strategies for lasting change.\n            </p>\n            <div className=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\">\n              <Button size=\"lg\" className=\"text-base font-semibold px-8\" style={{ backgroundColor: brandColors.gold, color: brandColors.navy }}>\n                Learn More\n                <ArrowRight className=\"w-4 h-4 ml-2\" />\n              </Button>\n              <Button size=\"lg\" variant=\"outline\" className=\"text-base font-semibold px-8 border-white/30 text-white hover:bg-white/10 hover:text-white\">\n                Our Projects\n              </Button>\n            </div>\n          </div>\n\n          {/* Image */}\n          <div className=\"relative\">\n            <div className=\"relative rounded-2xl overflow-hidden shadow-2xl\">\n              <img\n                src=\"https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?w=800&h=600&fit=crop\"\n                alt=\"Community mental health support\"\n                className=\"w-full h-[400px] lg:h-[500px] object-cover\"\n              />\n              <div className=\"absolute inset-0 bg-gradient-to-t from-black/30 to-transparent\" />\n            </div>\n            {/* Floating Stats Card */}\n            <div className=\"absolute -bottom-6 -left-6 bg-white rounded-xl shadow-xl p-6 hidden sm:block\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"w-12 h-12 rounded-full flex items-center justify-center\" style={{ backgroundColor: `${brandColors.gold}20` }}>\n                  <Heart className=\"w-6 h-6\" style={{ color: brandColors.gold }} />\n                </div>\n                <div>\n                  <p className=\"text-2xl font-bold\" style={{ color: brandColors.navy }}>50+</p>\n                  <p className=\"text-sm text-gray-500\">Global Partners</p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// Who We Are Section\nfunction WhoWeAreSection() {\n  return (\n    <section className=\"py-20 lg:py-28\" style={{ backgroundColor: brandColors.warmWhite }}>\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n          {/* Content */}\n          <div>\n            <div className=\"inline-flex items-center gap-2 mb-4\">\n              <div className=\"w-12 h-0.5\" style={{ backgroundColor: brandColors.gold }} />\n              <span className=\"text-sm font-semibold tracking-wider uppercase\" style={{ color: brandColors.gold }}>About Us</span>\n            </div>\n            <h2 className=\"text-3xl sm:text-4xl font-bold mb-6\" style={{ color: brandColors.navy }}>\n              Who We Are\n            </h2>\n            <div className=\"space-y-4 text-gray-600 leading-relaxed\">\n              <p>\n                Across the world, access to quality mental health care should be a human right.\n                At the George Washington University Center for Global Mental Health Equity, we\n                partner with communities to promote their existing resources and develop\n                sustainable strategies for their unique needs.\n              </p>\n              <p>\n                By embracing the cultural richness of our partners, our research serves to better\n                identify people in need, dismantle the fear and stigma that block access to care,\n                and empower community members to be effective providers for each other.\n              </p>\n            </div>\n            <div className=\"mt-8 flex flex-wrap gap-6\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-10 h-10 rounded-full flex items-center justify-center\" style={{ backgroundColor: `${brandColors.navy}10` }}>\n                  <Users className=\"w-5 h-5\" style={{ color: brandColors.navy }} />\n                </div>\n                <div>\n                  <p className=\"font-semibold\" style={{ color: brandColors.navy }}>Community-Centered</p>\n                  <p className=\"text-sm text-gray-500\">Local partnerships</p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <div className=\"w-10 h-10 rounded-full flex items-center justify-center\" style={{ backgroundColor: `${brandColors.gold}20` }}>\n                  <Globe className=\"w-5 h-5\" style={{ color: brandColors.gold }} />\n                </div>\n                <div>\n                  <p className=\"font-semibold\" style={{ color: brandColors.navy }}>Global Reach</p>\n                  <p className=\"text-sm text-gray-500\">Worldwide impact</p>\n                </div>\n              </div>\n            </div>\n            <Button className=\"mt-8\" style={{ backgroundColor: brandColors.navy }}>\n              Learn More About Us\n              <ChevronRight className=\"w-4 h-4 ml-1\" />\n            </Button>\n          </div>\n\n          {/* Image Grid */}\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"space-y-4\">\n              <img\n                src=\"https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=400&h=300&fit=crop\"\n                alt=\"Research team\"\n                className=\"rounded-xl w-full h-48 object-cover shadow-lg\"\n              />\n              <img\n                src=\"https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?w=400&h=400&fit=crop\"\n                alt=\"Community support\"\n                className=\"rounded-xl w-full h-56 object-cover shadow-lg\"\n              />\n            </div>\n            <div className=\"space-y-4 pt-8\">\n              <img\n                src=\"https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=400&fit=crop\"\n                alt=\"Global collaboration\"\n                className=\"rounded-xl w-full h-56 object-cover shadow-lg\"\n              />\n              <img\n                src=\"https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop\"\n                alt=\"Mental health research\"\n                className=\"rounded-xl w-full h-48 object-cover shadow-lg\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// What We Do Section\nfunction WhatWeDoSection() {\n  const services = [\n    {\n      icon: Globe,\n      title: \"Projects\",\n      description: \"See the center's current projects across the globe and learn about collaboration opportunities.\",\n      color: brandColors.navy,\n    },\n    {\n      icon: Lightbulb,\n      title: \"Innovations\",\n      description: \"Find out about the center's latest technologies and innovations as well as how to implement them.\",\n      color: brandColors.gold,\n    },\n    {\n      icon: FileText,\n      title: \"Publications\",\n      description: \"Our latest work and publications in popular news media and most credible academic journals.\",\n      color: brandColors.navyLight,\n    },\n  ];\n\n  return (\n    <section className=\"py-20 lg:py-28 bg-white\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        {/* Header */}\n        <div className=\"text-center max-w-2xl mx-auto mb-16\">\n          <div className=\"inline-flex items-center gap-2 mb-4 justify-center\">\n            <div className=\"w-12 h-0.5\" style={{ backgroundColor: brandColors.gold }} />\n            <span className=\"text-sm font-semibold tracking-wider uppercase\" style={{ color: brandColors.gold }}>Our Work</span>\n            <div className=\"w-12 h-0.5\" style={{ backgroundColor: brandColors.gold }} />\n          </div>\n          <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\" style={{ color: brandColors.navy }}>\n            What We Do\n          </h2>\n          <p className=\"text-gray-600\">\n            Driving change through research, innovation, and community partnerships\n          </p>\n        </div>\n\n        {/* Cards */}\n        <div className=\"grid md:grid-cols-3 gap-8\">\n          {services.map((service) => (\n            <Card key={service.title} className=\"group relative overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1\">\n              <CardContent className=\"p-8\">\n                <div\n                  className=\"w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110\"\n                  style={{ backgroundColor: `${service.color}15` }}\n                >\n                  <service.icon className=\"w-8 h-8\" style={{ color: service.color }} />\n                </div>\n                <h3 className=\"text-xl font-bold mb-3\" style={{ color: brandColors.navy }}>\n                  {service.title}\n                </h3>\n                <p className=\"text-gray-600 mb-6 leading-relaxed\">\n                  {service.description}\n                </p>\n                <Button variant=\"outline\" className=\"group/btn\" style={{ borderColor: service.color, color: service.color }}>\n                  Learn More\n                  <ArrowRight className=\"w-4 h-4 ml-2 transition-transform group-hover/btn:translate-x-1\" />\n                </Button>\n              </CardContent>\n              {/* Accent line */}\n              <div className=\"absolute bottom-0 left-0 right-0 h-1 transition-all duration-300 opacity-0 group-hover:opacity-100\" style={{ backgroundColor: service.color }} />\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// Latest News Section\nfunction LatestNewsSection() {\n  const news = [\n    {\n      tag: \"Visitor Posts\",\n      tagColor: brandColors.gold,\n      title: \"From Community to Global Mental Health: Experience of a Visiting Research Associate\",\n      author: \"Dr. Sudhamsu Gautam\",\n      date: \"Aug 4, 2025\",\n      readTime: \"2 min read\",\n      image: \"https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=400&h=300&fit=crop\",\n    },\n    {\n      tag: \"Staff Posts\",\n      tagColor: brandColors.navyLight,\n      title: \"A Heartfelt Thank You from the Nepal Mental Health Research Network Webinar Series\",\n      author: \"Ritika Singh, MSc\",\n      date: \"Jul 9, 2025\",\n      readTime: \"2 min read\",\n      image: \"https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?w=400&h=300&fit=crop\",\n    },\n    {\n      tag: \"Spotlight\",\n      tagColor: brandColors.navy,\n      title: \"Healing After Disaster: Dr. Jun Shigemura on Stigma in Mental Health\",\n      author: \"Staff Writer\",\n      date: \"Jul 3, 2025\",\n      readTime: \"2 min read\",\n      image: \"https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=300&fit=crop\",\n    },\n  ];\n\n  return (\n    <section className=\"py-20 lg:py-28\" style={{ backgroundColor: brandColors.cream }}>\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        {/* Header */}\n        <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-12\">\n          <div>\n            <div className=\"inline-flex items-center gap-2 mb-4\">\n              <div className=\"w-12 h-0.5\" style={{ backgroundColor: brandColors.gold }} />\n              <span className=\"text-sm font-semibold tracking-wider uppercase\" style={{ color: brandColors.gold }}>Stay Informed</span>\n            </div>\n            <h2 className=\"text-3xl sm:text-4xl font-bold\" style={{ color: brandColors.navy }}>\n              Latest News\n            </h2>\n          </div>\n          <Button variant=\"outline\" style={{ borderColor: brandColors.navy, color: brandColors.navy }}>\n            View All Posts\n            <ArrowRight className=\"w-4 h-4 ml-2\" />\n          </Button>\n        </div>\n\n        {/* News Cards */}\n        <div className=\"grid md:grid-cols-3 gap-8\">\n          {news.map((item, index) => (\n            <Card key={index} className=\"group overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 bg-white\">\n              <div className=\"relative overflow-hidden\">\n                <img\n                  src={item.image}\n                  alt={item.title}\n                  className=\"w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110\"\n                />\n                <div className=\"absolute top-4 left-4\">\n                  <Badge\n                    className=\"text-xs font-semibold\"\n                    style={{ backgroundColor: item.tagColor, color: \"white\" }}\n                  >\n                    {item.tag}\n                  </Badge>\n                </div>\n              </div>\n              <CardContent className=\"p-6\">\n                <h3 className=\"font-bold text-lg mb-3 line-clamp-2 group-hover:text-[#c9a227] transition-colors\" style={{ color: brandColors.navy }}>\n                  {item.title}\n                </h3>\n                <div className=\"flex items-center justify-between text-sm text-gray-500\">\n                  <span>{item.author}</span>\n                  <span>{item.readTime}</span>\n                </div>\n                <p className=\"text-xs text-gray-400 mt-2\">{item.date}</p>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// Testimonial Section\nfunction TestimonialSection() {\n  return (\n    <section className=\"py-20 lg:py-28 relative overflow-hidden\" style={{ background: `linear-gradient(135deg, ${brandColors.navy} 0%, ${brandColors.navyLight} 100%)` }}>\n      {/* Background decoration */}\n      <div className=\"absolute top-0 left-0 w-64 h-64 rounded-full opacity-10 blur-3xl\" style={{ backgroundColor: brandColors.gold }} />\n      <div className=\"absolute bottom-0 right-0 w-64 h-64 rounded-full opacity-10 blur-3xl\" style={{ backgroundColor: brandColors.gold }} />\n\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative\">\n        <div className=\"text-center\">\n          <div className=\"inline-flex items-center justify-center w-16 h-16 rounded-full mb-8\" style={{ backgroundColor: `${brandColors.gold}20` }}>\n            <Quote className=\"w-8 h-8\" style={{ color: brandColors.gold }} />\n          </div>\n          <blockquote className=\"text-xl sm:text-2xl lg:text-3xl text-white font-light leading-relaxed mb-8 italic\">\n            \"Partnering with the Center for Mental Health Equity has been invaluable. Their dedication\n            to addressing mental health disparities and creating inclusive solutions has helped us\n            reach underserved communities and implement impactful programs. They are a crucial\n            ally in promoting global mental health equity.\"\n          </blockquote>\n          <div className=\"flex items-center justify-center gap-4\">\n            <div className=\"w-12 h-12 rounded-full bg-gray-300\" />\n            <div className=\"text-left\">\n              <p className=\"font-semibold text-white\">Claudia Sartor</p>\n              <p className=\"text-sm\" style={{ color: brandColors.gold }}>Global Mental Health Peer Network</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// Newsletter Section\nfunction NewsletterSection() {\n  const [email, setEmail] = useState(\"\");\n\n  return (\n    <section className=\"py-16 bg-white\">\n      <div className=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <Card className=\"border-0 shadow-xl overflow-hidden\">\n          <CardContent className=\"p-8 sm:p-12\">\n            <div className=\"text-center\">\n              <div className=\"inline-flex items-center justify-center w-14 h-14 rounded-full mb-6\" style={{ backgroundColor: `${brandColors.gold}20` }}>\n                <Mail className=\"w-7 h-7\" style={{ color: brandColors.gold }} />\n              </div>\n              <h3 className=\"text-2xl sm:text-3xl font-bold mb-3\" style={{ color: brandColors.navy }}>\n                Subscribe to Our Newsletter\n              </h3>\n              <p className=\"text-gray-600 mb-8\">\n                Stay updated with our latest research, events, and global initiatives\n              </p>\n              <form className=\"flex flex-col sm:flex-row gap-4 max-w-md mx-auto\">\n                <Input\n                  type=\"email\"\n                  placeholder=\"Enter your email\"\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  className=\"flex-1 h-12\"\n                />\n                <Button type=\"submit\" size=\"lg\" className=\"h-12 px-8\" style={{ backgroundColor: brandColors.navy }}>\n                  Subscribe\n                </Button>\n              </form>\n              <p className=\"text-xs text-gray-400 mt-4\">\n                By subscribing, you agree to receive our newsletter and updates\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n// Map Section\nfunction MapSection() {\n  return (\n    <section className=\"py-20 lg:py-28\" style={{ background: `linear-gradient(180deg, ${brandColors.navy} 0%, ${brandColors.navyLight} 100%)` }}>\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-12\">\n          <div className=\"inline-flex items-center gap-2 mb-4 justify-center\">\n            <div className=\"w-12 h-0.5\" style={{ backgroundColor: brandColors.gold }} />\n            <span className=\"text-sm font-semibold tracking-wider uppercase\" style={{ color: brandColors.gold }}>Global Impact</span>\n            <div className=\"w-12 h-0.5\" style={{ backgroundColor: brandColors.gold }} />\n          </div>\n          <h2 className=\"text-3xl sm:text-4xl font-bold text-white mb-4\">\n            Where We Work\n          </h2>\n          <p className=\"text-gray-300 max-w-2xl mx-auto\">\n            Our partnerships span across continents, bringing mental health equity to communities worldwide\n          </p>\n        </div>\n\n        {/* World Map Placeholder */}\n        <div className=\"relative bg-white/5 rounded-2xl p-8 backdrop-blur-sm border border-white/10\">\n          <div className=\"aspect-[2/1] flex items-center justify-center\">\n            <svg viewBox=\"0 0 1000 500\" className=\"w-full h-full opacity-60\">\n              {/* Simplified world map outline */}\n              <path\n                d=\"M150,200 Q200,150 250,180 T350,160 Q400,140 450,170 T550,150 Q600,130 650,160 T750,140 Q800,120 850,150\"\n                fill=\"none\"\n                stroke={brandColors.gold}\n                strokeWidth=\"2\"\n                opacity=\"0.5\"\n              />\n              {/* Location dots */}\n              {[\n                { x: 200, y: 180, label: \"Americas\" },\n                { x: 450, y: 160, label: \"Europe\" },\n                { x: 550, y: 200, label: \"Africa\" },\n                { x: 700, y: 170, label: \"Asia\" },\n                { x: 800, y: 280, label: \"Oceania\" },\n              ].map((loc, i) => (\n                <g key={i}>\n                  <circle cx={loc.x} cy={loc.y} r=\"8\" fill={brandColors.gold} className=\"animate-pulse\" />\n                  <circle cx={loc.x} cy={loc.y} r=\"16\" fill={brandColors.gold} opacity=\"0.3\" />\n                </g>\n              ))}\n            </svg>\n          </div>\n          <div className=\"flex flex-wrap justify-center gap-8 mt-8\">\n            {[\"Americas\", \"Europe\", \"Africa\", \"Asia\", \"Oceania\"].map((region) => (\n              <div key={region} className=\"flex items-center gap-2\">\n                <MapPin className=\"w-4 h-4\" style={{ color: brandColors.gold }} />\n                <span className=\"text-white text-sm\">{region}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// Footer\nfunction Footer() {\n  return (\n    <footer className=\"bg-gray-900 text-white\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n        <div className=\"grid md:grid-cols-4 gap-12\">\n          {/* Logo & Description */}\n          <div className=\"md:col-span-2\">\n            <div className=\"flex items-center gap-3 mb-4\">\n              <div className=\"w-12 h-12 rounded-full flex items-center justify-center\" style={{ background: `linear-gradient(135deg, ${brandColors.navy} 0%, ${brandColors.navyLight} 100%)` }}>\n                <Globe className=\"w-6 h-6 text-white\" />\n              </div>\n              <div>\n                <p className=\"text-sm font-medium text-white\">Center for Global</p>\n                <p className=\"text-sm font-medium\" style={{ color: brandColors.gold }}>Mental Health Equity</p>\n              </div>\n            </div>\n            <p className=\"text-gray-400 text-sm max-w-md mb-6\">\n              At the George Washington University, we're dedicated to advancing mental health equity worldwide through research, innovation, and community partnerships.\n            </p>\n            <div className=\"flex gap-4\">\n              {[\"twitter\", \"linkedin\", \"facebook\"].map((social) => (\n                <a\n                  key={social}\n                  href={`#${social}`}\n                  className=\"w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors\"\n                >\n                  <span className=\"sr-only\">{social}</span>\n                  <div className=\"w-4 h-4 bg-gray-500 rounded\" />\n                </a>\n              ))}\n            </div>\n          </div>\n\n          {/* Quick Links */}\n          <div>\n            <h4 className=\"font-semibold mb-4\" style={{ color: brandColors.gold }}>Quick Links</h4>\n            <ul className=\"space-y-2\">\n              {[\"About Us\", \"Our Team\", \"Projects\", \"Publications\"].map((link) => (\n                <li key={link}>\n                  <a href=\"#\" className=\"text-gray-400 hover:text-white text-sm transition-colors\">\n                    {link}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          {/* Contact */}\n          <div>\n            <h4 className=\"font-semibold mb-4\" style={{ color: brandColors.gold }}>Contact Us</h4>\n            <div className=\"space-y-3 text-sm text-gray-400\">\n              <p>Looking to collaborate?</p>\n              <a href=\"mailto:info@gwglobalmentalhealth.com\" className=\"hover:text-white transition-colors block\">\n                info@gwglobalmentalhealth.com\n              </a>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom Bar */}\n        <div className=\"border-t border-gray-800 mt-12 pt-8 text-center text-sm text-gray-500\">\n          <p>&copy; 2026 The George Washington University Center for Global Mental Health. All rights reserved.</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n\n// Main Page Component\nexport function HomePage() {\n  return (\n    <div className=\"min-h-screen bg-white\">\n      <Navigation />\n      <HeroSection />\n      <WhoWeAreSection />\n      <WhatWeDoSection />\n      <LatestNewsSection />\n      <TestimonialSection />\n      <NewsletterSection />\n      <MapSection />\n      <Footer />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}