Getting Started & Installation

Relevant source files

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

• package.json
• AGENTS.md
• README.md
• src/App.tsx
• src/index.css
• src/lib/gsap.ts

This document provides a technical overview of how to set up, install, and begin development on the Wasalny landing page project. Wasalny is a specialized transportation service platform based in Damietta, Egypt, focusing on routes to Cairo and various airports. The project is built using modern web technologies including React 19, TypeScript, and Vite, with a heavy emphasis on high-performance animations via GSAP and smooth scrolling through Lenis.

The development environment is optimized for a fast developer experience (DX) using Vite's Hot Module Replacement (HMR) and a strict TypeScript configuration to ensure type safety across the component architecture.

Sources: AGENTS.md:3-8, package.json:13-22

Tech Stack Overview

The project utilizes a modern frontend stack designed for performance, maintainability, and advanced UI/UX interactions.

Technology	Purpose	Version
React	Component-based UI library	^19.2.0
TypeScript	Static typing and tooling	~5.9.3
Vite	Build tool and dev server	^7.2.4
Tailwind CSS	Utility-first styling (v4)	^4.1.6
GSAP	High-performance animations	^3.14.2
Lenis	Smooth scrolling engine	^1.3.17

Sources: package.json:13-37, AGENTS.md:14-22

Prerequisites & Installation

To get started with the project, ensure you have Node.js installed. The project uses npm as the primary package manager.

Step 1: Clone and Install

First, clone the repository and install the necessary dependencies:

npm install

Step 2: Available Commands

The package.json defines several scripts to manage the development lifecycle:

Command	Action
npm run dev	Starts the Vite development server with HMR.
npm run build	Runs the TypeScript compiler (tsc -b) followed by the Vite production build.
npm run lint	Executes ESLint to check for code quality and style violations.
npm run preview	Previews the locally built production files.

Sources: package.json:7-12, AGENTS.md:24-33

Project Architecture & Flow

The application initializes through a standard Vite-React entry point, but incorporates several providers to manage theme, smooth scrolling, and animation registration.

Bootstrapping Process

The following diagram illustrates the initialization flow of the application from the entry point to the rendered sections:

The application flow ensures that animation plugins are registered before components mount.
Sources: src/App.tsx:21-46, src/lib/gsap.ts:5-7

Key Component Structure

The project follows a modular structure where UI components are separated from section-specific logic:

• src/components/layout/: Persistent elements like Header and Footer.
• src/components/sections/: High-level page blocks (e.g., HeroSection.tsx, FleetSection.tsx).
• src/components/ui/: Reusable, atomic components like Button.tsx or PageLoader.tsx.
• src/lib/: Core utility configurations, specifically for gsap.ts.

Sources: AGENTS.md:37-48

Core Development Guidelines

Animation Integration

Animations are handled centrally using GSAP. Developers must use the useGSAP hook for React integration to ensure proper cleanup and performance.

import { useGSAP } from '@gsap/react';
import gsap from 'gsap';

useGSAP(() => {
  gsap.to(".element", { opacity: 1 });
}, { scope: containerRef });

Sources: src/lib/gsap.ts:1-7, AGENTS.md:83-93

RTL (Right-to-Left) Support

As the target audience is Arabic-speaking, the project includes specific helpers in src/lib/gsap.ts to handle coordinate systems in RTL layouts. The rtlX utility negates X-axis values if the document direction is set to 'rtl'.

// From src/lib/gsap.ts
export const rtlX = (value: number): number => {
  if (typeof document === 'undefined') return value;
  return document.dir === 'rtl' ? -value : value;
};

Sources: src/lib/gsap.ts:16-19, AGENTS.md:118-125

Styling System

The project utilizes Tailwind CSS v4 via the @tailwindcss/vite plugin. Custom theme variables (like primary colors and custom animations) are defined in the @theme block within src/index.css.

Sources: src/index.css:7-35, package.json:25

Summary

To begin development, run npm install followed by npm run dev. The project relies on a strictly typed TypeScript environment and a specific animation workflow utilizing GSAP and Lenis. Developers should adhere to the RTL utility helpers when implementing horizontal animations to ensure consistency across the Arabic interface.