Hilal Sever Architektur ist ein Büro für Architektur und Innenarchitektur mit Sitz in Üsküdar, Istanbul. Für ein Büro, das Wohn-, Büro- und Gewerbeprojekte umsetzt, ist die Website im Kern ein Portfolio: Besucher möchten zuerst die Arbeiten sehen, dann verstehen, welche Leistung zu ihnen passt, und schließlich unkompliziert Kontakt aufnehmen. Ziel des Projekts war ein visuell starker Auftritt, kombiniert mit einem Verwaltungspanel, über das das Büro Projekte, Leistungen, Blogbeiträge und Kontaktdaten ohne Programmierung pflegen kann.

Ausgangslage und Anforderungen

Als Designsprache wurde ein lizenziertes HTML-Theme für Innenarchitektur (Intrio) gewählt. Das Theme war jedoch eine statische Vorlage auf Basis von Bootstrap, jQuery und zahlreichen Plugins: Das mobile Menü baute das DOM neu auf, der Sticky-Header fügte eine Kopie seiner selbst in die Seite ein, und sämtliche Inhalte waren fest in HTML-Dateien hinterlegt. Hinzu kamen E-Mail-Adressen einer anderen Firma, Platzhaltertexte, eine fehlende H1 auf der Blog-Detailseite und ein fehlerhafter Schriftimport. Das Theme wurde daher nicht eins zu eins übertragen; seine gestalterischen Entscheidungen wurden übernommen und die Komponenten in React und Tailwind CSS neu entwickelt, alle Inhalte wanderten in die Datenbank.

Lösung und Umfang

Startseite

Die Startseite besteht aus zehn Bereichen: Hero-Slider im Vollbild, Einführung „Über uns“, Kennzahlen, Leistungskarussell, Kundenstimmen, Projektraster, vierstufiger Arbeitsprozess, Video-Call-to-Action, häufige Fragen und Blogvorschau. Reihenfolge und Sichtbarkeit der Bereiche werden im Panel gesteuert, sodass das Büro ohne neues Release entscheiden kann, was im Vordergrund steht.

Projektportfolio

Das Projektmodell orientiert sich an der Arbeitsweise eines Architekturbüros. Zu jedem Projekt werden Kategorie (Wohnen, Büro, Gewerbe), Kundenname, Budgetangabe, Fläche in Quadratmetern, Start- und Fertigstellungsdatum, erbrachte Leistungen und ein Titelbild gespeichert. Die Detailseite zeigt ein großes Titelbild, eine Tabelle mit Projektdaten, eine Galerie mit Vollbildansicht und ähnliche Projekte. Bildtitel und Alternativtexte der Galerie werden je Sprache separat gepflegt.

Leistungen, Blog und FAQ

• Leistungen: Architekturentwurf, Innenarchitektur, Projektmanagement, 3D-Visualisierung, Beratung sowie Ausführung und Renovierung haben jeweils eine eigene Detailseite mit eigenem SEO-Titel und eigener Beschreibung.
• Blog: Beitragsseiten enthalten ein Kommentarformular; Kommentare erscheinen erst nach Freigabe durch die Administration.
• FAQ: Die Fragen erscheinen auf einer eigenen Seite und als Akkordeon auf der Startseite.

Kontakt und rechtliche Seiten

Die Kontaktseite zeigt Büroadresse, Telefon, E-Mail, Öffnungszeiten und eine eingebettete Karte. Im Formular wählen Besucher die Projektart aus, sodass jede Anfrage mit dem passenden Kontext eingeht. Beim Absenden werden Pflichtfelder geprüft, die Einwilligung nach türkischem Datenschutzrecht (KVKK) abgefragt und ein verstecktes Honeypot-Feld gegen Bots eingesetzt. Nachrichten werden mit Status und interner Notiz in der Datenbank gespeichert. KVKK-Hinweis, Datenschutzerklärung, Cookie-Richtlinie und Nutzungsbedingungen sind eigene Seiten; die Cookie-Einwilligung wird in der Oberfläche verwaltet.

Verwaltungspanel

Das Panel deckt alle sichtbaren Bereiche der Website ab:

• Inhalte: Projekte und Projektbilder, Leistungen, Blogbeiträge und Kommentare, FAQ, Kundenstimmen, Slider, Galerie und individuelle Seiten.
• Seitenstruktur: Menüs und Navigation, Aufbau der Startseite, Website-Einstellungen (Kontaktdaten, Markentexte, Logo, SEO-Einstellungen, Farben und Design-Tokens).
• Kommunikation: eingehende Nachrichten, E-Mail-Vorlagen, Mail-Einstellungen und Benachrichtigungen.
• Messung: Ansichten für GA4, Search Console und Google Ads sowie Marketing- und Integrationseinstellungen.
• Administration: Benutzer und Rollen, Audit-Protokoll, Medienspeicher, Cache-Leerung und Datenbankwerkzeuge.

Technische Architektur

Das System besteht aus drei Anwendungen: der öffentlichen Website, serverseitig gerendert mit Next.js 16 und React 19, einem separaten Next.js-Verwaltungspanel und einer Fastify-API auf Bun. Die Datenschicht basiert auf MySQL mit Drizzle ORM. Projekte, Leistungen und Bilder sind in eine Basistabelle und eine sprachspezifische Übersetzungstabelle getrennt, sodass jede Sprache eigene Slugs und Meta-Felder hat. Die API ist in öffentliche und administrative Endpunkte aufgeteilt; letztere sind durch JWT-Authentifizierung und Rollenprüfung geschützt.

Die Website ist derzeit auf Türkisch und Englisch online. Aktive Sprachen sind nicht im Code, sondern in den Website-Einstellungen definiert, und auch die Oberflächentexte kommen aus der Datenbank. Markenname, Logo und Farben werden ebenso aus den Einstellungen gelesen. Wird die Codebasis für ein anderes Unternehmen verwendet, bleibt so keine Spur der bisherigen Marke sichtbar.

SEO und Sichtbarkeit in KI-Suchen

• Dynamische Sitemap mit Sprachalternativen (hreflang)
• Strukturierte JSON-LD-Daten für Organisation, lokales Unternehmen, Website, Projekte, Artikel, FAQ und Breadcrumbs
• robots.txt mit im Panel gepflegten Regeln für KI-Crawler sowie eine dynamische llms.txt
• IndexNow-Unterstützung, um Suchmaschinen schnell über neue Inhalte zu informieren

Statt der Hunderten jQuery-Animationsauslöser des Themes wurde die Bewegung mit einem schlanken Framer-Motion-Set neu aufgebaut; ungenutzte Icon-Fonts und Plugins wurden nicht übernommen.

Integrationen

Für den Standort ist Google Maps eingebettet, für die Messung werden GA4 und Search Console angebunden. Das Panel enthält außerdem eine bearbeitbare KI-Prompt-Bibliothek für GEO-Inhalte. Die Infrastruktur zur Anbindung von Social-Media-Konten für Facebook, Instagram, X, TikTok und Pinterest ist vorhanden und steht im Panel zur Verfügung, sobald Konten verbunden werden.

Ergebnis

hilalsever.com ist heute auf Türkisch und Englisch online. Die Anwendungen laufen als PM2-Prozesse hinter Nginx auf einem VPS. Schließt das Büro ein neues Projekt ab, genügt es, die Fotos hochzuladen und die Projektdaten einzutragen; Detailseite, Galerie, Sitemap und strukturierte Daten werden automatisch aktualisiert.