213 lines
8 KiB
TypeScript
213 lines
8 KiB
TypeScript
import React from 'react';
|
||
import Link from 'next/link';
|
||
import type { Metadata } from 'next';
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'Events | Louisiana Association of the Deaf',
|
||
description: 'Upcoming events and activities from the Louisiana Association of the Deaf.',
|
||
};
|
||
|
||
interface Event {
|
||
title: string;
|
||
date: string;
|
||
location: string;
|
||
description: string;
|
||
slug: string;
|
||
featured?: boolean;
|
||
}
|
||
|
||
const events: Event[] = [
|
||
{
|
||
title: 'LAD 52nd Biennial State Conference',
|
||
date: 'June 1–3, 2023',
|
||
location: 'Sheraton Metairie, New Orleans area',
|
||
description:
|
||
'"Embracing the Challenges of Change" — Keynote by Dr. Natalie Delgado, 115th Anniversary Bash, comedian Sheena Lyles. $100 registration. Open to all.',
|
||
slug: '52nd-biennial-conference',
|
||
featured: true,
|
||
},
|
||
{
|
||
title: 'NOBDA & LAD Collaboration — Book Reading with Franklin Jones on BASL',
|
||
date: 'Saturday, May 23rd',
|
||
location: 'To be announced',
|
||
description:
|
||
'A special book reading event in collaboration with the New Orleans Black Deaf Association, featuring Franklin Jones presenting on Black American Sign Language (BASL).',
|
||
slug: 'nobda-lad-basl-book-reading',
|
||
featured: true,
|
||
},
|
||
{
|
||
title: 'LSDF 19th Annual Dash for Deaf Kids 5K',
|
||
date: 'April 15, 2023',
|
||
location: 'Louisiana',
|
||
description:
|
||
'LAD-sponsored annual 5K run/walk benefiting the Louisiana School for the Deaf Foundation\'s programs for deaf youth.',
|
||
slug: 'dash-for-deaf-kids-2023',
|
||
},
|
||
{
|
||
title: 'LAD Quarterly Board Meeting',
|
||
date: 'January 21, 2023',
|
||
location: 'Rapides Parish Main Library, Alexandria, LA',
|
||
description:
|
||
'Quarterly Board Meeting open to all LAD members.',
|
||
slug: 'quarterly-board-meeting-jan-2023',
|
||
},
|
||
{
|
||
title: 'LAD Quarterly Meeting',
|
||
date: 'April 1, 2023',
|
||
location: 'Deaf Action Center, Shreveport, LA',
|
||
description: 'Quarterly general membership meeting.',
|
||
slug: 'quarterly-meeting-apr-2023',
|
||
},
|
||
{
|
||
title: 'Meet Deaf Santa',
|
||
date: 'December 11, 2022',
|
||
location: 'LAD Office',
|
||
description:
|
||
'Annual holiday event for deaf children — meet Deaf Santa, games, and holiday celebration.',
|
||
slug: 'meet-deaf-santa-2022',
|
||
},
|
||
{
|
||
title: 'Deaf Seniors Luncheon',
|
||
date: 'December 6, 2022',
|
||
location: "Mike Anderson's, Gonzales, LA",
|
||
description: 'Annual luncheon celebrating deaf seniors in our community.',
|
||
slug: 'deaf-seniors-luncheon-2022',
|
||
},
|
||
{
|
||
title: 'LAD Happy Hour Social',
|
||
date: 'January 22, 2020',
|
||
location: 'Tin Roof Brewing, Baton Rouge',
|
||
description: 'Casual social gathering for LAD members and the broader Deaf community.',
|
||
slug: 'happy-hour-2020',
|
||
},
|
||
{
|
||
title: 'New Year Workshop with Gary W. Olsen',
|
||
date: 'January 11, 2020',
|
||
location: 'Louisiana School for the Deaf',
|
||
description:
|
||
'Free workshop for all LAD members featuring Gary W. Olsen, former President of the National Association of the Deaf.',
|
||
slug: 'new-year-workshop-2020',
|
||
},
|
||
{
|
||
title: 'Deaf Focus 10th Anniversary Gala',
|
||
date: 'October 5, 2019',
|
||
location: 'Baton Rouge',
|
||
description:
|
||
'Celebrating 10 years of Deaf Focus with special guests John Maucere and DJ Nico DiMarco.',
|
||
slug: 'deaf-focus-10th-anniversary',
|
||
},
|
||
{
|
||
title: 'Monthly ASL Meet & Greet',
|
||
date: 'Last Thursday of each month (except Nov/Dec)',
|
||
location: "Torchy's Tacos, Baton Rouge",
|
||
description:
|
||
'Monthly social gathering — ASL practice, networking, and community. All skill levels welcome. Check Facebook for current location updates.',
|
||
slug: 'asl-meet-and-greet',
|
||
},
|
||
{
|
||
title: 'LAD Annual Crawfish Boil',
|
||
date: 'March 8, 2020',
|
||
location: 'Louisiana',
|
||
description: 'First annual LAD Crawfish Boil — proceeds support the LAD Youth Fund.',
|
||
slug: 'crawfish-boil-2020',
|
||
},
|
||
];
|
||
|
||
const EventCard = ({ event }: { event: Event }) => (
|
||
<div className={`card event-card-gold-border h-full flex flex-col ${event.featured ? 'ring-2 ring-[var(--color-primary)]' : ''}`}>
|
||
<div className="p-6 flex-grow flex flex-col">
|
||
{event.featured && (
|
||
<span className="featured-badge self-start mb-3 px-2 py-0.5 rounded-full text-xs">
|
||
Featured
|
||
</span>
|
||
)}
|
||
<h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">{event.title}</h3>
|
||
<p className="card-date font-medium text-sm mb-1">{event.date}</p>
|
||
<p className="section-text text-sm mb-3">{event.location}</p>
|
||
<p className="card-description mb-4 flex-grow">{event.description}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
export default function EventsPage() {
|
||
const featuredEvents = events.filter((e) => e.featured);
|
||
const upcomingEvents = events.filter((e) => !e.featured);
|
||
|
||
return (
|
||
<div className="bg-color-bg">
|
||
{/* Hero */}
|
||
<section className="py-16 bg-color-bg-secondary">
|
||
<div className="container mx-auto px-4">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<h1 className="hero-title text-4xl md:text-5xl font-bold mb-6">Events & Calendar</h1>
|
||
<p className="hero-subtitle text-xl">
|
||
Connect with the Louisiana Deaf community through LAD events statewide.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Featured events */}
|
||
{featuredEvents.length > 0 && (
|
||
<section className="py-12 bg-color-bg">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="section-heading text-3xl font-bold mb-8 text-center">Featured Events</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||
{featuredEvents.map((event) => (
|
||
<EventCard key={event.slug} event={event} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* All events */}
|
||
<section className="py-12 bg-color-bg-secondary">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="section-heading text-3xl font-bold mb-8 text-center">All Events</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{upcomingEvents.map((event) => (
|
||
<EventCard key={event.slug} event={event} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Event categories */}
|
||
<section className="py-12 bg-color-bg">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="section-heading text-2xl font-bold mb-6 text-center">Types of Events</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{[
|
||
{ name: 'Social Gatherings', desc: 'Meet & greets, happy hours, and community socials.' },
|
||
{ name: 'Educational Workshops', desc: 'ASL classes, advocacy workshops, and professional development.' },
|
||
{ name: 'Biennial Conferences', desc: 'LAD\'s flagship statewide conference held every two years.' },
|
||
{ name: 'Board & Quarterly Meetings', desc: 'Open to all members — participate in LAD governance.' },
|
||
].map((cat) => (
|
||
<div key={cat.name} className="card event-card-gold-border p-6 text-center">
|
||
<h3 className="benefit-card-title event-card-title-gold text-lg font-semibold mb-3">{cat.name}</h3>
|
||
<p className="benefit-card-description text-sm">{cat.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section className="py-16 cta-section">
|
||
<div className="container mx-auto px-4 text-center">
|
||
<h2 className="cta-title text-3xl font-bold mb-4">Suggest an Event</h2>
|
||
<p className="cta-description text-xl max-w-3xl mx-auto mb-8">
|
||
Have an idea for a community event? We'd love to hear from you.
|
||
</p>
|
||
<Link
|
||
href="/contact"
|
||
className="cta-button-primary px-6 py-3 rounded-lg font-medium text-lg inline-block"
|
||
>
|
||
Contact Us
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|