<?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/investing/baraka-overview-hero.jpg" alt="SA Bullion | Follow your faith. Invest in gold" />
	</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">FOLLOW YOUR FAITH. INVEST IN GOLD.</h1>
		<p class="center-align alrightsansregular hero-txt-type">Rest assured knowing you’ve found a Halaal investment solution. Open a HasanaGold Facility today.</p>
		<a class="center-align link-btn btn-flat alrightsansmedium" id="demo02" href="#modal-02"><span class="text-hover">Start Investing</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 l5">
			<h1 class="alrightsansmedium hero-head-type"><?php echo $bao_headHero; ?></h1>
			<p class="alrightsansregular hero-txt-type"><?php echo $bao_txtHero; ?></p>
			<a class="link-btn btn-flat alrightsansregular demo02" href="#modal-02"><span class="text-hover">Start Investing</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="baraka-overview col s12">
		<div class="content-wrap">
		<div class="col l6 s12 intro-sapcing-top">
			<h2 class="alrightsansmedium intro-head-type"><?php echo $bao_headInfo;?></h2>
			<p class="alrightsansregular intro-txt-type"><?php echo $bao_txtInfo1 ;?></p>
			<p class="alrightsansregular intro-txt-type"><?php echo $bao_txtInfo2 ;?></p>

			<a class="alrightsansbold" href="<?php echo TEMPLATES_ASSETS?>/downloads/sab_hasanagold-brochure_digital_investors.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="braka-investing-vid" class="bullion-invest-overview-ani hide-on-med-and-down" muted>
					 <source  src="<?php echo $bao_aniInfoMp4;?>" type="video/mp4">
				</video>
			</div>
		</div>
		</div><!-- content-wrap -->
	</div><!--  baraka-overview  -->

	<div class="investment-explination col s12">
		<div class="content-wrap">
		<h2 class="center-align alrightsansmedium intro-head-type"><?php echo $bao_headHiw;?></h2>
		<div class="invst-explination-wrapper">
				<ul class="invst-explination">
					<li>
					<div class="steps-slider">
						<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headHiwSteps1 ;?></h4>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtHiwSteps1 ;?></p>
					</div><!-- steps-slider -->
					</li>

					<li>
					<div class="steps-slider">
						<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headHiwSteps2 ;?></h4>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtHiwSteps2 ;?></p>
					</div><!-- steps-slider -->
					</li>

					<li>
					<div class="steps-slider">
						<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headHiwSteps3 ;?></h4>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtHiwSteps3 ;?></p>
					</div><!-- steps-slider -->
					</li>

					<li>
					<div class="steps-slider">
						<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headHiwSteps4 ;?></h4>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtHiwSteps4 ;?></p>
					</div><!-- steps-slider -->
					</li>

					<li>
					<div class="steps-slider">
						<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headHiwSteps5 ;?></h4>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtHiwSteps5 ;?></p>
					</div><!-- steps-slider -->
					</li>

					<li>
					<div class="steps-slider">
						<h4 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headHiwSteps6 ;?></h4>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtHiwSteps6 ;?></p>
					</div><!-- steps-slider -->
					</li>
				</ul><!-- ul / invst-explination-->
			</div><!-- invst-explination-wrapper -->


		<div class="col s12">
			<a class="link-btn btn-flat btn-center alrightsansregular demo02" href="#modal-02"><span class="text-hover">Start Investing</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 $bao_txtInvestRecomendation ;?></p>
		</div>
		</div><!-- content wrap -->
	</div><!-- investment-explination -->

	<div class="baraka-qoute col s12">
		<div class="content-wrap">
		<div class="col l6 s12">
			<div class="img-circle">
				<img class="x" src="<?php echo $bao_imgQoute; ?>" alt="" >
			</div>
		</div>
		<div class="col l6 s12">
			<span class="cta-quote">&#8220;</span>
				<p class="center-align body-head-type alrightsansmedium"><?php echo $bao_txtQoute; ?></p>
				<span class="cta-quote">&#8221;</span>
				<p class="center-align body-txt-type alrightsansmedium authorBaraka"><?php echo $bao_txtAuthor; ?></p>
				<p class="center-align body-txt-type alrightsansregular authorBarakaBio"><?php echo $bao_txtAuthorBio; ?></p>
		</div>
		</div><!-- content wrap -->
	</div>

	<div class="investment-comparison col s12">
	<div class="content-wrap">
		<h3 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headCompare ;?></h3>
		<p class="center-align body-txt-type alrightsansregular comparison-txt"><?php echo $bao_txtCompare ;?> </p>
		<div class="investment-graph-options col s12">
			<section class="col s12 l6 gold-val-border">
				<h4 class="body-txt-type alrightsansmedium gold-c">HasanaGold Facility</h4>
				<h4 class="body-txt-type alrightsansmedium cash-c">Bank Deposit</h4>
			</section>
			<section class="col s12 l6">
				<ul class="select-graph-options body-txt-type alrightsansmedium">
					<li>select</li>
					<li><a class="selectedCurrency" data-currency="ZAR" href="#">R</a></li>
					<li><a class="selectedCurrency" data-currency="USD" href="#">$</a></li>
				</ul>
			</section>
		</div>
		<div class="comparison-illustration col s12">
			<div id="baraka-investment-overview-graph">
			</div>
			<div class="col s12 investment-comparison-vs">
				<div class="col l6 s12 gold-c gold-container">
					<p class="col l6 s12 alrightsansregular body-txt-type gold-m">HasanaGold Facility</p>
					<h4 class="col l6 s12 alrightsansmedium gold-val-returned gold-m"></h4>
					<p class="col l6 s12 alrightsansregular body-txt-type">Growth</p>
					<h4 class="col l6 s12 alrightsansmedium gold-growth"></h4>
				</div>
				<div class="col l6 s12 cash-c cash-c-c">
					<p class="col l6 s12 alrightsansregular body-txt-type gold-m">Cash In Bank</p>
					<h4 class="col l6 s12 alrightsansmedium cash-val-returned gold-m"></h4>
					<p class="col l6 s12 alrightsansregular body-txt-type">Growth</p>
					<h4 class="col l6 s12 alrightsansmedium cash-growth"></h4>
				</div>
			</div>
		</div><!-- comparison-illustration -->
			<div class="investment-terms col s12 alrightsansregular disclaimer">
					<p><?php echo $bao_txtTerms ;?></p>
			</div>
		</div><!-- content wrap -->
	</div><!-- investment-comparison -->

	<div class="baraka-investment-calc col s12">
		<div class="calc-wrap">
		<h2 class="center-align intro-head-type alrightsansmedium"><?php echo $bao_headInvestCalc; ?></h2>

		<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtInvestCalc;?></p>
		<div class="ba-investment-calc col s12">
			<?php require(INVEST_CALCULATOR.'/investment-calculator-form-overview-baraka.php');?>
		</div><!-- ba-investment-calc -->

		</div><!-- calc wrap -->
	</div><!-- investment-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 $bao_txtCta1; ?></h4>
						<span class="cta-quote">&#8221;</span>
						<p class="center-align body-txt-type alrightsansregular"><?php echo $bao_txtCta2; ?></p>
					</section>
				</div>

				<div class="cta-container-right">
				</div>
	</div><!-- ba-investment-cta -->

		<div class="start-investing col s12">
			<h5 class="center-align body-head-type alrightsansmedium"><?php echo $bao_txtQcta;?></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  -->
