Static Content Management
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Static Content Management in the Wasalny landing page project refers to the architectural pattern of isolating marketing copy, contact details, and business logic data into dedicated TypeScript files. This approach separates the "what" (the content) from the "how" (the React components and GSAP animations), enabling easier updates and consistent data usage across multiple sections of the application.
The system primarily revolves around centralized data structures that define service offerings, operational routes, fleet categories, and contact information. These data structures are then consumed by various UI components, such as the HeroSection, FeaturesSection, and Footer, to render the application's interface.
Sources: src/data/content.ts, AGENTS.md:31-31
Centralized Data Architecture
The project utilizes a structured directory (src/data/) to store static information. This ensures that a single change to a value in the data layer propagates throughout the entire user interface.
Content Schema
The content is organized into exported constants that represent the core business entities of the Wasalny service.
| Data Object | Description | Key Fields |
|---|---|---|
services | List of transportation services offered. | id, title, description, icon |
features | Key selling points of the service. | id, title, description, icon |
routes | Standard travel paths and durations. | id, from, to, duration, description |
stats | Counters for social proof (years, drivers, etc.). | id, value, suffix, label |
contactInfo | Business contact details and social links. | phone, whatsapp, email, address, facebook |
Sources: src/data/content.ts:1-93
Data Flow Diagram
The following diagram illustrates how static data flows from the centralized content.ts file into specific UI components.
This diagram shows the dependency of various UI components on the centralized content data file.
Sources: src/components/sections/HeroSection.tsx:6, src/components/sections/FeaturesSection.tsx:5, src/components/layout/Footer.tsx:5, src/components/sections/CTASection.tsx:5
Core Content Modules
Route and Service Definitions
The transportation logic is defined by routes and services. These objects provide the metadata used to render cards and map markers. For instance, the routes array defines the trip duration (e.g., "2.5 - 3 hours") and the geographic start and end points.
export const routes = [
{
id: 'damietta-cairo',
from: 'دمياط',
to: 'القاهرة',
duration: '2.5 - 3 ساعات',
description: 'رحلة مريحة عبر الطريق الساحلي',
},
// ...
];
Sources: src/data/content.ts:63-83
Contact and Social Integration
The contactInfo object serves as the single source of truth for communication channels. It is used to generate dynamic links for WhatsApp, phone calls, and Facebook navigation.
- WhatsApp: Formatted as a numeric string for API integration.
- Social: Direct URLs for Facebook profiles.
- Physical: Localized address strings.
Sources: src/data/content.ts:85-93, src/components/sections/HeroSection.tsx:112-117
Fleet and Asset Management
While content.ts handles textual data, fleet management is handled through a combination of category info and image mapping. This includes technical specifications like passenger capacity and vehicle features (e.g., "Air Conditioning", "USB Charger").
| Category | Passengers | Key Features |
|---|---|---|
sedan | 4 | AC, Comfortable seats, USB |
suv | 4 | Leather seats, Large luggage space |
family_cruiser | 6 | Rear AC, Wide space |
minibus | 13 | Central AC, Group solution |
Sources: src/components/sections/FleetSection.tsx:16-48
Implementation in Components
Thematic Stying and Icons
Static content is often mapped to specific UI icons or color gradients within the components. For example, the FeaturesSection uses an iconMap to link string IDs from the data to Lucide React components.
The mapping process between static data IDs and visual assets.
Sources: src/components/sections/FeaturesSection.tsx:10-25, src/components/sections/ServicesSection.tsx:10-40
Multi-language Support (Arabic)
The static content is authored primarily in Arabic, supporting the RTL (Right-to-Left) nature of the application. This is reflected in the AGENTS.md guidelines which specify the use of RTL helpers when animating these static strings.
Sources: AGENTS.md:144-150, src/data/content.ts:1-93
Conclusion
Static Content Management in Wasalny provides a robust foundation for maintaining the landing page. By centralizing all business-related strings and configurations in src/data/content.ts and category definitions in src/components/sections/FleetSection.tsx, the project ensures high maintainability and consistency across its diverse set of animated React components.