Divar: Fraud Awareness Campaign Landing Page

Project Overview

Divar is the largest online classifieds platform in Iran, serving tens of millions of monthly active users. As a front end and full stack developer at Harmony Advertising Agency, I engineered the official interactive campaign landing page for Divar's nationwide anti-fraud awareness initiative, known as "NoRisk" (divar.ir/landings/norisk). The goal was to educate millions of buyers and sellers on detecting phishing traps, fake payment receipts, and fraudulent deposit schemes through engaging, interactive visual storytelling.

The Challenge: Engaging Millions at 60 FPS Across All Devices

Translating serious security advisories into an engaging digital experience posed distinct engineering and UX challenges:

• High-volume consumer traffic: As a nationwide campaign promoted across Divar's mobile app, social channels, and public media, the landing page had to withstand massive traffic spikes without latency or layout breakdown.
• Interactive scrollytelling: Static text warnings are easily ignored. The creative brief called for an immersive, scroll-driven narrative that visualized how scammers operate and how users can protect themselves at each decision point.
• Mobile performance parity: A significant majority of Divar users access the platform via mid-range or budget smartphones. Complex motion graphics had to run at a consistent 60 frames per second without stuttering, overheating, or draining battery.

Motion Architecture: GSAP ScrollTrigger & Scrollytelling Timelines

To craft an intuitive narrative that unfolds as users scroll, we built a layered animation architecture:

• Coordinated GSAP ScrollTrigger timelines: Built sequential timelines anchored to specific scroll thresholds. As visitors scroll down the page, visual demonstrations (such as simulated chat dialogues, manipulated payment screenshots, and verified secure escrow badges) transition dynamically into view.
• Micro-interactions with Framer Motion: While GSAP managed global scroll-linked coordinate transforms, Framer Motion powered local component state transitions, including modal popups, interactive scenario quizzes, and feedback animations.
• GPU hardware acceleration: To ensure butter-smooth 60fps animation on mobile devices, all element translations leveraged hardware-accelerated 3D CSS transforms (transform: translate3d(...) and translateZ(0)). Properties were grouped to avoid expensive CPU layout reflows and paint repaints.
• Lifecycle cleanup & memory management: Managed GSAP instances with strict React lifecycle hooks, destroying detached ScrollTrigger observers on route changes or viewport resizes to eliminate background memory leaks.

Figma to React: Pixel-Perfect Responsive Execution

Translating complex, layered Figma artboards into responsive code required dedicated breakpoint engineering:

• Cross-device timeline adaptation: Animation coordinate offsets, pinning durations, and scale factors were programmatically recalculated based on active viewport dimensions, ensuring identical narrative pacing on small smartphone screens and widescreen desktop monitors.
• Tailwind CSS utility styling: Leveraged Tailwind CSS for layout precision, fluid typography, and consistent spacing tokens, eliminating arbitrary CSS overrides and minimizing final stylesheet size.
• Interactive fraud simulators: Built accessible interactive scenario selectors where users could test their instincts against sample suspicious messages and receive immediate visual feedback.

Asset Optimization & Core Web Vitals

For high-traffic landing pages, initial paint speed directly determines bounce rates:

• CSS-first transitions: Offloaded simple hover and entrance states to pure CSS animations, reserving JavaScript execution strictly for complex scroll-driven timeline orchestrations.
• Vector and media compression: Optimized and inlined critical SVGs, while compressing photography into modern AVIF and WebP formats with explicit aspect ratios to guarantee zero Cumulative Layout Shift (CLS < 0.01).
• Dynamic module code splitting: Interactive quiz widgets and non-critical animation assets located below the fold were loaded asynchronously using dynamic imports, ensuring lightning-fast First Contentful Paint (FCP).

Key Measured Outcomes

• 20% reduction in fraud incidents: The campaign contributed to an estimated 20% decrease in reported phishing and advance-deposit scams on Divar during the campaign timeframe.
• Butter-smooth 60 FPS playback: GPU-accelerated motion delivered seamless performance across mobile devices, even under intensive scroll scrubbing.
• Exceptional Core Web Vitals: Minimal bundle size and optimized media delivery ensured instant loading under heavy marketing traffic bursts.
• High user engagement: The interactive scrollytelling format substantially increased average time spent on page compared to standard informational landings.