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,216 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||
const orgEmail = $derived(data.orgConfig.orgInfo.email);
|
||||
const facebookUrl = $derived(data.orgConfig.orgInfo.facebookUrl);
|
||||
const instagramUrl = $derived(data.orgConfig.orgInfo.instagramUrl);
|
||||
type Blocks = Record<string, Record<string, string>>;
|
||||
const blocks = $derived(data.blocks as Blocks);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact Us | {orgName}</title>
|
||||
<meta name="description" content="Get in touch with {orgName}. We would love to hear from you." />
|
||||
</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">{blocks?.intro?.heading ?? 'Contact Us'}</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
{blocks?.intro?.text ?? 'We would love to hear from you.'}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<p class="text-center text-lg leading-relaxed text-gray-mid">
|
||||
{orgName} is 100% volunteer-based and we will respond to your message as soon as possible.
|
||||
</p>
|
||||
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-2">
|
||||
{#if orgEmail}
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="mt-4 text-xl font-semibold text-gray-brand">Email</h2>
|
||||
<a href="mailto:{orgEmail}" class="mt-3 inline-block text-lg font-medium text-teal-brand hover:text-teal-dark underline">
|
||||
{orgEmail}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if blocks?.info?.address}
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" 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>
|
||||
</div>
|
||||
<h2 class="mt-4 text-xl font-semibold text-gray-brand">Mailing Address</h2>
|
||||
<p class="mt-3 text-lg text-gray-mid">{blocks.info.address}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
{#if facebookUrl || instagramUrl}
|
||||
<div class="mt-12">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-brand">Follow Us</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-6">
|
||||
{#if facebookUrl}
|
||||
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 rounded-lg border border-gray-soft bg-white px-6 py-4 shadow-sm transition hover:shadow-md hover:border-teal-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-teal-brand">
|
||||
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
|
||||
</svg>
|
||||
<span class="font-medium text-gray-brand">Facebook</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if instagramUrl}
|
||||
<a href={instagramUrl} target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 rounded-lg border border-gray-soft bg-white px-6 py-4 shadow-sm transition hover:shadow-md hover:border-teal-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-teal-brand">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
||||
</svg>
|
||||
<span class="font-medium text-gray-brand">Instagram</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-2xl px-4">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-brand">Send Us a Message</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
|
||||
{#if form?.success}
|
||||
<div class="mt-8 rounded-xl border border-green-200 bg-green-50 p-8 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h3 class="mt-4 text-xl font-semibold text-green-800">Thank you! We'll get back to you soon.</h3>
|
||||
<p class="mt-2 text-green-700">Our volunteers typically respond within 24-48 hours.</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#if form?.error}
|
||||
<div class="mt-6 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">{form.error}</div>
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance class="mt-8 space-y-6">
|
||||
<div class="grid gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-brand">
|
||||
Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
value={form?.values?.name ?? ''}
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition {form?.errors?.name ? 'border-red-400' : ''}"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
{#if form?.errors?.name}
|
||||
<p class="mt-1 text-sm text-red-600">{form.errors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-brand">
|
||||
Email <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
value={form?.values?.email ?? ''}
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition {form?.errors?.email ? 'border-red-400' : ''}"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
{#if form?.errors?.email}
|
||||
<p class="mt-1 text-sm text-red-600">{form.errors.email}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="subject" class="block text-sm font-medium text-gray-brand">Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={form?.values?.subject ?? ''}
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition"
|
||||
placeholder="How can we help?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium text-gray-brand">
|
||||
Message <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows="5"
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition resize-y {form?.errors?.message ? 'border-red-400' : ''}"
|
||||
placeholder="Tell us what's on your mind..."
|
||||
>{form?.values?.message ?? ''}</textarea>
|
||||
{#if form?.errors?.message}
|
||||
<p class="mt-1 text-sm text-red-600">{form.errors.message}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Honeypot + timing (anti-spam) -->
|
||||
<div class="absolute -left-[9999px]" aria-hidden="true" tabindex="-1">
|
||||
<input type="text" name="website" autocomplete="off" tabindex="-1" />
|
||||
</div>
|
||||
<input type="hidden" name="_t" value={Date.now()} />
|
||||
|
||||
<div class="text-center">
|
||||
<button type="submit" class="rounded-lg bg-teal-brand px-8 py-3 text-lg font-semibold text-white shadow-sm transition hover:bg-teal-dark focus:ring-2 focus:ring-teal-brand/50 focus:ring-offset-2">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adoption Note -->
|
||||
{#if data.orgConfig.applications.adoptionEnabled}
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-3xl px-4 text-center">
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-gray-brand">Interested in Adopting?</h2>
|
||||
<p class="mt-4 text-lg text-gray-mid">
|
||||
If you are inquiring about an adoptable pet, please fill out our adoption application first.
|
||||
</p>
|
||||
<div class="mt-6 flex flex-wrap items-center justify-center gap-4">
|
||||
<a href="/pets" class="rounded-lg bg-teal-brand px-6 py-3 font-semibold text-white transition hover:bg-teal-dark">
|
||||
View Available Pets
|
||||
</a>
|
||||
<a href="/apply/adopt" class="rounded-lg border-2 border-teal-brand px-6 py-3 font-semibold text-teal-brand transition hover:bg-teal-light">
|
||||
Apply to Adopt
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user