Hero & Landing Components
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Hero and Landing components serve as the primary entry point and visual identity of the digital wedding invitation. These components are designed to provide an immediate high-impact presentation of the wedding couple, the event date, and a welcoming message, while establishing the overall aesthetic through a centralized theme engine.
The landing experience is composed of several modular sections integrated within the InvitationPage.jsx, including the full-screen Hero section and the time-sensitive Countdown module. These components consume data from a central content context and styling instructions from a theme context to ensure a cohesive and personalized user experience.
Sources: src/pages/InvitationPage.jsx:1-15, src/components/invitation/Hero.jsx:6-10
Architecture and Data Flow
The landing components rely on a hierarchical context-driven architecture. The InvitationPage acts as the layout container, orchestrating the rendering order of specialized components.
Component Hierarchy
The landing page follows a top-down structure:
- Hero: A full-viewport introduction.
- Countdown: A dynamic timer based on the event date.
- EventInfo: Detailed breakdown of wedding segments (Ceremony, Reception, etc.).
The diagram shows how the InvitationPage orchestrates child components while shared contexts provide the necessary data and styling.
Sources: src/pages/InvitationPage.jsx:15-30, src/components/invitation/Hero.jsx:6-10
Hero Component Implementation
The Hero component is a full-screen (min-h-screen) section that utilizes framer-motion for entrance animations. It dynamically renders the groom's and bride's names, the formatted wedding date, and a background image.
Key Features
- Dynamic Styling: Uses the
ThemeContextto apply specific heading and body fonts, as well as primary and secondary colors for gradients and iconography. - Smooth Navigation: Includes a
scrollToNextfunction that usesscrollIntoViewto transition the user to thecountdownsection. - Visual Layers: Implements an absolute positioned background image with a linear gradient overlay to ensure text readability regardless of the chosen image.
| Field | Data Source | Usage |
|---|---|---|
groomName | content.hero | Displayed in H1 heading |
brideName | content.hero | Displayed in H1 heading |
date | content.hero | Formatted via toLocaleDateString |
backgroundImage | content.hero | Set as CSS backgroundImage |
fontHeading | theme | Applied to names and labels |
Sources: src/components/invitation/Hero.jsx:15-50, src/components/invitation/Hero.jsx:87-105
Countdown Module logic
The Countdown component provides a real-time calculation of the time remaining until the wedding. It is triggered by the date property found in the hero content.
Time Calculation Logic
The component utilizes a local state timeLeft and a setInterval hook that refreshes every 1000ms. The target date is hardcoded to begin at 16:00:00 (4:00 PM) on the specified wedding date.
This flow illustrates the recursive-style update loop used by the countdown timer to maintain accuracy.
Sources: src/components/invitation/Countdown.jsx:11-35
Theming and Visual Integration
Landing components are visually unified through CSS variables defined in index.css and managed via ThemeContext.jsx. The project supports multiple presets (e.g., "Classic Gold", "Romantic Pink", "Elegant Black").
CSS Variable Mapping
The components consume variables that are dynamically injected into the document root:
--color-primary: Used for highlights, hearts, and the countdown numbers.--color-secondary: Used for background sections and section dividers.--font-heading: Applied to component headers to maintain formal wedding typography.
Sources: src/index.css:5-20, src/context/ThemeContext.jsx:105-120
Event Information Breakdown
Immediately following the Hero and Countdown is the EventInfo section, which maps a list of event objects into a responsive grid.
Event Object Structure
| Field | Type | Description |
|---|---|---|
id | String | Unique identifier for React mapping |
type | Enum | Determines the icon (e.g., ceremony, reception, cocktail) |
time | String | Military time string (e.g., "18:00") |
venue | String | Name of the location |
address | String | Physical address of the venue |
Sources: src/components/invitation/EventInfo.jsx:15-50, src/components/invitation/EventInfo.jsx:75-90
Conclusion
The Hero and Landing components of the "boda-cris" project provide a modular and highly customizable front-end experience. By decoupling content management from visual styling through the use of separate contexts, the system allows for real-time updates to names, dates, and themes without requiring structural code changes. The integration of framer-motion and smooth scrolling ensures a premium, interactive feel suitable for wedding invitations.