87 lines
3.7 KiB
TypeScript
87 lines
3.7 KiB
TypeScript
import React from 'react';
|
||
import { Lock, Users, ClipboardList } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
|
||
import type { Metadata } from 'next';
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'Volunteer',
|
||
description: 'Join the CCFW volunteer team for owl surveys and habitat restoration.',
|
||
};
|
||
|
||
|
||
|
||
export default function VolunteerPage() {
|
||
return (
|
||
<div className="max-w-5xl mx-auto px-6 py-16 space-y-12">
|
||
<header className="space-y-4 max-w-3xl">
|
||
<div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
|
||
<Users size={16} /> Volunteer Portal
|
||
</div>
|
||
<h1 className="text-4xl font-black text-white">Join the CCFW Team</h1>
|
||
<p className="text-stone-400 text-lg leading-relaxed">
|
||
Our volunteers are the backbone of everything we do. From burrow surveys to habitat restoration, there's a role for everyone.
|
||
</p>
|
||
</header>
|
||
|
||
{/* Login gate notice */}
|
||
<div className="bg-surfaceGreen border border-teal/20 rounded-2xl p-8 flex items-start gap-5">
|
||
<div className="w-12 h-12 rounded-xl bg-teal/10 flex items-center justify-center shrink-0">
|
||
<Lock size={22} className="text-teal" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h3 className="font-bold text-white text-lg">Volunteer Dashboard</h3>
|
||
<p className="text-stone-400 text-sm leading-relaxed">
|
||
The full volunteer dashboard (task assignments, hour logging, equipment checkout, and leaderboard) requires a CCFW volunteer account. Log in or register to access.
|
||
</p>
|
||
<div className="flex gap-3 pt-2">
|
||
<Link href="/login" className="px-5 py-2 rounded-lg bg-teal text-white font-bold text-sm hover:bg-tealLight transition-all">
|
||
Log In
|
||
</Link>
|
||
<a href="mailto:info@ccfriendsofwildlife.org" className="px-5 py-2 rounded-lg border border-white/10 text-stone-300 font-bold text-sm hover:bg-white/5 transition-all">
|
||
Request Access
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Volunteer roles */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-black text-white">Volunteer Opportunities</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||
{[
|
||
{
|
||
icon: '🦉',
|
||
title: 'Owl Surveyor',
|
||
desc: 'Walk designated survey routes and record burrow activity on a monthly basis.',
|
||
commitment: '2–4 hrs/month',
|
||
},
|
||
{
|
||
icon: '🌿',
|
||
title: 'Habitat Restorer',
|
||
desc: 'Plant native vegetation, remove invasives, and restore critical burrowing owl habitat.',
|
||
commitment: '4 hrs/quarter',
|
||
},
|
||
{
|
||
icon: '📸',
|
||
title: 'Camera Monitor',
|
||
desc: 'Review footage from wildlife cameras, flag notable events, and maintain equipment.',
|
||
commitment: 'Remote, flexible',
|
||
},
|
||
].map(({ icon, title, desc, commitment }) => (
|
||
<div key={title} className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-3">
|
||
<div className="text-4xl">{icon}</div>
|
||
<h3 className="font-bold text-white text-lg">{title}</h3>
|
||
<p className="text-stone-400 text-sm leading-relaxed">{desc}</p>
|
||
<div className="flex items-center gap-2">
|
||
<ClipboardList size={12} className="text-teal" />
|
||
<span className="text-xs text-stone-500 font-semibold">{commitment}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|