description = "Section header and animation"

[viewBag]
snippetCode = "section-header"
snippetName = "section-header"
==

<section class="section-banner" id="home">
	<div class="banner-spacing"></div>
		<div class="section-banner-content" id="banner-block-text">
			<img src="{{ data.logo | media }}" class="banner-logo magic-scoll-animation"/>
			<p id="banner-text" >{{ data.title | raw }}</p>
		</div>
		<div class="section-banner-svg">
			<svg viewBox="0 0 120 68">
				<defs> 
					<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 68 h -240 z" />
				</defs>
				<use id="wave4" class="wave" xlink:href="#wave" x="0" y="-5" ></use>
				<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-3" ></use>
				<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0" ></use> 
				<use id="wave1" class="wave" xlink:href="#wave" x="0" y="2" />	
			</svg>	
		</div>
			<div class="section-banner-footer">
				<p>{{data.footer | raw }}</p>
				<i class="fal fa-chevron-down"></i>	
			</div>	
		</div>
	</section>