Getting Automated Landing Page Generator React App

Overview

This project is part of the "Domains to Dollars" YouTube series, a comprehensive three-part guide to creating and deploying automated landing pages. In this series, we demonstrate how to:

1. Generate landing page content using n8n workflows
2. Render the content dynamically with a React-based template (this project)
3. Build and deploy the finished landing page on AWS

This React template serves as the cornerstone of part two, designed to rapidly render landing pages using configuration files. These config files, dynamically generated by n8n in part one, enable fast deployment of customized landing pages without manual coding. The template's React components offer flexibility and reusability, seamlessly bridging content generation and final deployment.

Key Features

• Dynamic Content: Landing pages are fully customizable based on a configuration file (config.json) generated by n8n. No manual updates to the code are required.
• Pre-built Components: The template includes pre-built React components for common sections like headers, hero sections, pain points, CTAs, testimonials, and more.
• Reusable: This template can be reused for multiple landing pages, making it ideal for marketing campaigns or product launches where quick turnaround is essential.
• Integration with n8n: The template fetches configuration data from a JSON file, allowing seamless integration with n8n workflows for automated page generation.

Components

• HeaderBar: Displays a customizable header with an optional icon.
• LandingHeader: Hero section that includes title, description, CTA button, user reviews, and an embedded video.
• IndustryPainpoints: Highlights key pain points of the target audience, optionally integrating a lead capture form via Tally.
• HowItWorks: Describes the core process or features of the product or service being promoted.
• SocialValidation: Displays testimonials and social proof to build trust with visitors.
• FAQSection: Provides answers to frequently asked questions, reducing friction for potential customers.
• SecondCTA: Encourages visitors to take action with a final call-to-action before the page footer.
• FooterBar: Simple footer with customizable text.

How It Works

1. n8n Workflow: n8n generates a config.json file containing the specific content for the landing page (e.g., headers, descriptions, pain points, and CTAs).
2. Dynamic Rendering: The React app fetches the config.json file and renders the landing page components based on the provided data.
3. Rapid Deployment: New landing pages can be generated quickly by updating the config.json file through n8n, without any need to modify the React components.

Configuration

The entire landing page is controlled by a config.json file, which can be automatically generated via n8n workflows.

Example Configuration (config.json)

{
  "header": "Automation For Staffing",
  "icon": "money-bill",
  "title": "Automate Staffing Workflows: 80% Less Time on Timesheets, Invoices & Payroll",
  "description": "Our automation workflow, customized for staffing agencies, slashes processing time by over 80%...",
  "buttonText": "Start Automating Today",
  "heroButtonLink": "https://tally.so/r/wgZG8P",
  "userReviews": [
    {
      "name": "user1",
      "image": "https://via.placeholder.com/40"
    }
  ],
  "videoUrl": "https://www.youtube.com/embed/XMhU3bRsezA",
  "painpointsTitle": "Streamline Timesheets, Invoicing, and Payroll...",
  "painpoints": [
    "<b>Time-Consuming Manual Processes:</b> Staffing agencies struggle with the tedious...",
    "<b>Invoicing Delays and Errors:</b> Manual generation of invoices based on approved timesheets is slow..."
  ],
  "howItWorksTitle": "How It Works",
  "howItWorksDescription": "Streamline Your Staffing Operations...",
  "howItWorksSteps": [
    "Step 1: Assessment and Planning",
    "Step 2: Solution Design",
    "Step 3: Implementation"
  ],
  "faqTitle": "Frequently Asked Questions",
  "faqItems": [
    {"question": "What is automation in this context?", "answer": "Automation refers to..."}
  ],
  "footerText": "&copy; 2024 Automation For Staffing. All rights reserved."
}

Getting Started

Prerequisites

• Node.js and npm installed on your machine.

Installation

1. Clone the repository:

   git clone git@github.com:Getting-Automated/landing-page-skeleton.git
   cd your-repo-url

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to http://localhost:3000 to see the landing page.

Deployment

To deploy the landing page:

1. Ensure the correct config.json file is generated via n8n.

2. Use any hosting provider (e.g., Vercel, Netlify, AWS S3) to deploy the static build:

   npm run build

3. Upload the build folder to your hosting platform.

Automated AWS Deployment

For automated deployment to AWS, we provide a set of scripts and instructions in the deployment directory. This includes:

• A detailed README (deployment/readme.md) with step-by-step instructions for AWS deployment
• PowerShell script for Windows users (deployment/deploy.ps1)
• Shell script for Mac and Linux users (deployment/deploy.sh)

These scripts automate the process of deploying your React app to AWS, including S3 bucket creation, CloudFront distribution setup, SSL certificate management, and DNS configuration. For more information, please refer to the deployment/readme.md file.

File Structure

The project follows a standard React structure with the following key files and directories:

• src/: Contains the React components and the main application logic.

  • components/: Reusable components for the landing page.
  • index.js: The entry point for the application.
  • App.js: The main application component that renders the landing page.
  • config.json: The configuration file generated by n8n.

• public/: Contains the public assets and the config.json file.

• deployment/: Contains deployment scripts and instructions for AWS.

  • readme.md: Detailed instructions for AWS deployment.
  • deploy.ps1: PowerShell deployment script.
  • deploy.sh: Shell deployment script.

.
├── public/
│   └── config.json        # Configuration file generated by n8n
├── src/
│   ├── App.js             # Main app component
│   ├── components/
│   │   ├── HeaderBar.js   # Header component
│   │   ├── LandingHeader.js # Hero section component
│   │   ├── IndustryPainpoints.js # Pain points section
│   │   ├── HowItWorks.js  # How It Works section
│   │   ├── SocialValidation.js # Testimonials section
│   │   ├── FAQSection.js  # FAQ section
│   │   ├── SecondCTA.js   # Call-to-action section
│   │   └── FooterBar.js   # Footer component
├── deployment/
│   ├── readme.md          # AWS deployment instructions
│   ├── deploy.ps1         # PowerShell deployment script
│   └── deploy.sh          # Shell deployment script
├── App.css                # Styling for the app
└── README.md              # You are here

Contributing

We welcome contributions to this project! If you have suggestions or improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.