Building SaaS Website #04: Creating the Pages (Part 2)

Welcome back to the TotalGPT website development series! In this second part, we’ll focus on reshaping the homepage and creating the remaining pages required to complete our SaaS website. This includes implementing crucial routes and designing the corresponding views to ensure a seamless user experience. Before you continue, if you missed the part 1, please refer to it before you continue.

Let’s dive in!

Step 1: Updating `controllers/default.js`

We’ll first update the default.js controller to define the necessary routes and corresponding actions for our application. Here’s the complete file with added inline comments for clarity:

exports.install = function() {
    ROUTE('GET /', 'index'); // Homepage route
    ROUTE('GET /about/', 'about'); // About page route
    ROUTE('GET /contact/', 'contact'); // Contact page route
    ROUTE('GET /services/', 'services'); // Services page route
    ROUTE('GET /success/', 'success'); // Payment success page route
    ROUTE('GET /fail/', 'fail'); // Payment failure page route
    ROUTE('GET /error/', 'error'); // Error page route
    ROUTE('#404', '404'); // Custom 404 page route
    ROUTE('GET /pricing', pricing); // Pricing page route
    ROUTE('GET /policy/', 'policy'); // Terms and conditions page route
    ROUTE('GET /pricing/{choice}', pricing_details); // Pricing details page route
}

// Action for pricing details page
async function pricing_details($) {
    var choice = $.params.choice; // Get the chosen pricing plan from the URL parameter
    var plan = await DATA.read('nosql/plans')
        .where('name', choice.capitalize())
        .fields('id,description,description2,reminder,searchonline,links,more,limit,name,name2,text,context,voice,pictures,documents,image,price,oldprice,price2,oldprice2')
        .error(404)
        .promise();

    $.view('pricing_details', { selectedPlan: plan }); // Render the pricing details view with the selected plan
}

// Action for pricing page
async function pricing($) {
    var plans = await CALL('Plan --> list').promise(); // Retrieve a list of plans from an external call
    $.view('pricing', { plans: plans.reverse() }); // Render the pricing view with the plans in reverse order
}

Key Highlights

Dynamic Routing: The pricing and pricing_details routes dynamically fetch data, providing flexibility.
Custom 404 Handling: The #404 route overrides the framework’s default 404 behavior.

Step 2: Designing the Views

We’ll now create the HTML templates for the required pages. Each template is structured for clarity and functionality.

`layout.html`

The layout.html file defines the overall structure of our website. It includes headers, navigation, and footers. Here’s the complete code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@(TotalGPT Website)</title>

        <!-- Total.js visitor module for analytics -->
        <script src="/visitors.js"></script>

        <!-- JComponent library for enhanced UI interactions -->
        <link rel="stylesheet" href="//cdn.componentator.com/spa.min@19.css" />

        <!-- Import custom styles -->
        @{import('style.css')}
    </head>
    <body>
        <!-- Header -->
        <header class="header">
            <div class="link">
                <a href="/" class="logo">@(TotalGPT)</a>
                <a title="Chat on WhatsApp" href="https://wa.me/22655416464" target="_blank" id="whatsapp">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.25361 18.4944L7.97834 18.917C9.189"></path></svg>
                </a>
            </div>
            <i class="ti ti-bars" id="menu-icon"></i>
            <nav class="navbar">
                <a href="/">@(Home)</a>
                <a href="/about" class="active">@(About)</a>
                <a href="/services">@(Services)</a>
                <a href="/pricing">@(Pricing)</a>
                <a href="/contact">@(Contact)</a>
                <a href="https://wa.me/22655416464" class="btn other-platform">@(WhatsApp)</a>
            </nav>
        </header>

        <!-- Main Content -->
        <main>
            @{body}
        </main>

        <!-- Footer -->
        <footer class="footer">
            <div class="footer-text">
                <p>@(Copyright © 2024 by TassAI Africa | All Rights Reserved.)</p>
            </div>
            <div class="footer-top">
                <a href="#home"><i class="ti ti-arrow-up"></i></a>
            </div>
        </footer>

        <!-- Scripts -->
        <script src="/js/script.js"></script>
        <script src="https://unpkg.com/scrollreveal"></script>
        <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
    </body>
</html>

`index.html`

The homepage introduces users to TotalGPT:

<section class="home" id="home">
    <div class="home-content">
    </div>
    <div class="home-img">
        <img src="@{import('TassGPT.jpg')}" alt="">
    </div>
</section>

Building TotalGPT SaaS Website: Additional Views (Part 2)

In this continuation of building the TotalGPT SaaS Website, we'll create and expand several additional views to complete our site's structure. These include essential views like 404.html, about.html, contact.html, fail.html, and placeholders for upcoming views. I'll also provide a brief outline of each, ensuring we maintain a clean and professional design for a functional SaaS platform.

Expanded Views: Templates and Descriptions

1. 404 Error Page

This page informs users when a requested resource or page is unavailable. A visually appealing design with an explanatory image ensures users stay engaged despite encountering an error.

<!-- views/404.html -->
<section class="fail" id="about">
    <div class="about-content">
        <h2 class="heading">@(Erreur <span>404 !</span> page non trouvée)</h2>
    </div>
    <div class="about-img">
        <img src="@{import('error.svg')}" alt="image à propos">
    </div>
</section>

2. About Page

The "About" section introduces your platform, its mission, and its capabilities. Here, I've included a placeholder image and a call-to-action button for further exploration.

<!-- views/about.html -->
<section class="about page" id="about">
    <div class="about-img">
        <img src="@{import('TassGPT.jpg')}" alt="image à propos">
    </div>
    <div class="about-content">
        <a href="#" class="btn">@(En savoir plus)</a>
    </div>
</section>

3. Contact Page

A dynamic contact form for user inquiries, supported by backend processing for form submission. Includes a success message upon successful submission.

<!-- views/contact.html -->
<style>
    .success { border-radius: 5px; width: 100%; height: 40px; font-size: 24px; text-align: center; background-color: #61C83B; font-weight: bold;}
</style>

<section class="contact" id="contact">
    <h2 class="heading">@(Contacter <span>TassAI</span>)</h2>
    @{ if query.success == 'true'}
    <div class="success">
        @(Merci pour votre message)
    </div>
    @{fi}
    <form action="/contact/" method="post">
        <div class="input-box">
            <input type="text" placeholder="@(Votre nom complet)" name="name" required>
            <input type="email" placeholder="@(Votre adresse email)" name="email" required>
        </div>
        <div class="input-box">
            <input type="text" placeholder="@(Numéro de telepone ex:+226 55416464)" name="phone" required>
            <input type="text" placeholder="@(Sujet)" name="subject" required>
        </div>
        <div class="input-box">
            <textarea cols="30" rows="10" placeholder="@(Votre message)" name="content" required></textarea>
        </div>
        <input type="submit" value="Envoyer le message" class="btn">
    </form>
</section>

4. Payment Failure Page

Designed to handle failed transactions, this page reassures users and provides visuals to communicate the issue effectively.

<!-- views/fail.html -->
<section class="fail" id="about">
    <div class="about-content">
        <h2 class="heading">@(Paiement non effecté <span>Erreur !</span>)</h2>
    </div>
    <div class="about-img">
        <img src="@{import('fail.svg')}" alt="image à propos">
    </div>
</section>

5. Pricing and Pricing Details

These sections will serve as a key part of the SaaS offering. They will provide detailed subscription plans and their benefits. Stay tuned for the next blog where we will dive into these files.

<!-- views/pricing.html -->
<!-- Placeholder for the pricing section -->

<!-- views/pricing_details.html -->
<!-- Placeholder for detailed pricing breakdown -->

6. Other Views

Here are placeholders for other essential pages, which we will cover in future posts:

Services Page

  <!-- views/services.html -->
  <!-- Placeholder for services offered -->

Success Page

  <!-- views/success.html -->
  <!-- Placeholder for successful transaction messaging -->

Policy Page

  <!-- views/policy.html -->
  <!-- Placeholder for policies and terms -->

Error Page

  <!-- views/error.html -->
  <!-- Placeholder for error messaging -->

Static Files and Assets

To ensure the seamless functionality of these views, download and unzip all static files and assets into the public folder. This will include CSS, JavaScript, and image assets such as error.svg, TassGPT.jpg, and fail.svg.

What's Next?

In the upcoming blog, we'll focus on integrating the view engine and breaking down the implementation of pricing.html and pricing_details.html. This will involve detailed explanations of dynamic rendering and pricing model logic.