feat: add public site components (header, footer, pet card, sponsors, etc.)

2026-03-26 12:03:11 -05:00
parent 7f7d4870d0
commit a30205fa28
7 changed files with 235 additions and 0 deletions
@@ -0,0 +1,72 @@
+<script lang="ts">
+	let { orgName = 'FosterFlow', logoUrl = '' }: {
+		orgName?: string;
+		logoUrl?: string;
+	} = $props();
+
+	let mobileOpen = $state(false);
+
+	const navItems = [
+		{ href: '/pets', label: 'Our Pets' },
+		{ href: '/about', label: 'About' },
+		{ href: '/events', label: 'Events' },
+		{ href: '/happy-tails', label: 'Happy Tails' },
+		{ href: '/how-to-help', label: 'How to Help', children: [
+			{ href: '/become-a-foster', label: 'Become a Foster' },
+			{ href: '/volunteer', label: 'Volunteer' },
+			{ href: '/donate', label: 'Donate' },
+			{ href: '/sponsors', label: 'Sponsors' }
+		]},
+		{ href: '/contact', label: 'Contact' }
+	];
+</script>
+
+<header class="bg-white shadow-sm sticky top-0 z-50">
+	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex items-center justify-between h-16">
+			<a href="/" class="flex items-center gap-2">
+				{#if logoUrl}
+					<img src={logoUrl} alt={orgName} class="h-10 w-auto" />
+				{:else}
+					<span class="text-xl font-bold text-primary">{orgName}</span>
+				{/if}
+			</a>
+
+			<nav class="hidden lg:flex items-center gap-6">
+				{#each navItems as item}
+					{#if item.children}
+						<div class="relative group">
+							<button class="text-gray-700 hover:text-primary transition">{item.label}</button>
+							<div class="absolute top-full left-0 hidden group-hover:block bg-white shadow-lg rounded-lg py-2 min-w-[180px]">
+								{#each item.children as child}
+									<a href={child.href} class="block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary">{child.label}</a>
+								{/each}
+							</div>
+						</div>
+					{:else}
+						<a href={item.href} class="text-gray-700 hover:text-primary transition">{item.label}</a>
+					{/if}
+				{/each}
+				<a href="/donate" class="px-4 py-2 bg-accent text-white rounded-lg hover:bg-accent-dark transition font-medium">Donate</a>
+			</nav>
+
+			<button class="lg:hidden p-2" onclick={() => mobileOpen = !mobileOpen}>
+				<span class="text-2xl">{mobileOpen ? '✕' : '☰'}</span>
+			</button>
+		</div>
+
+		{#if mobileOpen}
+			<nav class="lg:hidden pb-4 border-t">
+				{#each navItems as item}
+					<a href={item.href} class="block py-2 text-gray-700" onclick={() => mobileOpen = false}>{item.label}</a>
+					{#if item.children}
+						{#each item.children as child}
+							<a href={child.href} class="block py-2 pl-4 text-gray-500 text-sm" onclick={() => mobileOpen = false}>{child.label}</a>
+						{/each}
+					{/if}
+				{/each}
+				<a href="/donate" class="block mt-2 px-4 py-2 bg-accent text-white rounded-lg text-center font-medium">Donate</a>
+			</nav>
+		{/if}
+	</div>
+</header>