Add static content pages (about, adoption-process, become-a-foster, etc.)
- About, adoption process, become a foster, how to help, volunteer, why adopt pages - All org name/email/contact info driven by data.orgConfig - Foster resources page with optional FOSTER_RESOURCES_PASSWORD password gate - Content blocks loaded from DB with sensible generic fallback text - Application links conditionally shown based on orgConfig.applications flags Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
@@ -0,0 +1,8 @@
|
|||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
const blocks = await getPageBlocks('about');
|
||||||
|
return { ...parentData, blocks };
|
||||||
|
};
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { data } = $props();
|
||||||
|
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
type Blocks = Record<string, Record<string, string>>;
|
||||||
|
const blocks = $derived(data.blocks as Blocks);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>About Us | {orgName}</title>
|
||||||
|
<meta name="description" content="Learn about {orgName} — a foster-based rescue dedicated to saving animals in need and finding them loving forever homes." />
|
||||||
|
</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 ?? `About ${orgName}`}</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
{blocks?.intro?.text ?? 'Every pet deserves a second chance at a happy life.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mission -->
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<div class="mx-auto max-w-4xl">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-brand text-center">{blocks?.mission?.heading ?? 'Our Mission'}</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
<p class="mt-8 text-lg leading-relaxed text-gray-mid text-center">
|
||||||
|
{blocks?.mission?.text ?? `${orgName} is a foster-based rescue dedicated to saving animals in need and finding them loving forever homes. We believe every pet deserves safety, compassion, and a family to call their own.`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How We Work -->
|
||||||
|
<section class="bg-white py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<h2 class="text-center text-3xl font-bold text-gray-brand">{blocks?.how_we_work?.heading ?? 'How We Work'}</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-8 md:grid-cols-3">
|
||||||
|
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||||
|
<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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Foster-Based Model</h3>
|
||||||
|
<p class="mt-3 text-gray-mid">
|
||||||
|
Every pet lives in a loving foster home where they receive personalized attention, socialization, and care while waiting for their forever family.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||||
|
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Complete Vetting</h3>
|
||||||
|
<p class="mt-3 text-gray-mid">
|
||||||
|
Every pet in our care receives a full veterinary workup, vaccinations, spay/neuter surgery, microchipping, and any additional medical treatment they need.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||||
|
<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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Thoughtful Matching</h3>
|
||||||
|
<p class="mt-3 text-gray-mid">
|
||||||
|
We carefully match each pet with the right family through our application and screening process — for a fit that lasts a lifetime.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Our Story -->
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<div class="mx-auto max-w-3xl">
|
||||||
|
<h2 class="text-center text-3xl font-bold text-gray-brand">Our Story</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
{#if blocks?.story?.text}
|
||||||
|
<div class="mt-8 prose prose-gray max-w-none text-gray-mid">{@html blocks.story.text}</div>
|
||||||
|
{:else}
|
||||||
|
<div class="mt-8 space-y-5 text-gray-mid leading-relaxed">
|
||||||
|
<p>
|
||||||
|
{orgName} was born from a simple belief: no pet should be without a safe place to call home. What started as a small group of passionate animal lovers has grown into a dedicated organization serving our community.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Through our network of incredible foster families, we've been able to rehabilitate, socialize, and prepare pets for life in their forever homes.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Every pet that comes through our program receives the medical care, training support, and love they need to thrive.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Team & Volunteers -->
|
||||||
|
<section class="bg-white py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-brand">Our Team & Volunteers</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-mid">
|
||||||
|
{orgName} runs on the dedication of our volunteers — from foster families opening their homes to transport drivers, event coordinators, and behind-the-scenes helpers.
|
||||||
|
</p>
|
||||||
|
<div class="mt-10 grid gap-6 sm:grid-cols-3">
|
||||||
|
<div class="rounded-lg bg-teal-light/50 p-6">
|
||||||
|
<p class="text-4xl font-bold text-teal-brand">100%</p>
|
||||||
|
<p class="mt-2 font-medium text-gray-brand">Volunteer Run</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg bg-teal-light/50 p-6">
|
||||||
|
<p class="text-4xl font-bold text-teal-brand">Foster</p>
|
||||||
|
<p class="mt-2 font-medium text-gray-brand">Based Network</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg bg-teal-light/50 p-6">
|
||||||
|
<p class="text-4xl font-bold text-teal-brand">Hundreds</p>
|
||||||
|
<p class="mt-2 font-medium text-gray-brand">Of Pets Saved</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="bg-teal-brand py-16 text-center text-white">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
<h2 class="text-3xl font-bold">Want to Help?</h2>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
See how you can make a difference in the lives of pets who need it most.
|
||||||
|
</p>
|
||||||
|
<a href="/how-to-help" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
How to Help
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
const blocks = await getPageBlocks('adoption-process');
|
||||||
|
return { ...parentData, blocks };
|
||||||
|
};
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { data } = $props();
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
const orgEmail = $derived(data.orgConfig.orgInfo.email);
|
||||||
|
const adoptionFee = $derived(data.orgConfig.applications.adoptionFee);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Adoption Process | {orgName}</title>
|
||||||
|
<meta name="description" content="Learn about the {orgName} adoption process — from application to home visit to meeting your new best friend." />
|
||||||
|
</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">Adoption Process</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">Everything you need to know about adopting from us.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Intro -->
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-3xl px-4">
|
||||||
|
<p class="text-lg leading-relaxed text-gray-mid">
|
||||||
|
Thank you for your interest in adopting a pet from {orgName}!
|
||||||
|
{#if orgEmail}
|
||||||
|
Please email us at
|
||||||
|
<a href="mailto:{orgEmail}" class="font-semibold text-teal-brand hover:text-teal-dark underline">{orgEmail}</a>
|
||||||
|
with any questions or concerns.
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
<div class="mt-8 rounded-xl border-2 border-amber-400 bg-amber-50 p-6">
|
||||||
|
<p class="text-center text-lg font-bold text-amber-800">
|
||||||
|
Please read the following information before applying!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ Accordion -->
|
||||||
|
<section class="bg-white py-16">
|
||||||
|
<div class="mx-auto max-w-3xl px-4">
|
||||||
|
<h2 class="text-center text-3xl font-bold text-gray-brand">Frequently Asked Questions</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
|
||||||
|
<div class="mt-12 space-y-4">
|
||||||
|
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm" open>
|
||||||
|
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||||
|
<span>What is the adoption process?</span>
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</summary>
|
||||||
|
<div class="px-6 pb-6 text-gray-mid leading-relaxed">
|
||||||
|
<p class="mb-4">Submit an adoption application and complete each question thoroughly. Once submitted, the following steps will take place:</p>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li><strong class="text-gray-brand">Reference Check</strong> — We may contact your vet, landlord, and personal references.</li>
|
||||||
|
<li><strong class="text-gray-brand">Pre-Adoption Home Visit</strong> — We will schedule a visit to ensure the home is safe for the pet.</li>
|
||||||
|
<li><strong class="text-gray-brand">Meet & Greet</strong> — Once approved, we coordinate a time for you to meet the pet.</li>
|
||||||
|
<li><strong class="text-gray-brand">Adoption is Final</strong> — Adoption fees are non-refundable if the pet needs to be returned.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm">
|
||||||
|
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||||
|
<span>What are the adoption fees?</span>
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</summary>
|
||||||
|
<div class="px-6 pb-6 text-gray-mid leading-relaxed">
|
||||||
|
{#if adoptionFee}
|
||||||
|
<p>The standard adoption fee is <strong class="text-gray-brand">${adoptionFee}</strong>. Fees help cover veterinary care, vaccinations, spay/neuter, and microchipping.</p>
|
||||||
|
{:else}
|
||||||
|
<p>
|
||||||
|
Adoption fees vary. Contact us
|
||||||
|
{#if orgEmail}
|
||||||
|
at <a href="mailto:{orgEmail}" class="font-semibold text-teal-brand hover:text-teal-dark underline">{orgEmail}</a>
|
||||||
|
{/if}
|
||||||
|
for current fee information.
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm">
|
||||||
|
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||||
|
<span>What happens after my application is approved?</span>
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</summary>
|
||||||
|
<div class="px-6 pb-6 text-gray-mid leading-relaxed">
|
||||||
|
<p>Our adoption team will reach out to coordinate meeting the pet. They will work with both you and the foster family to find a time and place that works for everyone.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm">
|
||||||
|
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||||
|
<span>Have more questions?</span>
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</summary>
|
||||||
|
<div class="px-6 pb-6 text-gray-mid leading-relaxed">
|
||||||
|
<p>
|
||||||
|
Contact us
|
||||||
|
{#if orgEmail}
|
||||||
|
at <a href="mailto:{orgEmail}" class="font-semibold text-teal-brand hover:text-teal-dark underline">{orgEmail}</a>
|
||||||
|
{/if}
|
||||||
|
and we will be happy to answer any questions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
{#if data.orgConfig.applications.adoptionEnabled}
|
||||||
|
<section class="bg-teal-brand py-16 text-center text-white">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
<h2 class="text-3xl font-bold">Ready to Apply?</h2>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
Start the process today and take the first step toward welcoming a rescue pet into your family.
|
||||||
|
</p>
|
||||||
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
|
||||||
|
<a href="/pets" class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
Browse Available Pets
|
||||||
|
</a>
|
||||||
|
<a href="/apply/adopt" class="inline-block rounded-lg border-2 border-white px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-white hover:text-teal-brand">
|
||||||
|
Submit an Application
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
const blocks = await getPageBlocks('become-a-foster');
|
||||||
|
return { ...parentData, blocks };
|
||||||
|
};
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { data } = $props();
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
const orgEmail = $derived(data.orgConfig.orgInfo.email);
|
||||||
|
const fosterEnabled = $derived(data.orgConfig.applications.fosterEnabled);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Become a Foster | {orgName}</title>
|
||||||
|
<meta name="description" content="Learn about fostering a pet with {orgName}. We provide supplies and vetting — you provide the love." />
|
||||||
|
</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">Become a Foster</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">Open your heart and home to a pet in need.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Intro -->
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-3xl px-4">
|
||||||
|
<p class="text-lg leading-relaxed text-gray-mid">
|
||||||
|
Have you ever thought about fostering a pet? All of our animals reside in foster homes so they can have a normal life while awaiting a forever family. Fostering is the backbone of what we do, and we are always in need of caring individuals willing to open their homes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- What does fostering entail? -->
|
||||||
|
<section class="bg-white py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<div class="mx-auto max-w-4xl">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-brand text-center">What Does Fostering Entail?</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
<div class="mt-8 space-y-4 text-lg leading-relaxed text-gray-mid">
|
||||||
|
<p>
|
||||||
|
Fostering means taking in a pet and providing them with a safe, loving environment while they wait for their forever home. You are giving them the gift of a normal home life.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{orgName} provides all necessary supplies including food, crates, leashes, and toys. All vetting is paid for by the rescue, including vaccinations, spay/neuter, and any medical treatment needed.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
We also need temporary fosters! Whether you can commit for a few weeks or a few months, every bit of help matters.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Foster Fail -->
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<div class="mx-auto max-w-4xl">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-brand text-center">What If I Want to Adopt My Foster Pet?</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
<div class="mt-8 space-y-4 text-lg leading-relaxed text-gray-mid">
|
||||||
|
<p>
|
||||||
|
We completely understand that you may fall in love with your foster pet — it happens more often than you might think! Foster families always get first consideration for adopting the animal in their care.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As a foster, you also play an important role in helping choose the right adopter for your foster pet. Your input is invaluable in making sure each animal ends up in the best possible home.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="bg-teal-brand py-16 text-center text-white">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
<h2 class="text-3xl font-bold">Ready to Foster?</h2>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
Fill out our foster application or reach out with any questions.
|
||||||
|
</p>
|
||||||
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
|
||||||
|
{#if fosterEnabled}
|
||||||
|
<a href="/apply/foster" class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
Apply to Foster
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if orgEmail}
|
||||||
|
<a href="mailto:{orgEmail}" class="inline-block rounded-lg border-2 border-white px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-white hover:text-teal-brand">
|
||||||
|
Email Us
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import type { Actions, PageServerLoad } from './$types';
|
||||||
|
import { fail } from '@sveltejs/kit';
|
||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
|
||||||
|
const FOSTER_PASSWORD = process.env.FOSTER_RESOURCES_PASSWORD ?? '';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ cookies, parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
|
||||||
|
// If no password is configured, show content freely
|
||||||
|
const passwordRequired = FOSTER_PASSWORD.length > 0;
|
||||||
|
const authed = !passwordRequired || cookies.get('foster_resources_auth') === 'true';
|
||||||
|
|
||||||
|
let blocks = {};
|
||||||
|
if (authed) {
|
||||||
|
blocks = await getPageBlocks('foster-resources');
|
||||||
|
}
|
||||||
|
|
||||||
|
return { ...parentData, authed, passwordRequired, blocks };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const actions: Actions = {
|
||||||
|
default: async ({ request, cookies }) => {
|
||||||
|
const data = await request.formData();
|
||||||
|
const password = data.get('password')?.toString();
|
||||||
|
|
||||||
|
if (!FOSTER_PASSWORD || password !== FOSTER_PASSWORD) {
|
||||||
|
return fail(401, { error: 'Incorrect password' });
|
||||||
|
}
|
||||||
|
|
||||||
|
cookies.set('foster_resources_auth', 'true', {
|
||||||
|
path: '/foster-resources',
|
||||||
|
httpOnly: true,
|
||||||
|
secure: true,
|
||||||
|
sameSite: 'lax',
|
||||||
|
maxAge: 60 * 60 * 24 * 30 // 30 days
|
||||||
|
});
|
||||||
|
|
||||||
|
return { success: true };
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { enhance } from '$app/forms';
|
||||||
|
let { data, form } = $props();
|
||||||
|
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
type Blocks = Record<string, string>;
|
||||||
|
const blocks = $derived(data.blocks as Blocks);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Foster Resources | {orgName}</title>
|
||||||
|
<meta name="description" content="Resources and documents for {orgName} foster families." />
|
||||||
|
</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">Foster Resources</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">Resources and documents for our foster families.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
{#if !data.authed && !form?.success}
|
||||||
|
<!-- Password Gate -->
|
||||||
|
<div class="mx-auto max-w-md rounded-xl border border-gray-soft bg-white p-8 shadow-sm">
|
||||||
|
<h2 class="text-xl font-bold text-gray-brand text-center">This page is password-protected</h2>
|
||||||
|
<p class="mt-2 text-center text-gray-mid text-sm">Enter the foster resources password to view this content.</p>
|
||||||
|
|
||||||
|
{#if form?.error}
|
||||||
|
<div class="mt-4 rounded-lg bg-red-50 p-3 text-sm text-red-700">{form.error}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<form method="POST" use:enhance class="mt-6">
|
||||||
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
required
|
||||||
|
class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 outline-none"
|
||||||
|
/>
|
||||||
|
<button type="submit" class="mt-4 w-full rounded-lg bg-teal-brand px-6 py-2.5 font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
Enter
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- Resources Content -->
|
||||||
|
<div class="space-y-8">
|
||||||
|
{#if blocks && Object.keys(blocks).length > 0}
|
||||||
|
{#each Object.entries(blocks) as [key, content]}
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-brand capitalize">{key.replace(/-/g, ' ')}</h2>
|
||||||
|
<div class="mt-2 h-1 w-12 rounded bg-teal-brand"></div>
|
||||||
|
<div class="mt-4 prose prose-gray max-w-none text-gray-mid">{@html content}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<div class="rounded-xl border border-gray-soft bg-white p-8 text-center">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="text-lg font-semibold text-gray-brand">Resources Coming Soon</h3>
|
||||||
|
<p class="mt-2 text-gray-mid">Foster resource documents will be published here. Contact us for current resources.</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
const blocks = await getPageBlocks('how-to-help');
|
||||||
|
return { ...parentData, blocks };
|
||||||
|
};
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { data } = $props();
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
const orgEmail = $derived(data.orgConfig.orgInfo.email);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>How to Help | {orgName}</title>
|
||||||
|
<meta name="description" content="Discover the many ways you can help {orgName} — adopt, foster, volunteer, donate, or become a sponsor." />
|
||||||
|
</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">Make a Difference</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
There are so many ways to support our rescue pets on their journey home.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<!-- Adopt -->
|
||||||
|
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||||
|
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||||
|
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-xl font-bold text-white">Adopt</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col p-6">
|
||||||
|
<p class="flex-1 text-gray-mid">
|
||||||
|
Give a rescue pet their forever home. Our adoption process includes an application, meet-and-greet, and a trial period to ensure a great match. All pets come fully vetted, spayed/neutered, and microchipped.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6 flex flex-wrap gap-3">
|
||||||
|
<a href="/pets" class="rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
View Available Pets
|
||||||
|
</a>
|
||||||
|
{#if data.orgConfig.applications.adoptionEnabled}
|
||||||
|
<a href="/apply/adopt" class="rounded-lg border-2 border-teal-brand px-5 py-2.5 text-sm font-semibold text-teal-brand transition hover:bg-teal-light">
|
||||||
|
Apply to Adopt
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Foster -->
|
||||||
|
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||||
|
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||||
|
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-xl font-bold text-white">Foster</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col p-6">
|
||||||
|
<p class="flex-1 text-gray-mid">
|
||||||
|
Open your home and heart to a pet in need. Fostering saves lives by making room to take in more pets. We provide all supplies, food, and medical care. You provide the love.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6">
|
||||||
|
{#if data.orgConfig.applications.fosterEnabled}
|
||||||
|
<a href="/apply/foster" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
Apply to Foster
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<a href="/become-a-foster" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
Learn More
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Volunteer -->
|
||||||
|
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||||
|
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||||
|
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-xl font-bold text-white">Volunteer</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col p-6">
|
||||||
|
<p class="flex-1 text-gray-mid">
|
||||||
|
Lend your time and talents to help our rescue. We need help with events, transport, photography, social media, and more. Every skill set has a place here.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6">
|
||||||
|
{#if data.orgConfig.applications.volunteerEnabled}
|
||||||
|
<a href="/apply/volunteer" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
Apply to Volunteer
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<a href="/volunteer" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
Learn More
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Donate -->
|
||||||
|
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||||
|
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||||
|
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-xl font-bold text-white">Donate</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col p-6">
|
||||||
|
<p class="flex-1 text-gray-mid">
|
||||||
|
Your financial support directly funds veterinary care, food, and supplies for our pets. Every dollar makes a difference.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6">
|
||||||
|
<a href="/donate" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
Donate Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sponsor -->
|
||||||
|
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||||
|
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||||
|
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-xl font-bold text-white">Sponsor</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col p-6">
|
||||||
|
<p class="flex-1 text-gray-mid">
|
||||||
|
Become a business sponsor and support our mission while gaining visibility in the community. We offer multiple sponsorship tiers.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6 flex flex-wrap gap-3">
|
||||||
|
<a href="/sponsors" class="rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||||
|
View Sponsors
|
||||||
|
</a>
|
||||||
|
{#if orgEmail}
|
||||||
|
<a href="mailto:{orgEmail}?subject=Sponsorship%20Inquiry" class="rounded-lg border-2 border-teal-brand px-5 py-2.5 text-sm font-semibold text-teal-brand transition hover:bg-teal-light">
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Bottom CTA -->
|
||||||
|
<section class="bg-teal-brand py-12 text-center text-white">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
<h2 class="text-2xl font-bold">Not Sure Where to Start?</h2>
|
||||||
|
<p class="mt-3 text-teal-light/90">Reach out and we'll help you find the best way to get involved.</p>
|
||||||
|
{#if orgEmail}
|
||||||
|
<a href="mailto:{orgEmail}" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
Email Us
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<a href="/contact" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
const blocks = await getPageBlocks('volunteer');
|
||||||
|
return { ...parentData, blocks };
|
||||||
|
};
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { data } = $props();
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Volunteer Opportunities | {orgName}</title>
|
||||||
|
<meta name="description" content="Volunteer with {orgName}. Help with events, transport, photography, social media, and more." />
|
||||||
|
</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">Volunteer Opportunities</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">Every skill set has a place here. Find out how you can help.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Intro -->
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-3xl px-4">
|
||||||
|
<p class="text-lg leading-relaxed text-gray-mid">
|
||||||
|
{orgName} runs entirely on volunteers, and we could not do what we do without the incredible people who donate their time and talents. Whether you have a few hours a month or want to get deeply involved, there is a role for you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Volunteer Roles -->
|
||||||
|
<section class="bg-white py-16">
|
||||||
|
<div class="mx-auto max-w-6xl px-4">
|
||||||
|
<h2 class="text-center text-3xl font-bold text-gray-brand">Ways to Volunteer</h2>
|
||||||
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{#each [
|
||||||
|
{ icon: 'calendar', title: 'Event Help', desc: 'Help plan and run adoption events, fundraisers, and community outreach activities.' },
|
||||||
|
{ icon: 'truck', title: 'Transport', desc: 'Drive pets to vet appointments, foster homes, or adoption events. Reliable transport volunteers are critical.' },
|
||||||
|
{ icon: 'camera', title: 'Photography', desc: 'Great photos help animals find homes faster. Volunteer for adoption photos, event shots, or social content.' },
|
||||||
|
{ icon: 'chat', title: 'Social Media', desc: 'Help share stories, create engaging posts, and grow our online community.' },
|
||||||
|
{ icon: 'doc', title: 'Administrative Support', desc: 'Assist with data entry, application processing, email communication, and other behind-the-scenes tasks.' },
|
||||||
|
{ icon: 'star', title: 'Fundraising & Mentoring', desc: 'Organize fundraising campaigns or mentor new foster families as they learn the ropes.' }
|
||||||
|
] as role}
|
||||||
|
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||||
|
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light mb-4">
|
||||||
|
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
{#if role.icon === 'calendar'}
|
||||||
|
<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" />
|
||||||
|
{:else if role.icon === 'truck'}
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 17h8M8 17v4m8-4v4m-8-4H5a2 2 0 01-2-2V7a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3" />
|
||||||
|
{:else if role.icon === 'camera'}
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||||
|
{:else if role.icon === 'chat'}
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||||
|
{:else if role.icon === 'doc'}
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
{:else}
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||||
|
{/if}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-brand">{role.title}</h3>
|
||||||
|
<p class="mt-3 text-gray-mid">{role.desc}</p>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
{#if data.orgConfig.applications.volunteerEnabled}
|
||||||
|
<section class="bg-teal-brand py-16 text-center text-white">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
<h2 class="text-3xl font-bold">Ready to Get Involved?</h2>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
Fill out our volunteer application and we will find the perfect role for you.
|
||||||
|
</p>
|
||||||
|
<a href="/apply/volunteer" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
Apply to Volunteer
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { getPageBlocks } from '$lib/server/content';
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const parentData = await parent();
|
||||||
|
const blocks = await getPageBlocks('why-adopt');
|
||||||
|
return { ...parentData, blocks };
|
||||||
|
};
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { data } = $props();
|
||||||
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
||||||
|
type Blocks = Record<string, Record<string, string>>;
|
||||||
|
const blocks = $derived(data.blocks as Blocks);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Why Adopt | {orgName}</title>
|
||||||
|
<meta name="description" content="Discover why adopting a rescue pet is one of the most rewarding decisions you can make." />
|
||||||
|
</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 ?? 'Why Adopt?'}</h1>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">
|
||||||
|
{blocks?.intro?.text ?? 'Adopting a rescue pet is one of the most rewarding decisions you can make.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bg-warm-bg py-16">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
{#if blocks?.main?.text}
|
||||||
|
<div class="prose prose-gray max-w-none text-gray-mid">{@html blocks.main.text}</div>
|
||||||
|
{:else}
|
||||||
|
<div class="space-y-8">
|
||||||
|
{#each [
|
||||||
|
{ title: 'Save a Life', desc: 'When you adopt from a rescue, you are giving a pet a second chance they might not otherwise have. Every adoption makes room for another animal in need.' },
|
||||||
|
{ title: 'Fully Vetted Pets', desc: 'All of our animals come spayed or neutered, vaccinated, and microchipped. We cover all veterinary costs so you can welcome a healthy pet into your home.' },
|
||||||
|
{ title: 'Know What You Are Getting', desc: 'Foster families observe our pets in a home environment, so we can tell you about their personality, habits, and compatibility with other animals and children.' },
|
||||||
|
{ title: 'Ongoing Support', desc: 'Adoption is not just a transaction. We are here to help you with questions and guidance throughout your pet\'s life.' },
|
||||||
|
{ title: 'Feel Good About It', desc: 'Adoption means you are not supporting puppy mills or irresponsible breeding. You are changing the world, one pet at a time.' }
|
||||||
|
] as reason}
|
||||||
|
<div class="flex gap-6 items-start">
|
||||||
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-teal-light flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-brand">{reason.title}</h3>
|
||||||
|
<p class="mt-2 text-gray-mid">{reason.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
{#if data.orgConfig.applications.adoptionEnabled}
|
||||||
|
<section class="bg-teal-brand py-16 text-center text-white">
|
||||||
|
<div class="mx-auto max-w-4xl px-4">
|
||||||
|
<h2 class="text-3xl font-bold">Ready to Meet Your New Best Friend?</h2>
|
||||||
|
<p class="mt-4 text-lg text-teal-light/90">Browse our available pets and start your adoption journey today.</p>
|
||||||
|
<a href="/pets" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||||
|
Browse Available Pets
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
Reference in New Issue
Block a user