Mobile App Promotion
Relevant source files
The following files were used as context for generating this wiki page:
The Mobile App Promotion system in the Wasalny landing page is a multi-faceted architectural approach designed to highlight the service's digital presence and drive user conversion through visual storytelling and persistent accessibility. It primarily consists of a high-impact "App Showcase" carousel and strategically placed "Call to Action" (CTA) elements that facilitate immediate communication via mobile-first platforms like WhatsApp.
The promotion logic is integrated into the main application lifecycle, utilizing advanced animation libraries like GSAP and ScrollTrigger to ensure that promotional content is revealed as users interact with the page. This system encompasses visual evidence of the service through mockups and provides the direct links necessary to convert visitors into active customers.
Showcase Architecture and Visualization
The core of the promotion is the AppShowcaseSection, which serves as a visual gallery for the service's mobile interface and fleet. It utilizes a state-driven carousel mechanism to cycle through mockup images, providing a tangible look at the service capabilities.
Carousel Logic
The showcase utilizes a currentIndex state managed by React's useState hook to track the active image. An auto-play mechanism is implemented via useEffect and setInterval, ensuring the showcase remains dynamic even without user intervention. Navigation is handled through memoized nextSlide and prevSlide callbacks to optimize performance.
Animation Framework
The promotion relies on GSAP (GreenSock Animation Platform) for entrance and transition effects. The AppShowcaseSection registers ScrollTrigger to trigger animations only when the section enters the viewport.
| Animation Component | Logic Description | Trigger |
|---|---|---|
| Container Fade | Translates y-axis by 40px and fades in opacity. | ScrollTrigger (top 90%) |
| Thumbnail Stagger | Individual thumbnails scale up and fade in with a 0.05s stagger. | ScrollTrigger (top 95%) |
| Image Transition | Scales from 1.02 to 1.0 with a rapid 0.3s ease. | currentIndex change |
Sources: src/components/sections/AppShowcaseSection.tsx:11-13, src/components/sections/AppShowcaseSection.tsx:49-93
Persistent Conversion Channels
To maximize the impact of the app promotion, the system maintains persistent and contextual CTA elements that link the user to the booking services.
Floating CTA System
The FloatingCTA component provides a non-intrusive yet ever-present set of buttons for WhatsApp and Facebook. It includes a specific logic to remain hidden until the user has moved past the initial HeroSection.
Contact Integration
Promotional buttons across the HeroSection, CTASection, and FloatingCTA are programmatically linked to the contactInfo data object. This centralized configuration ensures consistency across all promotion points.
| Target Platform | URL Generation Logic | File Source |
|---|---|---|
wa.me/${whatsapp}?text=${encodedMsg} | src/data/content.ts:79 | |
| Direct Call | tel:${phone} | src/components/sections/CTASection.tsx:114 |
${facebook} | src/data/content.ts:82 |
Section Integration in App Lifecycle
The mobile promotion is not a standalone page but a series of integrated sections within App.tsx. The order of presentation is designed to build trust before the final CTA.
- HeroSection: Establishes the brand and provides the first "Book via WhatsApp" action.
- AppShowcaseSection: Provides visual proof of service via the image carousel.
- CTASection: The final conversion point with large interactive cards and a pulsing "Book Now" button.
Sources: src/App.tsx:24-49
Technical Summary
The Mobile App Promotion system leverages React 19 and GSAP to create a high-performance, mobile-optimized landing experience. By separating promotional content into specialized components like AppShowcaseSection and FloatingCTA, the architecture ensures that the marketing message is both visually engaging and technically efficient, with animations tied directly to user scroll behavior and state transitions.
Sources: src/App.tsx, src/components/sections/AppShowcaseSection.tsx, src/components/ui/FloatingCTA.tsx