Discord
Account
Edit Profile
My Plan
Logoutby Lazy Sloth
Multi Product Landing Page with Navigation
This video demonstrates how to use the Multi Product Landing Page with Navigation template.
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">Created: | Last Updated:
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.
