94 lines
4.2 KiB
TypeScript
94 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import ImageCarousel from './ImageCarousel';
|
|
import EventCard from './EventCard';
|
|
import { parseISO, startOfDay, isSameDay, isAfter } from 'date-fns';
|
|
import { events, Event } from '../eventData';
|
|
import { formatDateRange } from './Calendar';
|
|
|
|
const isEventUpcoming = (eventDate: string) => {
|
|
const today = startOfDay(new Date());
|
|
const parsedEventDate = startOfDay(parseISO(eventDate));
|
|
return isSameDay(parsedEventDate, today) || isAfter(parsedEventDate, today);
|
|
};
|
|
|
|
const Home: React.FC = () => {
|
|
const [upcomingEvents, setUpcomingEvents] = useState<Event[]>([]);
|
|
|
|
useEffect(() => {
|
|
const filteredEvents = events
|
|
.filter(event => isEventUpcoming(event.date))
|
|
.sort((a, b) => parseISO(a.date).getTime() - parseISO(b.date).getTime())
|
|
.slice(0, 6);
|
|
setUpcomingEvents(filteredEvents);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="space-y-8"
|
|
>
|
|
<h1 className="text-3xl md:text-4xl font-bold text-[#8C1D40] mb-8 text-center">Welcome to MCDi</h1>
|
|
|
|
<ImageCarousel />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div className="space-y-8">
|
|
<InfoCard
|
|
title="Empowering Deaf Culture and Community"
|
|
content="We're proud to be the Missoula Council of the Deaf, Inc. (MCDi) in the heart of Missoula, Montana. Our organization is dedicated to promoting Deaf culture, community, and systematic change in our beautiful state."
|
|
/>
|
|
<InfoCard
|
|
title="Deafhood: A Shining Example of Diversity"
|
|
content="Just as Montana's vast landscapes showcase breathtaking vistas, our Deaf community brings unique perspectives and experiences to the table. We're proud to celebrate Deaf culture, language, and traditions that enrich our human kaleidoscope."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-semibold text-[#8C1D40] mb-4">Upcoming Events</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{upcomingEvents.map((event, index) => (
|
|
<EventCard
|
|
key={index}
|
|
event={{
|
|
...event,
|
|
formattedDateRange: formatDateRange(event.date, event.startTime, event.date, event.endTime)
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<InfoCard
|
|
title="Join Us: Support Change in Montana"
|
|
content="As a parent or ally, you can make a difference by joining MCDi. Together, we'll work toward creating a more inclusive environment for all Montanans, regardless of communication style. Your support will help shape the future of Deaf education, employment, and accessibility in our great state."
|
|
/>
|
|
<InfoCard
|
|
title="Get Involved: Explore, Protect, and Give Back"
|
|
content="MCDi is dedicated to protecting and preserving Deaf culture and rights. Join us for events, workshops, and advocacy opportunities that will inspire you to make a difference."
|
|
/>
|
|
<InfoCard
|
|
title="Join the Journey: Together We Can Make a Difference"
|
|
content="As we explore, protect, and give back to our community, remember that every individual brings unique strengths and perspectives. Let's work together to create a brighter future for all Montanans, where Deaf culture is celebrated and valued."
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const InfoCard: React.FC<{ title: string; content: string }> = ({ title, content }) => (
|
|
<motion.div
|
|
className="bg-white rounded-lg shadow-md p-6 flex flex-col h-full"
|
|
whileHover={{ scale: 1.03 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<h2 className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-4">{title}</h2>
|
|
<p className="text-gray-700 flex-grow text-sm md:text-base">{content}</p>
|
|
</motion.div>
|
|
);
|
|
|
|
export default Home;
|