Mock Data
Relevant source files
The following files were used as context for generating this wiki page:The frontend/src/mock.js file serves as a local, static data source for the business coach landing page. Its primary purpose is to provide placeholder content for all UI components, enabling frontend development and testing without a live backend connection. The data structures defined in this file are designed to be replaced by actual API calls in a production environment.
The mock data covers all dynamic content areas of the LandingPage.jsx component, including coach information, services, testimonials, statistics, and form definitions. It also includes simulated asynchronous functions for form submissions and analytics tracking to mimic real-world application behavior.
Data Architecture
The mock.js file exports a collection of constants, each representing a distinct data model for a specific section of the landing page. It also exports objects containing mock functions for asynchronous operations.
This diagram shows the high-level structure of the exported mock data modules.
Data Models
The mock data is organized into several distinct objects, each corresponding to a UI section.
mockCoachData
This object contains all personal and professional information about the business coach.
| Key | Type | Description |
|---|---|---|
name | String | The coach's full name. |
title | String | The coach's professional title. |
email | String | Contact email address. |
phone | String | Contact phone number. |
location | String | The coach's physical location. |
bio | Object | Contains intro, background, and mission strings. |
achievements | Object | Key-value pairs for metrics like clientsCoached, revenueGenerated, etc. |
images | Object | URLs for the coach's profileMain and heroImage. |
This data is primarily used in the "Hero" and "About" sections of the landing page.
Sources: frontend/src/mock.js:5-39, frontend/src/components/LandingPage.jsx:153-221
mockServices
An array of objects, where each object represents a service offered by the coach.
| Key | Type | Description |
|---|---|---|
id | Number | A unique identifier for the service. |
title | String | The name of the service. |
description | String | A short description of the service. |
icon | String | The name of a lucide-react icon to display. |
results | Array | A list of key results or benefits of the service. |
This data populates the "Services" section, where each service is rendered in a Card component.
Sources: frontend/src/mock.js:41-76, frontend/src/components/LandingPage.jsx:249-291
mockTestimonials
An array of objects, each representing a client testimonial.
| Key | Type | Description |
|---|---|---|
id | Number | A unique identifier for the testimonial. |
name | String | The client's name. |
role | String | The client's role and company. |
image | String | URL for the client's photo. |
testimonial | String | The full text of the testimonial. |
result | String | A summary of the outcome (e.g., "150% Revenue Growth"). |
rating | Number | A star rating from 1 to 5. |
beforeRevenue | Number | (Optional) Revenue before coaching. |
afterRevenue | Number | (Optional) Revenue after coaching. |
transformationTime | String | (Optional) Duration of the coaching engagement. |
This data is used to build the "Testimonials" section of the page.
Sources: frontend/src/mock.js:78-132, frontend/src/components/LandingPage.jsx:294-358
mockStats
An array of statistical highlights.
| Key | Type | Description |
|---|---|---|
id | Number | A unique identifier for the stat. |
number | String | The statistic value (e.g., "500+"). |
label | String | The label for the statistic (e.g., "Clients Coached"). |
icon | String | The name of a lucide-react icon. |
description | String | A brief explanation of the statistic. |
This data is used in the "Stats Section" and parts are also shown in the "Hero" and "About" sections.
Sources: frontend/src/mock.js:134-163, frontend/src/components/LandingPage.jsx:361-396
mockContactForm
Defines the structure and content for the contact form.
| Key | Type | Description |
|---|---|---|
fields | Array | An array defining each form field with properties like id, label, type, placeholder, and required. |
submitButton | Object | Contains text and icon for the submit button. |
contactInfo | Object | Contains email and phone to be displayed near the form. |
This object's data is used to dynamically build the contact form in the "Contact Section".
Sources: frontend/src/mock.js:165-201, frontend/src/components/LandingPage.jsx:399-463
mockNavigation and mockFooter
These objects define the links and text for the header navigation and the page footer, ensuring consistency. The structure includes arrays of link objects with label and href properties.
Sources: frontend/src/mock.js:203-239, frontend/src/components/LandingPage.jsx:13-40, 466-519
Mocked Asynchronous Operations
To simulate a real application environment, mock.js includes objects with asynchronous functions.
mockFormSubmission
This object contains a submitContactForm function that mimics an API call for form submission.
// frontend/src/mock.js:242-255
export const mockFormSubmission = {
submitContactForm: async (formData) => {
// Simulate API call delay
await new Promise(resolve => setTimeout(resolve, 1000));
// Mock successful submission
console.log("Form submitted with data:", formData);
return {
success: true,
message: "Thank you! Your strategy session has been scheduled. You'll receive a confirmation email shortly.",
confirmationNumber: `SS-${Date.now()}`
};
}
};
The following sequence diagram illustrates the flow of a mock form submission.
Sources: frontend/src/mock.js:242-255
mockAnalytics
This object provides simple, synchronous functions that log analytics events to the console. This allows for testing analytics tracking implementation without integrating a full analytics service.
The functions include:
trackPageView(pageName)trackButtonClick(buttonName)trackFormSubmission(formType)
Sources: frontend/src/mock.js:258-271
Consumption in LandingPage.jsx
The LandingPage.jsx component is the primary consumer of the data from mock.js. Although the provided LandingPage.jsx file hardcodes the content, it directly mirrors the structure and values found in mock.js, indicating that the mock file serves as the blueprint for the page's content.
For example, the "Services" section in LandingPage.jsx iterates over a hardcoded array that is identical to mockServices.
// frontend/src/components/LandingPage.jsx:250-265
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
icon: TrendingUp,
title: "Revenue Growth",
description: "Scale your business beyond 7-figures with proven strategies and systems that compound over time.",
results: ["200% average revenue increase", "Streamlined operations", "Predictable growth systems"]
},
// ... other services
].map((service, index) => (
// ... renders a Card for each service
))}
</div>
This pattern of hardcoded data matching the mock file is repeated for testimonials, stats, and coach information throughout the component. The intention is for this hardcoded data to be replaced by imports from mock.js during development, and later by API calls.
Sources: frontend/src/components/LandingPage.jsx:250-265, frontend/src/mock.js:41-76
Conclusion
The mock data system, centralized in frontend/src/mock.js, is a crucial development tool for the landing-emrgent project. It provides a complete, structured, and realistic dataset that enables the UI to be built and styled independently of backend services. The file's clear organization by page section and inclusion of mock asynchronous functions make it a comprehensive blueprint for future API integration.