Contact | Mirpur Club Ltd

# Contact | Mirpur Club Ltd

{
  "summary": "A refined, atmospheric luxury design for exclusive institutional brands. It combines classical architectural aesthetics with modern UI interactions, using a high-contrast dark navy and gold palette, sophisticated serif typography, and fluid view transitions to create a sense of timeless prestige.",
  "style": {
    "description": "The style essence is 'Institutional Elegance'. Primary palette: Navy (#001B47), Gold (#D4AF37), and Off-white (#FAF9F6). Typography uses Playfair Display for dramatic headings, Cinzel for brand marks, and Crimson Text for long-form reading. Animation is smooth and deliberate, featuring 1.2s cubic-bezier fade-ins and 20s subtle zoom effects on hero images. Borders are kept thin (1px) and often semi-transparent (gold/10).",
    "prompt": "Create a luxury institutional interface using a navy (#001B47) and gold (#D4AF37) color scheme. Typography: Headings in 'Playfair Display' (italic for accents), branding in 'Cinzel' (tracking 0.15em), and body text in 'Crimson Text'. Buttons should be either solid gold with navy text (tracking 0.3em) or outlined with transparent backgrounds. Use a shadow-gold-glow: '0 0 30px rgba(212, 175, 55, 0.4)' for primary actions. Incorporate a 'reveal-up' animation (translateY 40px, 1.2s cubic-bezier) for section entrances. Backgrounds should alternate between deep navy and a soft cream (#F5F5DC). Use image-overlay-grades with a linear gradient (navy/90 to navy/95) to ensure text legibility over photography."
  },
  "layout_and_structure": {
    "description": "A structured, centered layout using a 12-column grid. Sections are high-contrast, alternating between 'light mode' cream backgrounds and 'dark mode' navy backgrounds to define functional zones.",
    "prompts": [
      {
        "part": "Navigation Header",
        "prompt": "Fixed header with navy background (#001B47). Left-aligned logo featuring a shield icon inside a gold-glow circle. Center navigation links in bold sans-serif, size 12px, tracking 0.25em, uppercase. Right-aligned button with gold background, navy text, and distinct gold glow shadow. Use a 1px border-b in gold/10."
      },
      {
        "part": "Hero Section",
        "prompt": "Full-height or 50vh height section with slow-zoom background image. Centered content: gold subtitle (12px, uppercase, tracking 0.5em), followed by a large Playfair Display H1 (size 72px+). Use a thin 100px gold horizontal divider. Ensure a dark gradient overlay (navy/90) over the background image."
      },
      {
        "part": "Information Grid",
        "prompt": "Two-column layout. Left side: Narrative content with Playfair Display H2 and Crimson Text body. Include a secondary grid of 'Information Cards' (border-l-4 gold, cream background #F5F5DC/30) that invert to navy background on hover. Right side: A high-contrast form container."
      },
      {
        "part": "Premium Form Component",
        "prompt": "A dark navy container (#001B47) with a subtle shield icon watermark (opacity 10%). Input fields: transparent background (white/5), white/20 borders, gold labels (10px, uppercase). Submit button: full-width gold (#D4AF37) with navy text and tracking 0.3em."
      },
      {
        "part": "Member Access Section",
        "prompt": "A contained call-to-action block. Navy background, border gold/30. Left: heading and italicized body text. Right: Ghost button with 2px gold border and gold text. Centered on a charcoal background with subtle paper texture."
      },
      {
        "part": "Map and Location",
        "prompt": "Split layout. One side: text-based address details with gold icons. Other side: Large map card with a pinging map-pin animation, navy-tinted image overlay, and a 'Coordinate Badge' (glassmorphism: white/10 backdrop-blur-md) in the corner."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Preloader",
      "description": "Full-screen cinematic intro animation",
      "prompt": "A fixed overlay in Navy (#0A0E2F). Centered: A pulsing gold shield icon. Below it: a 128px width loading bar (white/10) with a gold progress indicator. Implementation: CSS animation fadeOut at 1.2s."
    },
    {
      "component": "Shield Branding Badge",
      "description": "Circular glowing logo container",
      "prompt": "48x48px circular div. Border: 1px gold/40. Background: gold/5. Shadow: '0 0 30px rgba(212, 175, 55, 0.4)'. Contains a centered iconify-icon (gis:shield-alt) in gold."
    }
  ],
  "special_notes": "MUST: Maintain high letter-spacing (0.2em - 0.5em) on all uppercase sans-serif labels. MUST: Use 'view-transition-name: main-content' for the primary scrollable area. MUST: Use identical HTML for navigation and footer across all pages to prevent flickering. MUST NOT: Use standard blue or standard sans-serif for body text; always prefer Crimson Text or Inter for UI elements. MUST NOT: Use borders thicker than 1px unless for specific accent bars."
}