<?php require (PAGE_CONTENT.$PageContent);?>
<div id="<?php echo $pageID;?>" class="page-wrapper row">
	<div class="mobile-img-main hide-on-med-and-up col s12">
		<img src="<?php echo TEMPLATES_ASSETS?>/img/savings/baraka-overview-hero.jpg" alt="SA Bullion | Faith anf Finance working together" />
	</div>
	<div class="mobile-txt-main hide-on-med-and-up col s12">
		<h1 class="center-align alrightsansmedium home-hero-head-txt hero-head-type"><?php echo $baso_headHero; ?></h1>
		<p class="center-align alrightsansregular hero-txt-type"><?php echo $baso_txtHero; ?></p>
		<a class="center-align link-btn btn-flat alrightsansmedium demo02"  href="#modal-02"><span class="text-hover">Start Saving</span><i class="material-icons right arrow-hover"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/btn-arrow.svg"); ?></i></a>
	</div>
	<div class="hero-img col s12 hide-on-small-only">
		<div class="hero-txt-container">
			<div class="row">
			<section class="col l9">
			<h1 class="alrightsansmedium home-hero-head-txt hero-head-type"><?php echo $baso_headHero; ?></h1>
			<p class="alrightsansregular hero-txt-type"><?php echo $baso_txtHero; ?></p>
			<a class="link-btn btn-flat alrightsansregular demo02" href="#modal-02"><span class="text-hover">Start Saving</span><i class="material-icons right arrow-hover"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/btn-arrow.svg"); ?></i></a>
			</section>
			</div>
		</div><!-- hero-txt-container -->

	</div><!-- hero-img -->

	<div class="savings-overview col s12">
		<div class="content-wrap">
		<div class="col l6 s12 intro-sapcing-top">
			<h2 class="alrightsansmedium intro-head-type"><?php echo $baso_headInfo;?></h2>
			<p class="alrightsansregular intro-txt-type"><?php echo $baso_txtInfo ;?></p>

			<a class="alrightsansbold" href="<?php echo TEMPLATES_ASSETS?>/downloads/sab_hasanagold-brochure_digital_savers.pdf" download target="blank">Download HasanaGold Facility Brochure<span class="download-icon-holder"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_download_icon-baraka.svg"); ?></span></a>
		</div>
		<div class="col l6 s12">
			<div class="ba-overview-img">
				<video id="baraka-savings-overview-vid" class="bullion-invest-overview-ani hide-on-med-and-down" muted>
					<source src="<?php echo $baso_aniInfoMp4;?>" type="video/mp4">
				</video>
			</div>
		</div>
	</div><!-- content wrap -->
	</div><!--  baraka-overview  -->

	<div class="how-savings-works col s12">
		<div class="content-wrap">
		<h3 class="center-align alrightsansmedium intro-head-type"><?php echo $baso_headHiw;?></h3>
		<div class="col s12 how-savings-works-box">
			<section class="col l4 s12">
				<?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_invest_savings_icon_1.svg"); ?>
				<h4 class="center-align how-savings-works-title body-head-type alrightsansregular"><?php echo $baso_subHeadHiw1 ;?></h4>
				<p class="center-align body-txt-type alrightsansregular"><?php echo $baso_txtHiw1 ;?></p>
			</section>

			<section class="col l4 s12">
				<?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_invest_savings_icon_2.svg"); ?>
				<h4 class="center-align how-savings-works-title body-head-type alrightsansregular"><?php echo $baso_subHeadHiw2 ;?></h4>
				<p class="center-align body-txt-type alrightsansregular"><?php echo $baso_txtHiw2 ;?></p>
			</section>

			<section class="col l4 s12">
				<?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_invest_savings_icon_3.svg"); ?>
				<h4 class="center-align how-savings-works-title body-head-type alrightsansregular"><?php echo $baso_subHeadHiw3 ;?></h4>
				<p class="center-align body-txt-type alrightsansregular"><?php echo $baso_txtHiw3 ;?></p>
			</section>
		</div>

		<div class="col s12">
			<a class="link-btn btn-flat btn-center alrightsansregular demo02" href="#modal-02"><span class="text-hover">Start Saving</span><i class="material-icons right arrow-hover"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/btn-arrow.svg"); ?></i></a>
			<p class="center-align alrightsansregular"><?php echo $baso_minInvestAmount ;?></p>
		</div>
	</div><!-- content wrap -->
	</div><!--  how-savings-works  -->

	<div class="saving-goldvscash col s12">
		<div class="content-wrap">
		<h3 class="center-align intro-head-type alrightsansmedium"><?php echo $baso_headCompare ;?></h3>
		<p class="center-align body-txt-type alrightsansregular"><?php echo $baso_txtCompare1 ;?></p>
		<div class="col s12">
			<section class="col s12 savings-overview-graph-box">
				<p class="alrightsansmedium body-txt-type"><span class="gold-c">HasanaGold Facility</span></br><span class="cash-c">Cash In Bank</span></p>
				<div class="bullion-savings-overview-graph" id="baraka-savings-overview-graph"></div>
				<div class="col s12 investment-comparison-vs">
					<div class="col l6 s12 gold-c gold-container">
						<section class="col s12">
							<p class="col l6 s12 alrightsansregular body-txt-type gold-m">HasanaGold Facility </br>value today</p>
							<h4 class="col l6 s12 alrightsansmedium gold-savings-amount gold-m"></h4>
						</section>
						<section class="col s12">
							<p class="col l6 s12 alrightsansregular body-txt-type gold-m">Growth</p>
							<h4 class="col l6 s12 alrightsansmedium growth-val-gold gold-m"></h4>
						</section>
					</div>

					<div class="col l6 s12 cash-c cash-c-c">
						<section class="col s12">
							<p class="col l6 s12 alrightsansregular body-txt-type gold-m">Cash in the bank </br>value today</p>
							<h4 class="col l6 s12 alrightsansmedium cash-savings-amount gold-m"></h4>
						</section>

						<section class="col s12">
							<p class="col l6 s12 alrightsansregular body-txt-type gold-m">Growth</p>
							<h4 class="col l6 s12 alrightsansmedium growth-val-cash gold-m"></h4>
						</section>

					</div>
				</div>
			</section>
		</div>
		<div class="saving-terms alrightsansregular col s12 disclaimer">
			<p><?php echo $baso_SavingTerms ;?></p>
		</div>
	</div><!-- content wrap -->
	</div><!-- saving-goldvscash -->

	<div class="savings-calc col s12">
		<div class="calc-wrap">
		<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $baso_headSavingsCalc ;?></h4>
		<p class="center-align body-txt-type alrightsansregular"><?php echo $baso_txtSavingsCalc ;?></p>
		<div class="savings-calc-mod col s12">
			<?php require(SAVING_CALCULATOR.'/savings-calculator-form-barakaOverview.php');?>
		</div>
	</div><!-- calc wrap -->
	</div><!-- savings-calc -->

	<div class="ba-investment-cta col s12">
			<div class="cta-container-left">
			<section class="cta-txt-holder">
				<span class="cta-quote">&#8220;</span>
				<h4 class="center-align body-head-type alrightsansmedium"><?php echo $baso_headCta; ?></h4>
				<span class="cta-quote">&#8221;</span>
				<p class="center-align body-txt-type alrightsansregular"><?php echo $baso_txtCta; ?></p>
				</section>
			</div>
			<div class="cta-container-right">
			</div>
	</div><!-- savings-cta -->

	<div class="start-investing col s12">
		<h5 class="center-align body-head-type alrightsansmedium"><?php echo $baso_headStartSaving;?></h5>
		<a class="link-btn btn-flat btn-center  alrightsansregular demo02" href="#modal-02"><span class="text-hover">Open Account</span><i class="material-icons right arrow-hover"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/btn-arrow.svg"); ?></i></a>
	</div><!-- invest-question -->



</div><!-- page-wrapper -->
