Atomic UI Components
Relevant source files
The following files were used as context for generating this wiki page:
Atomic UI Components in the Wasalny project represent the foundational, reusable building blocks used to construct the landing page's user interface. These components are designed with strict TypeScript interfaces, leveraging Tailwind CSS v4 for styling and GSAP (GreenSock Animation Platform) for high-performance interactive animations. They are located within the src/components/ui/ directory and follow a functional component pattern.
The architecture emphasizes separation of concerns, where component logic handles state and accessibility, while external libraries like GSAP manage complex motion sequences and scroll-triggered reveals.
Sources: AGENTS.md:15-28, src/index.css:1-20
Core UI Components
Button Component
The Button component is a highly versatile interactive element supporting multiple visual variants, sizes, and specialized animation effects such as magnetic hovering. It utilizes the useMagneticButton custom hook to provide a physics-based pull effect when the cursor is near.
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'accent' | 'ghost' | 'primary' | Visual style preset defined in Tailwind layers |
size | 'sm' | 'md' | 'lg' | 'md' | Padding and font-size configuration |
magnetic | boolean | false | Enables magnetic hover effect |
loading | boolean | false | Displays a spinning loader icon |
The component uses internal GSAP listeners to manage hover (scale: 1.02) and mouse-down (scale: 0.98) states for tactile feedback.
Sources: src/components/ui/Button.tsx:6-33, src/components/ui/Button.tsx:44-78
SectionHeading
Used for consistent titling across page sections, this component includes a title, optional subtitle, and an animated underline. It employs ScrollTrigger to animate the text and underline into view once the user scrolls to the section.
The underline is styled with a gradient from primary-500 to primary-600 and defaults to a centered alignment.
Sources: src/components/ui/SectionHeading.tsx:16-56
CustomSelect
A sophisticated dropdown component used for user input (e.g., in pricing calculators). It supports search filtering, keyboard accessibility, and custom icon integration. It manages an isOpen state to toggle the visibility of the options panel.
Key internal logic:
- Outside Click Detection: Uses a
mousedownevent listener to close the dropdown when a user clicks away. - Search Filtering: Computes
filteredOptionsby matching thesearchQueryagainst the option name. - RTL Support: The UI is optimized for Arabic, placing search icons and chevrons according to local layout standards.
Sources: src/components/ui/CustomSelect.tsx:32-68
Navigation and Feedback Components
ThemeToggle
The ThemeToggle component allows users to switch between light, dark, and system themes. It provides visual feedback via an animated indicator that slides and scales using GSAP.
PageLoader
A full-screen entry component that manages the initial loading state of the application. It features a sequence of animations including a logo entrance (scale/rotate), text reveal, and a progress bar that fills over a minDuration.
- Scroll Lock: The component sets
document.body.style.overflow = 'hidden'until the animation completes. - Sequence: Once the progress bar finishes, the entire container slides out upward (
yPercent: -100).
Sources: src/components/ui/PageLoader.tsx:20-55
Animation Architecture
The UI components rely on a standardized animation system integrated with the Tailwind CSS theme.
| Utility/Hook | Purpose | Implementation Detail |
|---|---|---|
useMagneticButton | Interactive Hover | Uses buttonRef and magneticStrength for physics pull |
ScrollTrigger | Reveal on Scroll | Used in SectionHeading and FloatingCTA |
cn() | Style Merging | Combines clsx and tailwind-merge for dynamic classes |
Sources: AGENTS.md:73-86, src/index.css:150-165
FloatingCTA
The FloatingCTA provides persistent access to contact channels (WhatsApp and Facebook) after the user has scrolled past the hero section.
The WhatsApp button features a continuous pulse animation created by expanding an absolute-positioned background ring with decreasing opacity.
Sources: src/components/ui/FloatingCTA.tsx:16-48
Styling and Theming
Components utilize CSS variables defined in @layer base of src/index.css. The project uses HSL color values for semantic tokens like --background, --foreground, and --primary-500.
- Primary Colors: Blue-based palette ranging from 50 to 950.
- Accent Colors: Orange-based (from logo) used for CTAs and highlights.
- Glassmorphism: Components use
.glassand.glass-cardclasses for backdrop blur effects.
Sources: src/index.css:8-33, src/index.css:170-185
Conclusion
The Atomic UI Components are the structural backbone of the Wasalny landing page, providing a consistent user experience through shared styling and motion principles. By utilizing GSAP for interactivity and Tailwind CSS for layout, the system ensures high performance and visual fidelity while maintaining a modular codebase.