Naseeb - Soft Pastel Hero Screen

# Naseeb - Soft Pastel Hero Screen

{
  "summary": "A minimalist and serene mobile-first hero screen with a 135-degree pastel gradient background, extrabold rounded typography, and a prominent soft-pulsing CTA button. The UI uses generous whitespace and a centered layout to create a focused, high-intent entry point.",
  "style": {
    "description": "The style is characterized by a 'Dreamy Zen' aesthetic. It uses a soft color palette (#B8E6E6, #D4B8E8, #FFD4E5) combined with dark charcoal text (#2D2422) for high readability without harsh contrast. Typography is exclusively Nunito, utilizing extrabold weights for headers and widely tracked uppercase for taglines. The UI features subtle noise texture and blurred decorative glow elements to add depth without complexity.",
    "prompt": "Create a design with a soft pastel aesthetic. Background: linear-gradient(135deg, #B8E6E6 0%, #D4B8E8 50%, #FFD4E5 100%). Typography: Primary font 'Nunito'. Headlines: 42px, Extrabold, line-height 1.15, color #2D2422. Taglines: 12px, Bold, letter-spacing 0.25em, uppercase, color #2D2422 at 60% opacity. Buttons: #C8B4DC background, white text, 24px border-radius, font-weight 700. Add a 3% opacity grain/noise texture overlay across the entire screen. Decorative elements: One white glow (#FFFFFF/20%) blur(100px) in top-left, one lavender glow (#C8B4DC/15%) blur(80px) in bottom-right. Animation: Use cubic-bezier(0.16, 1, 0.3, 1) for all entry transitions. Secondary links: 14px, semibold, with a subtle border-bottom (1px solid #2D2422/20%)."
  },
  "layout_and_structure": {
    "description": "A vertical, mobile-centric layout consisting of three primary zones: a top logo area, a centered hero text block, and a bottom-weighted CTA section. The structure is designed to draw the eye from the top logo down to the primary action button.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "Center-aligned logo at the top. Padding-top: 56px (pt-14). Include a logo reveal animation: scale from 0.9 to 1, opacity 0 to 1, and a blur(4px) to blur(0) transition over 1.2s."
      },
      {
        "part": "Hero Content",
        "prompt": "Vertically and horizontally centered main content block. Space-between heading and tagline: 24px. Heading text is 42px and centered. Tagline is placed below the heading, uppercase with wide tracking. Both elements should stagger their entrance using an 'animate-fade-in-up' (translateY 20px to 0) with delays of 0.4s and 0.6s respectively."
      },
      {
        "part": "Footer CTA Area",
        "prompt": "Fixed-width container (max-320px) at the bottom. Padding-bottom: 34px. Contains a primary 'Get Started' button (py-5) and a secondary 'Log In' text link. The button should have a 'pulse-soft' animation (scale 1 to 1.03) and the whole footer should fade in with an 0.8s to 1s delay."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Pulsing Soft CTA",
      "description": "A highly tactile primary button with a gentle heartbeat animation.",
      "prompt": "Width: 100%; max-width: 320px; background-color: #C8B4DC; border-radius: 24px; padding: 20px; font-family: Nunito; font-weight: 800; text-align: center; color: #FFFFFF; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05). Animation: 3s ease-in-out infinite loop that scales between 100% and 103%. On click/active: scale(0.95) transition-all duration-200."
    },
    {
      "component": "Organic Glow Overlays",
      "description": "Amorphous blurred shapes that create depth in the background.",
      "prompt": "Position: absolute; pointer-events: none. Top-left glow: width 50%, height 30%, color white at 20% opacity, blur(100px). Bottom-right glow: width 60%, height 40%, color #C8B4DC at 15% opacity, blur(80px). These should sit behind all text and UI elements."
    }
  ],
  "special_notes": "Maintain strict adherence to the 135-degree gradient angle. Must use 'Nunito' for all text—do not substitute with other sans-serifs. The grain texture is critical to prevent the gradient from looking too 'digital' or 'flat'. All interactions (hover/active) should be soft, using scale(0.95) for button presses rather than harsh color changes."
}