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:
@@ -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>
|
||||
Reference in New Issue
Block a user