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