Hundeschule Hopen Hundeschule Hopen
Trust before traffic. How a dog school wins online.Vertrauen vor Reichweite. Wie eine Hundeschule online gewinnt.
Brand-first website for a professional dog training school. Static React frontend for performance and consistency, WordPress REST for the client's blog — no CMS complexity, no developer dependency for content updates. Marken-zuerst-Website für eine Hundeschule. Statisches React-Frontend für Performance und Konsistenz, WordPress REST für das Blog-Team — kein CMS-Overhead.
// challenge // ausgangslage
A local dog training school's site looked amateur. Clients couldn't find what they needed to trust the trainer before booking. The team wanted to keep blogging independently — without involving a developer every time. Die Website einer Hundeschule wirkte laienhaft. Kunden fanden nicht die Informationen, die sie zum Vertrauen brauchten. Das Team wollte selbst bloggen — ohne bei jedem Post einen Entwickler einzuschalten.
// approach // vorgehen
First: understand how dog owners choose a trainer. Trust signal research revealed the key factors — certifications, methodology, real photos, clear course structures. That became the information architecture: trust → method → courses → booking. For the CMS dilemma: React static frontend for brand control and speed, WordPress running headlessly as the blog backend. The school's team keeps editing the CMS they know. Visitors get a fast, consistent experience. Staging password gate let the client review before public launch.
Erst: verstehen, wie Hundebesitzer einen Trainer auswählen. Vertrauenssignale: Zertifizierungen, Trainingsmethodik, echte Fotos, klare Kursstruktur. Für das CMS-Dilemma: React-Frontend für Marke und Speed, WordPress headless für das Blog-Team. Staging-Gate für Pre-Launch-Freigabe.
// code // code
WordPress REST fetch with local fallback WordPress REST Fetch mit lokalem Fallback
typescript// src/lib/blog.ts
export async function getPosts(): Promise<Post[]> {
try {
const res = await fetch(
`${WP_BASE}/wp-json/wp/v2/posts?per_page=6&_fields=id,title,slug,excerpt,date`,
{ next: { revalidate: 3600 } }
);
if (!res.ok) throw new Error(`WP API ${res.status}`);
return (await res.json()).map(toPost);
} catch {
// WordPress is down? Site never breaks.
// Bundled static posts serve as silent fallback.
return localPosts;
}
}The client edits WordPress like they always have. If the API is unreachable, bundled static posts serve silently — visitors never see an error. Der Kunde bearbeitet WordPress wie gewohnt. Wenn die API nicht erreichbar ist, dienen gebündelte statische Posts als stiller Fallback.
Trust-first information architecture Vertrauens-zuerst Informationsarchitektur
typescript// src/router.tsx — route order mirrors the trust funnel
// Visitors move: trust → method → courses → booking
const routes = [
{ path: '/', element: <Home />, // Hero + trust signals
{ path: '/methode', element: <Methode />, // Training philosophy
{ path: '/kurse', element: <Kurse />, // Course catalogue
{ path: '/kontakt', element: <Kontakt />, // Booking form
{ path: '/blog', element: <Blog />, // Blog (WP REST)
{ path: '/blog/:slug',element: <BlogPost />,
];Route order is not arbitrary — it follows the decision journey a dog owner takes before they call. Each page earns the right to the next. Die Reihenfolge der Routen folgt der Entscheidungsreise, die ein Hundebesitzer durchläuft, bevor er anruft. Jede Seite verdient das Recht auf die nächste.
// outcome // ergebnis
Fast, mobile-first site with a booking-optimized information flow, WordPress-powered blog with local fallback content, per-route SEO meta, and a staging gate for client approval. Schnelle, mobile-first Website mit buchungsoptimiertem Informationsfluss, WordPress-Blog mit lokalem Fallback, SEO-ready Routen-Meta und Staging-Gate.
// brand // marke
Audience
Zielgruppe
Local dog owners in the Weser-Ems region, 25–55. They choose a trainer primarily on trust and methodology — not price. Rely heavily on first impressions from the website before calling.
Hundebesitzer in der Weser-Ems-Region, 25–55 Jahre. Wählen einen Trainer vor allem nach Vertrauen und Methodik — nicht nach Preis. Verlassen sich stark auf den ersten Eindruck der Website.
Positioning
Positionierung
Trust before traffic. The site builds credibility — certifications, real photos, clear methodology — before it asks for anything. The booking inquiry is the reward for the site doing its job.
Vertrauen vor Reichweite. Die Website baut Glaubwürdigkeit auf — Zertifizierungen, echte Fotos, klare Methodik — bevor sie etwas fordert. Die Buchungsanfrage ist die Belohnung.
Tone of Voice
Tonalität
Warm, professional, and knowledgeable without being academic. Speaks to dog owners, not dog professionals. Confident about the method, never dismissive of the competition.
Warm, professionell und kompetent — ohne akademisch zu wirken. Spricht Hundebesitzer an, nicht Fachkollegen. Selbstsicher in der Methode, nie abwertend gegenüber anderen.
Visual Direction
Visual Direction
Bright, clean, and mobile-first. Real photography over stock. Approachable typography. Generous whitespace. Color palette chosen to signal calm authority, not urgency.
Hell, klar und Mobile-First. Echte Fotos statt Stock. Zugängliche Typografie. Großzügiges Whitespace. Farbpalette für ruhige Autorität, nicht Dringlichkeit.
// stack
- React
- Vite
- Tailwind CSS
- Framer Motion
- WordPress REST