Code2Bricks Parser

<section class="hero" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200')">
  <div class="container">
    <div class="hero__content">
      <h1 class="hero__headline">Enhanced Code2Bricks Parser</h1>
      <h2 class="hero__subtitle">Advanced Features Edition</h2>
      <p class="hero__description">Now with background images, typography mapping, icon support, and video elements.</p>
      <div class="hero__actions">
        <a href="#demo" class="btn btn--primary">
          <i class="fas fa-play"></i>
          Get Started
        </a>
        <button class="btn btn--secondary" onclick="alert('Button clicked!')">
          <i class="fas fa-download"></i>
          Download
        </button>
      </div>
    </div>
  </div>
</section>

<section class="features">
  <div class="container">
    <h2 class="section-title">New Features</h2>
    <div class="features__grid">
      <div class="feature-card">
        <i class="fas fa-image feature-icon"></i>
        <h3>Background Images</h3>
        <p>Automatic detection and mapping of CSS background images.</p>
      </div>
      <div class="feature-card">
        <i class="fas fa-font feature-icon"></i>
        <h3>Typography Mapping</h3>
        <p>Font families, sizes, and weights are properly converted.</p>
      </div>
      <div class="feature-card">
        <i class="fas fa-video feature-icon"></i>
        <h3>Video Support</h3>
        <p>YouTube, Vimeo, and HTML5 video elements supported.</p>
      </div>
    </div>
  </div>
</section>

:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Poppins', sans-serif;
}

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.hero__content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #e0e0e0;
}

.hero__description {
  font-family: var(--font-main);
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  color: #cccccc;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn--primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.btn--secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

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

.features {
  padding: 5rem 0;
  background: #f8f9fa;
  color: #333;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  color: #2c3e50;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.feature-card {
  background: white;
  padding: 2.5rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.feature-card p {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}

// Enhanced JavaScript Demo
document.addEventListener('DOMContentLoaded', function() {
  console.log('Enhanced Code2Bricks loaded!');
  
  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
  
  // Feature card hover effects
  document.querySelectorAll('.feature-card').forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-10px) scale(1.02)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0) scale(1)';
    });
  });
  
  // Button click animations
  document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
      // Create ripple effect
      const ripple = document.createElement('span');
      const rect = this.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      const x = e.clientX - rect.left - size / 2;
      const y = e.clientY - rect.top - size / 2;
      
      ripple.style.width = ripple.style.height = size + 'px';
      ripple.style.left = x + 'px';
      ripple.style.top = y + 'px';
      ripple.classList.add('ripple');
      
      this.appendChild(ripple);
      
      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
  });
  
  // Lazy loading simulation for background images
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '50px'
  };
  
  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;
        element.classList.add('loaded');
        imageObserver.unobserve(element);
      }
    });
  }, observerOptions);
  
  document.querySelectorAll('[style*="background-image"]').forEach(el => {
    imageObserver.observe(el);
  });
});