Fleet & Routes Showcase

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/sections/FleetSection.tsx
• src/components/sections/RoutesSection.tsx
• src/data/content.ts
• src/hooks/useAnimations.ts
• src/lib/gsap.ts
• src/components/ui/SectionHeading.tsx

Introduction

The Fleet & Routes Showcase represents the core value proposition of the Wasalny landing page, detailing the physical assets (vehicles) and the geographical service area (routes) of the transportation service. This module is architected as a series of high-interaction React components that utilize GSAP (GreenSock Animation Platform) for immersive visual storytelling.

The primary scope includes the FleetSection, which categorizes various vehicle types and provides a 3D-style carousel for vehicle inspection, and the RoutesSection, which features an animated map visualization of travel paths between Damietta, Cairo, and major airports. These sections rely on a centralized data layer for content consistency and custom animation hooks for synchronized motion effects.

Sources: src/components/sections/FleetSection.tsx, src/components/sections/RoutesSection.tsx, src/data/content.ts

Fleet Management System

The fleet system is organized around vehicle categories, each containing specific metadata such as passenger capacity, features, and image galleries.

Vehicle Categorization

The system defines four primary categories for the transportation fleet. Each category is mapped to specific technical metadata used to render the UI.

Category ID	Display Name (AR)	Passengers	Key Features	Slogan
sedan	أحدث السيارات	4	AC, Comfortable Seats, USB	Comfort and economy for every trip
suv	أفخم العربات	4	AC, Large Luggage Space, Leather Seats	Power and luxury for all roads
family_cruiser	أفضل السيارات	6	6 Seats, Rear AC, Wide Space	Unforgettable family trips
minibus	جميع الاحتياجات	13	13 Passengers, Central AC	Ideal solution for groups

Sources: src/components/sections/FleetSection.tsx:21-52

3D Carousel Architecture

The FleetSection implements a custom 3D carousel using GSAP to manage spatial coordinates.

• Carousel Logic: Calculates xOffset, zOffset, rotateY, and scale based on the item's distance from the currentImageIndex.
• RTL Support: Adjusts offsets to ensure the carousel flows correctly in a Right-to-Left environment.
• State Management: Tracks activeCategory to filter available images and currentImageIndex for navigation.

The diagram above shows how state changes in the fleet section trigger synchronized updates across the image gallery and the technical specifications display.
Sources: src/components/sections/FleetSection.tsx:165-220, src/components/sections/FleetSection.tsx:265-275

Lightbox Gallery

A full-screen Lightbox component provides high-resolution viewing. It supports keyboard navigation (Escape, ArrowLeft, ArrowRight) and includes a thumbnail strip for direct image selection.
Sources: src/components/sections/FleetSection.tsx:81-163

Routes & Map Visualization

The RoutesSection provides a visual representation of service coverage using SVG path animations and synchronized coordinate markers.

Animated Map Logic

The map is a simplified SVG representation of the Nile Delta region. It utilizes several distinct animation layers:

1. Nile Path Draw: A strokeDashoffset animation that draws the river outline as the user scrolls.
2. Route Lines: Paths connecting Damietta, Cairo, and the Airport using dashed lines that utilize the useDrawPath hook.
3. Location Markers: Circles with pulsing animations created via pulseAnimation functions in GSAP.
4. Moving Assets: An "Animated Car" (SVG circle) that follows path1Ref (Damietta to Cairo) using a progress-based position update.

The sequence diagram illustrates the trigger-based initialization of the map's visual elements, ensuring animations only play when visible to the user.
Sources: src/components/sections/RoutesSection.tsx:109-210, src/hooks/useAnimations.ts

Route Data Structure

Routes are consumed from src/data/content.ts and rendered as RouteCard components.

Field	Type	Description
from	string	Departure city (e.g., Damietta)
to	string	Destination (e.g., Cairo, Airport)
duration	string	Estimated travel time string
description	string	Route-specific marketing text

Sources: src/data/content.ts:63-83

Animation Framework Integration

Both sections heavily utilize the project's custom animation infrastructure.

Custom Hooks Usage

• useBatchReveal: Used in both FleetSection (for info cards) and RoutesSection (for the route list) to create staggered entrance animations for grid items.
• useDrawPath: Specifically used in RoutesSection to animate SVG stroke lines.
• useGSAP: The primary lifecycle hook for registering GSAP animations within React components, ensuring proper cleanup and scoping to avoid memory leaks.

Sources: src/components/sections/FleetSection.tsx:300-330, src/components/sections/RoutesSection.tsx:103-107, src/hooks/useAnimations.ts

RTL Support in GSAP

The src/lib/gsap.ts utility provides rtlX() which is used to invert X-axis transformations when the document direction is set to RTL, ensuring that "sliding in" from the right behaves correctly in Arabic.
Sources: src/lib/gsap.ts, AGENTS.md:155-162

Implementation Details

Fleet Carousel Transforms

The CarouselCard component calculates its 3D position dynamically:

const xOffset = -50 + (offset * -65); // Inversion for RTL
const zOffset = Math.abs(offset) * -300;
const rotateY = offset * -15;
const scale = Math.max(0, 1 - Math.abs(offset) * 0.15);

gsap.to(cardRef.current, {
  xPercent: xOffset,
  z: zOffset,
  rotationY: rotateY,
  scale: scale,
  duration: 0.6,
  ease: 'power3.out'
});

Sources: src/components/sections/FleetSection.tsx:185-203

Map Marker Coordination

Markers use transformOrigin: 'center' to ensure they scale and pulse from their geographical center points on the SVG coordinate system.
Sources: src/components/sections/RoutesSection.tsx:140-180

Summary

The Fleet & Routes Showcase leverages a combination of SVG manipulation and 3D CSS transforms orchestrated by GSAP. By separating the data (routes/vehicle specs) from the presentation (Carousel/Map), the system remains maintainable while providing a high-performance, interactive user experience. The integration of RTL-aware animation logic ensures the interface is natural for its primary Arabic-speaking audience.