Project Structure & Organization

Relevant source files

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

• AGENTS.md
• package.json
• src/App.tsx
• src/components/sections/index.ts
• src/index.css
• src/data/content.ts
• src/components/layout/Header.tsx

The Wasalny Landing Page project is built using a modern React 19 and TypeScript stack, orchestrated by the Vite build tool. The project follows a modular architecture designed to support a high-performance, animated landing page for a transportation service. It leverages GSAP for complex animations, Tailwind CSS v4 for styling, and Lenis for smooth scrolling integration.

The organization is strictly component-based, separating concerns between layout elements, reusable UI primitives, and page-specific sections. This structure ensures scalability and maintainability while specifically catering to an Arabic (RTL) user interface.

Sources: AGENTS.md:1-12, package.json:1-40, src/App.tsx:1-48

Tech Stack & Core Dependencies

The project utilizes a specific set of libraries to handle performance, animations, and styling requirements.

Category	Technology
Framework	React 19 + TypeScript 5.9
Build Tool	Vite 7
Styling	Tailwind CSS v4
Animations	GSAP, @gsap/react, Split-type
Scrolling	Lenis
Icons	Lucide React

Sources: AGENTS.md:14-22, package.json:12-38

Directory Organization

The codebase is organized into a clean directory structure within the src/ folder to maintain clear separation of concerns.

Directory Definitions

• components/: Contains all React components. It is subdivided into layout (persistent elements like Header), sections (individual landing page blocks), and ui (atomic, reusable elements).
• data/: Holds static content and configuration, such as car image mappings and text content for the Arabic interface.
• hooks/: Custom React hooks, primarily focused on GSAP animation abstractions like useTextReveal and useParallax.
• lib/: Utility configurations, specifically the GSAP plugin registration and Tailwind cn() utility.
• providers/: Context providers for global features like smooth scrolling (Lenis).

Sources: AGENTS.md:24-38, src/App.tsx:1-20

Component Architecture & Data Flow

The application follows a unidirectional data flow and a hierarchical component structure. The entry point, App.tsx, wraps the entire application in necessary providers and assembles the sections into a single-page layout.

Application Lifecycle and Loading

The system implements a PageLoader to manage the initial user experience while heavy assets or animations are initialized.

Styling and Theming System

The project utilizes Tailwind CSS v4 with a custom theme defined in src/index.css. It supports both Light and Dark modes using CSS variables and semantic tokens.

• Primary Palette: A blue-based palette (--color-primary-50 to --color-primary-950).
• Accent Palette: An orange/amber palette (--color-accent-400 to --color-accent-600) derived from the company logo.
• Dark Mode: Implemented via the dark: variant and class-based selector toggling.
• Animations: Custom keyframes like float, slideUp, and carDrive are registered within the CSS @theme block.

Sources: src/index.css:1-120, src/App.tsx:25-27

Development Workflow & Guidelines

The project enforces strict coding standards to ensure consistency across the development team:

1. Imports: Ordered by React, Third-party, Path Aliases (@/*), Relative imports, and CSS.
2. Naming: PascalCase for Components, camelCase for hooks and utilities.
3. RTL Support: Since the target language is Arabic, the project uses a specialized rtlX helper in GSAP configurations to negate X-axis values for right-to-left layout consistency.
4. Barrel Exports: The src/components/sections/ directory uses an index.ts file to export all sections, simplifying imports in the main App.tsx.

Sources: AGENTS.md:40-104, src/components/sections/index.ts:1-10

Conclusion

The project structure of Wasalny Landing Page is designed for high-performance visual storytelling. By leveraging a strict directory hierarchy, centralized data management in the data/ folder, and a robust animation hook system, the architecture ensures that complex GSAP transitions remain maintainable and integrated within the React component lifecycle.