429 lines
19 KiB
PHP
429 lines
19 KiB
PHP
<?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 -->
|
|
<div class="swiper-slide">
|
|
<a href="#" class="recent-recipe hover-anim">
|
|
<div class="recipe-img">
|
|
<img src="media/recipe1.png" alt="Recipe 1" class="recipe-img__img">
|
|
|
|
</div>
|
|
<div class="recipe-info">
|
|
<p class="recipe-info__title">Spaghetti Bolognese</p>
|
|
<p class="recipe-info__meta"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="recent-recipe hover-anim">
|
|
<div class="recipe-img">
|
|
<img src="media/recipe1.jpeg" alt="Recipe 1" class="recipe-img__img">
|
|
|
|
</div>
|
|
<div class="recipe-info">
|
|
<p class="recipe-info__title">Spaghetti Bolognese</p>
|
|
<p class="recipe-info__meta"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="recent-recipe hover-anim">
|
|
<div class="recipe-img">
|
|
<img src="media/recipe1.jpeg" alt="Recipe 1" class="recipe-img__img">
|
|
|
|
</div>
|
|
<div class="recipe-info">
|
|
<p class="recipe-info__title">Spaghetti Bolognese</p>
|
|
<p class="recipe-info__meta"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</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">
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="#" class="category hover-anim">
|
|
<!-- <div class="category-img">
|
|
<img src="media/category1.png" alt="Category 1" class="category-img__img">
|
|
</div> -->
|
|
<p class="category-title">Mexican</p>
|
|
|
|
</a>
|
|
</div>
|
|
</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">
|
|
<a href="#" class="recent-review hover-anim">
|
|
<div class="review-title">
|
|
<div class="review-img">
|
|
<img src="media/recipe1.jpeg" alt="reviewed recipe">
|
|
</div>
|
|
<h3 class="review-title-text">Just Like Mom's</h3>
|
|
</div>
|
|
<div class="review-text">
|
|
<p>I made this spaghetti last night and it was absolutely delicious! The sauce was rich and
|
|
flavorful—just the right balance of garlic, herbs, and tomato. I added a pinch of chili
|
|
flakes for a little kick, and it turned out perfect...</p>
|
|
</div>
|
|
<div class="review-meta meta">
|
|
<p class="review-author"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> 2023-10-01</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="recent-review hover-anim">
|
|
<div class="review-title">
|
|
<div class="review-img">
|
|
<img src="media/recipe1.jpeg" alt="reviewed recipe">
|
|
</div>
|
|
<h3 class="review-title-text">Just Like Mom's</h3>
|
|
</div>
|
|
<div class="review-text">
|
|
<p>I made this spaghetti last night and it was absolutely delicious! The sauce was rich and
|
|
flavorful—just the right balance of garlic, herbs, and tomato. I added a pinch of chili
|
|
flakes for a little kick, and it turned out perfect...</p>
|
|
</div>
|
|
<div class="review-meta meta">
|
|
<p class="review-author"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> 2023-10-01</p>
|
|
</div>
|
|
</a><a href="#" class="recent-review hover-anim">
|
|
<div class="review-title">
|
|
<div class="review-img">
|
|
<img src="media/recipe1.jpeg" alt="reviewed recipe">
|
|
</div>
|
|
<h3 class="review-title-text">Just Like Mom's</h3>
|
|
</div>
|
|
<div class="review-text">
|
|
<p>I made this spaghetti last night and it was absolutely delicious! The sauce was rich and
|
|
flavorful—just the right balance of garlic, herbs, and tomato. I added a pinch of chili
|
|
flakes for a little kick, and it turned out perfect...</p>
|
|
</div>
|
|
<div class="review-meta meta">
|
|
<p class="review-author"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> 2023-10-01</p>
|
|
</div>
|
|
</a><a href="#" class="recent-review hover-anim">
|
|
<div class="review-title">
|
|
<div class="review-img">
|
|
<img src="media/recipe1.jpeg" alt="reviewed recipe">
|
|
</div>
|
|
<h3 class="review-title-text">Just Like Mom's</h3>
|
|
</div>
|
|
<div class="review-text">
|
|
<p>I made this spaghetti last night and it was absolutely delicious! The sauce was rich and
|
|
flavorful—just the right balance of garlic, herbs, and tomato. I added a pinch of chili
|
|
flakes for a little kick, and it turned out perfect...</p>
|
|
</div>
|
|
<div class="review-meta meta">
|
|
<p class="review-author"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> 2023-10-01</p>
|
|
</div>
|
|
</a><a href="#" class="recent-review hover-anim">
|
|
<div class="review-title">
|
|
<div class="review-img">
|
|
<img src="media/recipe1.jpeg" alt="reviewed recipe">
|
|
</div>
|
|
<h3 class="review-title-text">Just Like Mom's</h3>
|
|
</div>
|
|
<div class="review-text">
|
|
<p>I made this spaghetti last night and it was absolutely delicious! The sauce was rich and
|
|
flavorful—just the right balance of garlic, herbs, and tomato. I added a pinch of chili
|
|
flakes for a little kick, and it turned out perfect...</p>
|
|
</div>
|
|
<div class="review-meta meta">
|
|
<p class="review-author"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> 2023-10-01</p>
|
|
</div>
|
|
</a><a href="#" class="recent-review hover-anim">
|
|
<div class="review-title">
|
|
<div class="review-img">
|
|
<img src="media/recipe1.jpeg" alt="reviewed recipe">
|
|
</div>
|
|
<h3 class="review-title-text">Just Like Mom's</h3>
|
|
</div>
|
|
<div class="review-text">
|
|
<p>I made this spaghetti last night and it was absolutely delicious! The sauce was rich and
|
|
flavorful—just the right balance of garlic, herbs, and tomato. I added a pinch of chili
|
|
flakes for a little kick, and it turned out perfect...</p>
|
|
</div>
|
|
<div class="review-meta meta">
|
|
<p class="review-author"><i class="fa-solid fa-user"></i> GreenDavid004</p>
|
|
<p class="review-date"><i class="fa-solid fa-calendar-days"></i> 2023-10-01</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="daily-meals">
|
|
<h2 class="title">Your Menu for Monday</h2>
|
|
<div class="daily-meals-grid">
|
|
<a href="#" class="daily-meal hover-anim">
|
|
<div class="meal-img">
|
|
<img src="media/recipe1.jpeg" alt="meal-img">
|
|
</div>
|
|
<div class="daily-meal-info">
|
|
<div class="daily-meal-title">
|
|
<h3>Goulash</h3>
|
|
<span class="meta"><i class="fa-regular fa-clock"></i>120mins to make</span>
|
|
</div>
|
|
<div class="daily-meal-ingredients">
|
|
<ul class="ingredients-list">
|
|
<li>Ground beef</li>
|
|
<li>Tomato sauce</li>
|
|
<li>Onion</li>
|
|
<li>Macaroni</li>
|
|
<li>Garlic</li>
|
|
<li>Cheese</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="daily-meal hover-anim">
|
|
<div class="meal-img">
|
|
<img src="media/recipe1.jpeg" alt="meal-img">
|
|
</div>
|
|
<div class="daily-meal-info">
|
|
<div class="daily-meal-title">
|
|
<h3>Goulash</h3>
|
|
<span class="meta"><i class="fa-regular fa-clock"></i>120mins to make</span>
|
|
</div>
|
|
<div class="daily-meal-ingredients">
|
|
<ul class="ingredients-list">
|
|
<li>Ground beef</li>
|
|
<li>Tomato sauce</li>
|
|
<li>Onion</li>
|
|
<li>Macaroni</li>
|
|
<li>Garlic</li>
|
|
<li>Cheese</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="daily-meal hover-anim">
|
|
<div class="meal-img">
|
|
<img src="media/recipe1.jpeg" alt="meal-img">
|
|
</div>
|
|
<div class="daily-meal-info">
|
|
<div class="daily-meal-title">
|
|
<h3>Goulash</h3>
|
|
<span class="meta"><i class="fa-regular fa-clock"></i>120mins to make</span>
|
|
</div>
|
|
<div class="daily-meal-ingredients">
|
|
<ul class="ingredients-list">
|
|
<li>Ground beef</li>
|
|
<li>Tomato sauce</li>
|
|
<li>Onion</li>
|
|
<li>Macaroni</li>
|
|
<li>Garlic</li>
|
|
<li>Cheese</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="daily-meal hover-anim">
|
|
<div class="meal-img">
|
|
<img src="media/recipe1.jpeg" alt="meal-img">
|
|
</div>
|
|
<div class="daily-meal-info">
|
|
<div class="daily-meal-title">
|
|
<h3>Goulash</h3>
|
|
<span class="meta"><i class="fa-regular fa-clock"></i>120mins to make</span>
|
|
</div>
|
|
<div class="daily-meal-ingredients">
|
|
<ul class="ingredients-list">
|
|
<li>Ground beef</li>
|
|
<li>Tomato sauce</li>
|
|
<li>Onion</li>
|
|
<li>Macaroni</li>
|
|
<li>Garlic</li>
|
|
<li>Cheese</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="daily-meal hover-anim">
|
|
<div class="meal-img">
|
|
<img src="media/recipe1.jpeg" alt="meal-img">
|
|
</div>
|
|
<div class="daily-meal-info">
|
|
<div class="daily-meal-title">
|
|
<h3>Goulash</h3>
|
|
<span class="meta"><i class="fa-regular fa-clock"></i>120mins to make</span>
|
|
</div>
|
|
<div class="daily-meal-ingredients">
|
|
<ul class="ingredients-list">
|
|
<li>Ground beef</li>
|
|
<li>Tomato sauce</li>
|
|
<li>Onion</li>
|
|
<li>Macaroni</li>
|
|
<li>Garlic</li>
|
|
<li>Cheese</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="daily-meal hover-anim">
|
|
<div class="meal-img">
|
|
<img src="media/recipe1.jpeg" alt="meal-img">
|
|
</div>
|
|
<div class="daily-meal-info">
|
|
<div class="daily-meal-title">
|
|
<h3>Goulash</h3>
|
|
<span class="meta"><i class="fa-regular fa-clock"></i>120mins to make</span>
|
|
</div>
|
|
<div class="daily-meal-ingredients">
|
|
<ul class="ingredients-list">
|
|
<li>Ground beef</li>
|
|
<li>Tomato sauce</li>
|
|
<li>Onion</li>
|
|
<li>Macaroni</li>
|
|
<li>Garlic</li>
|
|
<li>Cheese</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</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',
|
|
)); ?>
|