NTJ Valentine's Match Challenge - Mobile Frame

# NTJ Valentine's Match Challenge - Mobile Frame

{
  "summary": "A gamified mobile application UI centered within a 390px container on desktop. The design uses a layered pink background with large decorative blobs, glassmorphism containers for forms, and a high-contrast 6x6 game grid with animated emoji-based tiles.",
  "style": {
    "description": "The style is 'Modern Playful' with a heavy reliance on 'Inter' typography in varying weights (400 to 900). It uses a sophisticated pastel palette with vibrant action colors. Animations are snappy, utilizing cubic-bezier curves for tile interactions and standard fade/slide transitions for screen navigation.",
    "prompt": "### Visual Language Spec\n**Palette:**\n- Background Outer: #F8DAE9\n- App Container: #FFE5F0\n- Decorative Blobs: #FFD6E8 (50% opacity)\n- Primary Action Pink: #FF6B9D\n- Primary Action Cyan: #07B9D5\n- Accent Purple: #7C3BED\n- Text: Gray-400 (Labels), Black/900 (Headings)\n\n**Typography:**\n- Font: 'Inter', sans-serif\n- Headings: text-4xl (36px), font-black (900), uppercase, leading-none\n- Subheadings: text-2xl (24px), font-extrabold (800), italic, tracking-tighter\n- Data Labels: text-[10px], font-bold, uppercase, tracking-widest, color: gray-400\n- Body: text-sm (14px), font-semibold\n\n**Effects & Shading:**\n- Cards: bg-white/40, backdrop-blur-md, border: 1px solid white/60, border-radius: 24px-32px\n- Shadow: shadow-2xl for main container, shadow-xl for cards\n- Inputs: bg-white/60, px-4, py-3, rounded-xl\n\n**Animations:**\n- Match Animation: transform scale(0), opacity 0, duration 0.2s\n- Select Animation: transform scale(0.9), outline: 3px solid #FF6B9D\n- Error/Shake: 0.4s cubic-bezier(.36,.07,.19,.97) [±4px horizontal]\n- Transition: fade-in / slide-in-from-bottom-4 duration-500"
  },
  "layout_and_structure": {
    "description": "A fixed-width mobile frame (390px) centered on screen, using a vertical flexbox layout with a persistent header, dynamic main content area, and decorative background elements.",
    "prompts": [
      {
        "part": "Desktop Wrapper",
        "prompt": "Create a viewport-filling background of #F8DAE9. Center a 390px wide by 100dvh high container with white/20 side borders and a shadow-2xl. Ensure overflow-hidden and a background color of #FFE5F0."
      },
      {
        "part": "Header",
        "prompt": "Fixed height header (approx 72px) with horizontal padding (16px). Left-align logo (40px height); right-align action buttons using Lucide/Iconify icons in gray-500. Ensure it sits at z-index 50."
      },
      {
        "part": "Registration Screen",
        "prompt": "Vertical flex layout centered. Hero section with logo, italicized subheader (#34D399), and black uppercase title (#07B9D5). Input cards use a glassmorphism style (white/40) with 10px uppercase labels and white/60 input fields. Bottom button is a linear-gradient from #07B9D5 to #7C3BED."
      },
      {
        "part": "Game Dashboard",
        "prompt": "Top stats bar: 3-column flex (Player, Time, Score) inside a white/80 backdrop-blur card with rounded-2xl. Timer and Score use tabular-nums font and vibrant colors (#FF6B9D and #07B9D5)."
      },
      {
        "part": "Match-3 Grid",
        "prompt": "6x6 CSS Grid with 4px gap. Each tile has aspect-ratio 1/1, rounded-2xl (16px), and subtle white/50 border. Backgrounds are pastel shades (cyan-100, purple-100, etc.). Emojis are centered in 24px font size."
      },
      {
        "part": "Leaderboard Table",
        "prompt": "Full-width table within a rounded-3xl container. Header row uses gray-50 background and text-[10px] caps. Alternating row colors for top 2 ranks (cyan-50/50 and pink-50/50). Current player row must have '(YOU)' indicator."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Animated Game Tile",
      "description": "Interactive Match-3 tile with state-aware scaling.",
      "prompt": "Implementation: .tile { aspect-ratio: 1/1; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; border-radius: 1rem; }. On select: apply 'transform: scale(0.9)' and 'outline: 3px solid #FF6B9D' with negative offset. On match: 'transform: scale(0); opacity: 0;'."
    },
    {
      "component": "Glassmorphic Form Group",
      "description": "Translucent input container for high-end mobile feel.",
      "prompt": "Container: bg-white/40, backdrop-blur-md, border border-white/60, p-6, rounded-3xl. Inputs: bg-white/60, border-none, focus:ring-2 focus:ring-[#07B9D5], transition-all. Labels: Positioned outside/above inputs, text-[10px], font-bold, color #9CA3AF."
    }
  ]
}