Cta Marketing Dark

                <!--
@type: Call To Action (CTA)
@industry: Marketing
@style: Dark
@category: Sale, Page Section
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  --color-white: #ffffff;
  --color-gray-300: #d1d5db;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
}

/* 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 */
.cta-section {
  position: relative;
  background-color: var(--color-gray-900);
  padding: 4rem 1rem;
  overflow: hidden;
}

.content-wrapper {
  max-width: 42rem; /* max-w-2xl */
  margin: 0 auto;
  text-align: center;
}

.title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-white);
  line-height: 1;
}

.description {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--color-gray-300);
}

.button-group {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.primary-button,
.secondary-button {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  text-decoration: none;
}

.primary-button {
  color: var(--color-white);
  background-color: var(--color-blue-600);
}

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

.primary-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px var(--color-gray-900);
}

.secondary-button {
  color: var(--color-gray-300);
  background-color: var(--color-gray-800);
}

.secondary-button:hover {
  background-color: var(--color-gray-700);
}

.secondary-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-gray-500), 0 0 0 4px var(--color-gray-900);
}

.arrow-icon {
  margin-left: 0.625rem;
  height: 1.25rem;
  width: 1.25rem;
}

/* Responsive styles */
@media (min-width: 640px) {
  .cta-section {
    padding: 6rem 1.5rem;
  }
  
  .title {
    font-size: 2.25rem; /* sm:text-4xl */
  }
  
  .button-group {
    flex-direction: row;
  }
  
  .primary-button,
  .secondary-button {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .cta-section {
    padding: 8rem 2rem;
  }
  
  .title {
    font-size: 3rem; /* lg:text-5xl */
  }
}
</style>

<section class="cta-section">
        <div class="content-wrapper">
            <h2 class="title">
                Transform Your Marketing Strategy Today
            </h2>
            <p class="description">
                Join over 3,000+ marketing professionals who have already elevated their campaigns. Get access to premium tools, templates, and insights that drive real results.
            </p>
            <div class="button-group">
                <a
                    href="#"
                    class="primary-button"
                    aria-label="Start free trial"
                >
                    Start Free Trial
                    <svg class="arrow-icon" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>
                <a
                    href="#"
                    class="secondary-button"
                    aria-label="Schedule demo"
                >
                    Schedule Demo
                </a>
            </div>
        </div>
</section>             

                <!--
@type: Call To Action (CTA)
@industry: Marketing
@style: Dark
@category: Sale, Page Section
@framework: Tailwind
@license: Free
-->

<section class="relative bg-gray-900 py-16 sm:py-24 lg:py-32 overflow-hidden">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
                Transform Your Marketing Strategy Today
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-300">
                Join over 3,000+ marketing professionals who have already elevated their campaigns. Get access to premium tools, templates, and insights that drive real results.
            </p>
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-6">
                <a
                    href="#"
                    class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-3 text-base font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 rounded-lg transition-colors duration-200"
                    aria-label="Start free trial"
                >
                    Start Free Trial
                    <svg class="ml-2.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>
                <a
                    href="#"
                    class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-3 text-base font-semibold text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900 rounded-lg transition-colors duration-200"
                    aria-label="Schedule demo"
                >
                    Schedule Demo
                </a>
            </div>
        </div>

    </div>
</section>