Technology Stack

Relevant source files

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

• AGENTS.md
• package.json
• tsconfig.app.json
• src/index.css
• src/App.tsx
• src/components/ui/SectionHeading.tsx
• src/components/sections/HeroSection.tsx

The Wasalny landing page is built using a modern frontend architecture centered around React 19 and TypeScript. It serves as a high-performance, visually engaging landing page for a transportation service in Damietta, Egypt. The stack is specifically chosen to support complex animations, smooth scrolling, and a responsive utility-first design suitable for both right-to-left (RTL) and left-to-right (LTR) contexts.

The project leverages Vite as the build tool and development server, ensuring fast Hot Module Replacement (HMR) and optimized production builds. Styling is handled via Tailwind CSS v4, while the interactive experience is powered by the GreenSock Animation Platform (GSAP) and Lenis for smooth scroll behavior.

Sources: AGENTS.md:5-10, package.json:15-20

Core Framework and Language

The application's foundation is built on React 19, utilizing functional components and modern hooks for state and lifecycle management. TypeScript is employed across the codebase to ensure type safety, particularly for component props, animation configurations, and data structures.

Key Specifications

Technology	Version	Description
React	^19.2.0	Core UI framework for component-based architecture.
TypeScript	~5.9.3	Static typing with strict mode enabled.
Vite	^7.2.4	Build tool and dev server with React plugin.

Sources: package.json:15-32, tsconfig.app.json:4-15

Animation and Interactivity Engine

The visual identity of the project is heavily dependent on the GSAP suite. The implementation uses a centralized configuration in src/lib/gsap.ts and leverages the @gsap/react hook for safe integration with the React lifecycle.

Animation Components

• GSAP Core & Plugins: Used for timeline-based animations, including ScrollTrigger for scroll-activated effects.
• Custom Animation Hooks: The project abstracts complex GSAP logic into reusable hooks like useTextReveal, useFloatingAnimation, and useParallax.
• Split-Type: A utility used to split text into characters or words for granular reveal animations.

The following diagram illustrates the flow of a scroll-triggered animation within a component like SectionHeading.

The diagram shows how the component lifecycle interacts with the GSAP engine to trigger animations based on viewport position.
Sources: src/components/ui/SectionHeading.tsx:23-60, AGENTS.md:79-92, package.json:16-22

Styling and Layout Architecture

The project uses Tailwind CSS v4 with a customized theme configuration. The styling architecture is designed to support dark mode and RTL layouts natively.

CSS Architecture

• Utility-First: Styles are applied primarily through Tailwind classes in JSX.
• Semantic Tokens: Custom CSS variables are defined in @layer base for both light and dark themes (e.g., --background, --primary-500).
• Component Classes: Common UI elements like .btn-primary and .card are abstracted using the @layer components directive.

Theme Configuration Example

@theme {
  --color-primary-500: #3b82f6;
  --color-accent-500: #f97316;
  --animate-float: float 3s ease-in-out infinite;
  --font-cairo: 'Cairo', sans-serif;
}

Sources: src/index.css:7-38, src/index.css:122-156

Project Structure and Dependencies

The application is organized into a modular directory structure to separate concerns between UI, logic, and data.

This graph represents the high-level dependency flow where the main App entry point composes layout and section components.
Sources: AGENTS.md:23-34, src/App.tsx:15-40

Utility Libraries

• lucide-react: Provides a consistent set of SVG icons used across Hero, Features, and Contact sections.
• clsx & tailwind-merge: Combined in a cn() utility to handle conditional class merging without conflicts.
• Lenis: Integrated via a SmoothScrollProvider to normalize scrolling behavior across different browsers and devices.

Sources: package.json:17-23, src/App.tsx:31-35, AGENTS.md:72-77

Development Workflow

The project maintains a strict development environment through ESLint and TypeScript configurations.

Command	Action
npm run dev	Starts the Vite development server with HMR.
npm run build	Runs tsc for type checking followed by vite build for production assets.
npm run lint	Executes ESLint to enforce code style and catch potential errors.

Sources: package.json:7-12, AGENTS.md:12-21

Conclusion

The Wasalny landing page technology stack is a performance-oriented suite that prioritizes user experience through smooth transitions and a robust design system. By combining React 19's rendering efficiency with GSAP's powerful animation capabilities and Tailwind CSS's flexible styling, the architecture ensures a highly maintainable and scalable frontend codebase.