FeaturesSection.js

class FeaturesSection {
    constructor() {
        this.features = [
            {
                name: 'Feature 1',
                description: 'Description 1',
                image: '/path/to/img1'
            },
            {
                name: 'Feature 2',
                description: 'Description 2',
                image: '/path/to/img2'
            }
        ]
    }
    
    renderFeatureRows() {
        return this.features.map(function(feature) {
            return `
            ${feature.name}
            ${feature.description}
            ${feature.image}
            `
        }).join('')
    }
    
    render()  {
        return `
        <section class="features-section">
            ${this.renderFeatureRows()}
        </section>
        `
    }    
}

HomePageController.js

import {
    MainSection,
    FeaturesSection,
    NewsletterSection
} from '../components/sections'

class HomePageController {
    constructor() {
        this.count = 'Example variable in class'
    }
    
    render()  {
        return `
        <div>${this.count}<div>
        ${MainSection.render()}
        ${FeaturesSection.render()}
        ${NewsletterSection.render()}
        `
    }    
}

MainSection.js

class MainSection {
    render()  {
        return `
        <section class="main-section">
            <div class="main-table">
                <div class="main-row">
                    <div class="main-cell">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <div class="main-header">Ranger Steve: Buffalo Invasion</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 text-center"><a href="/game" class="btn btn-primary btn-lg">Play Alpha Now</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        `
    }    
}

NewsletterSection.js

class FeaturesSection {
    constructor() {
        this.features = [
            {
                name: 'Feature 1',
                description: 'Description 1',
                image: '/path/to/img1'
            },
            {
                name: 'Feature 2',
                description: 'Description 2',
                image: '/path/to/img2'
            }
        ]
    }
    
    renderFeatureRows() {
        return this.features.map(function(feature) {
            return `
            ${feature.name}
            ${feature.description}
            ${feature.image}
            `
        }).join('')
    }
    
    render()  {
        return `
        <section class="features-section">
            ${this.renderFeatureRows()}
        </section>
        `
    }    
}