AXA Social House

AXA Social House: Premium Restaurant and Social Lounge Website

Project Overview

AXA Social House is a premium restaurant, cocktail bar, and social lounge brand in Jakarta that required a digital presence capable of reflecting the sophistication of its physical environment. The objective was to create a high end landing page that communicates the brand identity, presents essential restaurant information, and provides a polished user experience across desktop and mobile devices.

The project was approached as a combination of visual design, frontend architecture, performance engineering, accessibility considerations, and maintainable content presentation. Rather than treating the website as a collection of visually attractive sections, the implementation was structured around a clear design specification to maintain consistency across the entire experience.

The result is a modern restaurant website built with Next.js, React, TypeScript, Tailwind CSS, and Framer Motion, with a strong emphasis on cinematic visual presentation, responsive behavior, structured content, and production oriented frontend architecture.

Project Objective

The primary objective was to develop a premium restaurant landing page that could translate the character of AXA Social House into a digital environment.

The website needed to achieve several goals simultaneously. It had to communicate the restaurant concept clearly, showcase menus and experiences, support reservations, present events and testimonials, provide location information, and maintain a refined visual identity throughout the interface.

A second objective was to establish a technically disciplined foundation in which visual decisions, interaction patterns, component boundaries, and content structures remained consistent with the approved design specification.

Technical Architecture

The website was developed using Next.js 15.5 with the App Router and React Server Components as the primary rendering model.

This architecture was selected because a substantial portion of the website consists of content that can be rendered efficiently on the server, including restaurant information, menus, events, testimonials, and other largely static sections. Interactive behavior was isolated to components that genuinely required browser side state, event handlers, or animation logic.

The application uses TypeScript 5.9 with strict mode to establish stronger compile time guarantees across structured content such as menu data, restaurant information, testimonials, and events.

Tailwind CSS 3.4 provides the core styling system and is complemented by custom CSS variables for greater control over the visual language. Framer Motion 12 manages animation and micro interaction behavior, while next themes provides theme management. lucide react is used for interface icons and Zod provides validation for the reservation form.

Server and Client Component Strategy

One of the most significant architectural considerations was determining which parts of the interface should remain Server Components and which components genuinely required Client Component behavior.

Interactive components such as the navigation system, theme controls, menu interactions, gallery functionality, testimonial interactions, reservation interfaces, animated buttons, and motion driven components were implemented as Client Components.

In contrast, content oriented sections such as the Hero, About, Experience, Events, and Contact sections were kept as Server Components wherever client side behavior was unnecessary.

This separation reduces unnecessary client side JavaScript and preserves the architectural advantages of the Next.js App Router.

A notable implementation detail involved the button variant system. Because the main Button component operates as a Client Component, directly importing utility functionality from that component into Server Components would violate the intended module boundary. The solution was to extract button variant logic into a dedicated utility module so that the same configuration could be consumed safely by both server rendered and client rendered components.

This approach demonstrates an important principle in modern React architecture: component interactivity should be introduced deliberately rather than applied globally.

Design System and User Experience

The visual direction was designed around the characteristics of a premium nightlife and hospitality brand.

Dark and cinematic visual treatments were intentionally emphasized across key areas such as the Hero, Events, and Footer sections. These areas maintain a consistent visual identity even when the user changes the general theme preference.

The interface combines high contrast typography, carefully structured spacing, immersive imagery, subtle motion, and responsive layouts to create a premium digital experience without overwhelming the user.

The objective was not to maximize the number of visual effects. Instead, animation and interaction were treated as supporting mechanisms for hierarchy, navigation, and perceived quality.

This distinction is particularly important for hospitality websites because the interface must communicate atmosphere while remaining functional enough for visitors who primarily need practical information such as menu details, reservations, contact information, and directions.

Content and Localization Strategy

The primary website navigation, brand communication, menu presentation, and interface copy use English to maintain consistency with the established brand direction.

At the same time, practical transaction oriented elements were localized for the expected audience in Jakarta. Reservation forms, WhatsApp communication flows, and validation messages were intentionally written in Indonesian to reduce friction during real world interactions.

This approach separates brand communication from transactional usability. The brand maintains a consistent international presentation while operational interactions remain familiar to the primary local audience.

Performance and Dependency Strategy

Dependency selection was treated as an architectural decision rather than a purely cosmetic preference.

The project uses stable versions of Next.js, React, Tailwind CSS, and Zod that were selected for compatibility and reliability within the defined project scope. Next.js 16 and Tailwind CSS 4 were intentionally excluded because the migration would introduce architectural changes that were not necessary for the functional requirements of the website.

This reflects a broader engineering principle: adopting the newest version of a technology is not automatically the optimal technical decision. Version selection should consider project requirements, migration risk, ecosystem compatibility, and long term maintainability.

Location and External Service Strategy

The website provides a Get Directions interaction that redirects users to Google Maps rather than embedding a Google Maps iframe directly into the page.

This decision avoids introducing an additional mapping dependency, eliminates unnecessary API key requirements for the page, and keeps the implementation lightweight while preserving the primary user objective of obtaining directions to the restaurant.

Iconography and Dependency Considerations

The implementation also considers the licensing and scope characteristics of third party dependencies.

For social media representation, a generic interface icon was used instead of relying on a dedicated Instagram brand icon from the icon library. This avoids depending on third party brand assets that may no longer be distributed within the library's stable icon set.

Build Verification

The application build was successfully verified in the development environment with static prerendering applied to the available routes.

The project was also checked for TypeScript compilation errors and ESLint issues as part of the production preparation process.

The development environment can be started using the standard dependency installation and development commands.

The production environment can be generated through the Next.js production build process and subsequently started using the production server command.

A critical deployment variable is NEXT_PUBLIC_SITE_URL because it is used for metadataBase, canonical URLs, Open Graph references, and structured metadata.

Correct configuration of this variable ensures that search engines and social platforms receive the intended production URL rather than a fallback domain.

SEO and Structured Metadata

SEO was considered at the application architecture level rather than treated as an afterthought.

The website structure supports canonical URL generation, Open Graph metadata, metadataBase configuration, and structured data through JSON LD.

This provides a technical foundation for search engine discovery, accurate page representation in search results, and improved sharing previews across social platforms.

For a hospitality website, technical SEO is particularly important because users frequently search for restaurants through branded queries, location based queries, menu related searches, events, and reservation intent.

The implementation therefore prioritizes semantic content structure, predictable metadata generation, crawlable page content, and a clear relationship between the website identity and its production domain.

Responsive Design

The interface was designed to support both mobile and desktop environments.

Mobile layouts were specifically considered around narrow viewport sizes, including 360 pixel wide devices, while desktop layouts were structured to preserve visual hierarchy and content density across larger screens.

Responsive behavior was treated as part of the core interface architecture rather than as a final adjustment after desktop development.

This ensures that primary actions such as viewing menus, exploring the gallery, contacting the restaurant, and accessing reservation functionality remain accessible regardless of device type.

Production Readiness

Before deployment, several production requirements require final verification.

These include the availability and integrity of the complete image library, the operational WhatsApp contact information, Lighthouse performance and accessibility validation, and responsive testing across representative mobile and desktop viewport sizes.

The intended deployment platform is Vercel, which provides native support for Next.js applications and allows the required environment variables to be configured directly at the project level.

Accessibility Considerations

Accessibility was considered throughout the interactive interface, particularly around dialog behavior and keyboard interaction.

The gallery lightbox currently supports Escape based closing, automatic focus placement on the close control, and backdrop interaction.

However, the implementation does not yet provide a complete focus trap. As a result, keyboard focus may technically move outside the dialog while the lightbox remains open.

For full WCAG AA oriented accessibility compliance, a dedicated focus management or focus trap implementation should be introduced in a subsequent iteration.

This limitation is documented intentionally because production quality engineering requires explicit recognition of known constraints rather than presenting incomplete functionality as fully compliant.

Product and Engineering Decisions

Several implementation decisions were made deliberately to balance visual quality, technical complexity, maintainability, and operational requirements.

The website does not display a real time Open Now indicator because a dynamically generated business status could become inaccurate due to server and client timezone differences.

The design therefore prioritizes stable and trustworthy information instead of exposing a feature that could potentially provide misleading operational data.

Likewise, external dependencies were kept limited to functionality that materially contributes to the experience. This reduces unnecessary complexity and creates a smaller surface area for maintenance.

Technical Outcome

The completed architecture provides a modern foundation for a premium restaurant website with strong separation between server rendered content and interactive client functionality.

The project demonstrates practical application of Next.js App Router architecture, React Server Components, TypeScript strict mode, responsive UI engineering, motion design, structured content modeling, form validation, SEO infrastructure, and production deployment preparation.

The resulting experience is intended to feel consistent with the positioning of AXA Social House while maintaining the engineering discipline required for a scalable modern web application.

Key Engineering Principles

The project follows several principles throughout its implementation.

Architectural boundaries are defined according to actual interactivity requirements.

Client side JavaScript is introduced only where interaction requires it.

Visual decisions are derived from a consistent design specification rather than isolated component level experimentation.

Dependencies are selected based on project requirements and stability rather than version recency alone.

SEO metadata and structured content are treated as part of the technical architecture.

Known accessibility and production limitations are explicitly documented.

Responsive behavior is considered during component development rather than added after the primary interface is completed.

Final Perspective

AXA Social House demonstrates how a premium hospitality website can combine visual storytelling with disciplined frontend engineering.

The project is not simply a restaurant landing page. It represents an implementation exercise in translating brand positioning into a technically structured digital experience while maintaining performance, responsiveness, SEO readiness, accessibility awareness, and long term maintainability.

The central engineering objective was to ensure that every major implementation decision had a clear rationale.

From the separation of Server Components and Client Components to the handling of animation, content architecture, external services, responsive behavior, metadata, and accessibility, the system was designed to balance aesthetic quality with technical correctness.

The outcome is a production oriented Next.js website architecture suitable for a premium hospitality brand and adaptable for future iterations involving richer booking functionality, improved accessibility compliance, additional content modules, and deeper analytics integration.