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

87 lines
4.2 KiB
TypeScript

import Link from "next/link";
export default function Home() {
return (
<div>
<section className="max-w-4xl mx-auto px-6 pt-20 pb-16 text-center">
<p className="text-sm uppercase tracking-[0.2em] text-[var(--color-accent)] mb-4">
A 501(c)(3) Nonprofit
</p>
<h1 className="text-5xl md:text-6xl font-semibold tracking-tight text-[var(--color-primary-dark)] leading-tight">
Lessons in compassion,<br />taught by the animals.
</h1>
<p className="mt-6 text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto leading-relaxed">
The Simple Heart Initiative builds a mass movement for open rescue
through investigation, storytelling, and direct action on behalf of animals
who cannot speak for themselves.
</p>
<div className="mt-10 flex gap-4 justify-center flex-wrap">
<a
href="https://savethedogs.io"
className="inline-block bg-[var(--color-primary-dark)] text-white px-6 py-3 rounded-md font-medium hover:bg-[var(--color-primary)] transition"
>
Save the Dogs Campaign
</a>
<a
href="https://blog.simpleheart.org"
className="inline-block border border-[var(--color-primary-dark)] text-[var(--color-primary-dark)] px-6 py-3 rounded-md font-medium hover:bg-[var(--color-surface-muted)] transition"
>
Read the Blog
</a>
</div>
</section>
<section className="bg-[var(--color-surface-muted)] py-16">
<div className="max-w-4xl mx-auto px-6 grid md:grid-cols-3 gap-10">
<div>
<h3 className="font-semibold text-lg text-[var(--color-primary-dark)] mb-2">Open Rescue</h3>
<p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
Nonviolent action to bring suffering animals to safety out in the open, with a camera rolling,
and with the willingness to answer for it in a court of law.
</p>
</div>
<div>
<h3 className="font-semibold text-lg text-[var(--color-primary-dark)] mb-2">Investigation</h3>
<p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
Documenting the conditions inside factory farms and research facilities so the public can
see what industry works hard to hide.
</p>
</div>
<div>
<h3 className="font-semibold text-lg text-[var(--color-primary-dark)] mb-2">Storytelling</h3>
<p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
Sharing the stories of individual animals and the humans who love them
to build a movement rooted in the simple heart we all share.
</p>
</div>
</div>
</section>
<section className="max-w-4xl mx-auto px-6 py-20">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 className="text-3xl font-semibold text-[var(--color-primary-dark)] tracking-tight">
Save the Dogs at Ridglan Farms
</h2>
<p className="mt-4 text-[var(--color-text-secondary)] leading-relaxed">
On April 19, 2026, hundreds of activists, veterinarians, and faith leaders will gather
in Wisconsin to rescue beagles from one of the largest dog-breeding facilities in the United States.
A judge has already found probable cause of felony animal cruelty. Zero dogs have been freed.
</p>
<Link
href="https://savethedogs.io"
className="inline-block mt-6 text-[var(--color-accent)] font-medium hover:text-[var(--color-accent-hover)]"
>
Learn more & take action
</Link>
</div>
<div className="aspect-[4/3] bg-[var(--color-surface-muted)] rounded-lg border border-[var(--color-border)] flex items-center justify-center text-[var(--color-text-secondary)] text-sm">
{/* Photo placeholder — swap for rescue imagery */}
Photo: beagle rescue
</div>
</div>
</section>
</div>
);
}