Hero Section
Relevant source files
The following files were used as context for generating this wiki page:
The Hero Section serves as the primary landing interface for the Wasalny platform. Its main purpose is to provide an immediate value proposition to users through high-impact visuals, clear call-to-action (CTA) buttons, and social proof through statistics. It is the first functional section rendered within the main layout of the application.
Sources: src/App.tsx:32, src/components/sections/HeroSection.tsx:112-116
Architecture and Layout
The section is built using a two-column grid layout on large screens, transitioning from a stacked mobile-first approach. The left column (on LTR, though styled for RTL) contains the textual content and CTAs, while the right column houses the interactive hero image and decorative elements.
Visual Hierarchy Components
| Component | Description | Reference |
|---|---|---|
| Location Badge | A pill-shaped UI element displaying the primary service areas (Damietta, Cairo, Airport). | HeroSection.tsx:128-135 |
| Headline | A split-text title emphasizing the service's primary status in Damietta. | HeroSection.tsx:138-144 |
| Action Buttons | Dual CTA buttons for WhatsApp booking and direct phone calls. | HeroSection.tsx:156-174 |
| Stats Grid | A three-column grid displaying availability (24/7), customer count (3000+), and successful trips (5000+). | HeroSection.tsx:177-193 |
| Hero Image | A 3D-perspective container featuring a high-quality car asset from the family_cruiser category. | HeroSection.tsx:196-213 |
Sources: src/components/sections/HeroSection.tsx:126-213
Animation Logic and Flow
The Hero Section heavily utilizes the GreenSock Animation Platform (GSAP) and custom hooks to create a dynamic entrance and continuous engagement.
Entrance Sequence
The section follows a staggered entrance sequence controlled by useGSAP.
Interaction and Persistent Animations
The section maintains visual interest through several persistent background and interactive animations:
- Floating Effect: The main hero image uses
useFloatingAnimationto create a vertical oscillating effect with an amplitude of 20px over a 4-second duration. - Parallax Backgrounds: Background "blobs" react to scroll depth at different speeds (0.2 and -0.3) using the
useParallaxhook. - Rotational Elements: Decorative circles around the car image rotate continuously in opposite directions (20s clockwise and 15s counter-clockwise).
- Hover Interaction: The car image scales slightly (1.02) upon mouse entry to provide tactile feedback.
Sources: src/components/sections/HeroSection.tsx:25-30, src/components/sections/HeroSection.tsx:64-78, src/hooks/useAnimations.ts:208-223
Technical Implementation
Data Integration
The Hero Section pulls static content and configuration from internal data modules:
contactInfo: Provides the WhatsApp number and phone number used in thehandleWhatsAppandhandleCallfunctions.carImages: Supplies the source path for thefamily_cruiserimage displayed in the hero visual.
Sources: src/components/sections/HeroSection.tsx:5-6, src/components/sections/HeroSection.tsx:98-110
Styling and Theme
The section is styled using Tailwind CSS v4, utilizing a custom primary-to-accent gradient background. It supports both light and dark modes via semantic CSS variables defined in the base layer.
/* Custom variables used in HeroSection */
--color-primary-50: #eff6ff;
--color-primary-950: #172554;
--background: 220 20% 97%;
Sources: src/index.css:10-21, src/index.css:91-103, src/components/sections/HeroSection.tsx:117-118
Component State and Refs
DOM access for animations is managed through a series of useRef hooks to ensure GSAP can target elements without causing React re-renders.
| Ref Name | Target Element | Purpose |
|---|---|---|
containerRef | <section> | GSAP Scope for all inner animations. |
titleRef | <h1> | Target for useTextReveal. |
heroImageRef | <div> (Wrapper) | Target for useFloatingAnimation. |
blob1Ref/blob2Ref | <div> (Background) | Targets for useParallax. |
Sources: src/components/sections/HeroSection.tsx:12-23
Conclusion
The Hero Section is the architectural centerpiece of the Wasalny landing page, integrating complex GSAP animations with a responsive Tailwind-based layout. By leveraging custom animation hooks and centralized data providers, it ensures a performant and maintainable entry point for the application's user experience.