Add content pages (contact, events, happy tails, sponsors, donate)
All pages use config-driven org info via data.orgConfig — no hardcoded org names, emails, or external URLs. Stripe donate page gracefully falls back to a contact CTA when STRIPE_SECRET_KEY is not configured. RateLimiter applied to contact form and happy tails submission. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,155 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
|
||||
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||
const facebookUrl = $derived(data.orgConfig.orgInfo.facebookUrl);
|
||||
|
||||
function formatDate(dateStr: string | Date): string {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function formatTime(dateStr: string | Date): string {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function formatShortDate(dateStr: string | Date): string {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Events | {orgName}</title>
|
||||
<meta name="description" content="Upcoming adoption events, fundraisers, and community gatherings hosted by {orgName}." />
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Events</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
Join us at adoption events, fundraisers, and community gatherings.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Upcoming Events -->
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Upcoming Events</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
|
||||
{#if data.upcomingEvents.length > 0}
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each data.upcomingEvents as event}
|
||||
<article class="flex flex-col overflow-hidden rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md">
|
||||
{#if event.imageUrl}
|
||||
<div class="aspect-video overflow-hidden bg-teal-light">
|
||||
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex aspect-video items-center justify-center bg-teal-light">
|
||||
<svg class="h-16 w-16 text-teal-brand/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-1 flex-col p-6">
|
||||
<div class="flex items-center gap-2 text-sm text-teal-brand">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="font-medium">{formatDate(event.startDate)}</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-sm text-gray-mid">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>{formatTime(event.startDate)}</span>
|
||||
</div>
|
||||
<h3 class="mt-3 text-xl font-bold text-gray-brand">{event.title}</h3>
|
||||
{#if event.location}
|
||||
<div class="mt-2 flex items-start gap-2 text-sm text-gray-mid">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span>{event.location}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if event.description}
|
||||
<p class="mt-3 flex-1 text-gray-mid">{event.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-12 rounded-xl border border-gray-soft bg-white p-12 text-center">
|
||||
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-10 w-10 text-teal-brand/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">No Upcoming Events</h3>
|
||||
<p class="mt-2 text-gray-mid">
|
||||
Check back soon! {#if facebookUrl}Follow us on Facebook for the latest updates.{/if}
|
||||
</p>
|
||||
{#if facebookUrl}
|
||||
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="mt-6 inline-block rounded-lg bg-teal-brand px-6 py-2.5 font-semibold text-white transition hover:bg-teal-dark">
|
||||
Follow Us on Facebook
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Past Events -->
|
||||
{#if data.pastEvents.length > 0}
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-brand">Past Events</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
|
||||
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each data.pastEvents as event}
|
||||
<div class="flex items-start gap-4 rounded-lg border border-gray-soft bg-warm-bg p-4">
|
||||
{#if event.imageUrl}
|
||||
<div class="h-16 w-16 shrink-0 overflow-hidden rounded-lg">
|
||||
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-teal-light">
|
||||
<svg class="h-6 w-6 text-teal-brand/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-xs font-medium text-teal-brand">{formatShortDate(event.startDate)}</p>
|
||||
<h3 class="mt-0.5 truncate font-semibold text-gray-brand">{event.title}</h3>
|
||||
{#if event.location}
|
||||
<p class="mt-0.5 truncate text-sm text-gray-mid">{event.location}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user