Introduction & Project Scope
Relevant source files
The following files were used as context for generating this wiki page:
Wasalny (وصلني) is a specialized landing page for a transportation service based in Damietta, Egypt. The project is designed as a high-performance, responsive web application that facilitates travel bookings between Damietta, Cairo, and major airports. It leverages modern web technologies to provide a smooth, animated user experience tailored for both desktop and mobile users in an Arabic (RTL) context.
The scope of the project encompasses service showcase, fleet categorization, route mapping, and lead generation via integrated communication channels like WhatsApp and direct calling. The architecture emphasizes a component-based design with a heavy focus on interactive visual storytelling through advanced animation hooks.
Sources: AGENTS.md:5-9, src/data/content.ts:74-80
Core Tech Stack
The application is built using a modern frontend stack focused on performance, type safety, and sophisticated UI interactions.
| Technology | Purpose | Key Details |
|---|---|---|
| React 19 | UI Library | Uses function declarations and hooks |
| TypeScript 5.9 | Language | Strict mode enabled, interface-driven |
| Vite 7 | Build Tool | Fast HMR and production bundling |
| Tailwind CSS v4 | Styling | Utility-first with CSS variable theming |
| GSAP | Animations | Includes ScrollTrigger and custom hooks |
| Lenis | UX | Smooth scrolling integration |
| Lucide React | Icons | SVG-based iconography |
Sources: package.json:13-35, AGENTS.md:14-22
System Architecture & Data Flow
The application follows a unidirectional data flow common in React ecosystems, where static content is centralized in data files and consumed by specialized UI sections.
Component Hierarchy
The root of the application, App.tsx, serves as the orchestrator for global providers (Theme, Smooth Scroll) and high-level layout components (Header, Footer).
Animation Logic Flow
Animations are decoupled from component logic using custom hooks. These hooks interface with GSAP and ScrollTrigger to drive visual updates based on user scroll position or interaction.
Project Organization
The repository is structured to separate concerns between business data, reusable UI elements, and complex animation logic.
Directory Structure
src/components/sections/: Contains the primary visual blocks of the landing page (e.g.,HeroSection,FleetSection).src/hooks/: HousesuseAnimations.ts, which provides reusable GSAP logic such asuseTextRevealanduseBatchReveal.src/data/: Centralizes site content likeroutes,stats, andcontactInfo.src/lib/: Utility configurations for GSAP and Tailwind merging.
Sources: AGENTS.md:25-36, src/data/content.ts:1-80
Visual Identity & Theming
The project uses a custom color palette defined in index.css via the Tailwind CSS v4 @theme directive. It supports both light and dark modes through CSS variables.
Primary Color Variables
- Primary Blue: Range from
primary-50(#eff6ff) toprimary-950(#172554), representing the core brand identity. - Accent Orange: Extracted from the logo (
accent-400toaccent-600) for call-to-action elements. - Typography: Uses the 'Cairo' font family to support Arabic legibility.
Sources: src/index.css:7-35, src/index.css:127-133
Functional Scope
The landing page provides several key functionalities aimed at user engagement:
- Lead Generation: Integration with WhatsApp and direct phone calling for immediate booking.
- Fleet Information: Categorized display of vehicles (Sedan, SUV, Family Cruiser, Minibus) with passenger capacity and features.
- Route Mapping: Visual representation of travel paths between Damietta, Cairo, and the Airport.
- Social Proof: Display of statistics (3000+ Happy Customers, 5000+ Successful Trips).
Sources: src/data/content.ts:68-72, src/data/content.ts:50-57, src/components/sections/HeroSection.tsx:142-154
The Wasalny Landing Page is a technically robust React application designed for high-end user engagement. By combining strict TypeScript typing with a modular animation system, the project ensures maintainability while delivering a premium visual experience for the Damietta-Cairo transportation market.