{
  "title": "Crown Town Hotel",
  "postType": "project",
  "order": 6,
  "blocks": [
    {
      "data": {
        "title": "CREATING A DIGITAL GATEWAY\nFOR JEDDAH’S PREMIER\nBOUTIQUE HOTEL & SUITES",
        "image": "/images/crowntown_desktop_full.png",
        "description": "Crown Town Hotel embodies modern grandeur in the Al Hamra district of Jeddah. We crafted a premium digital gateway that replaces clinical booking forms with atmospheric storytelling, matching the physical luxury of their boutique rooms and wellness spa.",
        "metadata": [
          {
            "label": "CLIENT / TYPE",
            "value": "Crown Town Hotel / Luxury Hospitality"
          },
          {
            "value": "Digital Strategy, UI/UX Design, Development",
            "label": "SERVICES / AREA"
          },
          {
            "value": "2025/ 8 Weeks",
            "label": "YEAR / DURATION"
          },
          {
            "value": "Crown Town, Jeddah",
            "label": "CLIENT / LOCATION"
          }
        ],
        "style": {
          "paddingTop": "9rem",
          "textColor": "#FAF7F2",
          "accentColor": "#c5a880",
          "backgroundColor": "#09090A",
          "paddingBottom": "5rem"
        }
      },
      "type": "product-hero",
      "id": "083kntknp"
    },
    {
      "type": "problem-solution-cards",
      "id": "wav6zh5oe",
      "data": {
        "solutionContent": "We designed a luxurious, editorial-inspired interface that prioritizes visual depth and atmospheric breathing room. By dividing the landing architecture into specific segment gateways (Suites, Dining, Wellness, Banquets) and coupling them with a persistent, friction-free booking path, we bridged the gap between immersive brand discovery and direct reservation conversion.",
        "problemTag": "// THE PROBLEM",
        "footerTag": "COMPILING DESIGN REQUIREMENTS",
        "title": "The Challenge\n& Narrative",
        "solutionTag": "// THE SOLUTION",
        "problemContent": "Hospitality portals often fall into a template-driven trap, bombarding potential guests with aggressive popups, rigid pricing lists, and dry room grids. For Crown Town, this transactional layout failed to convey the premium atmosphere, personal concierge care, and physical serenity that guests experience when stepping into their lobby in Jeddah.",
        "style": {
          "accentColor": "#c5a880",
          "backgroundColor": "#09090A",
          "paddingBottom": "6rem",
          "textColor": "#FAF7F2",
          "paddingTop": "6rem"
        },
        "subtitle": "01 / OVERVIEW",
        "problemFooter": "Metric: High bounce rate on generic booking pages",
        "solutionFooterRight": "Ready & Live",
        "solutionFooterLeft": "Core Tech: Next.js + TailwindCSS"
      }
    },
    {
      "type": "layout-blueprint",
      "id": "9qz6lzx95",
      "data": {
        "col3Rate": "950 SR",
        "col3Tag": "Grid Col (W: 220px)",
        "footerText": "DESKTOP GRID SYSTEM: 12-COLUMN ASYMMETRIC / 1440PX WIDTH",
        "col3RateLabel": "STARTING RATE",
        "col1Subtitle": "// CROWN TOWN HOTEL",
        "col2Footer": "Borders: 1px Solid Zinc-850",
        "col1Footer": "Padding: 24px | Gap: 24px",
        "col2Title": "IMAGE CONTAINER",
        "description": "A showcase of the pixel-perfect alignment blueprint. Every component lies inside a structured vector system to preserve mathematical balance across viewports.",
        "col3Size": "30 SQM",
        "col2Fit": "Fit Cover",
        "col3SizeLabel": "ROOM SIZE",
        "col1Desc": "We mapped the layout using a strict geometric system, balancing imagery with editorial text blocks.",
        "yRulerMarkings": [
          "Y:0",
          "Y:200",
          "Y:400",
          "Y:600"
        ],
        "col1Title": "A Study in Spacing",
        "col3ButtonText": "BOOK NOW",
        "title": "Layout System & Grid Architecture",
        "col2Ratio": "Aspect Ratio: 16:9",
        "subtitle": "02 / VISUAL SPECIFICATION",
        "col1Tag": "Grid Col (W: 305px)",
        "style": {
          "paddingBottom": "7rem",
          "accentColor": "#c5a880",
          "backgroundColor": "#0B0B0C",
          "paddingTop": "7rem",
          "textColor": "#FAF7F2"
        },
        "footerSpecs": [
          {
            "label": "COLUMNS",
            "value": "12"
          },
          {
            "value": "24PX",
            "label": "GUTTER"
          },
          {
            "label": "MARGIN",
            "value": "80PX"
          }
        ],
        "rulerMarkings": [
          "0px",
          "305px",
          "626px",
          "947px",
          "1268px",
          "1440px"
        ],
        "col2Tag": "Grid Col (W: 410px)"
      }
    },
    {
      "data": {
        "subtitle": "03 / DESIGN STYLE",
        "colors": [
          {
            "name": "Soft Silk White",
            "hex": "#FAF7F2",
            "description": "A clean, minimalistic white with a warm hint. Used for typography and accents to create elegant contrast.",
            "colorValue": "#FAF7F2"
          },
          {
            "description": "A deep black with a subtle cool undertone. Maintained as the main background for spacious visual balance.",
            "hex": "#09090A",
            "colorValue": "#09090A",
            "name": "Obsidian Charcoal"
          },
          {
            "hex": "#C5A880",
            "description": "A refined golden-beige tone symbolizing exclusivity. Applied to highlights, tags, and active states.",
            "colorValue": "#C5A880",
            "name": "Champagne Gold"
          }
        ],
        "style": {
          "backgroundColor": "#09090A",
          "accentColor": "#c5a880",
          "paddingBottom": "6rem",
          "paddingTop": "6rem",
          "textColor": "#FAF7F2"
        },
        "description": "A balanced system built specifically for boutique luxury. We paired an organic, editorial serif typeface with a clean, tech-focused geometric sans-serif to create hierarchy and contrast.",
        "fonts": [
          {
            "fontFamilyClass": "font-cormorant",
            "letters": "AaBb",
            "description": "Used for high-level editorial headers, statement quotes, and section titles. Whispers prestige and captures an artisanal feel.",
            "tag": "Editorial Serif (Cormorant)"
          },
          {
            "fontFamilyClass": "font-sans",
            "letters": "AaBb",
            "description": "Applied to body text, metadata tabs, values grids, and operational actions to preserve crisp legibility across screens.",
            "tag": "Legibility Sans (Inter Stack)"
          }
        ],
        "systemLabel": "SYSTEM CONFIGURATION",
        "title": "Typography & Colors"
      },
      "id": "elmh4449k",
      "type": "typography-colors"
    },
    {
      "data": {
        "url": "https://crowntownhotel.com",
        "style": {
          "paddingBottom": "7rem",
          "paddingTop": "7rem",
          "backgroundColor": "#09090A"
        },
        "typeLabel": "Actual Website Screenshot",
        "imageUrl": "/images/crowntown_full_screenshot.jpg",
        "viewportLabel": "Desktop Viewport [1280px]"
      },
      "id": "a7cz78xck",
      "type": "desktop-showcase"
    },
    {
      "id": "r25i2jso5",
      "type": "mobile-showcase",
      "data": {
        "description": "A showcase of the mobile translation. We designed every screen to preserve editorial elegance and micro-interactions on compact viewports, optimizing booking rates.",
        "title": "Bespoke Mobile Interface",
        "subtitle": "04.5 / RESPONSIVE TRANSLATION",
        "images": [
          "/images/crowntown_mobile_1.png",
          "/images/crowntown_mobile_2.png",
          "/images/crowntown_mobile_3.png",
          "/images/crowntown_mobile_2.png",
          "/images/crowntown_mobile_3.png",
          "/images/crowntown_mobile_1.png"
        ],
        "style": {
          "textColor": "#FAF7F2",
          "paddingTop": "6rem",
          "backgroundColor": "#09090A",
          "accentColor": "#c5a880",
          "paddingBottom": "6rem"
        }
      }
    },
    {
      "type": "specs-bento",
      "id": "ubtbrer3a",
      "data": {
        "spec2Category": "Media UX",
        "spec1ConsoleOutput": "[Secure Handshake Verified] 200 OK",
        "style": {
          "backgroundColor": "#0B0B0C",
          "accentColor": "#c5a880",
          "paddingBottom": "6rem",
          "paddingTop": "6rem",
          "textColor": "#FAF7F2"
        },
        "subtitle": "// System Engineering Specs",
        "spec2MetricLabel": "128kb average payload per image",
        "spec1ConsoleStatus": "[System] Validating dates...",
        "title": "Design System Architecture",
        "spec1ConsoleInput": "GET /api/check-availability?room=penthouse",
        "spec1Title": "Custom Endpoint Handshake",
        "spec1Desc": "We architected the site using clean, semantic directories: `/rooms`, `/staples` (dining), `/wellness` (spa & pool), and `/halls` (banquets). Custom APIs handle room availability check-in requests directly, bypassing heavy third-party iframe overlays.",
        "spec2Title": "AVIF Compression Pipeline",
        "spec1Category": "Architecture",
        "description": "How we code luxury details to perform at scale.",
        "spec2Desc": "Since hospitality relies heavily on photos, we compressed high-res imagery into next-gen AVIF containers, dropping loading speeds to sub-100ms.",
        "spec1Tag": "Spec 01",
        "spec2Tag": "Spec 02"
      }
    },
    {
      "data": {
        "content": "CREATING TIMELESS DIGITAL GATEWAYS THAT REDEFINE MODERN LUXURY HOSPITALITY",
        "style": {
          "textColor": "#FAF7F2",
          "textAlign": "center",
          "paddingTop": "8rem",
          "backgroundColor": "#09090A",
          "paddingBottom": "8rem",
          "highlightColor": "#c5a880"
        },
        "highlightSubstring": "MODERN LUXURY HOSPITALITY"
      },
      "id": "m066u683k",
      "type": "impact-text"
    }
  ],
  "visibility": "public",
  "description": "",
  "updatedAt": "2026-06-07T16:51:33.754Z",
  "slug": "crowntown-hotel",
  "featuredImage": ""
}

CLIENT / TYPECrown Town Hotel / Luxury Hospitality

SERVICES / AREADigital Strategy, UI/UX Design, Development

YEAR / DURATION2025/ 8 Weeks

CLIENT / LOCATIONCrown Town, Jeddah

CREATING A DIGITAL GATEWAY
FOR JEDDAH’S PREMIER
BOUTIQUE HOTEL & SUITES

Crown Town Hotel embodies modern grandeur in the Al Hamra district of Jeddah. We crafted a premium digital gateway that replaces clinical booking forms with atmospheric storytelling, matching the physical luxury of their boutique rooms and wellness spa.

KITEBE

Desktop Viewport [1280px]Actual Website Screenshot

https://crowntownhotel.com

04.5 / RESPONSIVE TRANSLATION

Bespoke Mobile Interface

A showcase of the mobile translation. We designed every screen to preserve editorial elegance and micro-interactions on compact viewports, optimizing booking rates.