Add rate limiting, security headers, fix CORS for production

2026-02-19 16:37:47 +00:00
parent a85fa0d211
commit c6b8fb752a
3449 changed files with 926916 additions and 4142 deletions
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Lock, Users, ClipboardList } from 'lucide-react';
+import Link from 'next/link';
+
+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>
+  );
+}