<div class="landing-page-image full-width-container landing-page-image-how-it-works">
	<div class="main-content cf">
		<div class="landing-page-content">
			<h1><?php _e( 'How it works?', 'wpjobster' ); ?></h1>

			<p><?php _e( 'Secure, innovative and user friendly platform<br>for buying and selling online services.', 'wpjobster' ); ?></p>
		</div>
	</div>
</div>

<div class="how-it-works-wrapper full-width-container">

	<div class="main-content cf wpj-page-section">

		<h2><?php _e( 'How does it work for <span>Buyers</span>?', 'wpjobster' ); ?></h2>

		<p><?php _e( 'Whether you need a logo design for your new blog, or a video presenter who will help your introduce your company to potential clients, you are at the right place. For everything that you do not know how to do yourself, or you simply don’t have the time, Jobster freelancers are at your service.', 'wpjobster' ); ?></p>

		<div class="mb75"></div>

		<div class="ui stackable two column grid hiw-section">

			<?php if ( $buyer_content ) { $cnt = 0;
				foreach ( $buyer_content as $key => $buyer ) { $cnt++; ?>

					<div class="column">
						<div class="column-header">
							<div class="number"><?php echo $cnt; ?></div>
							<div class="title"><?php echo $buyer['title']; ?></div>
						</div>

						<div class="column-body">
							<?php echo $buyer['description']; ?>
						</div>
					</div>

				<?php }
			} ?>

		</div>

		<div class="center mt30">
			<a class="text-button landing-image-button"><?php _e( 'Explore Services', 'wpjobster' ); ?></a>
		</div>

	</div>

	<div class="gray-background full-width-container wpj-page-section">
		<div class="main-content cf">

			<h2><?php _e( 'How does it work for <span>Sellers</span>?', 'wpjobster' ); ?></h2>

			<p><?php _e( 'Jobster provides you with an opportunity to turn knowledge, talent or hobby into a permanent source of income! We’re here to provide security, privacy, and timely payments, so you can keep doing what you love the most.', 'wpjobster' ); ?></p>

			<div class="ui stackable three column grid hiw-section">

				<?php if ( $seller_content ) { $cnt = 0;
					foreach ( $seller_content as $key => $seller ) { $cnt++; ?>

						<div class="column">
							<div class="column-header">
								<div class="number"><?php echo $cnt; ?></div>
								<div class="title"><?php echo $seller['title']; ?></div>
							</div>

							<div class="column-body">
								<?php echo $seller['description']; ?>
							</div>
						</div>

					<?php }
				} ?>

			</div>

			<div class="center mt30">
				<a class="text-button landing-image-button"><?php _e( 'Post Your Service', 'wpjobster' ); ?></a>
			</div>

		</div>

	</div>

</div>

<div class="main-content cf">
	<!-- Sign up -->
	<div class="cta-section-wrapper">
		<div class="cta-section" style="background: url(<?php echo get_template_directory_uri() . '/assets/images/homepage/cta-background.webp'; ?>);">
			<div class="text-content">
				<h2><?php _e( 'What are you waiting for?', 'wpjobster' ); ?></h2>
				<a href="<?php echo esc_url( wpj_get_register_link() ); ?>" class="text-button text-button-big register-link"><?php _e( 'Get Started Now', 'wpjobster' ); ?></a>
			</div>

			<div class="cta-graphic">
				<img src="<?php echo get_template_directory_uri() . '/assets/images/landing/cta-person2.webp'; ?>" alt="">
			</div>
		</div>
	</div>
</div>