<?php
/**
 * Title: Home Banner
 * Slug: seo-expert/home-banner
 * Categories: template
 */

$seo_expert_active_plugins = get_option('active_plugins');
$seo_expert_contact_form7_plugin = 'contact-form-7/wp-contact-form-7.php';
$seo_expert_cf7_installed = in_array($seo_expert_contact_form7_plugin, $seo_expert_active_plugins);

if ($seo_expert_cf7_installed) {
?>
<!-- wp:group {"className":"main-banner-section alignfull","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"color":{"background":"#f5f5f5"}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-group main-banner-section alignfull has-background" style="background-color:#f5f5f5;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() . '/images/hero-banner.png'); ?>","id":21,"overlayColor":"light-shade","isUserOverlayColor":true,"minHeight":800,"sizeSlug":"full","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-cover" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:800px"><img class="wp-block-cover__image-background wp-image-21 size-full" alt="" src="<?php echo esc_url( get_template_directory_uri() . '/images/hero-banner.png'); ?>" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-light-shade-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"46px","fontStyle":"Thin","fontWeight":"600"}},"textColor":"background","fontFamily":"Poppins"} -->
<h1 class="wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-poppins-font-family" style="font-size:46px;font-style:Thin;font-weight:600"><?php esc_html_e('Get more sales with SEO, PPC, and Email Marketing','seo-expert'); ?></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"banner-content","style":{"typography":{"fontSize":"17px","fontStyle":"Thin","fontWeight":"400"},"spacing":{"padding":{"right":"0em","left":"0em"}}},"fontFamily":"Poppins"} -->
<p class="has-text-align-center banner-content has-poppins-font-family" style="padding-right:0em;padding-left:0em;font-size:17px;font-style:Thin;font-weight:400"><?php esc_html_e('It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.','seo-expert'); ?></p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
<!-- /wp:shortcode --></div></div>
<!-- /wp:cover -->

<!-- wp:html -->
<!-- This SVG acts as a SHAPE DIVIDER, not just a line overlay -->
<svg class="shape-divider" width="100%" height="100" viewBox="0 0 800 100" preserveAspectRatio="none">
  <!-- Polygon: white fill masks/cuts the hero background after the line -->
  <polygon 
    fill="var(--wp--preset--color--secondary)" 
    points="
      0,100 0,90 100,80 200,60 300,65 400,40 500,60 600,30 700,55 800,20 800,100
    " 
  />
  <!-- Your yellow line and dots as before (optional, for accent) -->
  <polyline
    fill="none"
    stroke="var(--wp--preset--color--tertiary)"
    stroke-width="5"
    points="0,90 100,80 200,60 300,65 400,40 500,60 600,30 700,55 800,20" />
  <circle cx="0" cy="90" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="100" cy="80" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="200" cy="60" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="300" cy="65" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="400" cy="40" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="500" cy="60" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="600" cy="30" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="700" cy="55" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="800" cy="20" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
</svg>
<!-- /wp:html --></div>
<!-- /wp:group -->

<?php } else { ?>
  
<!-- wp:group {"className":"main-banner-section alignfull","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"color":{"background":"#f5f5f5"}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-group main-banner-section alignfull has-background" style="background-color:#f5f5f5;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() . '/images/hero-banner.png'); ?>","id":21,"overlayColor":"light-shade","isUserOverlayColor":true,"minHeight":800,"sizeSlug":"full","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-cover" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:800px"><img class="wp-block-cover__image-background wp-image-21 size-full" alt="" src="<?php echo esc_url( get_template_directory_uri() . '/images/hero-banner.png'); ?>" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-light-shade-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontSize":"46px","fontStyle":"Thin","fontWeight":"600"}},"textColor":"background","fontFamily":"Poppins"} -->
<h1 class="wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-poppins-font-family" style="font-size:46px;font-style:Thin;font-weight:600"><?php esc_html_e('Get more sales with SEO, PPC, and Email Marketing','seo-expert'); ?></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"banner-content","style":{"typography":{"fontSize":"17px","fontStyle":"Thin","fontWeight":"400"},"spacing":{"padding":{"right":"0em","left":"0em"}}},"fontFamily":"Poppins"} -->
<p class="has-text-align-center banner-content has-poppins-font-family" style="padding-right:0em;padding-left:0em;font-size:17px;font-style:Thin;font-weight:400"><?php esc_html_e('It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.','seo-expert'); ?></p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="custom-flex-form form-html">
  <input type="email" name="email" placeholder="Email Address" required>
  <input type="text" name="website" placeholder="http://www." required>
  <input type="submit" value="Get Started">
</div>
<!-- /wp:html --></div></div>
<!-- /wp:cover -->

<!-- wp:html -->
<!-- This SVG acts as a SHAPE DIVIDER, not just a line overlay -->
<svg class="shape-divider" width="100%" height="100" viewBox="0 0 800 100" preserveAspectRatio="none">
  <!-- Polygon: white fill masks/cuts the hero background after the line -->
  <polygon 
    fill="var(--wp--preset--color--secondary)" 
    points="
      0,100 0,90 100,80 200,60 300,65 400,40 500,60 600,30 700,55 800,20 800,100
    " 
  />
  <!-- Your yellow line and dots as before (optional, for accent) -->
  <polyline
    fill="none"
    stroke="var(--wp--preset--color--tertiary)"
    stroke-width="5"
    points="0,90 100,80 200,60 300,65 400,40 500,60 600,30 700,55 800,20" />
  <circle cx="0" cy="90" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="100" cy="80" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="200" cy="60" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="300" cy="65" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="400" cy="40" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="500" cy="60" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="600" cy="30" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="700" cy="55" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
  <circle cx="800" cy="20" r="9" fill="#fff" stroke="var(--wp--preset--color--tertiary)" stroke-width="5"/>
</svg>
<!-- /wp:html --></div>
<!-- /wp:group -->

<?php } ?>
