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,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