Hilal Sever Architecture is an architecture and interior design practice based in Üsküdar, Istanbul. For an office working on residential, office and commercial projects, the website is essentially a portfolio: visitors want to see the work first, then understand which service fits their needs, and finally get in touch without friction. The goal of this project was to deliver a visually strong showcase together with an admin panel that lets the office update projects, services, blog posts and contact details without touching code.

Context and requirements

A licensed interior design HTML theme (Intrio) was chosen as the design language. The theme, however, was a static template built on Bootstrap, jQuery and dozens of plugins: the mobile menu rebuilt the DOM, the sticky header injected a copy of itself into the page, and all content was hard-coded in HTML files. It also contained email addresses left over from another company, placeholder copy, a missing H1 on the blog detail page and a broken font import. So the theme was not converted line by line; its design decisions were extracted and the components were rebuilt in React and Tailwind CSS, with all content moved into the database.

Solution and scope

Home page

The home page consists of ten sections: a full-screen hero slider, an about intro, counters, a services carousel, client testimonials, a project grid, a four-step process, a video call to action, FAQs and a blog preview. The order and visibility of these sections are managed in the panel, so the office can decide what to highlight without a new release.

Project portfolio

The project model was designed around how an architecture office works. Each project stores a category (residential, office, commercial), client name, budget label, floor area in square metres, start and completion dates, services delivered and a cover image. The detail page shows a large cover, a project facts table, a gallery that opens full screen and related projects. Gallery image titles and alt texts are entered separately for each language.

Services, blog and FAQ

• Services: Architectural Design, Interior Architecture, Project Management, 3D Visualisation, Consulting, and Implementation and Renovation each have their own detail page with dedicated SEO title and description.
• Blog: Article pages include a comment form; comments go live only after admin approval.
• FAQ: Questions appear on a dedicated page and as an accordion on the home page.

Contact and legal pages

The contact page shows the office address, phone, email, opening hours and an embedded map. The form asks visitors to select a project type, so every enquiry arrives with the right context. Submissions are validated for required fields, require consent under Turkish data protection law (KVKK) and include a hidden honeypot field against bots. Messages are stored in the database with a status and an internal admin note. The KVKK notice, privacy policy, cookie policy and terms of use are separate pages, and cookie consent is handled in the interface.

Admin panel

The panel covers every visible part of the site:

• Content: projects and project images, services, blog posts and comments, FAQs, testimonials, slider, gallery and custom pages.
• Site structure: menus and navigation, home page section layout, site settings (contact details, brand copy, logo, SEO settings, colour and design tokens).
• Communication: incoming messages, email templates, mail settings and notifications.
• Measurement: GA4, Search Console and Google Ads screens, plus marketing and integration settings.
• Administration: users and roles, audit log, media storage, cache clearing and database tools.

Technical architecture

The system consists of three applications: the public site, server-rendered with Next.js 16 and React 19; a separate Next.js admin panel; and a Fastify API running on Bun. The data layer uses MySQL with Drizzle ORM. Projects, services and images are split into a base table and a per-language translation table, so each language has its own slug and meta fields. The API is divided into public and admin endpoints; admin endpoints sit behind JWT authentication and role checks.

The site is currently live in Turkish and English. Active languages are defined in site settings rather than in code, and interface strings are also served from the database. Brand name, logo and colours are read from settings in the same way, so if the codebase is reused for another company, no trace of the previous brand remains on screen.

SEO and AI visibility

• Dynamic sitemap with language alternates (hreflang)
• JSON-LD structured data for organisation, local business, website, projects, articles, FAQ and breadcrumbs
• robots.txt with AI crawler rules managed in the panel, plus a dynamic llms.txt
• IndexNow support to notify search engines of new content quickly

Instead of the hundreds of jQuery animation triggers in the theme, motion was rebuilt as a lean Framer Motion set; unused icon fonts and plugins were left out of the project.

Integrations

Google Maps is embedded for the location, and GA4 and Search Console connections are used for measurement. The panel also includes an editable AI prompt library for GEO content work. Social account connection infrastructure for Facebook, Instagram, X, TikTok and Pinterest is in place and becomes usable in the panel once accounts are connected.

Outcome

hilalsever.com is live today in Turkish and English. The applications run as PM2 processes behind Nginx on a VPS. When the office completes a new project, it only needs to upload the photos and enter the project details; the detail page, gallery, sitemap and structured data update automatically.