import { useState } from 'react' export default function ATLMetroUnionWebsite() { const [submitted, setSubmitted] = useState(false) const handleSubmit = (e) => { e.preventDefault() const formData = new FormData(e.target) const data = Object.fromEntries(formData.entries()) console.log('Union Authorization Card Submission:', data) setSubmitted(true) e.target.reset() } return (

{/* Hero Section */}

Atlanta • Drivers • Couriers • Riders

ATL Metro Delivery Drivers & Couriers Union

Building power for delivery drivers, gig workers, independent couriers, rideshare drivers, and logistics workers across Metro Atlanta. Together we fight for fair pay, safer working conditions, transparency, and respect.

Join The Union Our Mission

Why Organize?

• Push for higher pay and transparent tipping systems
• Advocate for safer working conditions
• Fight unfair deactivations and account bans
• Build community support and emergency resources
• Amplify the voices of Atlanta gig workers

24/7

Support for workers across ATL Metro

100%

Worker-driven organizing effort

ATL

Focused on Metro Atlanta communities

{/* Mission Section */}

Our Mission

Standing Together For Fair Treatment

Delivery drivers and couriers keep Atlanta moving. Whether you work with food delivery apps, courier services, medical delivery routes, or independent logistics contracts, your labor matters.

The ATL Metro Delivery Drivers & Couriers Union exists to organize workers, protect driver rights, create support systems, and advocate for sustainable working conditions in the growing gig economy.

Fair Compensation

Fighting for transparent pay systems and stronger earning protections.

Driver Protection

Advocating against unfair deactivations and unsafe working conditions.

Community Power

Building solidarity and support between Atlanta-area drivers and couriers.

{/* Authorization Card Form */}

Union Authorization Card

Sign Your Union Authorization Card

By signing this card, you authorize the ATL Metro Delivery Drivers & Couriers Union to represent you for the purposes of collective organizing and advocacy.

{submitted && (

Authorization Card Submitted

Thank you for standing with Atlanta delivery drivers and couriers. A union organizer will contact you soon.

)}

First Name

Last Name

Email Address

Phone Number

Delivery Platform / Employer

City / Area

Why Do You Want To Join?

</div>          <div className="rounded-2xl border border-blue-500/30 bg-blue-500/10 p-5 text-sm text-zinc-300 leading-relaxed">           I authorize the ATL Metro Delivery Drivers & Couriers Union to represent me for the purposes of           collective organizing, advocacy, and communication regarding worker rights and workplace conditions.         </div>          <div className="flex items-start gap-3">           <input             name="authorization"             type="checkbox"             required             className="mt-1 h-5 w-5 rounded border-zinc-600 bg-zinc-900"           />            <p className="text-zinc-400 text-sm leading-relaxed">             I understand that submitting this form acts as my electronic signature and authorization.           </p>         </div>          <button           type="submit"           className="w-full rounded-2xl bg-blue-500 py-4 text-lg font-bold text-black hover:bg-blue-400 transition shadow-lg shadow-blue-500/20"         >           Submit Authorization Card         </button>       </form>     </div>   </section>    {/* Footer */}   <footer className="py-10 px-6 border-t border-zinc-800 text-center text-zinc-500 text-sm">     <p>© 2026 ATL Metro Delivery Drivers & Couriers Union • Organizing Atlanta Gig Workers • Built For Worker Power</p>   </footer>    {/* News & Events */}   <section className="max-w-7xl mx-auto px-6 py-24">     <div className="text-center mb-14">       <p className="uppercase tracking-[0.25em] text-blue-400 text-sm mb-4">         Organizing & Community       </p>        <h2 className="text-4xl font-black mb-4">         Union News & Upcoming Events       </h2>        <p className="text-zinc-400 max-w-2xl mx-auto">         Stay informed about organizing efforts, worker actions, safety meetings, and Atlanta community events.       </p>     </div>      <div className="grid lg:grid-cols-3 gap-6">       <div className="rounded-3xl border border-zinc-800 bg-zinc-900 p-6">         <p className="text-blue-400 text-sm mb-3">May 2026</p>         <h3 className="text-2xl font-bold mb-3">Metro Atlanta Driver Meet-Up</h3>         <p className="text-zinc-400 leading-relaxed">           Connect with fellow drivers and couriers to discuss pay transparency, safety concerns, and organizing efforts.         </p>       </div>        <div className="rounded-3xl border border-zinc-800 bg-zinc-900 p-6">         <p className="text-blue-400 text-sm mb-3">June 2026</p>         <h3 className="text-2xl font-bold mb-3">Gig Worker Rights Workshop</h3>         <p className="text-zinc-400 leading-relaxed">           Educational event focused on contractor rights, deactivations, documentation, and worker advocacy.         </p>       </div>        <div className="rounded-3xl border border-zinc-800 bg-zinc-900 p-6">         <p className="text-blue-400 text-sm mb-3">Ongoing</p>         <h3 className="text-2xl font-bold mb-3">Emergency Driver Support Fund</h3>         <p className="text-zinc-400 leading-relaxed">           Building a support network for injured drivers, emergencies, and workers facing financial hardship.         </p>       </div>     </div>   </section>    {/* Donate Section */}   <section className="bg-gradient-to-b from-black to-zinc-900 border-y border-zinc-800 py-24">     <div className="max-w-5xl mx-auto px-6 text-center">       <p className="uppercase tracking-[0.25em] text-blue-400 text-sm mb-4">         Support The Movement       </p>        <h2 className="text-5xl font-black mb-6">         Help Build Worker Power In Atlanta       </h2>        <p className="text-zinc-400 max-w-3xl mx-auto leading-relaxed mb-10">         Donations help fund organizing materials, emergency worker assistance, community outreach, legal advocacy,         and support resources for delivery drivers and couriers across Metro Atlanta.       </p>        <div className="flex flex-wrap justify-center gap-4">         <button className="px-8 py-4 rounded-2xl bg-blue-500 hover:bg-blue-400 transition text-black font-black shadow-lg shadow-blue-500/20">           Donate $10         </button>          <button className="px-8 py-4 rounded-2xl border border-zinc-700 hover:border-blue-400 transition font-bold">           Become A Monthly Supporter         </button>       </div>     </div>   </section>    {/* Contact Section */}   <section className="max-w-6xl mx-auto px-6 py-24">     <div className="grid lg:grid-cols-2 gap-10 items-center">       <div>         <p className="uppercase tracking-[0.25em] text-blue-400 text-sm mb-4">           Contact Organizers         </p>          <h2 className="text-4xl font-black mb-6">           Get Connected With The Union         </h2>          <p className="text-zinc-400 leading-relaxed mb-6">           Whether you're a full-time delivery driver, rideshare worker, courier, or part-time gig worker,           your voice matters.         </p>          <div className="space-y-4 text-zinc-300">           <p>📧 organizers@atlmetrodriversunion.org</p>           <p>📍 Atlanta Metropolitan Area</p>           <p>📱 Instagram: @atlmetrodriversunion</p>         </div>       </div>        <div className="rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-2xl">         <h3 className="text-2xl font-bold mb-6 text-blue-300">           Organizer Contact Form         </h3>          <div className="grid gap-5">           <input             type="text"             placeholder="Your Name"             className="w-full rounded-2xl border border-zinc-700 bg-zinc-950 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"           />            <input             type="email"             placeholder="Email Address"             className="w-full rounded-2xl border border-zinc-700 bg-zinc-950 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"           />            <textarea             rows="4"             placeholder="How can we help?"             className="w-full rounded-2xl border border-zinc-700 bg-zinc-950 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"           />            <button className="rounded-2xl bg-blue-500 py-4 text-lg font-bold text-black hover:bg-blue-400 transition shadow-lg shadow-blue-500/20">             Send Message           </button>         </div>       </div>     </div>   </section>    {/* Deployment Instructions */}   <section className="border-t border-zinc-800 py-16 px-6 bg-black text-zinc-500 text-sm">     <div className="max-w-5xl mx-auto space-y-4">       <h3 className="text-white text-2xl font-bold mb-4">Deployment Setup</h3>        <p>         1. Upload this project to GitHub.       </p>        <p>         2. Connect the repository to Vercel for free hosting.       </p>        <p>         3. Configure environment variables for forms and databases.       </p>        <p>         4. Recommended integrations:       </p>        <ul className="list-disc pl-6 space-y-2">         <li>Supabase or Firebase for member databases</li>         <li>EmailJS or Resend for organizer email notifications</li>         <li>Stripe for donations and supporter memberships</li>         <li>Google Analytics for traffic tracking</li>         <li>Custom domain connection through Vercel</li>       </ul>     </div>   </section> </div>  ) }import { SpeedInsights } from "@vercel/speed-insights/next"</article></body></html>