<?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/bullion-overview-hero.jpg" alt="SA Bullion | Make your money work for you" />
	</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 $buso_headHero; ?></h1>
		<p class="center-align alrightsansregular hero-txt-type"><?php echo $buso_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-bgk-col">
		<div class="hero-txt-container">
			<div class="row">
			<section class="col l5">
			<h1 class="alrightsansmedium home-hero-head-txt hero-head-type"><?php echo $buso_headHero; ?></h1>
			<p class="alrightsansregular hero-txt-type"><?php echo $buso_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>
	</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 $buso_headInfo;?></h2>
			<p class="alrightsansregular intro-txt-type"><?php echo $buso_txtInfo ;?></p>
			<span class="alrightsansbold">Download BullionGold Facility Brochure: &nbsp;</span>
			<a  class="alrightsansbold" href="<?php echo TEMPLATES_ASSETS?>/downloads/BullionGold-Facility-Brochure-savers.pdf" download target="blank">ENG<span style="margin:5px!important;" class="download-icon-holder"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_download_icon.svg"); ?></span></a>
			<a  class="alrightsansbold" href="<?php echo TEMPLATES_ASSETS?>/downloads/BullionGold-Facility-Brochure(Afrikaans).pdf" download target="blank">&nbsp; AFR<span style="margin:5px!important;" class="download-icon-holder"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_download_icon.svg"); ?></span></a>
		</div>
		<div class="col l6 s12">
			<div class="ba-overview-img">
				<video id="bullion-savings-vid" class="bullion-invest-overview-ani hide-on-med-and-down" muted>
					<source src="<?php echo $buso_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 $buso_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 body-head-type alrightsansregular"><?php echo $buso_subHeadHiw1 ;?></h4>
				<p class="center-align body-txt-type alrightsansregular hswp"><?php echo $buso_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 body-head-type alrightsansregular"><?php echo $buso_subHeadHiw2 ;?></h4>
				<p class="center-align body-txt-type alrightsansregular hswp"><?php echo $buso_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 body-head-type alrightsansregular"><?php echo $buso_subHeadHiw3 ;?></h4>
				<p class="center-align body-txt-type alrightsansregular hswp"><?php echo $buso_txtHiw3 ;?></p>
			</section>
		</div>


		<div class="col s12">
			<a class="link-btn btn-flat btn-center alrightsansregular" href="<?php echo $buso_linkStartInvesting;?>"><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 $buso_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 $buso_headCompare ;?></h3>
		<p class="center-align body-txt-type alrightsansregular comparison-txt"><?php echo $buso_txtCompare1 ;?></p>
		<div class="col s12">
			<section class="col s12 savings-overview-graph-box">
				<p class="alrightsansmedium body-txt-type"><span class="gold-c">BullionGold Facility</span></br><span class="cash-c">Cash In Bank</span></p>
				<div class="bullion-savings-overview-graph" id="bullion-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">BullionGold 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 col s12 disclaimer">
			<p class="alrightsansregular"><?php echo $buso_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 $buso_headSavingsCalc ;?></h4>
		<p class="center-align body-txt-type alrightsansregular"><?php echo $buso_txtSavingsCalc ;?></p>
		<div class="savings-calc-mod col s12">
			<?php require(SAVING_CALCULATOR.'/savings-calculator-form-bullionOverview.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 alrightsansmedium body-head-type"><?php echo $buso_headCta; ?></h4>
				<span class="cta-quote">&#8221;</span>
				<p class="center-align alrightsansregular body-txt-type"><?php echo $buso_txtCta; ?></p>
			</section>
			</div>

			<div class="cta-container-right">

			</div>
	</div><!-- savings-cta -->

	<div class="start-investing col s12">
		<h5 class="center-align alrightsansmedium body-head-type"><?php echo $buso_headStartSaving;?></h5>
		<a class="link-btn btn-flat btn-center alrightsansregular" href="<?php echo $buso_linkStartSaving;?>"><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 -->
