Skip to content
Docs / Hosting-Specific / Landing Page

Landing Page

A complete landing page composition demonstrating how to combine all major Nimbus components into a real-world landing page. This full-page example includes header, hero, pricing, testimonials, FAQ, and footer sections.

Components Used: hu-header, hu-hero, hu-grid, hu-card, hu-pricing-card, hu-badge hu-badge-primary, hu-badge, hu-accordion, hu-btn, hu-container, hu-flex, hu-gap, hu-section, hu-footer, hu-icon, hu-toggle, hu-list

Complete Landing Page

Fast, Reliable Web Hosting

99.9% uptime guarantee. Free SSL, daily backups, and 24/7 support included with every plan.

99.9%
Uptime SLA
24/7
Expert Support
Free
SSL Certificate
Daily
Automatic Backups

Choose Your Hosting Plan

Reliable shared hosting with everything you need to get started.

Basic

$3.99 /mo
  • 1 Website
  • 10GB SSD Storage
  • Unmetered Bandwidth
  • Free SSL Certificate
MOST POPULAR

Professional

$7.99 /mo
  • Unlimited Websites
  • 50GB SSD Storage
  • Unmetered Bandwidth
  • Free SSL Certificate
  • Priority Support
  • Free Domain Name

Business

$12.99 /mo
  • Unlimited Websites
  • 100GB SSD Storage
  • Unmetered Bandwidth
  • Free SSL Certificate
  • 24/7 Phone Support
  • Free Domain Name
  • Dedicated IP Address

VPS Hosting

Full root access with dedicated resources for demanding applications.

Standard

$24.99 /mo
  • 2 vCPU Cores
  • 4GB RAM
  • 80GB SSD Storage
  • 4TB Bandwidth

Premium

$49.99 /mo
  • 4 vCPU Cores
  • 8GB RAM
  • 160GB SSD Storage
  • 5TB Bandwidth

Ultra

$99.99 /mo
  • 8 vCPU Cores
  • 16GB RAM
  • 320GB SSD Storage
  • Unmetered Bandwidth

Why Choose HostPro

  • Lightning-Fast Performance

    NVMe SSD storage and optimized servers deliver sub-200ms load times.

  • Enterprise-Grade Security

    Free SSL, DDoS protection, and automated malware scanning on every plan.

  • One-Click Installs

    WordPress, Joomla, and 400+ apps ready to deploy instantly.

  • Free Site Migration

    Our experts transfer your site with zero downtime, usually within 24 hours.

  • 30-Day Money-Back Guarantee

    Try us risk-free. Full refund within 30 days if you're not satisfied.

Server Status

Uptime 99.99%
Response Time 42ms
Load Average 0.12
Disk Usage 72%
Memory 48%
Last checked: 2 minutes ago

Trusted by Thousands

See what our customers have to say about their hosting experience.

"We migrated from a major provider and our load times dropped by 60%. The support team actually knows what they're doing."

JD
James Davis
CTO, TechStartup Inc

"The one-click WordPress install had my blog running in under 5 minutes. Best value hosting I've ever used."

SK
Sarah Kim
Blogger & Content Creator

"We host 50+ client sites on HostPro. The VPS performance is rock solid and the 99.9% uptime SLA gives us peace of mind."

MC
Marcus Chen
Agency Owner, WebWorks Studio

Frequently Asked Questions

Most accounts are activated instantly. You can install WordPress or another CMS with one click, and your site will be live in under 5 minutes. If you're migrating an existing site, our team handles the transfer with zero downtime, typically within 24 hours.

Yes. Every plan comes with a 30-day money-back guarantee. If you're not completely satisfied, contact our support team for a full refund. No questions asked.

Absolutely. You can upgrade at any time from your dashboard. We'll prorate the difference for the remainder of your billing cycle and your new resources are available immediately with no downtime.

We accept all major credit cards, PayPal, and bank transfers for annual plans. All payments are processed securely through Stripe. Monthly plans require a valid credit card.

Yes. Every hosting plan includes a free Let's Encrypt SSL certificate that is automatically installed and renewed. No configuration needed — your site is HTTPS-secured from day one.

Ready to Launch Your Website?

Join thousands of businesses that trust HostPro. Start with a free trial today.

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HostPro - Web Hosting</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/Nimbus@latest/css/main.css">
</head>
<body>

  <!-- 1. Header/Navbar -->
  <header style="display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; border-bottom: 1px solid var(--hu-border); background: var(--hu-bg); position: sticky; top: 0; z-index: 10;">
    <div style="display: flex; align-items: center; gap: 2rem;">
      <a href="#" style="font-size: 1.25rem; font-weight: 700; color: var(--hu-text-primary); text-decoration: none;">HostPro</a>
      <nav style="display: flex; gap: 1.5rem;">
        <a href="#hosting" style="font-size: 0.875rem; font-weight: 500; color: var(--hu-text-muted); text-decoration: none;">Hosting</a>
        <a href="#vps" style="font-size: 0.875rem; font-weight: 500; color: var(--hu-text-muted); text-decoration: none;">VPS</a>
        <a href="#features" style="font-size: 0.875rem; font-weight: 500; color: var(--hu-text-muted); text-decoration: none;">Domains</a>
        <a href="#pricing" style="font-size: 0.875rem; font-weight: 500; color: var(--hu-text-muted); text-decoration: none;">Pricing</a>
        <a href="#faq" style="font-size: 0.875rem; font-weight: 500; color: var(--hu-text-muted); text-decoration: none;">Support</a>
      </nav>
    </div>
    <div style="display: flex; align-items: center; gap: 1rem;">
      <button class="hu-btn hu-btn-ghost hu-btn-sm">Theme</button>
      <button class="hu-btn hu-btn-outline hu-btn-sm">Login</button>
      <button class="hu-btn hu-btn-primary hu-btn-sm">Order Now</button>
    </div>
  </header>

  <!-- 2. Hero Section -->
  <section class="hu-hero" style="padding: 5rem 2rem; background: linear-gradient(135deg, var(--hu-primary) 0%, var(--hu-primary-hover) 100%);">
    <div class="hu-container" style="max-width: 700px;">
      <h1 class="hu-hero-title" style="font-size: 3rem; font-weight: 800; color: white; margin-bottom: 1.25rem;">Fast, Reliable Web Hosting</h1>
      <p class="hu-hero-subtitle" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 2rem; line-height: 1.6;">99.9% uptime guarantee. Free SSL, daily backups, and 24/7 support included with every plan.</p>
      <div class="hu-flex" style="justify-content: center; gap: 1rem;">
        <button class="hu-btn hu-btn-white">View Plans</button>
        <button class="hu-btn hu-btn-outline-white">Live Demo</button>
      </div>
    </div>
  </section>

  <!-- 3. Trust Indicators -->
  <section style="padding: 3rem 2rem; border-bottom: 1px solid var(--hu-border);">
    <div class="hu-grid" style="grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 900px; margin: 0 auto; text-align: center;">
      <div>
        <div style="font-size: 2rem; font-weight: 700; color: var(--hu-primary);">99.9%</div>
        <div style="font-size: 0.875rem; color: var(--hu-text-muted); margin-top: 0.25rem;">Uptime SLA</div>
      </div>
      <div>
        <div style="font-size: 2rem; font-weight: 700; color: var(--hu-primary);">24/7</div>
        <div style="font-size: 0.875rem; color: var(--hu-text-muted); margin-top: 0.25rem;">Expert Support</div>
      </div>
      <div>
        <div style="font-size: 2rem; font-weight: 700; color: var(--hu-primary);">Free</div>
        <div style="font-size: 0.875rem; color: var(--hu-text-muted); margin-top: 0.25rem;">SSL Certificate</div>
      </div>
      <div>
        <div style="font-size: 2rem; font-weight: 700; color: var(--hu-primary);">Daily</div>
        <div style="font-size: 0.875rem; color: var(--hu-text-muted); margin-top: 0.25rem;">Automatic Backups</div>
      </div>
    </div>
  </section>

  <!-- 4. Hosting Plans Section -->
  <section id="hosting" style="padding: 4rem 2rem;">
    <div class="hu-container">
      <h2 class="h2" style="text-align: center; margin-bottom: 0.5rem;">Choose Your Hosting Plan</h2>
      <p style="text-align: center; color: var(--hu-text-muted); margin-bottom: 3rem; max-width: 500px; margin-left: auto; margin-right: auto;">Reliable shared hosting with everything you need to get started.</p>
      <div class="hu-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto;">
        <div class="hu-card hu-pricing-card">
          <div class="hu-card-header" style="text-align: center;">
            <h3 class="hu-card-title">Basic</h3>
            <div class="hu-pricing-price">
              <span class="hu-pricing-amount">$3.99</span>
              <span class="hu-pricing-period">/mo</span>
            </div>
          </div>
          <div class="hu-card-body">
            <ul class="hu-pricing-features">
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                1 Website
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                10GB SSD Storage
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Unmetered Bandwidth
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Free SSL Certificate
              </li>
            </ul>
          </div>
          <div class="hu-card-footer" style="text-align: center;">
            <button class="hu-btn hu-btn-outline" style="width: 100%;">Get Started</button>
          </div>
        </div>

        <div class="hu-card hu-pricing-card hu-card" style="transform: scale(1.05); z-index: 2;">
          <div class="hu-pricing-badge hu-badge hu-badge-primary">MOST POPULAR</div>
          <div class="hu-card-header" style="text-align: center;">
            <h3 class="hu-card-title">Professional</h3>
            <div class="hu-pricing-price">
              <span class="hu-pricing-amount">$7.99</span>
              <span class="hu-pricing-period">/mo</span>
            </div>
          </div>
          <div class="hu-card-body">
            <ul class="hu-pricing-features">
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Unlimited Websites
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                50GB SSD Storage
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Unmetered Bandwidth
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Free SSL Certificate
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Priority Support
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Free Domain Name
              </li>
            </ul>
          </div>
          <div class="hu-card-footer" style="text-align: center;">
            <button class="hu-btn hu-btn-primary" style="width: 100%;">Get Started</button>
          </div>
        </div>

        <div class="hu-card hu-pricing-card">
          <div class="hu-card-header" style="text-align: center;">
            <h3 class="hu-card-title">Business</h3>
            <div class="hu-pricing-price">
              <span class="hu-pricing-amount">$12.99</span>
              <span class="hu-pricing-period">/mo</span>
            </div>
          </div>
          <div class="hu-card-body">
            <ul class="hu-pricing-features">
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Unlimited Websites
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                100GB SSD Storage
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Unmetered Bandwidth
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Free SSL Certificate
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                24/7 Phone Support
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Free Domain Name
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Dedicated IP Address
              </li>
            </ul>
          </div>
          <div class="hu-card-footer" style="text-align: center;">
            <button class="hu-btn hu-btn-outline" style="width: 100%;">Get Started</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 5. VPS Section -->
  <section id="vps" style="padding: 4rem 2rem; background: var(--hu-bg-secondary);">
    <div class="hu-container">
      <h2 class="h2" style="text-align: center; margin-bottom: 0.5rem;">VPS Hosting</h2>
      <p style="text-align: center; color: var(--hu-text-muted); margin-bottom: 3rem; max-width: 500px; margin-left: auto; margin-right: auto;">Full root access with dedicated resources for demanding applications.</p>
      <div class="hu-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto;">
        <div class="hu-card">
          <div class="hu-card-header" style="text-align: center;">
            <h3 class="hu-card-title">Standard</h3>
            <div class="hu-pricing-price">
              <span class="hu-pricing-amount">$24.99</span>
              <span class="hu-pricing-period">/mo</span>
            </div>
          </div>
          <div class="hu-card-body">
            <ul class="hu-pricing-features">
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                2 vCPU Cores
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                4GB RAM
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                80GB SSD Storage
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                4TB Bandwidth
              </li>
            </ul>
          </div>
          <div class="hu-card-footer" style="text-align: center;">
            <button class="hu-btn hu-btn-outline" style="width: 100%;">Get Started</button>
          </div>
        </div>

        <div class="hu-card hu-card">
          <div class="hu-card-header" style="text-align: center;">
            <h3 class="hu-card-title">Premium</h3>
            <div class="hu-pricing-price">
              <span class="hu-pricing-amount">$49.99</span>
              <span class="hu-pricing-period">/mo</span>
            </div>
          </div>
          <div class="hu-card-body">
            <ul class="hu-pricing-features">
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                4 vCPU Cores
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                8GB RAM
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                160GB SSD Storage
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                5TB Bandwidth
              </li>
            </ul>
          </div>
          <div class="hu-card-footer" style="text-align: center;">
            <button class="hu-btn hu-btn-primary" style="width: 100%;">Get Started</button>
          </div>
        </div>

        <div class="hu-card">
          <div class="hu-card-header" style="text-align: center;">
            <h3 class="hu-card-title">Ultra</h3>
            <div class="hu-pricing-price">
              <span class="hu-pricing-amount">$99.99</span>
              <span class="hu-pricing-period">/mo</span>
            </div>
          </div>
          <div class="hu-card-body">
            <ul class="hu-pricing-features">
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                8 vCPU Cores
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                16GB RAM
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                320GB SSD Storage
              </li>
              <li class="hu-pricing-feature">
                <svg style="color: var(--hu-success)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                Unmetered Bandwidth
              </li>
            </ul>
          </div>
          <div class="hu-card-footer" style="text-align: center;">
            <button class="hu-btn hu-btn-outline" style="width: 100%;">Get Started</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 6. Features Section -->
  <section id="features" style="padding: 4rem 2rem;">
    <div class="hu-container">
      <h2 class="h2" style="text-align: center; margin-bottom: 3rem;">Why Choose HostPro</h2>
      <div class="hu-grid" style="grid-template-columns: repeat(2, 1fr); gap: 3rem; align-items: start; max-width: 900px; margin: 0 auto;">
        <ul style="list-style: none; padding: 0; margin: 0;">
          <li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem;">
            <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--hu-success)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            <div>
              <strong style="color: var(--hu-text-primary);">Lightning-Fast Performance</strong>
              <p style="color: var(--hu-text-muted); font-size: 0.875rem; margin: 0.25rem 0 0;">NVMe SSD storage and optimized servers deliver sub-200ms load times.</p>
            </div>
          </li>
          <li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem;">
            <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--hu-success)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            <div>
              <strong style="color: var(--hu-text-primary);">Enterprise-Grade Security</strong>
              <p style="color: var(--hu-text-muted); font-size: 0.875rem; margin: 0.25rem 0 0;">Free SSL, DDoS protection, and automated malware scanning on every plan.</p>
            </div>
          </li>
          <li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem;">
            <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--hu-success)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            <div>
              <strong style="color: var(--hu-text-primary);">One-Click Installs</strong>
              <p style="color: var(--hu-text-muted); font-size: 0.875rem; margin: 0.25rem 0 0;">WordPress, Joomla, and 400+ apps ready to deploy instantly.</p>
            </div>
          </li>
          <li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem;">
            <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--hu-success)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            <div>
              <strong style="color: var(--hu-text-primary);">Free Site Migration</strong>
              <p style="color: var(--hu-text-muted); font-size: 0.875rem; margin: 0.25rem 0 0;">Our experts transfer your site with zero downtime, usually within 24 hours.</p>
            </div>
          </li>
          <li style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--hu-success)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            <div>
              <strong style="color: var(--hu-text-primary);">30-Day Money-Back Guarantee</strong>
              <p style="color: var(--hu-text-muted); font-size: 0.875rem; margin: 0.25rem 0 0;">Try us risk-free. Full refund within 30 days if you're not satisfied.</p>
            </div>
          </li>
        </ul>
        <div class="hu-card">
          <div class="hu-card-header">
            <h3 class="hu-card-title">Server Status</h3>
          </div>
          <div class="hu-card-body">
            <div style="display: flex; flex-direction: column; gap: 1rem;">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--hu-text-muted); font-size: 0.875rem;">Uptime</span>
                <span class="hu-badge hu-badge-success">99.99%</span>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--hu-text-muted); font-size: 0.875rem;">Response Time</span>
                <span class="hu-badge hu-badge-success">42ms</span>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--hu-text-muted); font-size: 0.875rem;">Load Average</span>
                <span class="hu-badge hu-badge-info">0.12</span>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--hu-text-muted); font-size: 0.875rem;">Disk Usage</span>
                <span class="hu-badge hu-badge-warning">72%</span>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--hu-text-muted); font-size: 0.875rem;">Memory</span>
                <span class="hu-badge hu-badge-success">48%</span>
              </div>
              <div style="border-top: 1px solid var(--hu-border); padding-top: 1rem; margin-top: 0.5rem;">
                <div style="font-size: 0.75rem; color: var(--hu-text-muted); margin-bottom: 0.5rem;">Last checked: 2 minutes ago</div>
                <button class="hu-btn hu-btn-outline hu-btn-sm" style="width: 100%;">View Full Status</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 7. Testimonials -->
  <section style="padding: 4rem 2rem; background: var(--hu-bg-secondary);">
    <div class="hu-container">
      <h2 class="h2" style="text-align: center; margin-bottom: 0.5rem;">Trusted by Thousands</h2>
      <p style="text-align: center; color: var(--hu-text-muted); margin-bottom: 3rem; max-width: 500px; margin-left: auto; margin-right: auto;">See what our customers have to say about their hosting experience.</p>
      <div class="hu-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto;">
        <div class="hu-card">
          <div class="hu-card-body">
            <p style="font-style: italic; color: var(--hu-text-muted); margin-bottom: 1rem; line-height: 1.6;">"We migrated from a major provider and our load times dropped by 60%. The support team actually knows what they're doing."</p>
            <div style="display: flex; align-items: center; gap: 0.75rem;">
              <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--hu-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">JD</div>
              <div>
                <div style="font-weight: 600; font-size: 0.875rem; color: var(--hu-text-primary);">James Davis</div>
                <div style="font-size: 0.75rem; color: var(--hu-text-muted);">CTO, TechStartup Inc</div>
              </div>
            </div>
          </div>
        </div>
        <div class="hu-card">
          <div class="hu-card-body">
            <p style="font-style: italic; color: var(--hu-text-muted); margin-bottom: 1rem; line-height: 1.6;">"The one-click WordPress install had my blog running in under 5 minutes. Best value hosting I've ever used."</p>
            <div style="display: flex; align-items: center; gap: 0.75rem;">
              <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--hu-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">SK</div>
              <div>
                <div style="font-weight: 600; font-size: 0.875rem; color: var(--hu-text-primary);">Sarah Kim</div>
                <div style="font-size: 0.75rem; color: var(--hu-text-muted);">Blogger & Content Creator</div>
              </div>
            </div>
          </div>
        </div>
        <div class="hu-card">
          <div class="hu-card-body">
            <p style="font-style: italic; color: var(--hu-text-muted); margin-bottom: 1rem; line-height: 1.6;">"We host 50+ client sites on HostPro. The VPS performance is rock solid and the 99.9% uptime SLA gives us peace of mind."</p>
            <div style="display: flex; align-items: center; gap: 0.75rem;">
              <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--hu-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">MC</div>
              <div>
                <div style="font-weight: 600; font-size: 0.875rem; color: var(--hu-text-primary);">Marcus Chen</div>
                <div style="font-size: 0.75rem; color: var(--hu-text-muted);">Agency Owner, WebWorks Studio</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 8. FAQ Section -->
  <section id="faq" style="padding: 4rem 2rem;">
    <div class="hu-container">
      <h2 class="h2" style="text-align: center; margin-bottom: 3rem;">Frequently Asked Questions</h2>
      <div class="hu-accordion" style="max-width: 750px; margin: 0 auto;">
        <div class="hu-accordion-item">
          <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="false">
              <span class="hu-accordion-title">How quickly can I get my site online?</span>
              <svg class="hu-accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
          </div>
          <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
              <p>Most accounts are activated instantly. You can install WordPress or another CMS with one click, and your site will be live in under 5 minutes. If you're migrating an existing site, our team handles the transfer with zero downtime, typically within 24 hours.</p>
            </div>
          </div>
        </div>
        <div class="hu-accordion-item">
          <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="false">
              <span class="hu-accordion-title">Do you offer a money-back guarantee?</span>
              <svg class="hu-accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
          </div>
          <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
              <p>Yes. Every plan comes with a 30-day money-back guarantee. If you're not completely satisfied, contact our support team for a full refund. No questions asked.</p>
            </div>
          </div>
        </div>
        <div class="hu-accordion-item">
          <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="false">
              <span class="hu-accordion-title">Can I upgrade my plan later?</span>
              <svg class="hu-accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
          </div>
          <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
              <p>Absolutely. You can upgrade at any time from your dashboard. We'll prorate the difference for the remainder of your billing cycle and your new resources are available immediately with no downtime.</p>
            </div>
          </div>
        </div>
        <div class="hu-accordion-item">
          <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="false">
              <span class="hu-accordion-title">What payment methods do you accept?</span>
              <svg class="hu-accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
          </div>
          <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
              <p>We accept all major credit cards, PayPal, and bank transfers for annual plans. All payments are processed securely through Stripe. Monthly plans require a valid credit card.</p>
            </div>
          </div>
        </div>
        <div class="hu-accordion-item">
          <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="false">
              <span class="hu-accordion-title">Do you provide free SSL certificates?</span>
              <svg class="hu-accordion-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
          </div>
          <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
              <p>Yes. Every hosting plan includes a free Let's Encrypt SSL certificate that is automatically installed and renewed. No configuration needed — your site is HTTPS-secured from day one.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 9. CTA Jumbotron -->
  <section style="padding: 4rem 2rem;">
    <div class="hu-container">
      <section class="hu-section" style="border-radius: 16px; padding: 4rem 2rem; text-align: center;">
        <h2 class="h2" style="color: white; margin-bottom: 1rem;">Ready to Launch Your Website?</h2>
        <p style="color: rgba(255,255,255,0.9); margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto;">Join thousands of businesses that trust HostPro. Start with a free trial today.</p>
        <div class="hu-flex" style="justify-content: center; gap: 1rem;">
          <button class="hu-btn hu-btn-white">Start Free Trial</button>
          <button class="hu-btn hu-btn-outline-white">Contact Sales</button>
        </div>
      </section>
    </div>
  </section>

  <!-- 10. Footer -->
  <footer style="padding: 4rem 2rem 2rem; border-top: 1px solid var(--hu-border); background: var(--hu-bg-secondary);">
    <div class="hu-container">
      <div class="hu-grid" style="grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem;">
        <div>
          <div style="font-size: 1.125rem; font-weight: 700; color: var(--hu-text-primary); margin-bottom: 1rem;">HostPro</div>
          <p style="font-size: 0.875rem; color: var(--hu-text-muted); line-height: 1.6;">Fast, reliable web hosting for businesses and developers. Backed by a 99.9% uptime SLA.</p>
        </div>
        <div>
          <div style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hu-text-muted); margin-bottom: 1rem;">Hosting</div>
          <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;">
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Shared Hosting</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">VPS Hosting</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Cloud Hosting</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Dedicated Servers</a></li>
          </ul>
        </div>
        <div>
          <div style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hu-text-muted); margin-bottom: 1rem;">Company</div>
          <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;">
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">About Us</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Careers</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Blog</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Partners</a></li>
          </ul>
        </div>
        <div>
          <div style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hu-text-muted); margin-bottom: 1rem;">Support</div>
          <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;">
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Help Center</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Knowledge Base</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">System Status</a></li>
            <li><a href="#" style="font-size: 0.875rem; color: var(--hu-text-muted); text-decoration: none;">Contact Us</a></li>
          </ul>
        </div>
      </div>
      <div style="border-top: 1px solid var(--hu-border); padding-top: 2rem; text-align: center;">
        <p style="font-size: 0.75rem; color: var(--hu-text-muted);">&copy; 2026 HostPro. All rights reserved. Hosting powered by HostPro Infrastructure.</p>
      </div>
    </div>
  </footer>

</body>
</html>