John Boland 0c27cd93c4 Initial draft of Simple Heart site
Simple Next.js marketing site for placement.savethedogs.io — home, about,
privacy, terms. 501(c)(3) validation page for Twilio/ads/social.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 12:42:38 -05:00

84 lines
3.5 KiB
TypeScript

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const inter = Inter({
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
display: "swap",
});
export const metadata: Metadata = {
metadataBase: new URL("https://placement.savethedogs.io"),
title: {
default: "The Simple Heart Initiative",
template: "%s | The Simple Heart Initiative",
},
description:
"The Simple Heart Initiative is a 501(c)(3) nonprofit building a mass movement of compassion — through open rescue, investigation, and storytelling.",
openGraph: {
title: "The Simple Heart Initiative",
description:
"Lessons in compassion, taught by the animals. A 501(c)(3) nonprofit building a mass movement for open rescue.",
type: "website",
siteName: "The Simple Heart Initiative",
locale: "en_US",
},
};
function Header() {
return (
<header className="border-b border-[var(--color-border)] bg-[var(--color-surface)]">
<nav className="max-w-5xl mx-auto px-6 py-5 flex items-center justify-between">
<Link href="/" className="text-[var(--color-primary-dark)] font-semibold tracking-tight text-lg">
The Simple Heart
</Link>
<ul className="flex gap-6 text-sm text-[var(--color-text)]">
<li><Link href="/" className="hover:text-[var(--color-accent)]">Home</Link></li>
<li><Link href="/about" className="hover:text-[var(--color-accent)]">About</Link></li>
<li><a href="https://blog.simpleheart.org" className="hover:text-[var(--color-accent)]">Blog</a></li>
<li><a href="https://savethedogs.io" className="hover:text-[var(--color-accent)]">Save the Dogs</a></li>
</ul>
</nav>
</header>
);
}
function Footer() {
return (
<footer className="border-t border-[var(--color-border)] bg-[var(--color-surface-muted)] mt-24">
<div className="max-w-5xl mx-auto px-6 py-10 text-sm text-[var(--color-text-secondary)]">
<div className="flex flex-wrap gap-6 justify-between">
<div>
<div className="font-semibold text-[var(--color-primary-dark)] mb-1">The Simple Heart Initiative</div>
<div>A 501(c)(3) public charity EIN 88-2248389</div>
<div>Registered in Santa Cruz, California</div>
<div className="mt-2"><a href="mailto:info@simpleheart.org" className="underline">info@simpleheart.org</a></div>
</div>
<div className="flex flex-col gap-1">
<Link href="/about" className="hover:text-[var(--color-accent)]">About</Link>
<a href="https://blog.simpleheart.org" className="hover:text-[var(--color-accent)]">Blog</a>
<a href="https://savethedogs.io" className="hover:text-[var(--color-accent)]">Save the Dogs</a>
<Link href="/privacy" className="hover:text-[var(--color-accent)]">Privacy Policy</Link>
<Link href="/terms" className="hover:text-[var(--color-accent)]">Terms of Service</Link>
</div>
</div>
<div className="mt-8 text-xs">© {new Date().getFullYear()} The Simple Heart Initiative. All rights reserved.</div>
</div>
</footer>
);
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={inter.className}>
<body className="antialiased min-h-screen flex flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</body>
</html>
);
}