I'll create a mobile web page with the ranking system as specified, using Tailwind CSS and optimizing for mobile interactions.

This mobile web page implements all the requirements you specified:

Key Features Implemented:

1. Fixed Navigation Bar

   • Four pill-style tabs for different abilities
   • Gradient VIP button on the right
   • Shadow effect when scrolling

2. Ranking Card Flow

   • Cards with ranking badges (gold/silver/bronze styling)
   • Profile images with rating overlay
   • Radar charts showing one prominent ability
   • Semi-transparent unlock buttons

3. Smart Recommendation Layer

   • Appears after scrolling past 5 cards
   • Two-column grid layout
   • Progress bars with partially blurred values
   • Metallic-style unlock button

4. Progressive Unlock System

   • Level 1 (Free): Basic radar chart
   • Level 2 (Paid): Dynamic line chart + customer reviews
   • Level 3 (VIP): Appointment booking form
   • Blur transition effect when unlocking content

5. Social Proof Module

   • Fixed banner at the bottom
   • Real-time scrolling user actions
   • Daily report counter
   • Achievement badge display

Technical Implementation:

• Responsive Design: Optimized for 375px width mobile devices

• Animations:

  • Staggered card entrance animations (200ms delay per card)
  • Smooth transitions for modals and overlays
  • Progress bar animations

• Data Binding:

  • React state for tab switching and content display
  • Mock JSON data structure as specified

• Mobile Optimization:

  • Touch-friendly interactions
  • Fixed elements for easy navigation
  • Proper spacing for mobile tapping

The implementation uses Next.js with the App Router and Tailwind CSS for styling, making it highly performant and maintainable. All the visual specifications have been followed, including the color scheme, typography, and animation curves.