https://gemini.google.com/share/af539b040fda
Chat GPT
Create a prompt to build a full modern html landing page for a service called Finish Mode AI which helps business automate their operation using custom AI systems.
The design should include
A fixed header with navigation links (Features, Process, Pricing, Contact)
A hero-section with a strong headline, subheadline, and CTA button to book a Calendly call
Section for:
Features (with icons and descriptions)
Process (3-step transformation process)
Fully mobile responsive with media queries
Clean, well-commented CSS (either inline or internal)
Use Google fonts (Poppins & Open Sans) and Font Awesome icons
Use semantic HTML 5 structure
Include JavaScript for nav toggle, theme switcher, scroll animation, and Calendly theme sync
Also, make sure the theme is sleek and techy - dark mode by default with a toggle for light mode
Use navy, neon green, white, and slate colors. Avoid bloated frameworks. This should feel like a modern SaaS site for hith -ticket clients.
Hasil Prompt
🌐 Prompt to Build a Modern HTML Landing Page:
Create a modern, mobile-responsive, single-page HTML5 landing page for a service called Finish Mode AI, which helps businesses automate their operations using custom AI systems. The design should appeal to high-ticket SaaS clients and feel sleek, tech-forward, and minimal.
Key Specifications:
Color Palette:
Default theme: Dark Mode
Colors: Navy (
#0a0f2c), Neon Green (#39ff14), White, and Slate (#94a3b8)Include a toggle switch for switching between Dark Mode and Light Mode
Typography:
Use Google Fonts:
Poppinsfor headlines,Open Sansfor body textFont loading via
<link>tag in<head>Header:
Fixed top navigation bar with logo placeholder and links:
Features,Process,Pricing,ContactCollapsible nav menu for mobile view (JavaScript toggle)
Hero Section:
Strong headline: "Automate Everything with Finish Mode AI"
Subheadline: "Custom AI solutions tailored to your business ops."
CTA button: “Book a Free Call” — opens Calendly popup in a synced theme
Features Section:
Grid layout (e.g. 3-4 icons per row on desktop, stacked on mobile)
Each feature includes a Font Awesome icon, title, and short description
Example features: Custom AI Bots, Workflow Automation, Cost Optimization, Data-Driven Insights
Process Section:
Title: "Our 3-Step AI Transformation Process"
Each step includes a number, title, and short description (Step 1: Discover, Step 2: Design, Step 3: Deploy)
Use semantic
<section>,<article>,<h2>, etc.Pricing Section:
Three pricing cards: Starter, Pro, Enterprise
Include price, short list of offerings, and CTA
Contact Section:
Simple contact form (name, email, message) – functional logic not required
Social media/contact icons
JavaScript Features:
Navigation toggle for mobile
Theme switcher (dark/light mode toggle)
Scroll-triggered animations (e.g. fade in from bottom)
Calendly integration with theme match
Responsive Design:
Use media queries for responsiveness (mobile-first)
Avoid any frameworks (no Bootstrap or Tailwind)
CSS:
Use internal or inline CSS, no external files
Clean, well-commented
Use CSS variables for color scheme
Other:
Semantic HTML5 structure:
<header>,<nav>,<section>,<footer>, etc.Font Awesome for icons (via CDN)
Animate elements on scroll (basic fade/slide-in with JavaScript/CSS)
Footer:
Include logo, brief slogan, and copyright
Navigation links repeated
GEMINI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finish Mode AI - Automate Your Operations</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
:root {
--dark-navy: #0a0f2c;
--neon-green: #39ff14;
--white: #ffffff;
--slate: #94a3b8;
--background-dark: var(--dark-navy);
--text-dark: var(--white);
--secondary-text-dark: var(--slate);
--card-background-dark: #1a203c;
--button-background-dark: var(--neon-green);
--button-text-dark: var(--dark-navy);
--background-light: var(--white);
--text-light: var(--dark-navy);
--secondary-text-light: #4a5568;
--card-background-light: #f0f4f8;
--button-background-light: var(--dark-navy);
--button-text-light: var(--white);
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: var(--background-dark);
color: var(--text-dark);
transition: background-color 0.3s, color 0.3s;
}
body.light-mode {
background-color: var(--background-light);
color: var(--text-light);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
color: var(--text-light);
}
/* Utility Classes */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.text-center {
text-align: center;
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.appear {
opacity: 1;
transform: translateY(0);
}
/* Header */
header {
background-color: var(--background-dark);
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
body.light-mode header {
background-color: var(--background-light);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Poppins', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--neon-green);
text-decoration: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
nav ul li {
margin-left: 30px;
}
nav ul li a {
color: var(--slate);
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
nav ul li a:hover {
color: var(--neon-green);
}
.nav-toggle {
display: none;
font-size: 28px;
cursor: pointer;
color: var(--white);
}
body.light-mode .nav-toggle {
color: var(--dark-navy);
}
.theme-switch {
width: 40px;
height: 20px;
background-color: var(--slate);
border-radius: 10px;
position: relative;
cursor: pointer;
margin-left: 20px;
transition: background-color 0.3s;
}
.theme-switch.active {
background-color: var(--neon-green);
}
.theme-switch::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
background-color: var(--white);
border-radius: 50%;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
.theme-switch.active::before {
transform: translateX(20px);
}
/* Mobile Nav */
@media (max-width: 768px) {
nav ul {
display: none;
flex-direction: column;
position: absolute;
top: 80px; /* Adjust based on header height */
left: 0;
width: 100%;
background-color: var(--background-dark);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
padding: 20px 0;
}
body.light-mode nav ul {
background-color: var(--background-light);
}
nav ul.active {
display: flex;
}
nav ul li {
margin: 10px 0;
text-align: center;
}
.nav-toggle {
display: block;
}
}
/* Hero Section */
#hero {
padding: 150px 0 100px;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--background-dark);
color: var(--text-dark);
transition: background-color 0.3s, color 0.3s;
}
body.light-mode #hero {
background-color: var(--background-light);
color: var(--text-light);
}
#hero h1 {
font-size: 60px;
margin-bottom: 20px;
line-height: 1.2;
color: var(--neon-green);
}
#hero p {
font-size: 24px;
color: var(--slate);
margin-bottom: 40px;
}
body.light-mode #hero p {
color: var(--secondary-text-light);
}
.cta-button {
background-color: var(--button-background-dark);
color: var(--button-text-dark);
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 20px;
transition: background-color 0.3s, transform 0.2s;
display: inline-block;
}
body.light-mode .cta-button {
background-color: var(--button-background-light);
color: var(--button-text-light);
}
.cta-button:hover {
transform: translateY(-3px);
opacity: 0.9;
}
/* Sections */
section {
padding: 80px 0;
}
section:nth-of-type(even) {
background-color: var(--card-background-dark);
}
body.light-mode section:nth-of-type(even) {
background-color: var(--card-background-light);
}
h2 {
font-size: 48px;
margin-bottom: 60px;
text-align: center;
}
/* Features Section */
#features .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
}
.feature-item {
text-align: center;
padding: 30px;
background-color: var(--card-background-dark);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
body.light-mode .feature-item {
background-color: var(--card-background-light);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.feature-item:hover {
transform: translateY(-5px);
}
.feature-item i {
font-size: 60px;
color: var(--neon-green);
margin-bottom: 20px;
}
.feature-item h3 {
font-size: 24px;
margin-bottom: 15px;
color: var(--text-dark);
}
body.light-mode .feature-item h3 {
color: var(--text-light);
}
.feature-item p {
color: var(--slate);
line-height: 1.6;
}
body.light-mode .feature-item p {
color: var(--secondary-text-light);
}
/* Process Section */
#process .process-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.process-step {
background-color: var(--card-background-dark);
padding: 40px;
border-radius: 12px;
text-align: center;
max-width: 350px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
body.light-mode .process-step {
background-color: var(--card-background-light);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.process-step:hover {
transform: translateY(-5px);
}
.process-step .step-number {
font-size: 70px;
font-weight: 700;
color: var(--neon-green);
margin-bottom: 15px;
line-height: 1;
}
.process-step h3 {
font-size: 28px;
margin-bottom: 15px;
color: var(--text-dark);
}
body.light-mode .process-step h3 {
color: var(--text-light);
}
.process-step p {
color: var(--slate);
line-height: 1.6;
}
body.light-mode .process-step p {
color: var(--secondary-text-light);
}
/* Pricing Section */
#pricing .pricing-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.pricing-card {
background-color: var(--card-background-dark);
padding: 40px;
border-radius: 12px;
text-align: center;
max-width: 380px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 2px solid transparent;
transition: border-color 0.3s, transform 0.3s;
}
body.light-mode .pricing-card {
background-color: var(--card-background-light);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.pricing-card.highlight {
border-color: var(--neon-green);
}
.pricing-card:hover {
transform: translateY(-5px);
}
.pricing-card h3 {
font-size: 32px;
margin-bottom: 15px;
color: var(--neon-green);
}
.pricing-card .price {
font-size: 50px;
font-weight: 700;
margin-bottom: 20px;
color: var(--text-dark);
}
body.light-mode .pricing-card .price {
color: var(--text-light);
}
.pricing-card .price span {
font-size: 24px;
color: var(--slate);
font-weight: 400;
}
body.light-mode .pricing-card .price span {
color: var(--secondary-text-light);
}
.pricing-card ul {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.pricing-card ul li {
margin-bottom: 10px;
color: var(--slate);
font-size: 18px;
}
body.light-mode .pricing-card ul li {
color: var(--secondary-text-light);
}
.pricing-card .cta-button {
padding: 15px 30px;
font-size: 18px;
}
/* Contact Section */
#contact .contact-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.contact-form {
background-color: var(--card-background-dark);
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
max-width: 600px;
width: 100%;
}
body.light-mode .contact-form {
background-color: var(--card-background-light);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.contact-form label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: var(--text-dark);
}
body.light-mode .contact-form label {
color: var(--text-light);
}
.contact-form input,
.contact-form textarea {
width: calc(100% - 20px);
padding: 12px;
margin-bottom: 20px;
border: 1px solid var(--slate);
border-radius: 8px;
background-color: #1a203c; /* Specific for input fields in dark mode */
color: var(--white);
font-size: 16px;
}
body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
background-color: var(--white);
color: var(--dark-navy);
border-color: #cbd5e0;
}
.contact-form textarea {
resize: vertical;
min-height: 120px;
}
.contact-form button {
background-color: var(--neon-green);
color: var(--dark-navy);
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
body.light-mode .contact-form button {
background-color: var(--dark-navy);
color: var(--white);
}
.contact-form button:hover {
transform: translateY(-3px);
opacity: 0.9;
}
.social-icons {
display: flex;
gap: 25px;
margin-top: 20px;
}
.social-icons a {
color: var(--slate);
font-size: 30px;
transition: color 0.3s;
}
.social-icons a:hover {
color: var(--neon-green);
}
/* Footer */
footer {
background-color: var(--dark-navy);
color: var(--slate);
padding: 60px 0;
text-align: center;
}
body.light-mode footer {
background-color: #e2e8f0;
color: #4a5568;
}
footer .logo {
font-size: 24px;
margin-bottom: 15px;
display: inline-block;
}
footer p {
margin-bottom: 20px;
font-size: 16px;
}
footer nav ul {
display: flex;
justify-content: center;
gap: 25px;
list-style: none;
padding: 0;
margin-top: 20px;
}
footer nav ul li a {
color: var(--slate);
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
footer nav ul li a:hover {
color: var(--neon-green);
}
/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
#hero h1 {
font-size: 50px;
}
#hero p {
font-size: 20px;
}
h2 {
font-size: 40px;
}
.feature-item, .process-step, .pricing-card {
padding: 30px;
}
}
@media (max-width: 768px) {
.nav-container {
padding: 0 20px;
}
#hero {
padding: 120px 0 80px;
}
#hero h1 {
font-size: 40px;
}
#hero p {
font-size: 18px;
}
h2 {
font-size: 36px;
margin-bottom: 40px;
}
.features-grid, .process-steps, .pricing-cards {
grid-template-columns: 1fr;
gap: 30px;
}
.pricing-card {
max-width: 90%;
}
.contact-form {
padding: 30px;
}
footer nav ul {
flex-direction: column;
gap: 15px;
}
}
@media (max-width: 480px) {
.logo {
font-size: 24px;
}
.nav-toggle {
font-size: 24px;
}
#hero h1 {
font-size: 32px;
}
#hero p {
font-size: 16px;
}
.cta-button {
padding: 15px 30px;
font-size: 18px;
}
h2 {
font-size: 30px;
}
.feature-item i {
font-size: 50px;
}
.feature-item h3 {
font-size: 20px;
}
.process-step .step-number {
font-size: 60px;
}
.process-step h3 {
font-size: 24px;
}
.pricing-card h3 {
font-size: 28px;
}
.pricing-card .price {
font-size: 40px;
}
.contact-form input,
.contact-form textarea,
.contact-form button {
font-size: 16px;
}
.social-icons a {
font-size: 26px;
}
}
</style>
</head>
<body>
<header>
<div class="container nav-container">
<a href="#" class="logo">Finish Mode AI</a>
<nav>
<ul id="nav-menu">
<li><a href="#features">Features</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
<li>
<div class="theme-switch" id="theme-toggle"></div>
</li>
</ul>
</nav>
<div class="nav-toggle" id="mobile-nav-toggle">
<i class="fas fa-bars"></i>
</div>
</div>
</header>
<main>
<section id="hero" class="fade-in">
<div class="container">
<h1>Automate Everything with Finish Mode AI</h1>
<p>Custom AI solutions tailored to your business ops.</p>
<a href="https://calendly.com/your-calendly-link" target="_blank" class="cta-button calendly-link">Book a Free Call</a>
</div>
</section>
---
<section id="features" class="fade-in">
<div class="container text-center">
<h2>Key Features</h2>
<div class="features-grid">
<article class="feature-item">
<i class="fas fa-robot"></i>
<h3>Custom AI Bots</h3>
<p>Develop bespoke AI bots designed to handle specific tasks and workflows unique to your business.</p>
</article>
<article class="feature-item">
<i class="fas fa-cogs"></i>
<h3>Workflow Automation</h3>
<p>Streamline complex operational processes, reducing manual effort and increasing efficiency across departments.</p>
</article>
<article class="feature-item">
<i class="fas fa-chart-line"></i>
<h3>Cost Optimization</h3>
<p>Identify inefficiencies and automate tasks to significantly lower operational costs and improve your bottom line.</p>
</article>
<article class="feature-item">
<i class="fas fa-database"></i>
<h3>Data-Driven Insights</h3>
<p>Leverage AI to analyze vast datasets, providing actionable insights for strategic decision-making and growth.</p>
</article>
<article class="feature-item">
<i class="fas fa-shield-alt"></i>
<h3>Enhanced Security</h3>
<p>Implement AI-powered security protocols to protect sensitive data and ensure compliance.</p>
</article>
<article class="feature-item">
<i class="fas fa-headset"></i>
<h3>24/7 Support</h3>
<p>Benefit from continuous support and maintenance for your AI systems, ensuring uninterrupted operation.</p>
</article>
</div>
</div>
</section>
---
<section id="process" class="fade-in">
<div class="container text-center">
<h2>Our 3-Step AI Transformation Process</h2>
<div class="process-steps">
<article class="process-step">
<div class="step-number">1</div>
<h3>Discover</h3>
<p>We begin with an in-depth analysis of your current operations, challenges, and goals to identify key automation opportunities.</p>
</article>
<article class="process-step">
<div class="step-number">2</div>
<h3>Design</h3>
<p>Our experts then design custom AI solutions, outlining the architecture, functionalities, and integration points tailored for your needs.</p>
</article>
<article class="process-step">
<div class="step-number">3</div>
<h3>Deploy</h3>
<p>Finally, we seamlessly integrate and deploy the AI systems, providing training and ongoing support to ensure optimal performance.</p>
</article>
</div>
</div>
</section>
---
<section id="pricing" class="fade-in">
<div class="container text-center">
<h2>Flexible Pricing Plans</h2>
<div class="pricing-cards">
<article class="pricing-card">
<h3>Starter</h3>
<p class="price">$5,000<span>/project</span></p>
<ul>
<li>Basic AI Consultation</li>
<li>Single Workflow Automation</li>
<li>Standard Support</li>
<li>Initial Setup</li>
</ul>
<a href="https://calendly.com/your-calendly-link-starter" target="_blank" class="cta-button calendly-link">Get Started</a>
</article>
<article class="pricing-card highlight">
<h3>Pro</h3>
<p class="price">$15,000<span>/project</span></p>
<ul>
<li>Advanced AI Strategy</li>
<li>Multiple Workflow Automation</li>
<li>Priority Support</li>
<li>Data-Driven Insights</li>
<li>Custom AI Bot Development</li>
</ul>
<a href="https://calendly.com/your-calendly-link-pro" target="_blank" class="cta-button calendly-link">Choose Pro</a>
</article>
<article class="pricing-card">
<h3>Enterprise</h3>
<p class="price">Custom</p>
<ul>
<li>Comprehensive AI Integration</li>
<li>Unlimited Workflow Automation</li>
<li>Dedicated Account Manager</li>
<li>Ongoing Optimization</li>
<li>Full-Scale AI System Deployment</li>
</ul>
<a href="https://calendly.com/your-calendly-link-enterprise" target="_blank" class="cta-button calendly-link">Contact Sales</a>
</article>
</div>
</div>
</section>
---
<section id="contact" class="fade-in">
<div class="container text-center">
<h2>Get in Touch</h2>
<div class="contact-content">
<form class="contact-form">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
<div class="social-icons">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter-square"></i></a>
<a href="#"><i class="fab fa-github-square"></i></a>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<a href="#" class="logo">Finish Mode AI</a>
<p>Automating your success with intelligent solutions.</p>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<p>© 2025 Finish Mode AI. All rights reserved.</p>
</div>
</footer>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Mobile Navigation Toggle
const mobileNavToggle = document.getElementById('mobile-nav-toggle');
const navMenu = document.getElementById('nav-menu');
mobileNavToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
mobileNavToggle.querySelector('i').classList.toggle('fa-bars');
mobileNavToggle.querySelector('i').classList.toggle('fa-times');
});
// Theme Switcher
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// Check for saved theme preference or default to dark
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light-mode') {
body.classList.add('light-mode');
themeToggle.classList.add('active');
}
themeToggle.addEventListener('click', () => {
body.classList.toggle('light-mode');
themeToggle.classList.toggle('active');
// Save theme preference to localStorage
if (body.classList.contains('light-mode')) {
localStorage.setItem('theme', 'light-mode');
} else {
localStorage.setItem('theme', 'dark-mode');
}
});
// Scroll-triggered animations
const fadeInElements = document.querySelectorAll('.fade-in');
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('appear');
observer.unobserve(entry.target);
}
});
}, observerOptions);
fadeInElements.forEach(element => {
observer.observe(element);
});
// Calendly Integration (basic, just opens popup)
const calendlyLinks = document.querySelectorAll('.calendly-link');
calendlyLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
Calendly.initPopupWidget({url: this.href});
return false;
});
});
});
</script>
</body>
</html>
No comments:
Post a Comment