<section className="py-20 bg-gray-50">
<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">About TGAA MUN</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">
The Global Affairs Assembly Model United Nations is a premier international relations
conference that brings together the brightest minds from across the globe to engage in
substantive debate on critical global issues.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-white p-8 rounded-lg shadow-md">
<MessageSquare className="w-10 h-10 text-[#12E193] mb-4" />
<h3 className="text-xl font-bold text-gray-900 mb-3">Diplomatic Excellence</h3>
<p className="text-gray-600 leading-relaxed">
Develop critical negotiation and public speaking skills through intense committee
sessions and caucusing.
</p>
</div>
<div className="bg-white p-8 rounded-lg shadow-md">
<Globe className="w-10 h-10 text-[#12E193] mb-4" />
<h3 className="text-xl font-bold text-gray-900 mb-3">Global Perspective</h3>
<p className="text-gray-600 leading-relaxed">
Gain deep insights into international affairs and learn to view complex issues from
multiple cultural perspectives.
</p>
</div>
<div className="bg-white p-8 rounded-lg shadow-md">
<Award className="w-10 h-10 text-[#12E193] mb-4" />
<h3 className="text-xl font-bold text-gray-900 mb-3">Leadership Growth</h3>
<p className="text-gray-600 leading-relaxed">
Build confidence, leadership skills, and forge lasting connections with peers who
share your passion for global affairs.
</p>
</div>
</div>
<div className="text-center mt-12">
<button
onClick={() => onNavigate('about')}
className="px-6 py-3 border-2 border-[#12E193] text-[#12E193] font-semibold rounded-md
hover:bg-[#12E193] hover:text-white transition-all"
>
Learn More About Us
</button>
</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">What Delegates Say</h2>
<div className="w-24 h-1 bg-[#12E193] mx-auto"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[Link]((testimonial, index) => (
<div key={index} className="bg-gray-50 p-8 rounded-lg relative">
<div className="text-6xl text-[#12E193] opacity-20 absolute top-4 left-4">"</div>
<p className="text-gray-700 mb-6 relative z-10 italic leading-relaxed">
{[Link]}
</p>
<div className="border-t pt-4">
<p className="font-semibold text-gray-900">{[Link]}</p>
<p className="text-sm text-gray-600">{[Link]}</p>
</div>
</div>
))}
</div>
</div>
</section>
</div>
);
}
[Link]:
import { useState } from 'react';
import { CheckCircle, AlertCircle } from 'lucide-react';
import { supabase } from '../lib/supabase';
export default function Registration() {
const [formData, setFormData] = useState({
name: '',
email: '',
school: '',
grade: '',
committee_preference: '',
mun_experience: '',
});
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
const [errorMessage, setErrorMessage] = useState('');
const committees = [
'DISEC - Regulation of Autonomous Weapons Systems',
'UNSC - Preventing Escalation in the Middle East',
'HCCC - Cuban Missile Crisis',
'UNHRC - Digital Rights and Privacy',
'UNEP - Combating Plastic Pollution',
'WHO - Strengthening Global Pandemic Preparedness',
];
const experienceLevels = [
'First-time delegate (no prior MUN experience)',
'Beginner (1-2 conferences)',
'Intermediate (3-5 conferences)',
'Advanced (6-10 conferences)',
'Expert (10+ conferences)',
];
const grades = ['9th Grade', '10th Grade', '11th Grade', '12th Grade'];
const handleChange = (
e: [Link]<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
) => {
setFormData({
...formData,
[[Link]]: [Link],
});
};
const handleSubmit = async (e: [Link]) => {
[Link]();
setStatus('submitting');
setErrorMessage('');
if (
![Link] ||
![Link] ||
![Link] ||
![Link] ||
!formData.committee_preference ||
!formData.mun_experience
){
setStatus('error');
setErrorMessage('Please fill in all fields');
return;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if () {
setStatus('error');
setErrorMessage('Please enter a valid email address');
return;
}
try {
const { error } = await [Link]('registrations').insert([formData]);
if (error) throw error;
setStatus('success');
setFormData({
name: '',
email: '',
school: '',
grade: '',
committee_preference: '',
mun_experience: '',
});
} catch (error) {
setStatus('error');
setErrorMessage('An error occurred. Please try again.');
[Link]('Error submitting registration:', error);
}
};
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">Register for TGAA MUN 2026</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">
Secure your spot at the premier Model United Nations conference. Registration closes
June 1, 2026.
</p>
</div>
</div>
</section>
<section className="py-20 bg-gray-50">
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="bg-white rounded-lg shadow-lg p-8 md:p-12">
{status === 'success' ? (
<div className="text-center py-12">
<CheckCircle className="w-20 h-20 text-[#12E193] mx-auto mb-6" />
<h2 className="text-3xl font-bold text-gray-900 mb-4">
Registration Successful!
</h2>
<p className="text-lg text-gray-700 mb-8">
Thank you for registering for TGAA MUN 2026. You will receive a confirmation email
shortly with further details.
</p>
<button
onClick={() => setStatus('idle')}
className="px-6 py-3 bg-[#12E193] text-white font-semibold rounded-md hover:bg-[#0FC27F]
transition-colors"
>
Register Another Delegate
</button>
</div>
):(
<form onSubmit={handleSubmit}>
<h2 className="text-3xl font-bold text-gray-900 mb-8">Delegate Information</h2>
{status === 'error' && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
<p className="text-red-800">{errorMessage}</p>
</div>
)}
<div className="space-y-6">
<div>
<label
htmlFor="name"
className="block text-sm font-semibold text-gray-700 mb-2"
>
Full 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="John Doe"
required
/>
</div>
<div>
<label
htmlFor="email"
className="block text-sm font-semibold text-gray-700 mb-2"
>
Email Address *
</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="school"
className="block text-sm font-semibold text-gray-700 mb-2"
>
School Name *
</label>
<input
type="text"
id="school"
name="school"
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="Springfield High School"
required
/>
</div>
<div>
<label
htmlFor="grade"
className="block text-sm font-semibold text-gray-700 mb-2"
>
Grade Level *
</label>
<select
id="grade"
name="grade"
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 your grade</option>
{[Link]((grade) => (
<option key={grade} value={grade}>
{grade}
</option>
))}
</select>
</div>
<div>
<label
htmlFor="committee_preference"
className="block text-sm font-semibold text-gray-700 mb-2"
>
Committee Preference *
</label>
<select
id="committee_preference"
name="committee_preference"
value={formData.committee_preference}
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 your preferred committee</option>
{[Link]((committee) => (
<option key={committee} value={committee}>
{committee}
</option>
))}
</select>
</div>
<div>
<label
htmlFor="mun_experience"
className="block text-sm font-semibold text-gray-700 mb-2"
>
MUN Experience Level *
</label>
<select
id="mun_experience"
name="mun_experience"
value={formData.mun_experience}
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 your experience level</option>
{[Link]((level) => (
<option key={level} value={level}>
{level}
</option>
))}
</select>
</div>
</div>
<div className="mt-8 pt-8 border-t">
<button
type="submit"
disabled={status === 'submitting'}
className="w-full py-4 bg-[#12E193] text-white text-lg font-semibold rounded-md
hover:bg-[#0FC27F] transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
>
{status === 'submitting' ? 'Submitting...' : 'Submit Registration'}
</button>
<p className="text-sm text-gray-600 text-center mt-4">
By registering, you agree to our terms and conditions
</p>
</div>
</form>
)}
</div>
</div>
</section>
<section className="py-16 bg-white">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
Registration Information
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div className="p-6 bg-gray-50 rounded-lg">
<p className="text-sm text-gray-600 mb-2">Early Bird Fee</p>
<p className="text-3xl font-bold text-[#12E193]">$75</p>
<p className="text-xs text-gray-600 mt-1">Until April 30, 2026</p>
</div>
<div className="p-6 bg-gray-50 rounded-lg">
<p className="text-sm text-gray-600 mb-2">Regular Fee</p>
<p className="text-3xl font-bold text-gray-900">$95</p>
<p className="text-xs text-gray-600 mt-1">May 1 - June 1, 2026</p>
</div>
<div className="p-6 bg-gray-50 rounded-lg">
<p className="text-sm text-gray-600 mb-2">Group Discount</p>
<p className="text-3xl font-bold text-gray-900">10%</p>
<p className="text-xs text-gray-600 mt-1">For groups of 5+</p>
</div>
</div>
</div>
</section>
</div>
);
}
[Link]:
import { FileText, Download, BookOpen, Video } from 'lucide-react';
export default function Resources() {
const documents = [
{
title: 'DISEC Background Guide',
description: 'Comprehensive guide on regulating autonomous weapons systems',
category: 'Background Guides',
icon: FileText,
},
{
title: 'UNSC Background Guide',
description: 'Analysis of Middle Eastern conflicts and security challenges',
category: 'Background Guides',
icon: FileText,
},
{
title: 'HCCC Background Guide',
description: 'Historical context and crisis briefing for Cuban Missile Crisis',
category: 'Background Guides',
icon: FileText,
},
{
title: 'UNHRC Background Guide',
description: 'Digital rights, privacy, and surveillance in the modern era',
category: 'Background Guides',
icon: FileText,
},
{
title: 'UNEP Background Guide',
description: 'Marine plastic pollution and environmental solutions',
category: 'Background Guides',
icon: FileText,
},
{
title: 'WHO Background Guide',
description: 'Global pandemic preparedness and health system resilience',
category: 'Background Guides',
icon: FileText,
},
{
title: 'Rules of Procedure',
description: 'Complete guide to parliamentary procedure and debate format',
category: 'Conference Documents',
icon: BookOpen,
},
{
title: 'Position Paper Guide',
description: 'How to write an effective position paper with examples',
category: 'Conference Documents',
icon: BookOpen,
},
{
title: 'Delegate Handbook',
description: 'Everything you need to know about TGAA MUN 2026',
category: 'Conference Documents',
icon: BookOpen,
},
{
title: 'Research Guide',
description: 'Best practices for researching your country and topic',
category: 'Conference Documents',
icon: BookOpen,
},
];
const videos = [
{
title: 'Introduction to MUN',
description: 'Learn the basics of Model United Nations',
},
{
title: 'Public Speaking Tips',
description: 'Master the art of speaking in committee',
},
{
title: 'Writing Position Papers',
description: 'Step-by-step guide to crafting winning position papers',
},
];
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">Delegate Resources</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">
Everything you need to prepare for an exceptional conference experience
</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="mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-4">Background Guides</h2>
<p className="text-gray-600 mb-8">
Detailed background guides for each committee, including historical context, current
situation analysis, and guiding questions
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{documents
.filter((doc) => [Link] === 'Background Guides')
.map((doc, index) => (
<div
key={index}
className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-all
transform hover:-translate-y-1"
>
<div className="flex items-start justify-between mb-4">
<[Link] className="w-10 h-10 text-[#12E193]" />
<Download className="w-5 h-5 text-gray-400" />
</div>
<h3 className="text-lg font-bold text-gray-900 mb-2">{[Link]}</h3>
<p className="text-sm text-gray-600 mb-4">{[Link]}</p>
<button className="text-[#12E193] font-semibold text-sm hover:text-[#0FC27F] transition-colors
flex items-center gap-2">
<Download size={16} />
Download PDF
</button>
</div>
))}
</div>
</div>
<div className="mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-4">Conference Documents</h2>
<p className="text-gray-600 mb-8">
Essential documents to help you navigate conference procedures and prepare your
materials
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{documents
.filter((doc) => [Link] === 'Conference Documents')
.map((doc, index) => (
<div
key={index}
className="bg-gray-50 rounded-lg p-6 hover:shadow-md transition-all"
>
<[Link] className="w-8 h-8 text-[#12E193] mb-4" />
<h3 className="text-lg font-bold text-gray-900 mb-2">{[Link]}</h3>
<p className="text-sm text-gray-600 mb-4">{[Link]}</p>
<button className="text-[#12E193] font-semibold text-sm hover:text-[#0FC27F] transition-colors
flex items-center gap-2">
<Download size={16} />
Download
</button>
</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="text-center mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-4">Video Tutorials</h2>
<p className="text-gray-600">
Watch our expert-led tutorials to enhance your MUN skills
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[Link]((video, index) => (
<div
key={index}
className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all"
>
<div className="aspect-video bg-gradient-to-br from-[#12E193] to-[#0FC27F] flex items-center
justify-center">
<Video className="w-16 h-16 text-white" />
</div>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">{[Link]}</h3>
<p className="text-gray-600 mb-4">{[Link]}</p>
<button className="text-[#12E193] font-semibold hover:text-[#0FC27F] transition-colors">
Watch Now →
</button>
</div>
</div>
))}
</div>
</div>
</section>
<section className="py-20 bg-white">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="bg-gradient-to-br from-[#12E193] to-[#0FC27F] rounded-lg p-12 text-white text-center">
<h2 className="text-3xl font-bold mb-4">Need Additional Resources?</h2>
<p className="text-lg mb-8 opacity-90">
Our secretariat is here to help. Reach out if you need clarification on any topic or
require additional preparation materials.
</p>
<button className="px-8 py-3 bg-white text-[#12E193] font-semibold rounded-md hover:bg-gray-100
transition-all">
Contact Us
</button>
</div>
</div>
</section>
</div>
);
}
[Link]:
import { User, Mail, Linkedin } from 'lucide-react';
interface TeamMember {
name: string;
role: string;
bio: string;
email: string;
category: string;
}
export default function Secretariat() {
const team: TeamMember[] = [
{
name: 'Alexandra Chen',
role: 'Secretary-General',
bio: 'A passionate advocate for international cooperation with 4 years of MUN experience. Alexandra has
represented her school at HMUN, UPMUNC, and numerous regional conferences.',
email: 'sg@[Link]',
category: 'leadership',
},
{
name: 'Marcus Williams',
role: 'Director-General',
bio: 'Dedicated to creating inclusive and intellectually stimulating conference experiences. Marcus brings
expertise in crisis management and committee operations.',
email: 'dg@[Link]',
category: 'leadership',
},
{
name: 'Priya Sharma',
role: 'USG for Delegate Affairs',
bio: 'Committed to ensuring every delegate has an exceptional conference experience. Priya oversees
registration, delegate services, and hospitality.',
email: 'delegates@[Link]',
category: 'usg',
},
{
name: 'James Patterson',
role: 'USG for Crisis & Specialized Committees',
bio: 'An experienced crisis director known for creating immersive and dynamic committee experiences.
James specializes in historical simulations.',
email: 'crisis@[Link]',
category: 'usg',
},
{
name: 'Sofia Rodriguez',
role: 'USG for General Assemblies',
bio: 'Expert in parliamentary procedure and GA operations. Sofia ensures smooth committee sessions and
maintains the highest standards of debate.',
email: 'ga@[Link]',
category: 'usg',
},
{
name: 'David Kim',
role: 'USG for Logistics & Operations',
bio: 'Master of organization and planning. David coordinates venue management, technology, and all
operational aspects of the conference.',
email: 'logistics@[Link]',
category: 'usg',
},
{
name: 'Emma Thompson',
role: 'USG for Communications & Outreach',
bio: 'Creative storyteller and social media strategist. Emma manages all external communications, marketing,
and delegate outreach.',
email: 'communications@[Link]',
category: 'usg',
},
{
name: 'Ahmed Hassan',
role: 'USG for Finance',
bio: 'Detail-oriented financial planner ensuring the conference\'s fiscal sustainability. Ahmed manages
budgets, sponsorships, and financial operations.',
email: 'finance@[Link]',
category: 'usg',
},
];
const leadership = [Link]((member) => [Link] === 'leadership');
const usgs = [Link]((member) => [Link] === 'usg');
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 Secretariat</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">
Meet the dedicated team working tirelessly to make TGAA MUN 2026 an unforgettable
experience
</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">
<h2 className="text-3xl font-bold text-gray-900 mb-12 text-center">Executive Leadership</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-20">
{[Link]((member, index) => (
<div
key={index}
className="bg-white rounded-lg shadow-lg overflow-hidden border-t-4 border-[#12E193]
hover:shadow-2xl transition-all transform hover:-translate-y-2"
>
<div className="p-8">
<div className="flex items-center justify-center mb-6">
<div className="w-24 h-24 bg-gradient-to-br from-[#12E193] to-[#0FC27F] rounded-full flex
items-center justify-center">
<User className="w-12 h-12 text-white" />
</div>
</div>
<h3 className="text-2xl font-bold text-gray-900 text-center mb-2">
{[Link]}
</h3>
<p className="text-[#12E193] font-semibold text-center mb-4">{[Link]}</p>
<p className="text-gray-700 leading-relaxed mb-6">{[Link]}</p>
<div className="flex justify-center gap-4">
<a
href={`[Link]
className="flex items-center gap-2 text-gray-600 hover:text-[#12E193] transition-colors"
>
<Mail size={18} />
<span className="text-sm">Email</span>
</a>
<a
href="#"
className="flex items-center gap-2 text-gray-600 hover:text-[#12E193] transition-colors"
>
<Linkedin size={18} />
<span className="text-sm">LinkedIn</span>
</a>
</div>
</div>
</div>
))}
</div>
<h2 className="text-3xl font-bold text-gray-900 mb-12 text-center">
Under-Secretaries General
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[Link]((member, index) => (
<div
key={index}
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-center justify-center mb-4">
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
<User className="w-10 h-10 text-[#12E193]" />
</div>
</div>
<h3 className="text-xl font-bold text-gray-900 text-center mb-1">
{[Link]}
</h3>
<p className="text-[#12E193] font-semibold text-center text-sm mb-4">
{[Link]}
</p>
<p className="text-gray-700 leading-relaxed text-sm mb-4">{[Link]}</p>
<div className="flex justify-center gap-4 pt-4 border-t">
<a
href={`[Link]
className="text-gray-600 hover:text-[#12E193] transition-colors"
>
<Mail size={18} />
</a>
<a
href="#"
className="text-gray-600 hover:text-[#12E193] transition-colors"
>
<Linkedin size={18} />
</a>
</div>
</div>
</div>
))}
</div>
</div>
</section>
<section className="py-20 bg-gray-50">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl font-bold text-gray-900 mb-6">Join Our Team</h2>
<p className="text-lg text-gray-700 mb-8 leading-relaxed">
Interested in joining the TGAA MUN Secretariat? We're always looking for passionate and
dedicated individuals to help organize future conferences.
</p>
<button className="px-8 py-3 bg-[#12E193] text-white font-semibold rounded-md hover:bg-[#0FC27F]
transition-all transform hover:scale-105">
Apply to Join
</button>
</div>
</section>
</div>
);
}
[Link]:
import { useState } from 'react';
import Navigation from './components/Navigation';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';
import Committees from './pages/Committees';
import Secretariat from './pages/Secretariat';
import Registration from './pages/Registration';
import Resources from './pages/Resources';
import Contact from './pages/Contact';
function App() {
const [currentPage, setCurrentPage] = useState('home');
const renderPage = () => {
switch (currentPage) {
case 'home':
return <Home onNavigate={setCurrentPage} />;
case 'about':
return <About />;
case 'committees':
return <Committees />;
case 'secretariat':
return <Secretariat />;
case 'register':
return <Registration />;
case 'resources':
return <Resources />;
case 'contact':
return <Contact />;
default:
return <Home onNavigate={setCurrentPage} />;
}
};
return (
<div className="min-h-screen">
<Navigation currentPage={currentPage} onNavigate={setCurrentPage} />
{renderPage()}
<Footer />
</div>
);
}
export default App;
[Link]:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.animate-spin-slow {
animation: spin 20s linear infinite;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[Link]:
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './[Link]';
createRoot([Link]('root')!).render(
<StrictMode>
<App />
</StrictMode>
);
[Link]:
/** @type {import('tailwindcss').Config} */
export default {
content: ['./[Link]', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
[Link]:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};