TypeScript Interfaces

Relevant source files

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

• src/types/index.ts
• AGENTS.md
• src/components/ui/SectionHeading.tsx
• src/hooks/useAnimations.ts
• src/components/ui/PageLoader.tsx
• src/components/sections/FeaturesSection.tsx

TypeScript interfaces in the Wasalny landing page project serve as the foundational structural definitions for data models and component properties. The project enforces a strict typing policy, preferring interface over type for object shapes to ensure consistency across the React 19 and Tailwind CSS v4 environment. These definitions facilitate type safety for core domain entities such as vehicles, transportation routes, and service features.

Centralized type definitions are primarily located in src/types/index.ts, while component-specific interfaces for props and animation configurations are co-located within their respective functional files. This modular approach ensures that data flow between static data files (e.g., src/data/cars.ts) and UI components remains predictable and strictly validated.

Sources: AGENTS.md:55-60, src/types/index.ts:1-35

Core Domain Entities

The project defines several core interfaces to represent the business logic of a transportation service. These entities structure the data used for showcasing the fleet, available routes, and service advantages.

Vehicle and Service Modeling

The Car interface is the most complex entity, accommodating multi-language support (Arabic/English) and categorical classification. It supports categories such as sedan, suv, family_cruiser, and minibus.

Interface Summaries

Interface	Purpose	Key Fields
Car	Defines vehicle details for the fleet showcase.	category, passengers, images
Service	Represents specific offerings (e.g., Airport transfer).	title, description, icon
Route	Details trip paths and durations.	from, to, duration
Feature	Highlights company advantages in the features grid.	id, title, icon
Testimonial	Structures user feedback and ratings.	content, rating

Sources: src/types/index.ts:1-35

UI and Component Interfaces

UI components utilize interfaces to define strict property requirements, ensuring that reusable elements like headings and loaders receive the correct configuration.

Section and Loader Props

Components such as SectionHeading and PageLoader use interfaces to manage optional parameters and callback functions.

interface SectionHeadingProps {
  title: string;
  subtitle?: string;
  centered?: boolean;
  className?: string;
}

interface PageLoaderProps {
  onComplete?: () => void;
  minDuration?: number;
}

Sources: src/components/ui/SectionHeading.tsx:10-15, src/components/ui/PageLoader.tsx:9-12

Animation Configuration Interfaces

Given the heavy reliance on GSAP for animations, the project defines specialized interfaces to control text reveals, batch animations, and interactive effects.

Animation Options

The TextRevealOptions and BatchRevealOptions interfaces allow developers to fine-tune animation triggers and behaviors.

Animation Parameter Reference

Interface	Field	Type	Description
TextRevealOptions	type	'lines' | 'words' | 'chars'	The granularity of the text split.
BatchRevealOptions	selector	string	CSS selector for target elements in a grid.
CounterOptions	endValue	number	The final number for the counter animation.
TiltOptions	max	number	Maximum degree of 3D tilt on hover.

Sources: src/hooks/useAnimations.ts:7-16, src/hooks/useAnimations.ts:125-132, src/hooks/useAnimations.ts:227-231, src/hooks/useAnimations.ts:245-252

Conclusion

The TypeScript interfaces in this project provide a robust framework for managing a high-performance, animated React application. By strictly defining domain models in src/types/index.ts and component props within the UI layer, the architecture ensures that data remains consistent from the static data layer through to the GSAP-powered presentation layer. This type-safety is critical for maintaining the multi-language (Arabic RTL) support and complex scroll-triggered interactions.

Sources: AGENTS.md:55-60, src/hooks/useAnimations.ts:1-50