Features & Services

Relevant source files

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

• src/components/sections/FeaturesSection.tsx
• src/components/sections/ServicesSection.tsx
• src/data/content.ts
• src/hooks/useAnimations.ts (Referenced via component implementation)
• src/components/ui/SectionHeading.tsx
• src/App.tsx

The Features & Services module represents the core value proposition of the Wasalny landing page. It is architected as a collection of high-performance, animated React components that showcase the transportation capabilities and unique selling points of the service. This module leverages GSAP (GreenSock Animation Platform) for high-fidelity interactive elements and a centralized data strategy for content management.

These sections are integrated into the main application layout within src/App.tsx and utilize a shared UI design language, including standardized section headings and responsive grid layouts.

Sources: src/App.tsx:28-35, src/components/sections/FeaturesSection.tsx:167-175

Services Architecture

The Services section is designed to categorize the various transportation offerings provided by Wasalny. It utilizes a data-driven approach where service definitions are mapped to interactive "Tilt Cards."

Service Components and Data Flow

The architecture follows a unidirectional flow where static data is injected into specialized UI components. Each service item includes a title, description, and an icon identifier that maps to a lucide-react component.

The ServiceCard component implements a useGSAP hook to handle localized hover states, including a "wiggle" animation for icons and a scale effect for the card container.

Sources: src/components/sections/ServicesSection.tsx:47-81, src/data/content.ts:1-24

Core Service Offerings

Service ID	Title	Description	Icon
damietta-cairo	دمياط - القاهرة	Daily comfortable trips between Damietta and Cairo.	route
airport-transfer	توصيل المطار	Transfer services to/from Cairo International Airport.	plane
private-trips	رحلات خاصة	Private car bookings with professional drivers.	car
internal-routes	رحلات داخلية	Quick and comfortable trips within Damietta cities.	route

Sources: src/data/content.ts:1-24, src/components/sections/ServicesSection.tsx:13-45

Features & Value Proposition

The Features section highlights the qualitative aspects of the service, such as safety, comfort, and availability. It is technically distinct from the Services section by its use of "Batch Reveal" animations and integrated statistical counters.

Feature Data Structure

Features are defined as objects containing metadata for styling (gradients) and content.

const features = [
  {
    id: 'safety',
    title: 'أمان تام',
    description: 'سائقين محترفين ومرخصين مع خبرة طويلة في القيادة الآمنة',
    icon: 'shield',
    color: 'from-blue-500 to-blue-600',
  },
  // ... additional features
];

Sources: src/components/sections/FeaturesSection.tsx:16-56

Animation Logic and Interaction

The Features module employs two primary animation patterns:

1. Batch Reveal: Elements enter the viewport with staggered delays using the useBatchReveal hook.
2. Statistical Counters: The GSAPCounter component animates numerical values from zero to the target value when they scroll into view.

Common UI Elements

Both Features and Services utilize the SectionHeading component, which provides a consistent entry animation for titles and subtitles.

SectionHeading Configuration

Property	Type	Default	Description
title	string	Required	Main heading text.
subtitle	string	undefined	Supporting descriptive text.
centered	boolean	true	Determines text alignment.
className	string	undefined	Custom CSS classes for styling overrides.

The SectionHeading component specifically animates an underline's width from 0 to 96px using a ScrollTrigger that fires when the container is at 92% of the viewport.

Sources: src/components/ui/SectionHeading.tsx:11-20, src/components/ui/SectionHeading.tsx:32-60

Summary

The Features & Services module serves as the primary informational layer of the Wasalny landing page. By combining a centralized data approach in src/data/content.ts with sophisticated GSAP-driven animations in FeaturesSection.tsx and ServicesSection.tsx, the system provides a performant and interactive user experience. The use of specialized hooks like useBatchReveal and components like GSAPCounter ensures that technical specifications and service benefits are presented dynamically as the user explores the page.