 from fastapi import FastAPI
from fastapi.responses import HTMLResponse

app = FastAPI()

html_content = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <title>Landing Page with Product Cards and Navigation</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">

About this template

This app will create a simple multi product landing page with updated Bootstrap styles, incl. a grid of 6 product cards with random content, and a navigation bar using FastAPI.

Introduction to the Multi Product Landing Page Template

Welcome to the Multi Product Landing Page template! This template is designed to help you quickly create a landing page featuring multiple products, complete with a navigation bar and styled with Bootstrap. It's perfect for showcasing your products in a professional and visually appealing way. The template is built using FastAPI, which means you'll also have access to a backend API to serve your landing page.

Getting Started

To begin using this template, simply click on "Start with this Template" on the Lazy platform. This will pre-populate the code in the Lazy Builder interface, so you won't need to copy, paste, or delete any code manually.

Test: Deploying the App

Once you have the template loaded in the Lazy Builder, you can proceed to test and deploy your app. Press the "Test" button to start the deployment process. The Lazy CLI will handle the deployment, and you won't need to worry about installing libraries or setting up your environment.

Using the App

After pressing the "Test" button and the deployment is complete, Lazy will provide you with a dedicated server link. You can use this link to view your landing page in a web browser. The page will display a navigation bar at the top and a grid of six product cards with random images and descriptions.

If you need to make any changes to the HTML content, you can do so directly within the Lazy Builder interface. The changes will be reflected when you redeploy the app using the "Test" button.

Integrating the App

If you wish to integrate this landing page into an external service or frontend, you may need to use the server link provided by Lazy. For example, if you're embedding the landing page within another website, you would insert an iframe with the server link as the source.

Here's a sample code snippet for embedding the landing page:


<iframe src="YOUR_LAZY_SERVER_LINK" width="100%" height="600"></iframe>

Replace "YOUR_LAZY_SERVER_LINK" with the actual link provided by Lazy. This will embed the landing page into your existing website or service.

If you're using the API functionality of FastAPI, Lazy will also provide you with a link to the API documentation. This can be useful if you want to interact with the backend API directly or integrate it with other services.

Remember, all the deployment and server management is handled by Lazy, so you can focus on customizing and integrating your landing page as needed.

If you have any questions or need further assistance, the Lazy customer support team is here to help you make the most out of this template.

More templates like this

GET LAZY APP APPLICATION LAUNCHER - Paid Subscriptions

The Get Lazy application Launcher is used to launch and monitor your apps in a production environment - For paid subscriptions only.

Backend Server

This skeleton is streamlined for creating backend services using FastAPI. It's an excellent choice for building microservices or APIs with minimal frontend requirements.

Search Email with GMail API

This is a FastAPI-based application that uses Google’s Gmail API to fetch and display emails based on user-defined search queries. It provides a /search_emails endpoint for email searches and a /oauth2callback endpoint for OAuth2 callbacks. The app requires the environment variables CLIENT_ID, CLIENT_SECRET, and REDIRECT_URI for OAuth2 authentication. These credentials pertain to your Google API and must be set correctly for the application to function as expected.

Multi Product Landing Page with Navigation