Footer.

tsx:

import { Mail, Instagram, Twitter, Linkedin } from 'lucide-react';

export default function Footer() {

return (
<footer className="bg-gray-900 text-white py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 className="text-2xl font-bold mb-4">
TGAA <span className="text-[#12E193]">MUN</span>
</h3>
<p className="text-gray-400 text-sm leading-relaxed">
Shaping global leaders through diplomacy and discourse. Join us for an unforgettable
experience in international relations.
</p>
</div>

<div>
<h4 className="text-lg font-semibold mb-4">Quick Links</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li className="hover:text-[#12E193] cursor-pointer transition-colors">About Us</li>
<li className="hover:text-[#12E193] cursor-pointer transition-colors">Committees</li>
<li className="hover:text-[#12E193] cursor-pointer transition-colors">Secretariat</li>
<li className="hover:text-[#12E193] cursor-pointer transition-colors">Resources</li>
</ul>
</div>

<div>
<h4 className="text-lg font-semibold mb-4">Connect With Us</h4>
<div className="flex space-x-4 mb-4">
<a href="#" className="text-gray-400 hover:text-[#12E193] transition-colors">
<Instagram size={20} />
</a>
<a href="#" className="text-gray-400 hover:text-[#12E193] transition-colors">
<Twitter size={20} />
</a>
<a href="#" className="text-gray-400 hover:text-[#12E193] transition-colors">
<Linkedin size={20} />
</a>
<a href="[Link] className="text-gray-400 hover:text-[#12E193] transition-colors">
<Mail size={20} />
</a>
</div>
<p className="text-gray-400 text-sm">info@[Link]</p>
</div>
</div>

<div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">

<p>&copy; 2026 TGAA MUN. All rights reserved.</p>
</div>
</div>
</footer>
);
}
[Link]:

import { useState } from 'react';

import { Menu, X } from 'lucide-react';

interface NavigationProps {
currentPage: string;
onNavigate: (page: string) => void;
}

export default function Navigation({ currentPage, onNavigate }: NavigationProps) {

const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

const navItems = [
{ name: 'Home', id: 'home' },
{ name: 'About', id: 'about' },
{ name: 'Committees', id: 'committees' },
{ name: 'Secretariat', id: 'secretariat' },
{ name: 'Resources', id: 'resources' },
{ name: 'Contact', id: 'contact' },
];

const handleNavigate = (page: string) => {

onNavigate(page);
setMobileMenuOpen(false);
[Link]({ top: 0, behavior: 'smooth' });
};

return (
<nav className="fixed w-full z-50 bg-white/95 backdrop-blur-sm shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex-shrink-0 cursor-pointer" onClick={() => handleNavigate('home')}>
<h1 className="text-2xl font-bold text-gray-900">
TGAA <span className="text-[#12E193]">MUN</span>
</h1>
</div>

<div className="hidden md:flex space-x-8">

{[Link]((item) => (
<button
key={[Link]}
onClick={() => handleNavigate([Link])}
className={`text-sm font-medium transition-colors ${
currentPage === [Link]
? 'text-[#12E193]'
: 'text-gray-700 hover:text-[#12E193]'
}`}
>
{[Link]}
</button>
))}
<button
onClick={() => handleNavigate('register')}
className="px-4 py-2 bg-[#12E193] text-white text-sm font-medium rounded-md hover:bg-[#0FC27F]
transition-colors"
 >
Register Now
</button>
</div>

<div className="md:hidden">
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="text-gray-700"
>
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
</div>

{mobileMenuOpen && (
<div className="md:hidden bg-white border-t">
<div className="px-2 pt-2 pb-3 space-y-1">
{[Link]((item) => (
<button
key={[Link]}
onClick={() => handleNavigate([Link])}
className={`block w-full text-left px-3 py-2 text-base font-medium rounded-md ${
currentPage === [Link]
? 'text-[#12E193] bg-gray-50'
: 'text-gray-700 hover:bg-gray-50'
}`}
>
{[Link]}
</button>
))}
<button
onClick={() => handleNavigate('register')}
className="w-full text-left px-3 py-2 bg-[#12E193] text-white text-base font-medium rounded-md
hover:bg-[#0FC27F] transition-colors"
>
Register Now
</button>
</div>
</div>
)}
</nav>
);
}

[Link]:

import { Target, Eye, BookOpen, Users, TrendingUp, Globe } from 'lucide-react';

export default function About() {

const skills = [
{ icon: Users, title: 'Diplomacy', description: 'Master the art of negotiation and consensus-building' },
{ icon: BookOpen, title: 'Research', description: 'Develop deep expertise in global affairs and policy' },
 { icon: TrendingUp, title: 'Public Speaking', description: 'Enhance confidence and articulation in formal settings'
},
{ icon: Globe, title: 'Global Awareness', description: 'Understand diverse perspectives and cultural nuances' },
];

return (
<div className="min-h-screen pt-16">
<section className="bg-gradient-to-br from-gray-900 to-gray-800 text-white py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-5xl font-bold mb-6">About TGAA MUN</h1>
<div className="w-24 h-1 bg-[#12E193] mx-auto mb-6"></div>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Where diplomacy meets excellence, and future leaders are forged through rigorous
debate and international collaboration
</p>
</div>
</div>
</section>

<section className="py-20 bg-white">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 className="text-4xl font-bold text-gray-900 mb-6">What is TGAA MUN?</h2>
<div className="space-y-4 text-gray-700 leading-relaxed text-lg">
<p>
The Global Affairs Assembly Model United Nations is a distinguished international
relations conference that simulates the workings of the United Nations and other
multilateral bodies.
</p>
<p>
Our conference brings together high school students from diverse backgrounds to
engage in substantive debate on pressing global issues, from international security
to sustainable development, human rights to economic cooperation.
</p>
<p>
Through rigorous committee sessions, delegates develop critical thinking, public
speaking, and diplomatic skills while building a nuanced understanding of complex
geopolitical challenges.
</p>
</div>
</div>

<div className="grid grid-cols-2 gap-4">

<div className="bg-gradient-to-br from-[#12E193] to-[#0FC27F] p-8 rounded-lg text-white">
<h3 className="text-4xl font-bold mb-2">300+</h3>
<p className="text-sm uppercase tracking-wider">Delegates</p>
</div>
<div className="bg-gradient-to-br from-blue-500 to-blue-600 p-8 rounded-lg text-white">
<h3 className="text-4xl font-bold mb-2">6</h3>
<p className="text-sm uppercase tracking-wider">Committees</p>
</div>
<div className="bg-gradient-to-br from-purple-500 to-purple-600 p-8 rounded-lg text-white">
<h3 className="text-4xl font-bold mb-2">50+</h3>
<p className="text-sm uppercase tracking-wider">Schools</p>
</div>
<div className="bg-gradient-to-br from-orange-500 to-orange-600 p-8 rounded-lg text-white">
 <h3 className="text-4xl font-bold mb-2">3</h3>
<p className="text-sm uppercase tracking-wider">Days</p>
</div>
</div>
</div>
</div>
</section>

<section className="py-20 bg-gray-50">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div className="bg-white p-10 rounded-lg shadow-md">
<Target className="w-12 h-12 text-[#12E193] mb-6" />
<h3 className="text-3xl font-bold text-gray-900 mb-4">Our Mission</h3>
<p className="text-gray-700 leading-relaxed text-lg">
To cultivate the next generation of informed, empathetic, and effective global
leaders by providing an immersive platform for international discourse, critical
analysis, and diplomatic engagement. We strive to create an environment where
diverse perspectives are not just heard but celebrated, and where complex global
challenges are addressed with intellectual rigor and collaborative spirit.
</p>
</div>

<div className="bg-white p-10 rounded-lg shadow-md">

<Eye className="w-12 h-12 text-[#12E193] mb-6" />
<h3 className="text-3xl font-bold text-gray-900 mb-4">Our Vision</h3>
<p className="text-gray-700 leading-relaxed text-lg">
To be recognized as the premier Model United Nations conference that sets the gold
standard for educational excellence, diplomatic simulation, and youth empowerment. We
envision a world where young leaders emerge from our conference equipped with the
skills, knowledge, and networks to make meaningful contributions to global peace,
prosperity, and justice.
</p>
</div>
</div>
</div>
</section>

<section className="py-20 bg-white">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900 mb-4">Why Participate?</h2>
<div className="w-24 h-1 bg-[#12E193] mx-auto mb-6"></div>
<p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
TGAA MUN offers an unparalleled opportunity to develop skills that will serve you
throughout your academic and professional career
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

{[Link]((skill, index) => (
<div
key={index}
className="text-center p-8 rounded-lg border border-gray-200 hover:shadow-xl transition-all
transform hover:-translate-y-2"
>
<div className="inline-block p-4 bg-[#12E193]/10 rounded-full mb-6">
<[Link] className="w-10 h-10 text-[#12E193]" />
 </div>
<h3 className="text-xl font-bold text-gray-900 mb-3">{[Link]}</h3>
<p className="text-gray-600 leading-relaxed">{[Link]}</p>
</div>
))}
</div>
</div>
</section>

<section className="py-20 bg-gradient-to-br from-[#12E193] to-[#0FC27F] text-white">

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-4xl font-bold mb-6">Join Us in Shaping Tomorrow</h2>
<p className="text-xl mb-8 leading-relaxed opacity-90">
Be part of a transformative experience that will challenge your perspectives, sharpen
your skills, and connect you with like-minded individuals passionate about global
affairs.
</p>
<button className="px-8 py-4 bg-white text-[#12E193] text-lg font-semibold rounded-md
hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg">
Register for TGAA MUN 2026
</button>
</div>
</section>
</div>
);
}

[Link]:

import { useState } from 'react';

import { X, Users, FileText, Globe } from 'lucide-react';

interface Committee {
id: string;
name: string;
shortName: string;
agenda: string;
description: string;
delegates: number;
difficulty: string;
fullDescription: string;
}

export default function Committees() {

const [selectedCommittee, setSelectedCommittee] = useState<Committee | null>(null);

const committees: Committee[] = [

{
id: '1',
name: 'Disarmament and International Security Committee',
shortName: 'DISEC',
agenda: 'Regulation of Autonomous Weapons Systems',
description:
'Address the ethical, legal, and security implications of lethal autonomous weapons in modern warfare.',
delegates: 60,
difficulty: 'Intermediate',
 fullDescription:
'The Disarmament and International Security Committee (DISEC) is the First Committee of the UN General
Assembly. In this committee, delegates will tackle the complex issue of regulating autonomous weapons
systems, examining international humanitarian law, arms control treaties, and the future of warfare. This
committee requires strong research skills and the ability to balance security concerns with humanitarian
principles.',
},
{
id: '2',
name: 'United Nations Security Council',
shortName: 'UNSC',
agenda: 'Preventing Escalation in the Middle East',
description:
'Navigate complex regional tensions and work toward sustainable peace in one of the world\'s most volatile
regions.',
delegates: 15,
difficulty: 'Advanced',
fullDescription:
'The United Nations Security Council is the most powerful body in the UN system, responsible for
maintaining international peace and security. Delegates will engage in crisis-driven debate on Middle Eastern
conflicts, utilizing veto powers, working papers, and resolutions. This committee demands exceptional diplomacy,
quick thinking, and deep knowledge of international relations. Limited seats available.',
},
{
id: '3',
name: 'Historical Crisis Cabinet Committee',
shortName: 'HCCC',
agenda: 'The Cuban Missile Crisis (October 1962)',
description:
'Step into the shoes of Kennedy administration officials during the most dangerous moment of the Cold
War.',
delegates: 20,
difficulty: 'Advanced',
fullDescription:
'Experience history\'s most perilous thirteen days as a member of President Kennedy\'s Executive
Committee. This fast-paced crisis committee will test your ability to make critical decisions under pressure,
respond to breaking developments, and prevent nuclear war. Delegates must be prepared for continuous crisis
updates, backroom negotiations, and high-stakes diplomacy. This committee requires strong improvisation skills
and historical knowledge.',
},
{
id: '4',
name: 'United Nations Human Rights Council',
shortName: 'UNHRC',
agenda: 'Digital Rights and Privacy in the Age of Surveillance',
description:
'Balance national security interests with fundamental rights to privacy in an increasingly digital world.',
delegates: 47,
difficulty: 'Intermediate',
fullDescription:
'The UN Human Rights Council addresses critical human rights issues globally. Delegates will debate the
intersection of technology, privacy, and state surveillance, examining cases from around the world. This
committee explores questions of digital sovereignty, corporate responsibility, and the universal right to privacy.
Strong argumentation and ethical reasoning skills are essential.',
},
{
id: '5',
name: 'United Nations Environment Programme',
 shortName: 'UNEP',
agenda: 'Combating Plastic Pollution in Marine Ecosystems',
description:
'Develop comprehensive strategies to address one of the most pressing environmental challenges of our
time.',
delegates: 50,
difficulty: 'Beginner-Intermediate',
fullDescription:
'The United Nations Environment Programme leads global environmental action. Delegates will craft
innovative solutions to the plastic pollution crisis, examining production, consumption, waste management, and
international cooperation. This committee is ideal for delegates interested in environmental policy, sustainable
development, and multilateral cooperation. First-time delegates are welcome.',
},
{
id: '6',
name: 'World Health Organization',
shortName: 'WHO',
agenda: 'Strengthening Global Pandemic Preparedness',
description:
'Learn from recent global health crises to build more resilient international health systems.',
delegates: 55,
difficulty: 'Intermediate',
fullDescription:
'The World Health Organization coordinates international health initiatives and emergency responses.
Drawing lessons from COVID-19 and other pandemics, delegates will develop frameworks for early detection,
rapid response, vaccine equity, and international coordination. This committee combines public health policy,
economics, and diplomacy, making it ideal for delegates with interests in medicine, science, or global health.',
},
];

return (
<div className="min-h-screen pt-16">
<section className="bg-gradient-to-br from-gray-900 to-gray-800 text-white py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-5xl font-bold mb-6">Our Committees</h1>
<div className="w-24 h-1 bg-[#12E193] mx-auto mb-6"></div>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Six diverse committees covering the most pressing global challenges, from international
security to environmental sustainability
</p>
</div>
</div>
</section>

<section className="py-20 bg-gray-50">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[Link]((committee) => (
<div
key={[Link]}
className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all transform
hover:-translate-y-2"
>
<div className="h-2 bg-gradient-to-r from-[#12E193] to-[#0FC27F]"></div>
<div className="p-6">
<div className="flex items-start justify-between mb-4">
<div>
 <h3 className="text-2xl font-bold text-gray-900 mb-1">
{[Link]}
</h3>
<p className="text-sm text-gray-600">{[Link]}</p>
</div>
<Globe className="w-8 h-8 text-[#12E193]" />
</div>

<div className="mb-4">
<div className="flex items-center gap-2 text-sm text-gray-600 mb-2">
<FileText className="w-4 h-4" />
<span className="font-semibold">Agenda:</span>
</div>
<p className="text-gray-800 font-medium">{[Link]}</p>
</div>

<p className="text-gray-700 mb-4 leading-relaxed">{[Link]}</p>

<div className="flex items-center justify-between mb-4">

<div className="flex items-center gap-2 text-sm text-gray-600">
<Users className="w-4 h-4" />
<span>{[Link]} Delegates</span>
</div>
<span
className={`text-xs font-semibold px-3 py-1 rounded-full ${
[Link] === 'Beginner-Intermediate'
? 'bg-green-100 text-green-800'
: [Link] === 'Intermediate'
? 'bg-blue-100 text-blue-800'
: 'bg-purple-100 text-purple-800'
}`}
>
{[Link]}
</span>
</div>

<button
onClick={() => setSelectedCommittee(committee)}
className="w-full py-2 bg-[#12E193] text-white font-semibold rounded-md hover:bg-[#0FC27F]
transition-colors"
>
Learn More
</button>
</div>
</div>
))}
</div>
</div>
</section>

{selectedCommittee && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div className="sticky top-0 bg-white border-b p-6 flex justify-between items-start">
<div>
<h2 className="text-3xl font-bold text-gray-900">
{[Link]}
</h2>
 <p className="text-gray-600">{[Link]}</p>
</div>
<button
onClick={() => setSelectedCommittee(null)}
className="text-gray-500 hover:text-gray-700"
>
<X size={24} />
</button>
</div>

<div className="p-6">
<div className="mb-6">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Agenda</h3>
<p className="text-gray-800 font-medium">{[Link]}</p>
</div>

<div className="mb-6">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Committee Overview</h3>
<p className="text-gray-700 leading-relaxed">{[Link]}</p>
</div>

<div className="grid grid-cols-2 gap-4 mb-6">

<div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Committee Size</p>
<p className="text-2xl font-bold text-gray-900">{[Link]}</p>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-1">Difficulty Level</p>
<p className="text-2xl font-bold text-gray-900">{[Link]}</p>
</div>
</div>

<button
onClick={() => setSelectedCommittee(null)}
className="w-full py-3 bg-[#12E193] text-white font-semibold rounded-md hover:bg-[#0FC27F]
transition-colors"
>
Close
</button>
</div>
</div>
</div>
)}
</div>
);
}

[Link]:

import { useState } from 'react';

import { Mail, MapPin, Phone, Instagram, Twitter, Linkedin, Send } from 'lucide-react';

export default function Contact() {

const [formData, setFormData] = useState({
name: '',
email: '',
subject: '',
 message: '',
});

const [status, setStatus] = useState<'idle' | 'success'>('idle');

const handleChange = (
e: [Link]<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
) => {
setFormData({
...formData,
[[Link]]: [Link],
});
};

const handleSubmit = (e: [Link]) => {

[Link]();
setStatus('success');
setFormData({
name: '',
email: '',
subject: '',
message: '',
});

setTimeout(() => {
setStatus('idle');
}, 5000);
};

const contactInfo = [
{
icon: Mail,
title: 'Email',
value: 'info@[Link]',
link: '[Link]
},
{
icon: Phone,
title: 'Phone',
value: '+1 (555) 123-4567',
link: '[Link]
},
{
icon: MapPin,
title: 'Location',
value: 'Convention Center, City',
link: '#',
},
];

const subjects = [
'General Inquiry',
'Registration Question',
'Committee Information',
'Sponsorship Opportunity',
'Media & Press',
'Other',
];
 return (
<div className="min-h-screen pt-16">
<section className="bg-gradient-to-br from-gray-900 to-gray-800 text-white py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-5xl font-bold mb-6">Get in Touch</h1>
<div className="w-24 h-1 bg-[#12E193] mx-auto mb-6"></div>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Have questions about TGAA MUN 2026? We're here to help. Reach out to our team and
we'll get back to you promptly.
</p>
</div>
</div>
</section>

<section className="py-20 bg-white">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
{[Link]((item, index) => (
<a
key={index}
href={[Link]}
className="flex flex-col items-center text-center p-8 bg-gray-50 rounded-lg hover:shadow-lg
transition-all transform hover:-translate-y-2"
>
<div className="w-16 h-16 bg-[#12E193] rounded-full flex items-center justify-center mb-4">
<[Link] className="w-8 h-8 text-white" />
</div>
<h3 className="text-lg font-bold text-gray-900 mb-2">{[Link]}</h3>
<p className="text-gray-600">{[Link]}</p>
</a>
))}
</div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">

<div>
<h2 className="text-3xl font-bold text-gray-900 mb-6">Send Us a Message</h2>
<p className="text-gray-600 mb-8 leading-relaxed">
Whether you have a question about registration, committees, logistics, or anything
else, our team is ready to answer all your questions.
</p>

{status === 'success' && (

<div className="mb-6 p-4 bg-[#12E193]/10 border border-[#12E193] rounded-md">
<p className="text-[#12E193] font-semibold">
Thank you for your message! We'll get back to you soon.
</p>
</div>
)}

<form onSubmit={handleSubmit} className="space-y-6">

<div>
<label htmlFor="name" className="block text-sm font-semibold text-gray-700 mb-2">
Name *
</label>
<input
type="text"
 id="name"
name="name"
value={[Link]}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#12E193]
focus:border-transparent outline-none transition-all"
placeholder="Your name"
required
/>
</div>

<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
Email *
</label>
<input
type="email"
id="email"
name="email"
value={[Link]}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#12E193]
focus:border-transparent outline-none transition-all"
placeholder="[Link]@[Link]"
required
/>
</div>

<div>
<label
htmlFor="subject"
className="block text-sm font-semibold text-gray-700 mb-2"
>
Subject *
</label>
<select
id="subject"
name="subject"
value={[Link]}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#12E193]
focus:border-transparent outline-none transition-all bg-white"
required
>
<option value="">Select a subject</option>
{[Link]((subject) => (
<option key={subject} value={subject}>
{subject}
</option>
))}
</select>
</div>

<div>
<label
htmlFor="message"
className="block text-sm font-semibold text-gray-700 mb-2"
>
 Message *
</label>
<textarea
id="message"
name="message"
value={[Link]}
onChange={handleChange}
rows={6}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#12E193]
focus:border-transparent outline-none transition-all resize-none"
placeholder="Tell us more about your inquiry..."
required
></textarea>
</div>

<button
type="submit"
className="w-full py-3 bg-[#12E193] text-white font-semibold rounded-md hover:bg-[#0FC27F]
transition-colors flex items-center justify-center gap-2"
>
<Send size={18} />
Send Message
</button>
</form>
</div>

<div>
<div className="bg-gradient-to-br from-[#12E193] to-[#0FC27F] rounded-lg p-8 text-white mb-8">
<h3 className="text-2xl font-bold mb-4">Connect With Us</h3>
<p className="mb-6 opacity-90">
Follow TGAA MUN on social media for updates, announcements, and behind-the-scenes
content.
</p>
<div className="flex gap-4">
<a
href="#"
className="w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center
transition-all"
>
<Instagram size={24} />
</a>
<a
href="#"
className="w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center
transition-all"
>
<Twitter size={24} />
</a>
<a
href="#"
className="w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center
transition-all"
>
<Linkedin size={24} />
</a>
</div>
</div>
 <div className="bg-gray-50 rounded-lg p-8">
<h3 className="text-2xl font-bold text-gray-900 mb-4">Office Hours</h3>
<div className="space-y-3 text-gray-700">
<div className="flex justify-between">
<span className="font-semibold">Monday - Friday</span>
<span>9:00 AM - 6:00 PM</span>
</div>
<div className="flex justify-between">
<span className="font-semibold">Saturday</span>
<span>10:00 AM - 4:00 PM</span>
</div>
<div className="flex justify-between">
<span className="font-semibold">Sunday</span>
<span>Closed</span>
</div>
</div>
<div className="mt-6 pt-6 border-t border-gray-300">
<p className="text-sm text-gray-600">
We typically respond to all inquiries within 24-48 hours during business days.
</p>
</div>
</div>

<div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">

<h3 className="text-lg font-bold text-gray-900 mb-2">FAQ</h3>
<p className="text-sm text-gray-700">
Before reaching out, check our FAQ section for answers to common questions about
registration, logistics, and conference procedures.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
}

[Link]:

import { useEffect, useState } from 'react';

import { Calendar, MapPin, Users, Award, Globe, MessageSquare } from 'lucide-react';

interface HomeProps {
onNavigate: (page: string) => void;
}

export default function Home({ onNavigate }: HomeProps) {

const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });

useEffect(() => {
const conferenceDate = new Date('2026-07-15T09:00:00');

const timer = setInterval(() => {

const now = new Date();
const difference = [Link]() - [Link]();
 if (difference > 0) {
setTimeLeft({
days: [Link](difference / (1000 * 60 * 60 * 24)),
hours: [Link]((difference / (1000 * 60 * 60)) % 24),
minutes: [Link]((difference / 1000 / 60) % 60),
seconds: [Link]((difference / 1000) % 60),
});
}
}, 1000);

return () => clearInterval(timer);

}, []);

const highlights = [
{ icon: Calendar, label: 'Conference Dates', value: 'July 15-17, 2026' },
{ icon: MapPin, label: 'Location', value: 'Convention Center, City' },
{ icon: Users, label: 'Expected Delegates', value: '300+' },
{ icon: Award, label: 'Committees', value: '6 Unique Councils' },
];

const testimonials = [
{
quote: "TGAA MUN transformed my understanding of international relations. The debates were intense and
the experience was invaluable.",
author: "Sarah Johnson",
role: "Delegate, DISEC 2025"
},
{
quote: "The caliber of delegates and the quality of discourse exceeded my expectations. A truly world-class
conference.",
author: "Michael Chen",
role: "Delegate, UNSC 2025"
},
{
quote: "From the secretariat to the logistics, everything was professionally executed. This is the gold standard
for MUN conferences.",
author: "Priya Sharma",
role: "Delegate, HCCC 2025"
}
];

return (
<div className="min-h-screen">
<section className="relative h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br
from-gray-900 via-gray-800 to-gray-900">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-20 left-20 w-72 h-72 bg-[#12E193] rounded-full filter blur-3xl
animate-pulse"></div>
<div className="absolute bottom-20 right-20 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl
animate-pulse delay-1000"></div>
</div>

<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">

<div className="mb-8 inline-block">
<Globe className="w-16 h-16 text-[#12E193] mx-auto mb-4 animate-spin-slow" />
</div>
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
 TGAA MUN 2026
</h1>
<p className="text-xl md:text-2xl text-gray-300 mb-8 font-light tracking-wide">
Shaping Global Leaders Through Diplomacy
</p>
<p className="text-lg text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
Join the most prestigious Model United Nations conference where future leaders converge
to address the world's most pressing challenges through informed debate and diplomacy.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button
onClick={() => onNavigate('register')}
className="px-8 py-4 bg-[#12E193] text-white text-lg font-semibold rounded-md hover:bg-[#0FC27F]
transition-all transform hover:scale-105 shadow-lg"
>
Register Now
</button>
<button
onClick={() => onNavigate('committees')}
className="px-8 py-4 bg-transparent border-2 border-white text-white text-lg font-semibold rounded-md
hover:bg-white hover:text-gray-900 transition-all"
>
View Committees
</button>
</div>

<div className="mt-16 bg-white/10 backdrop-blur-md rounded-lg p-6 inline-block">

<p className="text-gray-300 text-sm mb-3 uppercase tracking-wider">Conference Begins In</p>
<div className="flex gap-4 justify-center">
{[Link](timeLeft).map(([unit, value]) => (
<div key={unit} className="text-center">
<div className="text-3xl md:text-4xl font-bold text-[#12E193]">{value}</div>
<div className="text-xs text-gray-400 uppercase mt-1">{unit}</div>
</div>
))}
</div>
</div>
</div>
</section>

<section className="py-20 bg-white">

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{[Link]((item, index) => (
<div
key={index}
className="text-center p-6 rounded-lg hover:shadow-xl transition-all transform hover:-translate-y-2
border border-gray-100"
>
<[Link] className="w-12 h-12 text-[#12E193] mx-auto mb-4" />
<h3 className="text-lg font-semibold text-gray-900 mb-2">{[Link]}</h3>
<p className="text-gray-600">{[Link]}</p>
</div>
))}
</div>
</div>
</section>