Layout Components
Relevant source files
The following files were used as context for generating this wiki page:
The Layout Components in the Wasalny landing page define the persistent visual structure and navigation framework of the application. These components, primarily the Header and Footer, wrap the main content sections to provide a consistent user experience, brand identity, and accessibility to key actions like booking via WhatsApp or phone calls.
These components are integrated within the main App.tsx file, surrounding the various page sections and working in tandem with providers like SmoothScrollProvider and ThemeProvider to ensure smooth interactions and theme consistency across the site.
Sources: src/App.tsx:28-44, AGENTS.md:21-31
Global Layout Structure
The application follows a standard vertical layout where the Header is fixed at the top, the <main> element contains the scrollable content sections, and the Footer concludes the page. A FloatingCTA component is also present to provide persistent access to contact methods regardless of scroll position.
The diagram above illustrates the high-level nesting of layout components within the application root.
Sources: src/App.tsx:25-46
Header Component
The Header component serves as the primary navigation hub. It features a responsive design that adapts between a desktop navigation bar and a mobile overlay menu. It utilizes GSAP for entrance animations and scroll-triggered visual state changes (such as shrinking or background opacity adjustments).
Navigation Logic
Navigation is handled through internal anchor links (e.g., #services, #fleet). When a link is clicked, the handleNavClick function executes scrollIntoView with a smooth behavior setting to navigate the user to the corresponding section.
Interactive Elements
- Magnetic Links: Desktop navigation links use the
useMagneticButtonhook to create a subtle attraction effect to the mouse cursor. - Scroll-Triggered Shrink: As the user scrolls down, a GSAP timeline adjusts the header's padding and background opacity.
- Mobile Menu: A state-controlled
MobileMenucomponent that provides a staggered entrance animation for links when toggled.
| Feature | Implementation Detail | Source |
|---|---|---|
| Animation Engine | GSAP with useGSAP hook | Header.tsx:162-171 |
| Mobile Toggle | useState(false) for isMobileMenuOpen | Header.tsx:155 |
| Theme Toggle | Integrated ThemeToggle component | Header.tsx:265 |
| Action Button | "Call Now" button linking to tel: | Header.tsx:253-261 |
Sources: src/components/layout/Header.tsx:11-30, src/components/layout/Header.tsx:173-194, src/hooks/useAnimations.ts:114-142
Footer Component
The Footer provides deep linking, service summaries, contact details, and social media integration. It is divided into four main columns: Brand info, Quick Links, Services, and Contact Info.
Component Logic
- Batch Reveal: Footer columns use the
useBatchRevealhook to animate into view with a staggered interval. - Social Interactions: The
SocialLinksub-component manages its own GSAP hover states (scaling and translation) via event listeners. - Dynamic Date: Uses
new Date().getFullYear()to display the current copyright year.
The diagram shows the modular structure of the Footer and its interaction with page navigation.
Sources: src/components/layout/Footer.tsx:114-123, src/components/layout/Footer.tsx:142-243
Floating Call-to-Action (CTA)
The FloatingCTA is a specialized layout utility that appears only after the user has scrolled past the initial Hero section. It provides quick-access buttons for WhatsApp and Facebook.
Visibility Management
The component uses ScrollTrigger to monitor the #home section. It sets an isVisible state to true when the bottom of the hero section passes the viewport threshold.
Animations
- Entrance: Fades and scales in using a
back.outease whenisVisiblebecomes true. - WhatsApp Pulse: A continuous pulse animation behind the WhatsApp icon to draw user attention.
Sources: src/components/ui/FloatingCTA.tsx:14-25, src/components/ui/FloatingCTA.tsx:39-53
Shared Layout Hooks
Layout components rely on custom animation hooks defined in useAnimations.ts to maintain a consistent interactive feel.
useMagneticButton: Calculates mouse proximity to apply a "magnetic" pull to buttons or links.useBatchReveal: Usesgsap.fromTowith astaggerproperty to reveal groups of items (like footer columns or nav links).useGSAP: The standard React wrapper for GSAP used across all layout components for safe animation lifecycle management.
Sources: src/hooks/useAnimations.ts:114-125, src/hooks/useAnimations.ts:316-350, AGENTS.md:129-138
Summary
The Layout Components of Wasalny provide the structural "glue" for the landing page. By utilizing GSAP for both aesthetic (magnetic effects, pulses) and functional (scroll-triggered headers) purposes, the Header, Footer, and FloatingCTA ensure that navigation and contact actions remain accessible and engaging regardless of where the user is on the page.