# Simple Block Test

## Basic Icon Section
BLOCK_ICON_SECTION:📊:Test Section

## Feature Cards Test
BLOCK_FEATURE_CARDS_3
🚀:Speed:Fast processing
🎯:Accuracy:High precision
💡:Innovation:Cutting-edge

## New Timeline Test
BLOCK_TIMELINE:blue
🚀:2022:Launch:Product launch
📈:2023:Growth:Major update
✨:2024:Future:New features

## Simple FAQ Test
BLOCK_FAQ_ACCORDION:purple
What is this?
This is a test FAQ.
How does it work?
It works with our block system.

## Progress Test
BLOCK_PROGRESS_BARS:green
Task 1:75:blue
Task 2:50:green
Task 3:90:purple

<h1 class="text-2xl font-bold text-gray-900 mb-4">Simple Block Test</h1>
<h2 class="text-xl font-semibold text-gray-900 mb-3">Basic Icon Section</h2>
<div class="blog-icon-section blog-icon-section-Speed">
          <div class="blog-icon-circle blog-icon-circle-Speed">📊</div>
          <h2 class="blog-section-title">Test Section
<h2 class="text-xl font-semibold text-gray-900 mb-3">Feature Cards Test</h2>
BLOCK_FEATURE_CARDS_3
🚀</h2>
        </div>:Fast processing
🎯:Accuracy:High precision
💡:Innovation:Cutting-edge
<h2 class="text-xl font-semibold text-gray-900 mb-3">New Timeline Test</h2>
<div class="blog-timeline blog-timeline-blue">
            <div class="blog-timeline-item blog-timeline-item-blue">
              <div class="blog-timeline-icon">🚀</div>
              <div class="blog-timeline-connector"></div>
              <div class="blog-timeline-content">
                <div class="blog-timeline-date">2022</div>
                <h4 class="blog-timeline-title">Launch</h4>
                <p class="blog-timeline-description">Product launch</p>
              </div>
            </div>
<div class="blog-timeline-item blog-timeline-item-blue">
              <div class="blog-timeline-icon">📈</div>
              <div class="blog-timeline-connector"></div>
              <div class="blog-timeline-content">
                <div class="blog-timeline-date">2023</div>
                <h4 class="blog-timeline-title">Growth</h4>
                <p class="blog-timeline-description">Major update</p>
              </div>
            </div>
<div class="blog-timeline-item blog-timeline-item-blue">
              <div class="blog-timeline-icon">✨</div>
              <div class="blog-timeline-connector blog-timeline-connector-last"></div>
              <div class="blog-timeline-content">
                <div class="blog-timeline-date">2024</div>
                <h4 class="blog-timeline-title">Future</h4>
                <p class="blog-timeline-description">New features</p>
              </div>
            </div>
          </div>
<h2 class="text-xl font-semibold text-gray-900 mb-3">Simple FAQ Test</h2>
<div class="blog-faq-accordion blog-faq-purple">
          <details class="blog-faq-item blog-faq-item-purple" open>
            <summary class="blog-faq-question">
              What is this?
              <span class="blog-faq-icon">
                <svg class="blog-faq-plus" width="14" height="14" viewBox="0 0 14 14">
                  <line x1="0" y1="7" x2="14" y2="7" stroke-width="2" stroke="currentColor"/>
                  <line x1="7" y1="0" x2="7" y2="14" stroke-width="2" stroke="currentColor"/>
                </svg>
                <svg class="blog-faq-minus" width="14" height="14" viewBox="0 0 14 14">
                  <line x1="0" y1="7" x2="14" y2="7" stroke-width="2" stroke="currentColor"/>
                </svg>
              </span>
            </summary>
            <div class="blog-faq-answer">This is a test FAQ.</div>
          </details>
<details class="blog-faq-item blog-faq-item-purple" >
            <summary class="blog-faq-question">
              How does it work?
              <span class="blog-faq-icon">
                <svg class="blog-faq-plus" width="14" height="14" viewBox="0 0 14 14">
                  <line x1="0" y1="7" x2="14" y2="7" stroke-width="2" stroke="currentColor"/>
                  <line x1="7" y1="0" x2="7" y2="14" stroke-width="2" stroke="currentColor"/>
                </svg>
                <svg class="blog-faq-minus" width="14" height="14" viewBox="0 0 14 14">
                  <line x1="0" y1="7" x2="14" y2="7" stroke-width="2" stroke="currentColor"/>
                </svg>
              </span>
            </summary>
            <div class="blog-faq-answer">It works with our block system.</div>
          </details>
        </div>
<h2 class="text-xl font-semibold text-gray-900 mb-3">Progress Test</h2>
<div class="blog-progress-bars blog-progress-green">
            <div class="blog-progress-item">
              <div class="blog-progress-header">
                <span class="blog-progress-label">Task 1</span>
                <span class="blog-progress-percentage">75%</span>
              </div>
              <div class="blog-progress-track">
                <div class="blog-progress-bar blog-progress-bar-blue" style="width: 75%"></div>
              </div>
            </div>
<div class="blog-progress-item">
              <div class="blog-progress-header">
                <span class="blog-progress-label">Task 2</span>
                <span class="blog-progress-percentage">50%</span>
              </div>
              <div class="blog-progress-track">
                <div class="blog-progress-bar blog-progress-bar-green" style="width: 50%"></div>
              </div>
            </div>
<div class="blog-progress-item">
              <div class="blog-progress-header">
                <span class="blog-progress-label">Task 3</span>
                <span class="blog-progress-percentage">90%</span>
              </div>
              <div class="blog-progress-track">
                <div class="blog-progress-bar blog-progress-bar-purple" style="width: 90%"></div>
              </div>
            </div>
          </div>