Component:

Pricing Marketing Dark

Name: Pricing Marketing Dark
Availability: InStock

Free

Tags: Pricing Page Section Content Sale Marketing Dark

Colors:

Description:

This carefully crafted Pricing component is perfect for Marketing landing pages, featuring a Dark design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Pricing
@industry: Marketing
@style: Dark
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  /* Colors */
  --color-gray-300: rgb(209, 213, 219);
  --color-gray-700: rgb(55, 65, 81);
  --color-gray-800: rgb(31, 41, 55);
  --color-gray-900: rgb(17, 24, 39);
  --color-blue-400: rgb(96, 165, 250);
  --color-blue-500: rgb(59, 130, 246);
  --color-blue-600: rgb(37, 99, 235);
  --color-blue-700: rgb(29, 78, 216);
  --color-white: rgb(255, 255, 255);

  /* Spacing */
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Component Styles */
.pricing-section {
  background-color: var(--color-gray-900);
  padding: var(--spacing-16) var(--spacing-4);
}

.header {
  text-align: center;
}

.header h2 {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.header p {
  margin-top: var(--spacing-4);
  font-size: 1.125rem;
  color: var(--color-gray-300);
}

/* Toggle Switch */
.toggle-container {
  margin-top: var(--spacing-12);
  display: flex;
  justify-content: center;
}

.toggle-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.toggle-label {
  font-size: 0.875rem;
  color: var(--color-gray-300);
  user-select: none;
}

.toggle-button {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.75rem;
  align-items: center;
  border: none;
  border-radius: 9999px;
  background-color: var(--color-blue-600);
  transition: all 0.2s ease;
  cursor: pointer;
}

.toggle-button:hover {
  background-color: var(--color-blue-700);
}

.toggle-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.toggle-knob {
  position: absolute;
  left: 0.25rem;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background-color: var(--color-white);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-button[aria-checked="true"] .toggle-knob {
  transform: translateX(0);
}

.toggle-discount {
  color: var(--color-blue-400);
  font-weight: 500;
}

/* Pricing Cards Grid */
.pricing-grid {
  margin-top: var(--spacing-12);
  display: grid;
  gap: var(--spacing-8);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray-800);
  border: 1px solid var(--color-gray-700);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.pricing-card.popular {
  border: 2px solid var(--color-blue-500);
  position: relative;
}

.popular-badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-blue-500);
  color: var(--color-white);
  padding: 0.25rem var(--spacing-4);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.pricing-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
}

.pricing-card p {
  margin-top: var(--spacing-4);
  font-size: 0.875rem;
  color: var(--color-gray-300);
}

.price {
  margin-top: var(--spacing-6);
}

.price-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-white);
}

.price-period {
  font-size: 0.875rem;
  color: var(--color-gray-300);
}

.feature-list {
  margin-top: var(--spacing-8);
  list-style: none;
  flex: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  color: var(--color-gray-300);
  margin-bottom: var(--spacing-4);
}

.feature-icon {
  height: 1.25rem;
  width: 1.25rem;
  color: var(--color-blue-400);
  margin-right: 0.75rem;
}

.cta-button {
  margin-top: var(--spacing-8);
  display: block;
  width: 100%;
  padding: 0.75rem var(--spacing-6);
  border-radius: 0.5rem;
  background-color: var(--color-blue-600);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.cta-button:hover {
  background-color: var(--color-blue-700);
}

.cta-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* FAQ Section */
.faq-section {
  margin-top: var(--spacing-16);
}

.faq-header {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.faq-grid {
  display: grid;
  gap: var(--spacing-6);
}

.faq-item {
  background-color: var(--color-gray-800);
  border: 1px solid var(--color-gray-700);
  border-radius: 0.5rem;
  padding: var(--spacing-6);
}

.faq-question {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.faq-answer {
  color: var(--color-gray-300);
  line-height: 1.5;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .pricing-section {
    padding: var(--spacing-24) var(--spacing-6);
  }
  
  .header h2 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

<section class="pricing-section">
    <!-- Header -->
    <div class="header">
      <h2>Marketing Solutions Pricing</h2>
      <p>Choose the perfect plan for your marketing needs</p>
    </div>

    <!-- Toggle Annual/Monthly -->
    <div class="toggle-container">
      <div class="toggle-wrapper">
        <span class="toggle-label">Monthly</span>
        <button type="button" role="switch" aria-checked="true" class="toggle-button" id="pricing-toggle">
          <span class="toggle-knob" id="toggle-knob"></span>
        </button>
        <span class="toggle-label">Annual <span class="toggle-discount">(Save 20%)</span></span>
      </div>
    </div>

    <!-- Pricing Cards -->
    <div class="pricing-grid">
      <!-- Starter Plan -->
      <div class="pricing-card">
        <h3>Starter</h3>
        <p>Perfect for small businesses starting their marketing journey</p>
        <div class="price">
          <span class="price-amount" data-monthly="$99" data-annual="$79">$99</span>
          <span class="price-period">/month</span>
        </div>
        <ul class="feature-list">
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Social media management (2 platforms)
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Basic SEO optimization
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Monthly performance reports
          </li>
        </ul>
        <button class="cta-button">Get Started</button>
      </div>

      <!-- Professional Plan -->
      <div class="pricing-card popular">
        <div class="popular-badge">Most Popular</div>
        <h3>Professional</h3>
        <p>Advanced features for growing businesses</p>
        <div class="price">
          <span class="price-amount" data-monthly="$199" data-annual="$159">$199</span>
          <span class="price-period">/month</span>
        </div>
        <ul class="feature-list">
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Social media management (5 platforms)
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Advanced SEO optimization
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Content marketing strategy
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Weekly performance reports
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Email marketing campaigns
          </li>
        </ul>
        <button class="cta-button">Get Started</button>
      </div>

      <!-- Enterprise Plan -->
      <div class="pricing-card">
        <h3>Enterprise</h3>
        <p>Custom solutions for large organizations</p>
        <div class="price">
          <span class="price-amount" data-monthly="$399" data-annual="$319">$399</span>
          <span class="price-period">/month</span>
        </div>
        <ul class="feature-list">
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Unlimited social media management
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Enterprise SEO solutions
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Custom marketing strategy
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Daily performance reports
          </li>
          <li class="feature-item">
            <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Dedicated account manager
          </li>
        </ul>
        <button class="cta-button">Contact Sales</button>
      </div>
    </div>

    <!-- FAQ Section -->
    <div class="faq-section">
      <h3 class="faq-header">Frequently Asked Questions</h3>
      <div class="faq-grid">
        <div class="faq-item">
          <h4 class="faq-question">What's included in the Starter plan?</h4>
          <p class="faq-answer">Our Starter plan includes essential marketing tools to help you begin your digital marketing journey, including basic social media management and SEO optimization.</p>
        </div>
        <div class="faq-item">
          <h4 class="faq-question">Can I upgrade or downgrade my plan?</h4>
          <p class="faq-answer">Yes, you can change your plan at any time. Changes will be reflected in your next billing cycle.</p>
        </div>
      </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('pricing-toggle');
  const toggleKnob = document.getElementById('toggle-knob');
  const prices = document.querySelectorAll('[data-monthly]');
  let isAnnual = false;

  toggle.addEventListener('click', function() {
    isAnnual = !isAnnual;
    toggle.setAttribute('aria-checked', isAnnual);
    toggleKnob.style.transform = isAnnual ? 'translateX(1.25rem)' : 'translateX(0)';
    
    prices.forEach(price => {
      const monthlyPrice = price.getAttribute('data-monthly');
      const annualPrice = price.getAttribute('data-annual');
      price.textContent = isAnnual ? annualPrice : monthlyPrice;
    });
  });
});
</script>


                <!--
@type: Pricing
@industry: Marketing
@style: Dark
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-900 py-16 sm:py-24">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Marketing Solutions Pricing</h2>
      <p class="mt-4 text-lg text-gray-300">Choose the perfect plan for your marketing needs</p>
    </div>

    <!-- Toggle Annual/Monthly -->
    <div class="mt-12 flex justify-center">
      <div class="relative flex items-center gap-4">
        <span class="text-sm text-gray-300">Monthly</span>
        <button type="button" role="switch" aria-checked="false" class="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" id="pricing-toggle">
          <span class="sr-only">Enable annual billing</span>
          <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1" id="toggle-knob"></span>
        </button>
        <span class="text-sm text-gray-300">Annual <span class="text-blue-400">(Save 20%)</span></span>
      </div>
    </div>

    <!-- Pricing Cards -->
    <div class="mt-12 grid gap-8 lg:grid-cols-3">
      <!-- Starter Plan -->
      <div class="flex flex-col rounded-2xl bg-gray-800 border border-gray-700 p-8 shadow-lg">
        <h3 class="text-xl font-semibold text-white">Starter</h3>
        <p class="mt-4 text-sm text-gray-300">Perfect for small businesses starting their marketing journey</p>
        <div class="mt-6">
          <span class="text-4xl font-bold text-white" data-monthly="$99" data-annual="$79">$99</span>
          <span class="text-sm text-gray-300">/month</span>
        </div>
        <ul class="mt-8 space-y-4 flex-1">
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Social media management (2 platforms)
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Basic SEO optimization
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Monthly performance reports
          </li>
        </ul>
        <button class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
          Get Started
        </button>
      </div>

      <!-- Professional Plan -->
      <div class="flex flex-col rounded-2xl bg-gray-800 border-2 border-blue-500 p-8 shadow-lg relative">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
          Most Popular
        </div>
        <h3 class="text-xl font-semibold text-white">Professional</h3>
        <p class="mt-4 text-sm text-gray-300">Advanced features for growing businesses</p>
        <div class="mt-6">
          <span class="text-4xl font-bold text-white" data-monthly="$199" data-annual="$159">$199</span>
          <span class="text-sm text-gray-300">/month</span>
        </div>
        <ul class="mt-8 space-y-4 flex-1">
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Social media management (5 platforms)
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Advanced SEO optimization
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Content marketing strategy
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Weekly performance reports
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Email marketing campaigns
          </li>
        </ul>
        <button class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
          Get Started
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="flex flex-col rounded-2xl bg-gray-800 border border-gray-700 p-8 shadow-lg">
        <h3 class="text-xl font-semibold text-white">Enterprise</h3>
        <p class="mt-4 text-sm text-gray-300">Custom solutions for large organizations</p>
        <div class="mt-6">
          <span class="text-4xl font-bold text-white" data-monthly="$399" data-annual="$319">$399</span>
          <span class="text-sm text-gray-300">/month</span>
        </div>
        <ul class="mt-8 space-y-4 flex-1">
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Unlimited social media management
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Enterprise SEO solutions
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Custom marketing strategy
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Daily performance reports
          </li>
          <li class="flex items-center text-gray-300">
            <svg class="h-5 w-5 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Dedicated account manager
          </li>
        </ul>
        <button class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
          Contact Sales
        </button>
      </div>
    </div>

    <!-- FAQ Section -->
    <div class="mt-16">
      <h3 class="text-2xl font-bold text-white text-center mb-8">Frequently Asked Questions</h3>
      <div class="grid gap-6 lg:grid-cols-2">
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <h4 class="text-lg font-semibold text-white mb-3">What's included in the Starter plan?</h4>
          <p class="text-gray-300">Our Starter plan includes essential marketing tools to help you begin your digital marketing journey, including basic social media management and SEO optimization.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <h4 class="text-lg font-semibold text-white mb-3">Can I upgrade or downgrade my plan?</h4>
          <p class="text-gray-300">Yes, you can change your plan at any time. Changes will be reflected in your next billing cycle.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('pricing-toggle');
  const toggleKnob = document.getElementById('toggle-knob');
  const prices = document.querySelectorAll('[data-monthly]');
  let isAnnual = false;

  toggle.addEventListener('click', function() {
    isAnnual = !isAnnual;
    toggle.setAttribute('aria-checked', isAnnual);
    toggleKnob.classList.toggle('translate-x-6');
    
    prices.forEach(price => {
      const monthlyPrice = price.getAttribute('data-monthly');
      const annualPrice = price.getAttribute('data-annual');
      price.textContent = isAnnual ? annualPrice : monthlyPrice;
    });
  });
});
</script>

Pricing Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions