File: /var/www/vcstore.viitorcloud.co/wp-content/themes/vcmarketplace/homepage.php
<?php
/*
Template Name: Home Page
*/
get_header();
?>
<div class="main">
<?php
$banner_title = get_field('banner_title');
$banner_description = get_field('banner_description');
$banner_image = get_field('banner_image');
?>
<section class="home-banner position-relative">
<div class="position-absolute top-0 start-0 w-100 h-100 banner-img">
<img src="<?php echo $banner_image['url']; ?>" alt="<?php echo $banner_image['alt']; ?>" width="100%"
height="100%">
</div>
<div class="container h-100">
<div class="row align-items-center h-100 banner-content">
<div class="col-12 col-md-6">
<nav class="mb-2" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item font-18">
<a href="https://viitorcloud.com/">Home</a>
</li>
<li class="breadcrumb-item font-18 active" aria-current="page">Marketplace</li>
</ol>
</nav>
<?php if ($banner_title) { ?>
<p class="font-64 text-white mb-4">
<?php echo $banner_title; ?>
</p>
<?php } ?>
<?php if ($banner_description) { ?>
<p class="font-20 text-white">
<?php echo $banner_description; ?>
</p>
<?php } ?>
</div>
</div>
</div>
</section>
<!-- section menu -->
<section class="position-sticky start-0 w-100 section-menu">
<div class="container h-100">
<div class="d-flex align-items-center justify-content-between h-100 flex-nowrap menu-links-main">
<div class="d-flex h-100 align-items-center overflow-auto menu-links">
<!-- <a href="#products"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">All</a> -->
<a href="#products"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">Products</a>
<a href="#plugins"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">Wordpress
Plugins</a>
<a href="#assets"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">3D
Assets</a>
<a href="#filters"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">Filters</a>
<a href="#unity"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">Unity
Assets</a>
<a href="#contributor"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">Open
source contributor</a>
<a href="#games"
class="section-menu-link font-16 px-3 mr-3 h-100 d-flex align-items-center justify-content-center">Games</a>
</div>
<a href="https://viitorcloud.com/contact-us" class="request-btn">
<span>Request a quote</span>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/link-arrow.svg"
alt="arrow-right" class="ms-0 ms-lg-1">
</a>
</div>
</div>
</section>
<!-- product slider section -->
<?php
$slider_section_details = get_field('slider_section_details');
?>
<section id="products" class="section-content product-slider-section py-80">
<div class="container">
<div class="product-slider">
<?php foreach ($slider_section_details as $slider_section) {
$main_image = $slider_section['main_image'];
$title_icon_logo = $slider_section['title_icon_logo'];
$title = $slider_section['title'];
$choose_rating = $slider_section['choose_rating'];
$rating_number = $slider_section['rating_number'];
$slider_description = $slider_section['slider_description'];
$button_text = $slider_section['button_text'];
$button_link = $slider_section['button_link'];
?>
<div class="product-slider-item overflow-hidden">
<div class="row h-100">
<div class="col-12 col-lg-9 h-100">
<img src="<?php echo $main_image['url']; ?>" alt="<?php echo $main_image['alt']; ?>"
width="100%" height="100%" class="product-img"/>
</div>
<div class="col-12 col-lg-3">
<div class="p-4 ps-3 d-flex flex-column h-100">
<p class="font-22 font-black d-flex align-items-center">
<img src="<?php echo $title_icon_logo['url']; ?>"
alt="<?php echo $title_icon_logo['alt']; ?>" width="24" class="me-2"/>
<?php echo $title; ?>
</p>
<div class="d-flex align-items-center mt-4">
<?php
if ($choose_rating) {
for ($i = 1; $i <= 5; $i++) {
if ($i <= $choose_rating) { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/fill-star.svg"
alt="star" class="me-2"/>
<?php
} else { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/blank-star.svg"
alt="star" class="me-2"/>
<?php }
}
}
?>
<p class="font-18 font-black-light">(<?php echo $rating_number; ?>)</p>
</div>
<p class="font-20 product-detail mt-3">
<?php echo $slider_description; ?>
</p>
<a href="<?php echo $button_link; ?>" class="download-btn font-18 mt-auto">
<?php echo $button_text; ?>
</a>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!-- wordpress plugins -->
<?php
$related_products = get_field('choose_wordpress_product');
$title_wp = get_field('title_wp');
$see_all_link = get_field('see_all_link');
if ($related_products) {
?>
<section id="plugins" class="section-content py-80 pt-0">
<div class="container">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<?php if ($title_wp) { ?>
<h3 class="font-30 m-0 font-black fw-light">
<?php echo $title_wp; ?>
</h3>
<?php } ?>
<?php if ($see_all_link) { ?>
<a href="<?php echo $see_all_link; ?>" class="font-20 mt-2 mt-md-0 all-custom-link">See All</a>
<?php } ?>
</div>
<div class="row">
<?php
foreach ($related_products as $post) :
setup_postdata($post);
$title = get_the_title();
$excerpt = get_the_excerpt();
$permalink = get_permalink();
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail = get_the_post_thumbnail_url($post->ID, 'full');
$thumbnail_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
?>
<div class="col-12 col-md-6 col-xl-4 mt-40">
<div class="d-flex align-items-center">
<a href="<?php echo get_permalink(); ?>" class="d-flex align-items-start">
<?php if ($thumbnail) { ?>
<img src="<?php echo $thumbnail; ?>"
alt="<?php echo esc_attr($thumbnail_alt); ?>" width="80" height="60"/>
<?php } ?>
<div class="plugin-detail ms-4">
<p class="font-20 font-black"><?php echo esc_html($title); ?></p>
<p class="font-18 font-black-light mt-2"><?php echo esc_html($excerpt); ?></p>
</div>
</a>
</div>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php } ?>
<!-- assets section -->
<?php
$assets_product = get_field('assets_product');
$title_3d_assets = get_field('title_3d_assets');
$link_3d_assets = get_field('link_3d_assets');
if ($related_products) {
?>
<section id="assets" class="section-content py-80 pt-0 assets-card-section">
<div class="container">
<div class="d-flex align-items-center justify-content-between">
<h3 class="font-30 m-0 font-black fw-light">
<?php echo $title_3d_assets; ?>
</h3>
<a href="<?php echo $link_3d_assets; ?>" class="font-20 mt-2 mt-md-0 all-custom-link">See All</a>
</div>
<div class="row mt-40">
<?php
foreach ($assets_product as $assets) :
setup_postdata($assets);
$title = $assets->post_title;
$permalink = get_permalink();
$thumbnail_id = get_post_thumbnail_id($assets->ID);
$thumbnail = get_the_post_thumbnail_url($assets->ID, 'full');
$thumbnail_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
$product_url = get_field('product_url', $assets->ID);
$choose_rating = get_field('choose_rating', $assets->ID);
$rating_value = get_field('rating_value', $assets->ID);
$product = wc_get_product($assets->ID);
$regular_price = $product->get_regular_price();
$sale_price = $product->get_sale_price();
?>
<div class="col-12 col-md-6 col-lg-4">
<a href="<?php echo $product_url; ?>" class="assets-card">
<div class="assets-img">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $thumbnail_alt; ?>"
width="100%" height="100%"/>
</div>
<div class="mt-3">
<p class="font-20 font-black"><?php echo $title; ?></p>
<div class="d-flex align-items-center mt-1">
<?php
if ($choose_rating) {
for ($i = 1; $i <= 5; $i++) {
if ($i <= $choose_rating) { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/fill-star.svg"
alt="star" class="me-2"/>
<?php
} else { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/blank-star.svg"
alt="star" class="me-2"/>
<?php }
}
}
?>
<p class="font-18 font-black-light">(<?php echo $rating_value; ?>)</p>
</div>
<div class="d-flex mt-1 gap-2">
<?php if ($sale_price || $regular_price) { ?>
<?php if ($sale_price) { ?>
<p class="font-18 price"><?php echo wc_price($sale_price); ?></p>
<?php } ?>
<?php if ($regular_price) { ?>
<p class="font-18 price-old"><?php echo wc_price($regular_price); ?></p>
<?php } ?>
<?php } else { ?>
<p class="font-18 price">Free</p>
<?php } ?>
</div>
</div>
</a>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php } ?>
<!-- filters section -->
<?php
$choose_snapchat_product = get_field('choose_snapchat_product');
$title_snapchat = get_field('title_snapchat');
$link_snapchat = get_field('link_snapchat');
if ($related_products) {
?>
<section id="filters" class="section-content py-80 pt-0 filters-section">
<div class="container">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<h3 class="font-30 m-0 font-black fw-light">
<?php echo $title_snapchat; ?>
</h3>
<a href="<?php echo $link_snapchat; ?>" class="font-20 mt-2 mt-md-0 all-custom-link">See All</a>
</div>
<div class="row mt-40">
<?php
foreach ($choose_snapchat_product as $snapchat) :
setup_postdata($snapchat);
$title = $snapchat->post_title;
$permalink = get_permalink();
$thumbnail_id = get_post_thumbnail_id($snapchat->ID);
$thumbnail = get_the_post_thumbnail_url($snapchat->ID, 'full');
$thumbnail_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
$product_categories = get_the_terms($snapchat->ID, 'product_cat');
$product_url = get_field('product_url', $snapchat->ID);
$upload_filters_video = get_field('upload_filters_video', $snapchat->ID);
$instagram_filter_url = get_field('instagram_filter_url', $snapchat->ID);
$snapchat_filter_url = get_field('snapchat_filter_url', $snapchat->ID);
$facebook_filter_url = get_field('facebook_filter_url', $snapchat->ID);
$category_names = [];
if ($product_categories && !is_wp_error($product_categories)) {
foreach ($product_categories as $category) {
$category_names[] = $category->name;
}
}
$category_names_string = implode(', ', $category_names);
?>
<div class="col-6 col-md-4 col-lg-3 col-xl-2">
<div class="filter-card">
<div class="filter-img position-relative">
<?php if ($upload_filters_video) { ?>
<video autoplay muted loop class="video-size" width="100%">
<source src="<?php echo $upload_filters_video; ?>" type="video/mp4">
</video>
<?php } else { ?>
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $thumbnail_alt; ?>" width="100%" height="100%" />
<?php } ?>
<div class="social-media-buttons align-items-end justify-content-center position-absolute w-100 h-100 top-0">
<?php if ($instagram_filter_url) { ?>
<a href="<?php echo $instagram_filter_url; ?>" class="d-flex align-items-center justify-content-center"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-instagram"></i>
</a>
<?php }
if ($facebook_filter_url) { ?>
<a href="<?php echo $facebook_filter_url; ?>" class="d-flex align-items-center justify-content-center"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-facebook-f"></i>
</a>
<?php }
if ($snapchat_filter_url) { ?>
<a href="<?php echo $snapchat_filter_url; ?>" class="d-flex align-items-center justify-content-center"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-snapchat"></i>
</a>
<?php } ?>
</div>
</div>
<p class="font-20 text-center font-black filter-title"><?php echo $title; ?></p>
<p class="font-18 text-center font-black-light"><?php echo $category_names_string; ?></p>
</div>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php } ?>
<!-- unity assets section -->
<?php
$assets_data = get_field('assets_data');
$assets_title = get_field('assets_title');
$assets_url = get_field('assets_url');
if ($assets_data) { ?>
<section id="unity" class="section-content py-80 pt-0 assets-card-section">
<div class="container">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<h3 class="font-30 m-0 font-black fw-light">
<?php echo $assets_title; ?>
</h3>
<a href="<?php echo $assets_url; ?>" class="font-20 mt-2 mt-md-0 all-custom-link">See All</a>
</div>
<div class="row mt-40">
<?php
foreach ($assets_data as $asset) :
setup_postdata($asset);
$title = $asset->post_title;
$permalink = get_permalink();
$thumbnail_id = get_post_thumbnail_id($asset->ID);
$thumbnail = get_the_post_thumbnail_url($asset->ID, 'full');
$thumbnail_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
$product_url = get_field('product_url', $asset->ID);
$choose_rating = get_field('choose_rating', $asset->ID);
$rating_value = get_field('rating_value', $asset->ID);
$product = wc_get_product($asset->ID);
$regular_price = $product->get_regular_price();
$sale_price = $product->get_sale_price();
?>
<div class="col-12 col-md-6">
<a href="<?php echo $product_url; ?>" class="assets-card">
<div class="assets-img">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $thumbnail_alt; ?>"
width="100%" height="100%"/>
</div>
<div class="mt-3">
<p class="font-20 font-black"><?php echo $title; ?></p>
<div class="d-flex align-items-center mt-1">
<?php
if ($choose_rating) {
for ($i = 1; $i <= 5; $i++) {
if ($i <= $choose_rating) { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/fill-star.svg"
alt="star" class="me-2"/>
<?php
} else { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/blank-star.svg"
alt="star" class="me-2"/>
<?php }
}
}
?>
<p class="font-18 font-black-light">(<?php echo $rating_value; ?>)</p>
</div>
<div class="d-flex mt-1 gap-2">
<?php if ($sale_price || $regular_price) { ?>
<?php if ($sale_price) { ?>
<p class="font-18 price"><?php echo wc_price($sale_price); ?></p>
<?php } ?>
<?php if ($regular_price) { ?>
<p class="font-18 price-old"><?php echo wc_price($regular_price); ?></p>
<?php } ?>
<?php } else { ?>
<p class="font-18 price">Free</p>
<?php } ?>
</div>
</div>
</a>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php } ?>
<!-- open-source-contributor section -->
<?php
$cta_title = get_field('cta_title');
$cta_button_text = get_field('cta_button_text');
$cta_button_link = get_field('cta_button_link');
$cta_image = get_field('cta_image');
if ($cta_title || $cta_button_text || $cta_button_link || $cta_image) { ?>
<section id="contributor" class="section-content py-80 contributor-section">
<div class="container">
<?php if ($cta_title) { ?>
<p class="fw-light font-40 text-white">
<?php echo $cta_title; ?>
</p>
<?php } ?>
<?php if ($cta_button_link) { ?>
<a href="<?php echo $cta_button_link; ?>" target="_blank" class="contact-outline-btn font-20">
<?php echo $cta_button_text; ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/link-arrow-white.svg"
alt="arrow" class="ms-2"/>
</a>
<?php } ?>
</div>
</section>
<?php } ?>
<!-- games section -->
<?php
$choose_games = get_field('choose_games');
$title_games = get_field('title_games');
$link_games = get_field('link_games');
if ($choose_games) {
?>
<section id="games" class="section-content py-80 pt-80 games-card-section">
<div class="container">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<h3 class="font-30 m-0 font-black fw-light">
<?php echo $title_games; ?>
</h3>
<a href="<?php echo $link_games; ?>" class="font-20 mt-2 mt-md-0 all-custom-link">See All</a>
</div>
<div class="row mt-40">
<?php
foreach ($choose_games as $game) :
setup_postdata($game);
$title = $game->post_title;
$permalink = get_permalink();
$thumbnail_id = get_post_thumbnail_id($game->ID);
$thumbnail = get_the_post_thumbnail_url($game->ID, 'full');
$thumbnail_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
$product_url = get_field('product_url', $game->ID);
$android_app_url = get_field('android_app_url', $game->ID);
$ios_store_url = get_field('ios_store_url', $game->ID);
?>
<div class="col-12 col-md-6 col-lg-3">
<div class="games-card">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $thumbnail_alt; ?>" width="100%"
height="100%"/>
<div class="social-media-buttons align-items-end justify-content-center position-absolute w-100 h-100 top-0">
<?php if ($android_app_url) { ?>
<a href="<?php echo $android_app_url; ?>" class="d-flex align-items-center justify-content-center"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-google-play"></i>
</a>
<?php }
if ($ios_store_url) { ?>
<a href="<?php echo $ios_store_url; ?>" class="d-flex align-items-center justify-content-center"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-app-store-ios"></i>
</a>
<?php } ?>
</div>
</div>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php } ?>
</div>
<?php get_footer(); ?>