The Landing Page Component
Relevant source files
The following files were used as context for generating this wiki page:The LandingPage component is a single-page, comprehensive user interface designed to serve as the main entry point for a business coaching service website. It is built using React and is responsible for rendering all the primary content sections, including a hero section, about the coach, services offered, client testimonials, and a contact form. The component is structured as a single functional component that composes various UI elements and sections.
This page is styled using Tailwind CSS and features animations powered by Framer Motion to create a modern and dynamic user experience. All content displayed on the page is currently hardcoded and sourced from a mock data file, frontend/src/mock.js, indicating that it is designed for presentation and is ready for future integration with a live backend API. The component is rendered at the application's root URL (/) as defined in the main router configuration.
Sources: frontend/src/components/LandingPage.jsx, frontend/src/App.js:10, frontend/src/mock.js
Component Architecture
The LandingPage component is a monolithic functional component that encapsulates the entire page structure. It is composed of several semantic <section> elements, each corresponding to a distinct part of the page.
Sources: frontend/src/components/LandingPage.jsx
Component Structure Diagram
This diagram illustrates the high-level structure of the LandingPage component and its constituent sections.
Key Sections
| Section | Description | Source Lines |
|---|---|---|
| Header | A fixed navigation bar at the top of the page with links to other sections and a "Book Free Session" button. | 14-36 |
| Hero | The main introductory section with a headline, a call-to-action, and key performance metrics. | 39-140 |
| About | Introduces the coach, "Alex Thompson," with a biography, achievements, and mission statement. | 143-241 |
| Services | Displays the coaching services offered ("Revenue Growth", "Leadership Clarity", "Personal Mastery") using Card components. | 244-319 |
| Testimonials | Showcases client success stories with names, roles, images, and quotes. | 322-404 |
| Stats | A visually distinct section highlighting key metrics like "Clients Coached" and "Revenue Generated". | 407-446 |
| Contact | A form for users to book a free strategy session, including fields for name, email, and business goals. | 449-543 |
| Footer | Contains quick links, resources, and contact information. | 546-602 |
| Sticky Mobile CTA | A "Book Free Session" button that is fixed to the bottom of the screen on mobile devices. | 605-614 |
Sources: frontend/src/components/LandingPage.jsx
Dependencies and UI
The component relies on several external libraries for its functionality and appearance. These are defined in package.json.
| Dependency | Version | Usage |
|---|---|---|
react | ^19.0.0 | Core library for building the component. |
framer-motion | ^12.23.6 | Powers the animations for elements entering the viewport. |
lucide-react | ^0.507.0 | Provides the icon set used throughout the page (e.g., Star, Users, ArrowRight). |
class-variance-authority | ^0.7.1 | Used internally by UI components for variant styles. |
clsx | ^2.1.1 | Utility for conditionally joining class names. |
tailwind-merge | ^3.2.0 | Utility for merging Tailwind CSS classes without style conflicts. |
tailwindcss | ^3.4.17 | The primary CSS framework for styling. |
Sources: package.json:5-52, frontend/src/components/LandingPage.jsx:2-9
The UI is built using a set of reusable components found in frontend/src/components/ui/, such as:
ButtonInputTextareaCardBadge
These components are used to construct the various sections of the landing page. For example, the Services and Testimonials sections use Card components to display information consistently.
Sources: frontend/src/components/LandingPage.jsx:5-9
Data Flow and Mock Data
Currently, the LandingPage component does not fetch data from a backend. Instead, all dynamic content is hardcoded directly within the JSX or sourced from frontend/src/mock.js. The component directly maps over arrays of objects to render lists of services and testimonials.
This diagram shows how the LandingPage component uses hardcoded data arrays to render repeating elements.
While some data is hardcoded in LandingPage.jsx, the project also includes a dedicated mock.js file. This file exports several objects and arrays containing structured data for the coach, services, testimonials, and more. Although LandingPage.jsx does not import from mock.js, the data structures within mock.js mirror the hardcoded data, suggesting it is intended for future use or as a reference.
Mock Data Structure (mock.js)
The mock.js file defines the data schema for the page's content.
This diagram illustrates the relationships between the different mock data entities.
Sources: frontend/src/mock.js:5-103
Styling and Theming
The project uses a combination of Tailwind CSS and custom CSS properties to achieve its visual design.
Tailwind CSS Configuration
The tailwind.config.js file extends the default theme with custom values for borderRadius, colors, and keyframes. The color palette is defined using HSL values from CSS variables, allowing for theme changes (e.g., dark mode).
*Sources: frontend/tailwind.config.js
Custom Design System
App.css defines a set of CSS custom properties (variables) that form a "ScaleFast Design System". These variables control backgrounds, text colors, borders, and brand colors, and are consumed by Tailwind's configuration.
| Variable | Value | Description |
|---|---|---|
--bg-page | #FFFFFF | The main background color for the page. |
--text-primary | rgb(24, 24, 24) | The primary text color. |
--text-secondary | rgb(112, 112, 112) | The secondary text color. |
--brand-primary | rgb(0, 128, 255) | The main brand color for links and accents. |
--gradient-button | linear-gradient(...) | The gradient used for primary buttons. |
Sources: frontend/src/App.css:6-39
Additionally, index.css defines another set of CSS variables under the :root and .dark selectors, which are used by the shadcn/ui component system and configured in tailwind.config.js. This provides a comprehensive theming solution.
Sources: frontend/src/index.css:16-79
Application Entrypoint and Routing
The LandingPage component is the sole route in the application. The main App.js file uses react-router-dom to set up routing.
Routing Flow
This diagram shows the simple routing logic.
Sources: frontend/src/App.js:5-13
The React application itself is mounted into the <div> with the ID root in the main index.html file.
*Sources: frontend/public/index.html:15, frontend/src/App.js
Conclusion
The LandingPage component is a well-structured, visually rich, and self-contained presentation layer for a business coaching website. It effectively uses modern frontend technologies like React, Tailwind CSS, and Framer Motion to create an engaging user experience. Its reliance on hardcoded and mock data makes it a standalone demonstration piece that is decoupled from any backend logic, but it is clearly designed with future API integration in mind. The organized structure, reusable UI components, and defined design system make it a scalable and maintainable part of the frontend application.