SaaS Landing Page AI Prompt Result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZezzFlo | Unify Your Team's Workflow</title>
    <style>
        /* ------------------- */
        /*  1. Global Styles & Variables */
        /* ------------------- */

:root {
            --color-primary: #4A47A3; /* A trustworthy blue/purple */
            --color-primary-dark: #3a388a;
            --color-accent: #00A19D;  /* A vibrant teal for CTAs */
            --color-accent-dark: #008481;
            --color-highlight-bg: #F0F8FF; /* Light blue for popular plan */
            --color-light-gray: #f4f7f6;
            --color-text: #333333;
            --color-text-light: #5f5f5f;
            --color-background: #FFFFFF;
            --font-family-sans: 'Helvetica Neue', Arial, sans-serif;
            --font-family-heading: 'Georgia', 'Times New Roman', serif;
        }

/* Basic Reset & Box Sizing */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-family-sans);
            line-height: 1.6;
            color: var(--color-text);
            background-color: var(--color-background);
        }

/* Accessibility: Visually hidden class for labels */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

/* Accessibility: Focus styles for keyboard navigation */
        :focus-visible {
            outline: 3px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: 4px;
        }

/* Typography */
        h1, h2, h3 {
            font-family: var(--font-family-heading);
            color: var(--color-primary);
            line-height: 1.2;
            margin-bottom: 0.5em;
        }

h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; text-align: center; }
        h3 { font-size: 1.5rem; }
        p { margin-bottom: 1em; color: var(--color-text-light); }

/* General Layout Container */
        .container {
            width: 90%;
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
        }

/* Section Padding */
        section {
            padding: 4rem 0;
        }

/* Buttons */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out, transform 0.2s ease;
        }

.btn-primary {
            background-color: var(--color-accent);
            color: white;
        }

.btn-primary:hover, .btn-primary:focus {
            background-color: var(--color-accent-dark);
            transform: translateY(-2px);
        }

.btn-secondary {
            background-color: var(--color-primary);
            color: white;
        }

.btn-secondary:hover, .btn-secondary:focus {
            background-color: var(--color-primary-dark);
            transform: translateY(-2px);
        }

/* ------------------- */
        /*  2. Header */
        /* ------------------- */
        .main-header {
            padding: 1rem 0;
            background-color: var(--color-background);
            border-bottom: 1px solid #e0e0e0;
        }

.main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-family: var(--font-family-heading);
            font-size: 1.75rem;
            font-weight: bold;
            color: var(--color-primary);
            text-decoration: none;
        }

/* ------------------- */
        /*  3. Hero Section */
        /* ------------------- */
        #hero {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        
        #hero .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

.hero-content {
            max-width: 600px;
        }

.hero-form {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

.hero-form input[type="email"] {
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
        }

.hero-image-placeholder {
            margin-top: 3rem;
            width: 100%;
            max-width: 500px;
            height: auto;
            background-color: var(--color-light-gray);
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
        }

/* ------------------- */
        /*  4. Features Section */
        /* ------------------- */
        #features {
            background-color: var(--color-light-gray);
        }

.features-grid {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

.feature-item {
            text-align: center;
            padding: 1.5rem;
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 1rem;
            color: var(--color-primary);
        }

/* ------------------- */
        /*  5. Testimonials Section */
        /* ------------------- */
        #testimonials {
            background-color: var(--color-primary);
            color: white;
        }
        
        #testimonials h2, #testimonials h3 {
            color: white;
        }

.testimonial-quote {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
        }
        
        .testimonial-quote blockquote {
            font-size: 1.25rem;
            font-style: italic;
            border: none;
            margin: 0;
            padding: 0;
        }

.testimonial-quote cite {
            display: block;
            margin-top: 1rem;
            font-weight: bold;
            font-style: normal;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .testimonial-quote cite span {
            display: block;
            font-weight: normal;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

/* ------------------- */
        /*  6. Pricing Section */
        /* ------------------- */
        .pricing-grid {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: center;
        }

.pricing-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            background-color: var(--color-background);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

.pricing-card--popular {
            border-color: var(--color-primary);
            border-width: 3px;
            transform: scale(1.05);
            background-color: var(--color-highlight-bg);
            position: relative;
        }
        
        .popular-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--color-primary);
            color: white;
            padding: 0.25rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }

.pricing-card h3 {
            font-size: 1.75rem;
        }

.price {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--color-primary);
            margin: 0.5rem 0;
        }
        
        .price span {
            font-size: 1rem;
            font-weight: normal;
            color: var(--color-text-light);
        }

.features-list {
            list-style: none;
            margin: 1.5rem 0;
            text-align: left;
            flex-grow: 1; /* Pushes button to bottom */
        }
        
        .features-list li {
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }
        
        .features-list li::before {
            content: 'âœ“';
            color: var(--color-accent);
            font-weight: bold;
            margin-right: 0.5rem;
        }

.pricing-card .btn {
            width: 100%;
        }

/* ------------------- */
        /*  7. Footer */
        /* ------------------- */
        .main-footer {
            background-color: var(--color-text);
            color: #e0e0e0;
            padding: 3rem 0;
        }

.footer-grid {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            text-align: center;
        }
        
        .footer-grid h4 {
            font-family: var(--font-family-sans);
            color: white;
            margin-bottom: 1rem;
        }
        
        .footer-links, .social-links {
            list-style: none;
        }
        
        .footer-links li, .social-links li {
            margin-bottom: 0.5rem;
        }
        
        .footer-links a, .social-links a {
            color: #e0e0e0;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        .footer-links a:hover, .social-links a:hover {
            color: white;
            text-decoration: underline;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }
        
        .social-links svg {
            width: 24px;
            height: 24px;
        }

.footer-copyright {
            margin-top: 3rem;
            text-align: center;
            font-size: 0.9rem;
            border-top: 1px solid #444;
            padding-top: 1.5rem;
        }

/* ------------------- */
        /*  8. Responsive Media Queries (Tablet & up) */
        /* ------------------- */
        
        @media (min-width: 768px) {
            h1 { font-size: 3rem; }
            h2 { font-size: 2.5rem; }

/* Hero */
            #hero .container {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
            .hero-content {
                flex: 1;
                margin-right: 2rem;
            }
            .hero-image-placeholder {
                flex: 1;
                margin-top: 0;
            }
            .hero-form {
                flex-direction: row;
            }
            .hero-form input[type="email"] {
                flex-grow: 1;
            }

/* Features */
            .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }

/* Pricing */
            .pricing-grid {
                /* A robust grid that wraps nicely */
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }

/* Footer */
            .footer-grid {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
            .social-links {
                justify-content: flex-start;
            }
        }
        
        @media (min-width: 992px) {
             h1 { font-size: 3.5rem; }
            .pricing-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

</style>
</head>
<body>

<header class="main-header">
        <div class="container">
            <a href="#" class="logo">ZezzFlo</a>
            <nav>
                <a href="#pricing" class="btn btn-secondary">Sign Up for Free</a>
            </nav>
        </div>
    </header>

<main>

<section id="hero">
            <div class="container">
                <div class="hero-content">
                    <h1>Your Team's Workflow, <br>Unified.</h1>
                    <p>ZezzFlo brings all your tasks, documents, and team communication into one simple, intuitive platform. Stop switching between apps and start getting work done.</p>
                    <form class="hero-form">
                        <label for="hero-email" class="sr-only">Enter your email to get started</label>
                        <input type="email" id="hero-email" placeholder="name@company.com" required>
                        <button type="submit" class="btn btn-primary">Get Started</button>
                    </form>
                </div>
                <div class="hero-image-placeholder">
                    
                    <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder image of the ZezzFlo application interface.">
                       <rect width="100%" height="100%" fill="#e9ecef"/>
                       <text x="50%" y="50%" fill="#6c757d" dy=".3em" font-family="sans-serif" font-size="16" text-anchor="middle">Product Screenshot</text>
                    </svg>
                </div>
            </div>
        </section>

<section id="features">
            <div class="container">
                <h2>Why ZezzFlo is Different</h2>
                <div class="features-grid">
                    
                    <div class="feature-item">
                        <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        <h3>Blazing Fast Collaboration</h3>
                        <p>Real-time document editing and instant messaging keep your entire team in sync, without the lag.</p>
                    </div>
                    
                    <div class="feature-item">
                        <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                        <h3>Ironclad Security</h3>
                        <p>With end-to-end encryption and enterprise-grade compliance, your data has never been safer.</p>
                    </div>
                    
                    <div class="feature-item">
                        <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                        </svg>
                        <h3>Seamless Integrations</h3>
                        <p>Connect ZezzFlo with the tools you already use, from GitHub and Slack to Google Drive and more.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials">
            <div class="container">
                <div class="testimonial-quote">
                    <blockquote id="customer-quote">
                        <p>"ZezzFlo has revolutionized how our team works. We're more organized, more efficient, and communication has never been clearer. It's a must-have tool for any modern team."</p>
                    </blockquote>
                    <cite aria-describedby="customer-quote">
                        Jane Doe
                        <span>CEO, Innovatech Solutions</span>
                    </cite>
                </div>
            </div>
        </section>

<section id="pricing">
            <div class="container">
                <h2 id="pricing-heading">Simple, Transparent Pricing</h2>
                <p style="text-align: center; max-width: 600px; margin-left: auto; margin-right: auto;">Choose the plan that's right for you. No hidden fees, ever.</p>
                <div class="pricing-grid" role="group" aria-labelledby="pricing-heading">
                    
                    <div class="pricing-card" role="region" aria-labelledby="pricing-free-tier">
                        <h3 id="pricing-free-tier">Free</h3>
                        <p class="price">$0<span>/month</span></p>
                        <p>For individuals and small teams just getting started.</p>
                        <ul class="features-list">
                            <li>Up to 3 users</li>
                            <li>Basic task management</li>
                            <li>1GB file storage</li>
                            <li>Community support</li>
                        </ul>
                        <a href="#" class="btn btn-secondary">Get Started Free</a>
                    </div>
                    
                    <div class="pricing-card pricing-card--popular" role="region" aria-labelledby="pricing-pro-tier">
                        <div class="popular-badge">Most Popular</div>
                        <h3 id="pricing-pro-tier">Pro</h3>
                        <p class="price">$12<span>/user/month</span></p>
                        <p>For growing teams that need more power and collaboration.</p>
                        <ul class="features-list">
                            <li>Unlimited users</li>
                            <li>Advanced task management</li>
                            <li>Real-time collaboration</li>
                            <li>100GB file storage</li>
                            <li>Priority email support</li>
                        </ul>
                        <a href="#" class="btn btn-primary">Choose Pro</a>
                    </div>
                    
                    <div class="pricing-card" role="region" aria-labelledby="pricing-enterprise-tier">
                        <h3 id="pricing-enterprise-tier">Enterprise</h3>
                        <p class="price">Custom</p>
                        <p>For large organizations with specific security and support needs.</p>
                        <ul class="features-list">
                            <li>All Pro features, plus:</li>
                            <li>Single Sign-On (SSO)</li>
                            <li>Advanced security & compliance</li>
                            <li>Dedicated account manager</li>
                            <li>Custom onboarding</li>
                        </ul>
                        <a href="#" class="btn btn-secondary">Contact Sales</a>
                    </div>
                </div>
            </div>
        </section>

</main>

<footer class="main-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-about">
                    <h4>ZezzFlo</h4>
                    <p>Unifying workflows for teams around the world.</p>
                </div>
                <div class="footer-nav-links">
                    <h4>Product</h4>
                    <ul class="footer-links">
                        <li><a href="#features">Features</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-legal-links">
                    <h4>Legal</h4>
                    <ul class="footer-links">
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Service</a></li>
                    </ul>
                </div>
                 <div class="footer-social">
                    <h4>Follow Us</h4>
                    <ul class="social-links">
                        <li><a href="#" aria-label="ZezzFlo on Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-.424.727-.666 1.561-.666 2.477 0 1.61.82 3.027 2.053 3.847-.764-.024-1.482-.232-2.11-.583v.06a4.25 4.25 0 0 0 3.18 4.162c-.33.089-.68.136-1.04.136-.254 0-.502-.025-.745-.07 1.05 3.23 4.1 5.57 7.72 5.64-2.77 2.17-6.26 3.46-10.06 3.46-.65 0-1.29-.038-1.92-.113 3.58 2.3 7.84 3.63 12.4 3.63 14.88 0 23.01-12.3 23.01-23.01 0-.35-.008-.699-.023-1.049.982-.71 1.83-1.59 2.51-2.61z"/></svg></a></li>
                        <li><a href="#" aria-label="ZezzFlo on LinkedIn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg></a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-copyright">
                <p>Â© 2024 ZezzFlo, Inc. All rights reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>