144 lines
5.4 KiB
PHP

<?php
require_once APPS_PATH . '/Recipes/components.php';
the_header(
'Welcome',
"Discover delicious recipes using the ingredients you already have. Fridgebites helps you create tasty meals with what's in your fridge",
'frontpage',
[
['robots', 'nofollow, noindex'],
['keywords', 'recipes, ingredients, recipe finder, fridge, fridge recipe, leftover recipes']
]
);
?>
<div class="welcome">
<div class="container">
<div class="welcome__inner">
<div class="text-container">
<div class="quote">
<h2><span class="black-qoute-word">Your</span> Fridge.</h2>
<h2><span class="black-qoute-word">Your</span> Rules.</h2>
<h2><span class="black-qoute-word">Our</span> Recipes.</h2>
</div>
<p>Discover delicious recipes tailored to exactly what you have on hand — no extra shopping trips, no wasted food, just tasty meals made easy.</p>
</div>
<canvas id="food-3d"></canvas>
</div>
</div>
</div>
<div class="container">
<div class="latest-recipes">
<h2 class="title">Latest Recipes Added</h2>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<?php foreach($context['latest_recipes'] as $recipe): ?>
<div class="swiper-slide">
<a href="<?= $recipe->get_absolute_url() ?>" class="recent-recipe hover-anim">
<div class="recipe-img">
<img src="<?= $recipe->get_image_url() ?>" alt="Recipe 1" class="recipe-img__img">
</div>
<div class="recipe-info">
<p class="recipe-info__title"><?= $recipe->field_title ?></p>
<p class="recipe-info__meta"><i class="fa-solid fa-user"></i> <?= $recipe->author_username ?></p>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="categories">
<h2 class="title">Categories</h2>
<div class="swiper categories-swiper">
<div class="swiper-wrapper">
<?php foreach($context['categories'] as $cat): ?>
<div class="swiper-slide">
<a href="<?= get_permalink('recipes:catalog') . '?category=' . $cat->get_id() ?>" class="category hover-anim">
<p class="category-title"><?= $cat->field_name ?></p>
</a>
</div>
<?php endforeach; ?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="recent-reviews">
<h2 class="title">Recent User Reviews</h2>
<div class="reviews-grid">
<?php foreach($context['reviews'] as $review): ?>
<a href="<?php the_permalink('recipes:single', [$review->field_recipe_id]) ?>" class="recent-review hover-anim">
<div class="review-title">
<div class="review-img">
<img src="<?= $review->get_recipe_image() ?>" alt="reviewed recipe">
</div>
<h3 class="review-title-text"><?= $review->recipe_title ?></h3>
</div>
<div class="review-text">
<p><?= $review->get_excerpt() ?></p>
</div>
<div class="review-meta meta">
<p class="review-author"><i class="fa-solid fa-user"></i> <?= $review->author_username ?></p>
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> <?= $review->get_date() ?></p>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
<?php if(CURRENT_USER): ?>
<?php if($context['usermenu_recipe_prefetch']): ?>
<div class="daily-meals">
<h2 class="title">Your Menu for <?= date("l"); ?></h2>
<div class="daily-meals-grid">
<?php
foreach ($context['usermenu_recipe_prefetch'] as $recipe_pref) {
the_product_recipes_item($recipe_pref['origin'], $recipe_pref['relations']);
}
?>
</div>
</div>
<?php else: ?>
<div class="daily-meals">
<h2 class="title">No meals added for <?= date("l"); ?></h2>
<p class="no-daily-meals-msg">You have not added any recipes for <?= date("l");?>, please go to the catalog and add recipes.</p>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.149.0/examples/jsm/"
}
}
</script>
<script type="module" src="<?= ASSETS_PATH . '/js/threejs-scene.js' ?>"></script>
<?php the_footer(array(
ASSETS_PATH . '/swiper/swiper-bundle.min.js',
ASSETS_PATH . '/js/index.js',
)); ?>