Home
Relevant source files
The following files were used as context for generating this wiki page:The Home page serves as the primary marketing and informational entry point for the "Success Coach" business. It is a comprehensive, single-page application built using React. The page is designed to be fully responsive, showcasing the coach's services, client testimonials, and providing a clear call-to-action for booking a strategy session. It is styled using a combination of Tailwind CSS and a custom design system, with animations powered by Framer Motion.
Currently, all dynamic content on the page is populated from a local mock data file, with the intention of replacing this with live backend API calls in the future. The project is bootstrapped with Create React App and includes analytics integration with PostHog.
Sources: frontend/src/components/LandingPage.jsx, frontend/src/mock.js:3, frontend/public/index.html:101-104, frontend/README.md:3
Project Setup and Dependencies
The frontend is a standard Create React App project. The available scripts for development, testing, and production builds are defined in package.json and documented in the README.md.
Sources: frontend/README.md:5-32, frontend/package.json:66-70
Key Dependencies
The project relies on several key libraries to achieve its functionality and design.
| Library | Purpose |
|---|---|
react | Core library for building the user interface. |
framer-motion | Powers the animations and transitions throughout the page. |
lucide-react | Provides the icon set used in components. |
tailwindcss | A utility-first CSS framework for styling. |
@radix-ui/* | A collection of unstyled, accessible UI primitives for components like Dialogs and Toggles. |
class-variance-authority | Manages component variants, used with Tailwind CSS. |
clsx / tailwind-merge | Utilities for conditionally combining CSS classes. |
Sources: frontend/package.json:6-65
Build & Development Scripts
| Script | Description |
|---|---|
npm start | Runs the app in development mode at http://localhost:3000. |
npm build | Builds the app for production into the build folder. |
npm test | Launches the test runner in interactive watch mode. |
Sources: frontend/README.md:7-21, frontend/package.json:67-69
Application Architecture
The application follows a simple component-based architecture, with a main entry point that renders a single, large LandingPage component.
Entry Point
The application's public-facing HTML is index.html. This file serves as a template, containing the root DOM element (<div id="root">) where the React application is mounted. It also includes the configuration and initialization script for PostHog analytics.
This diagram illustrates the initial loading process of the application.
Component Structure
The entire user interface is encapsulated within the LandingPage.jsx component. This component is composed of several semantic sections, each representing a distinct part of the page.
This diagram shows the high-level structure of the LandingPage component.
Styling and Theming
The project uses a multi-layered approach to styling, combining the utility-first approach of Tailwind CSS with a custom design system defined in CSS files.
CSS Variables
A comprehensive set of CSS variables is defined to enforce a consistent design system for colors, typography, and spacing. These are defined in two main files:
frontend/src/index.css: Defines the base color palette for both light and dark modes using HSL values (e.g.,--background,--foreground,--primary).frontend/src/App.css: Defines a higher-level "ScaleFast Design System" palette, typography classes, and component styles (e.g.,.btn-primary,.service-card). It also imports custom fonts from Google Fonts and Fontshare.
| Variable | Purpose | Source File |
|---|---|---|
--bg-page | Main page background color. | App.css |
--text-primary | Primary text color. | App.css |
--brand-primary | Main brand accent color. | App.css |
--gradient-hero | Hero section background gradient. | App.css |
--background | Base background color (theme-aware). | index.css |
--foreground | Base foreground color (theme-aware). | index.css |
--radius | Base border radius for components. | index.css |
Sources: frontend/src/index.css:15-64, frontend/src/App.css:5-45
Tailwind CSS Configuration
The tailwind.config.js file extends the default Tailwind theme to integrate with the CSS variables defined in index.css. This allows utility classes to use the project's custom theme colors and properties. It also defines keyframe animations for UI components like accordions.
// frontend/tailwind.config.js:8-13
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
This snippet shows how Tailwind's borderRadius utility is configured to use the --radius CSS variable.
Sources: frontend/tailwind.config.js
Data Model (Mock)
All content for the landing page is currently hardcoded within the frontend/src/mock.js file. This approach decouples the UI from the data, allowing for easy replacement with a real API in the future. The file exports several objects and arrays containing all the text, images, and statistics for the page.
The diagram below shows the relationships between the different mock data structures.
Sources: frontend/src/mock.js
mockTestimonials Structure
This table details the fields for a single testimonial object. The LandingPage component maps over an array of these objects to render the testimonials section.
| Field | Type | Description |
|---|---|---|
id | number | Unique identifier for the testimonial. |
name | string | Name of the client. |
role | string | The client's role or title. |
image | string | URL for the client's profile image. |
testimonial | string | The testimonial text. |
result | string | A summary of the outcome (e.g., "150% Revenue Growth"). |
rating | number | The star rating given by the client. |
Sources: frontend/src/mock.js:80-123
UI Components
The LandingPage is built using a combination of standard HTML elements, custom UI components from the src/components/ui directory, and icons.
Core UI Components
The page heavily relies on reusable components found in src/components/ui. These components, such as Button, Card, and Input, are imported and used to construct the various sections. These are built on top of Radix UI primitives, ensuring accessibility and functionality out of the box.
// frontend/src/components/LandingPage.jsx:4-9
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Textarea } from './ui/textarea';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
Sources: frontend/src/components/LandingPage.jsx:4-9
Animations
Animations are implemented using the framer-motion library. motion.div components are used to wrap sections and elements, applying animations on load (initial, animate) or when they scroll into view (whileInView).
This flow shows how an animated element is rendered.
Example implementation for a section:
// frontend/src/components/LandingPage.jsx:153-157
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
Sources: frontend/src/components/LandingPage.jsx:49-52, frontend/src/components/LandingPage.jsx:153-157
Icons
Icons are provided by the lucide-react library. They are imported as individual components and used throughout the page to add visual emphasis to buttons, lists, and stats.
// frontend/src/components/LandingPage.jsx:3
import { Star, Users, TrendingUp, Calendar, Mail, Phone, ArrowRight, CheckCircle } from 'lucide-react';