Example input
Landing page goal: Promote a product
Product or service name: BeautyBoost
Product or service description: BeautyBoost is a daily dietary supplement that helps support healthy skin, hair, and nails. It's packed with vitamins, minerals, and antioxidants that nourish your body from the inside out.
Product or service special features: BeautyBoost is made with all-natural, non-GMO ingredients and is free from artificial colors, flavors, and preservatives. It's also vegan-friendly and gluten-free.
Target audience: Women aged 25-45 who are health-conscious and interested in improving their appearance.
Tone: Formal and informative
CTA: "Order your BeautyBoost today and start seeing results!"
Offer: Buy one month's supply of BeautyBoost and get a second month at 50% off if you purchase today.
Example output
Example: https://9mk8zn8aomnxgkma3zyyza.on.drv.tw/web/home.html
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BeautyBoost - Daily Dietary Supplement for Healthy Skin, Hair, and Nails</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #444444;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
margin-top: 0;
margin-bottom: 0.5rem;
}
h1 {
font-size: 2.5rem;
line-height: 1.2;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: #ff0057;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 800px;
}
.jumbotron {
background-image: url("https://source.unsplash.com/1600x900/?beauty,woman");
background-size: cover;
color: #ffffff;
text-align: center;
padding-top: 150px;
padding-bottom: 150px;
margin-bottom: 0;
}
.jumbotron h1 {
font-size: 3rem;
margin-bottom: 20px;
}
.btn-primary {
background-color: #ff0057;
border-color: #ff0057;
font-size: 1.2rem;
font-weight: 500;
padding: 0.75rem 2rem;
transition: all 0.2s ease-in-out;
}
.btn-primary:hover {
background-color: #ffffff;
border-color: #ffffff;
color: #ff0057;
}
.benefits {
margin-top: 60px;
margin-bottom: 60px;
}
.benefit-item {
margin-bottom: 30px;
}
.benefit-item h4 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.benefit-item p {
margin-bottom: 0;
}
.call-to-action {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
}
.call-to-action p {
margin-bottom: 1.5rem;
}
.call-to-action .btn-primary {
font-size: 1.5rem;
font-weight: 500;
padding: 1rem 3rem;
}
.social-proof {
margin-top: 60px;
margin-bottom: 60px;
}
.social-proof-item {
text-align: center;
margin-bottom: 30px;
}
.social-proof-item.social-proof-item img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 20px;
}
.social-proof-item p {
margin-bottom: 0;
font-size: 1.2rem;
}
.social-proof-item small {
font-size: 1rem;
color: #999999;
}
@media (max-width: 767.98px) {
.jumbotron {
padding-top: 100px;
padding-bottom: 100px;
}
.jumbotron h1 {
font-size: 2.5rem;
}
.benefit-item h4 {
font-size: 1.2rem;
}
.call-to-action .btn-primary {
font-size: 1.2rem;
padding: 0.75rem 2rem;
}
.social-proof-item img {
width: 60px;
height: 60px;
}
.social-proof-item p {
font-size: 1rem;
}
.social-proof-item small {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Get BeautyBoost Today</h1>
<p class="lead">Support healthy skin, hair, and nails with our daily dietary supplement.</p>
<a class="btn btn-primary" href="#benefits">Learn More</a>
</div>
</div>
<div class="container">
<div id="benefits" class="benefits">
<div class="row">
<div class="col-md-6">
<div class="benefit-item">
<h4>All-Natural Ingredients</h4>
<p>Our formula is made with non-GMO, vegan-friendly, and gluten-free ingredients.</p>
</div>
<div class="benefit-item">
<h4>Supports Healthy Skin</h4>
<p>Our supplement is packed with vitamins, minerals, and antioxidants that nourish your body from the inside out.</p>
</div>
</div>
<div class="col-md-6">
<div class="benefit-item">
<h4>Improves Hair and Nails</h4>
<p>Our formula also supports healthy hair and nails, helping you look and feel your best.</p>
</div>
<div class="benefit-item">
<h4>Buy One, Get One 50% Off</h4>
<p>Order today and get a second month's supply at 50% off.</p>
</div>
</div>
</div>
</div>
<div class="call-to-action">
<h2>Order Your BeautyBoost Today</h2>
<p>Start seeing results in as little as two weeks!</p>
<a class="btn btn-primary" href="#">Order Now</a>
</div>
<div class="social-proof">
<div class="row">
<div class="col-md-4">
<div class="social-proof-item">
<img src="https://source.unsplash.com/400x400/?woman" alt="Customer photo">
<p>"I've been taking BeautyBoost for a month and my skin is already glowing!"</p>
<small>- Sarah S.</small>
</div>
</div>
<div class="col-md-4">
<div class="social-proof-item">
<img src="https://source.unsplash.com/400x400/?beauty" alt="Customer photo">
<p>"My hair has never looked better since I started using BeautyBoost. Highly recommend!"</p>
<small>- Emily K.</small>
</div>
</div>
<div class="col-md-4">
<div class="social-proof-item">
<img src="https://source.unsplash.com/400x400/?girl" alt="Customer photo">
<p>"I was skeptical at first, but after trying BeautyBoost for two weeks, I'm a believer. My nails are stronger and my skin is clearer!"</p>
<small>- Rachel W.</small>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>