Trading Forex Pangkalan Bun - Refined Trader Interface

# Trading Forex Pangkalan Bun - Refined Trader Interface

{
  "summary": "A professional trader-centric interface that balances heavy editorial typography with high-density data visualizations. It utilizes a clean 'white and slate' base with vibrant teal primary accents and orange highlights to denote action and urgency.",
  "style": {
    "description": "The style is defined by its 'Institutional Modern' theme. It pairs the brutalist-leaning 'Cabinet Grotesk' (weights 700-900) for headlines with the highly legible 'Satoshi' for body text. Colors revolve around Teal (#0d9488) for growth/primary actions and Orange (#f97316) for alerts/highlights. UI elements feature large border-radii (24px to 32px), glassmorphism headers, and subtle 40px grid backgrounds.",
    "prompt": "Create a design using a 'Professional Trader' aesthetic. Typography: Use 'Cabinet Grotesk' for headings (extra-bold, tracking -0.02em) and 'Satoshi' for body text (medium weight, line-height 1.6). Color Palette: Primary Teal (#0d9488), Accent Orange (#f97316), Deep Slate (#0f172a), and Light Gray (#f1f5f9). Background: Apply a 40px square grid using 'linear-gradient(to right, #f1f5f9 1px, transparent 1px)'. Decorative Elements: Use low-opacity (3%) candlestick chart icons as large watermarks. Borders: 1px solid #f1f5f9. Border Radius: 24px for cards, 12px for buttons. Shadows: Use soft, large-spread shadows (0 32px 64px -16px rgba(0,0,0,0.1)). Animation: Smooth 40s linear loop for horizontal tickers; 0.25s ease-out transitions for hover states."
  },
  "layout_and_structure": {
    "description": "A modular, section-heavy layout that alternates between light grid-based containers and high-impact dark-themed sections for institutional partners.",
    "prompts": [
      {
        "part": "Sticky Glass Header",
        "prompt": "Implement a sticky navigation bar with a height of 80px. Use 'rgba(255, 255, 255, 0.7)' background with a 12px backdrop-filter blur. Logo on the left with a 40px teal square icon. Centered navigation links in 13px bold uppercase Satoshi with 40px spacing. Right-side action buttons including a text-only 'Login' and a high-contrast 'Join' button with 10px font and black tracking."
      },
      {
        "part": "Hero Section with Live Terminal",
        "prompt": "Two-column grid (7:5 split). Left side: 11px uppercase badge with orange border, 8xl 'Cabinet Grotesk' heading with line-height 0.9, and large action buttons (10px tracking, 15px padding). Right side: A floating terminal card with a pulsing status light, live price rows featuring micro-charts, and currency pair labels in 10px bold text. Place a 400px candlestick icon at 3% opacity in the background."
      },
      {
        "part": "Live Market Ticker",
        "prompt": "Horizontal bar with 1px top/bottom border. Contains an infinite-scrolling list of financial instrument data (e.g., 'EURUSD 1.0842 ▲'). Data points should use 12px black-weight fonts with teal (#0d9488) for gains and rose (#f43f5e) for losses."
      },
      {
        "part": "Institutional Dark Section",
        "prompt": "Full-width section with #0f172a background and 5% opacity grid. Features a 3-column grid of cards. Cards use 'rgba(255, 255, 255, 0.03)' background and 1px white/10 border. Each card must include a white logo container, a 'Main Partner' pill badge, and a list of stats in 11px uppercase tracking-widest text. The main CTA in the card is a full-width white button that turns teal on hover."
      },
      {
        "part": "Content & Stats Grid",
        "prompt": "Split section: 8-column main content area for list items (forum/insights) and a 4-column sidebar for statistics. Main items should have a 24px radius, avatar metadata, and 2xl bold headings. Sidebar features high-impact stat blocks with teal background and large 4xl numbers."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Live Terminal Card",
      "description": "A high-fidelity data display component.",
      "prompt": "Construct a card with a white background and 32px border-radius. Header includes a pulsing teal dot and 'Live Terminal' label. Body contains interactive rows: left-aligned 40px circular initials icons, center-aligned asset names in 14px black Satoshi, and right-aligned prices in Cabinet Grotesk bold. Hovering over rows changes background to #f8fafc and adds a teal border-left."
    },
    {
      "component": "Infinite Ticker Tape",
      "description": "Continuous scrolling data banner.",
      "prompt": "Create a div container with 'overflow: hidden'. Inside, create a 'ticker' flexbox that animates from 'translateX(0)' to 'translateX(-50%)' over 40 seconds. Items inside should be spaced 64px apart, using a combination of Slate 400 for labels and vibrant colors for price movements."
    }
  ]
}