GlobalGPT iOS Download Modal Requirement Specification

Modal Function Overview

A new modal needs to be implemented on the GlobalGPT website interface. This modal will be triggered when users click the "iOS Download" button located at the bottom left of the page. The purpose of this modal is to introduce ChatPal, an independent iOS product, and explain its membership benefits connection with the GlobalGPT platform.

Detailed Requirements

Trigger Mechanism

• The modal should appear when users click the "iOS Download" button at the bottom left of the interface

Modal Content Structure and Copy

1. Header Section:

   • Title: "Meet ChatPal – Your AI Sidekick for iOS!"
   • Subtitle: "Smart conversations in your pocket"

2. Main Content Section:

   • Primary Message: "ChatPal is our specialized iOS app that brings AI magic to your mobile experience – different from GlobalGPT but just as powerful!"
   • Benefit Statement: "Got GlobalGPT Pro? Awesome! You've already unlocked premium features on ChatPal too!"
   • How It Works: "Getting started is super easy: Just grab your special redemption code from your GlobalGPT subscription page and you're all set for premium mobile AI goodness."

3. Visual Section:

   • Include an illustrative diagram showing the connection flow:
     • GlobalGPT Pro Subscription → Your Unique Code → ChatPal Premium Unlocked
   • The diagram should use visual elements that match both brands while clearly showing the connection process

4. Call-to-Action Section:

   • Two prominently displayed buttons with gradient styling (hex #3558F5 to #7E30E1, horizontal gradient):
     • Primary Button: "Get ChatPal Now" - Leads to App Store
     • Secondary Button: "Go to My Subscription" - Directs to GlobalGPT subscription page
   • Close icon (✕) in the top-right corner of the modal

Button Design Specification

• Both buttons should feature a horizontal gradient from #3558F5 to #7E30E1
• The primary "Get ChatPal Now" button should have full gradient background
• The secondary "Go to My Subscription" button could use gradient text with transparent background and gradient border
• Both buttons should have appropriate hover/active states
• Buttons should have consistent padding and rounded corners matching the GlobalGPT design system

Design Reference

• Please refer to the provided GlobalGPT website screenshot; the modal design should maintain visual consistency
• Use the same typography hierarchy as seen in the main interface
• The modal should have appropriate shadows and rounded corners to match existing UI components
• Consider using subtle visual cues that represent both GlobalGPT and ChatPal identities

Interaction Requirements

• The modal should appear with a smooth fade-in animation (300ms duration)
• Add a subtle scale transition (0.95 to 1.0) for a polished appearance
• The background overlay should have a dark semi-transparent effect (rgba(0,0,0,0.5))
• Clicking outside the modal area or the close button should dismiss the modal with a fade-out animation
• Ensure responsive behavior across all device sizes

Technical Implementation Suggestions

• Implement the modal using a combination of CSS and JavaScript
• Use flexbox or grid for consistent layout alignment
• Ensure the modal is keyboard accessible and follows accessibility best practices
• Implement the gradient buttons using CSS gradient properties

Special Considerations

• The language should be conversational, friendly and excitement-generating throughout
• The visual diagram should be intuitive and engaging
• Consider adding a small "Pro User Benefit" badge or label to emphasize the added value
• Ensure the modal fits comfortably on mobile screens without requiring scrolling

Please implement this feature based on the reference image provided. If you have any questions or need further design details, please communicate at any time.