homepage

1"use client"
2 
3import { useState } from "react";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import { Card, CardContent } from "@/components/ui/card";
7import { Badge } from "@/components/ui/badge";
8import { Label } from "@/components/ui/label";
9import {
10  Globe,
11  Lightbulb,
12  FileText,
13  Menu,
14  X,
15  ArrowRight,
16  Mail,
17  MapPin,
18  ChevronRight,
19  Heart,
20  Users,
21  Quote,
22} from "lucide-react";
23 
24// Brand colors matching GW
25const brandColors = {
26  navy: "#0a2240",
27  navyLight: "#1a3a5c",
28  gold: "#c9a227",
29  goldLight: "#d4b84a",
30  cream: "#f5f1e8",
31  warmWhite: "#faf9f7",
32};
33 
34// Navigation Component
35function Navigation() {
36  const [isOpen, setIsOpen] = useState(false);
37  const navItems = ["Home", "About", "Team", "News", "Projects", "Innovations", "Publications", "Contact"];
38 
39  return (
40    <nav className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-sm">
41      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42        <div className="flex items-center justify-between h-20">
43          {/* Logo */}
44          <div className="flex items-center gap-3">
45            <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: `linear-gradient(135deg, ${brandColors.navy} 0%, ${brandColors.navyLight} 100%)` }}>
46              <Globe className="w-6 h-6 text-white" />
47            </div>
48            <div className="hidden sm:block">
49              <p className="text-sm font-medium" style={{ color: brandColors.navy }}>Center for Global</p>
50              <p className="text-sm font-medium" style={{ color: brandColors.gold }}>Mental Health Equity</p>
51            </div>
52          </div>
53 
54          {/* Desktop Navigation */}
55          <div className="hidden lg:flex items-center gap-1">
56            {navItems.map((item) => (
57              <a
58                key={item}
59                href={`#${item.toLowerCase()}`}
60                className="px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg transition-colors hover:bg-gray-50"
61              >
62                {item}
63              </a>
64            ))}
65          </div>
66 
67          {/* Mobile menu button */}
68          <button
69            onClick={() => setIsOpen(!isOpen)}
70            className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
71          >
72            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
73          </button>
74// … truncated