Project Overview & Context

TekNix Concept is a premier architectural consultancy, interior design, and turnkey construction (Design & Build) company specializing in modern corporate offices and high-end commercial spaces in Vietnam. Having successfully completed over 500 projects across 34 provinces for renowned enterprises (including Mercury Office at 4,502 m², Nix Holding at 952 m², and NVB Play at 652 m²), TekNix Concept positions itself at the intersection of bespoke contemporary architecture and cost-effective functional engineering.

To reinforce its market leadership and effectively engage multinational corporations, commercial property developers, and enterprises seeking end-to-end workspace fit-outs, TekNix Concept required an enterprise-grade digital portal: elegant, reflecting bespoke architectural aesthetics, offering rich visual interactivity, and delivering sub-second page loads.

The Problem Space

Brand & Business Challenges

• High-End Brand Positioning: The commercial interior fit-out industry is heavily crowded with generic contractors. The web platform needed to visually communicate TekNix Concept's international construction standards and design sophistication, immediately differentiating it from conventional builders.
• Complex Multi-Tier Service Ecosystem: TekNix Concept delivers a full spectrum of integrated solutions: Office Design (#BIM, #SmartOffice), Rapid 15-day Office Construction, Commercial Spaces (Art Space showrooms, cafés, spas, Net-Zero spaces), and Specialized Services (corporate greenery, high-end coffee systems, IT infrastructure). The information architecture had to structure these offerings clearly for various buyer personas.
• Accelerating Lead Generation: A primary business objective was driving frictionless user conversion toward the "Schedule a 24h Site Survey" consultation funnel directly from case study explorations.
• Bilingual Audience Reach: Serving both domestic Vietnamese corporations and international firms establishing new regional offices in Vietnam.

Expected User Experience

• Decision-makers (CEOs, Chief People Officers, Facility Directors) need to evaluate verified project imagery, square meter scale, and handover timelines in under 60 seconds without wading through clutter.
• Visitors on mobile devices demand crisp high-resolution architectural photography and walkthroughs without encountering sluggish scrolling, layout jitter, or excessive mobile data consumption.

Project Goals & Standards

• Build a High-End Editorial Web Interface: Clean typography hierarchy, subtle brand color palettes (Satoshi, SF Pro, SVN Gilroy), and interactive Bento-grid layouts.
• Achieve Core Web Vitals Excellence: Attain near-perfect Google Lighthouse scores (99-100), sub-0.8s Largest Contentful Paint (LCP), and zero Cumulative Layout Shift (CLS 0.00) despite heavy photography.
• Deliver 60 FPS Interactive Motion: Implement hardware-accelerated Sticky Stacking Service Cards and dynamic accordions optimized for touch interactions.
• Streamline the 24h Consultation Funnel: Design an intuitive, friction-free booking flow with instant service routing.
• Ensure Robust Bilingual SEO Architecture: Deploy localized routing (/vi and /en) paired with Schema.org JSON-LD structured data (ArchitectureFirm, LocalBusiness, Portfolio).

Key Features & Architectural Highlights

Sticky Stacking Service Accordion

An interactive showcase presenting the four key pillars (Office Design, Office Construction, Commercial Design, Specialized Services) with smooth vertical card stacking on desktop and clean collapsible cards on mobile screens.

Featured Projects Case Studies

A showcase of completed enterprise spaces (MERCURY 4,502 m², NIX HOLDING 952 m², NVB PLAY 652 m²) displaying verified metadata: sector, client name, scale, and completion year.

24h Consultation & Survey Booking Funnel

A streamlined booking module enabling prospective clients to request a 24-hour on-site survey, complete with automated service categorization and instant validation.

Client Endorsements & Social Proof

An interactive testimonial carousel highlighting real feedback from company founders and executives (MrKim SaiGon, Beep Cyber Workspace, Son Nguyen Building,...).

Insights & Architectural Knowledge Hub

A dedicated editorial section exploring modern office layout trends, sustainable Net-Zero materials, and BIM engineering methodologies.

Technical Architecture & Stack

• Framework: Next.js 15 App Router powered by Turbopack.
• Routing & i18n: next-intl localized subpath routing (/vi and /en) with preloaded translation dictionaries.
• Styling: Tailwind CSS with custom CSS design tokens and fluid typography scales.
• Media & Image Optimization: Next.js Image Optimization Pipeline, WebP/AVIF automatic conversion, and Blurhash placeholders.
• Headless CMS: EmDash Headless CMS managing localized content and portfolio entries.
• Edge Deployment: Vercel Global Edge Network delivering TTFB under 50ms.

Technical Challenges & Solutions

Eliminating Mobile Layout Thrashing in Sticky Stacking Cards

• Problem: The desktop stacking card effect caused severe frame drops (< 35 FPS) and continuous style recalculations when ported directly to mobile touch devices.
• Why It Was Difficult: The design demanded visual elegance on desktop without compromising smooth touch gestures and battery efficiency on mobile devices.
• Investigation: Performance profiling via Chrome DevTools revealed that JavaScript scroll listeners reading getBoundingClientRect() inside an unthrottled loop caused forced synchronous layouts.
• Solution Approach: Removed JavaScript scroll listening entirely. On desktop, transitioned to native CSS position: sticky combined with GPU-accelerated transform: translate3d(0, 0, 0). On mobile, implemented a responsive breakpoint switch to native collapsible accordions with CSS transitions and accessible WAI-ARIA states (aria-expanded).
• Implementation: Applied CSS contain: content to each service block to isolate rendering trees and avoid full DOM reflows.
• Result: Maintained a rock-solid 60 FPS across all mobile devices, while reducing main-thread CPU execution time during scrolling by over 70%.

High-Resolution Architectural Media Delivery (Zero-CLS & Sub-Second LCP)

• Problem: Architectural renderings and site photography averaged 3–6MB per raw file. Initial page visits suffered from prolonged LCP (> 3.6s) and noticeable layout shifts (CLS > 0.18) as images loaded.
• Why It Was Difficult: Architectural imagery cannot be aggressively downsampled without losing crisp texture fidelity and ambient lighting realism.
• Investigation: Network waterfall analysis revealed that non-critical below-the-fold assets competed with critical stylesheets and hero visuals for network bandwidth.
• Solution Approach: Implemented a multi-tier optimization strategy:

1. Designated fetchpriority="high" and priority={true} exclusively for the above-the-fold Hero Cover image.
2. Routed all assets through automated Edge Image Optimization, converting to WebP/AVIF formats on the fly.
3. Enforced explicit aspect-ratio wrappers with Blurhash micro-placeholders to allocate viewport dimensions prior to image download.
4. Enabled native loading="lazy" backed by IntersectionObserver for below-the-fold galleries.

• Result: Slashed LCP from 3.6s down to 0.7s, achieved an ideal CLS score of 0.00, and reduced initial page weight by 68%.

Key Engineering Decisions

Native Modern CSS vs Heavy Scroll Animation Libraries

• Context: Requirement for fluid stacking scroll and smooth element reveals.
• Choice: Built with standard CSS position: sticky and hardware-accelerated transitions rather than bundling third-party libraries like GSAP ScrollTrigger or Locomotive Scroll.
• Trade-offs & Result: Required more meticulous responsive CSS tuning across breakpoints, but eliminated 160KB+ of external JavaScript bundles and prevented conflicts with native iOS Safari momentum scrolling.

Static Generation with Incremental Cache Revalidation (ISR)

• Context: Demanding instant global page responses for prospective international clients while allowing seamless marketing updates from CMS.
• Choice: Implemented Next.js ISR with balanced revalidation intervals coupled with global CDN caching.
• Result: Global Time to First Byte (TTFB) clocked in at 42ms with sub-100ms full page renders.

Impact & Measured Results

Business & Conversion Impact

• Increased Inquiries: Achieved a 40% uptick in completed 24h survey booking submissions driven by the frictionless mobile UX and lightning-fast loading speeds.
• Brand Elevation: Reinforced TekNix Concept's market credibility, directly contributing to securing major Grade-A workspace construction contracts.