Added some partials cards
This commit is contained in:
Noah Lancien
parent
b4b6a7cedc
commit
63aba8035a
35 changed files with 697 additions and 1 deletions
|
|
@ -11,3 +11,6 @@ convert -colors 256 -depth 8 +dither bg-footer-ori.png bg-footer-test.png
|
|||
### Autre
|
||||
|
||||
apt install trimage
|
||||
|
||||
### TODO
|
||||
FIXME: supprimer le dossier resources/assets/images/tmp
|
||||
|
|
|
|||
6
resources/assets/images/common/empty-heart.svg
Normal file
6
resources/assets/images/common/empty-heart.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="38" height="39" viewBox="0 0 38 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 108">
|
||||
<circle id="Ellipse 1" cx="19" cy="19.1289" r="19" fill="#FBF8F5"/>
|
||||
<path id="Vector" d="M19.3625 27.1289L12.1482 20.6804C8.22741 16.8112 13.991 9.38253 19.3625 15.3926C24.734 9.38253 30.4715 16.837 26.5768 20.6804L19.3625 27.1289Z" fill="#FBF8F5" stroke="#4E3238" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 458 B |
6
resources/assets/images/common/red-heart.svg
Normal file
6
resources/assets/images/common/red-heart.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="38" height="39" viewBox="0 0 38 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 108">
|
||||
<circle id="Ellipse 1" cx="19" cy="19.1289" r="19" fill="#E30513"/>
|
||||
<path id="Vector" d="M19.3625 27.1292L12.1482 20.6806C8.22741 16.8115 13.991 9.38277 19.3625 15.3928C24.734 9.38277 30.4715 16.8373 26.5768 20.6806L19.3625 27.1292Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 455 B |
3
resources/assets/images/recipes/clock.svg
Normal file
3
resources/assets/images/recipes/clock.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M9.275 8.05H6.475C6.1852 8.05 5.95 7.8148 5.95 7.525V3.325C5.95 3.0352 6.1852 2.8 6.475 2.8C6.7648 2.8 7 3.0352 7 3.325V7H9.275C9.5648 7 9.8 7.2352 9.8 7.525C9.8 7.8148 9.5648 8.05 9.275 8.05ZM7 0C3.1346 0 0 3.1346 0 7C0 10.8654 3.1346 14 7 14C10.8654 14 14 10.8654 14 7C14 3.1346 10.8654 0 7 0Z" fill="#4E3238"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 438 B |
6
resources/assets/images/recipes/cooking-pot.svg
Normal file
6
resources/assets/images/recipes/cooking-pot.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="marmite">
|
||||
<path id="Vector" d="M16.954 5.54939C16.7026 5.497 16.4458 5.53367 16.1944 5.52843C16.0843 5.52843 15.9743 5.54415 15.9586 5.38698C15.9533 5.32411 15.8957 5.32411 15.8486 5.31887C15.7752 5.31887 15.7071 5.31887 15.6338 5.31887C11.259 5.31887 6.8843 5.31887 2.50957 5.31887C2.36812 5.31887 2.19522 5.256 2.15331 5.48652C2.14283 5.53367 2.07472 5.52843 2.02757 5.52843C1.89135 5.52843 1.75513 5.52843 1.61891 5.52843C0.738726 5.52843 0.267199 5.87422 0 6.71249V7.315C0.104784 7.61363 0.235764 7.89655 0.482006 8.10612C0.754444 8.3314 1.05832 8.46762 1.41982 8.46762C1.60319 8.46762 1.78657 8.4781 1.96994 8.46762C2.13235 8.45714 2.18474 8.52525 2.18474 8.68767C2.17951 9.5207 2.17951 10.3537 2.18474 11.1868C2.19522 12.5385 3.1016 13.6544 4.42188 13.9426C4.59477 13.9793 4.76767 14.0002 4.95104 14.0002C7.70162 14.0002 10.4522 14.0002 13.2028 14.0002C14.7064 14.0002 15.9533 12.748 15.9638 11.2444C15.9691 10.4009 15.9638 9.55737 15.9638 8.71386C15.9638 8.49382 15.9743 8.48334 16.1944 8.48334C16.341 8.48334 16.4877 8.48334 16.6397 8.48334C17.3627 8.48334 17.8552 8.13231 18.1014 7.45122C18.1171 7.41454 18.1329 7.37263 18.1486 7.33596V6.73345C17.9809 6.10999 17.5985 5.70133 16.954 5.57035V5.54939ZM2.18474 7.08448C2.18474 7.3412 2.17951 7.35167 1.91755 7.35167C1.76037 7.35167 1.59795 7.35167 1.44078 7.34644C1.22597 7.33072 1.10547 7.1945 1.11071 6.98493C1.11071 6.79108 1.23645 6.6601 1.44602 6.64438C1.54556 6.63914 1.64511 6.64438 1.74465 6.64438C2.25285 6.64438 2.18474 6.59199 2.18998 7.08448H2.18474ZM16.7654 7.33596C16.5454 7.35691 16.3201 7.34644 16.0948 7.34644C16.011 7.34644 15.9691 7.2888 15.9691 7.21022C15.9691 7.1683 15.9691 7.12639 15.9691 7.08448C15.9691 6.59199 15.9062 6.64438 16.4144 6.64962C16.5297 6.64962 16.6502 6.63914 16.7654 6.64962C16.9383 6.67058 17.0431 6.8068 17.0483 6.97969C17.0483 7.16306 16.9488 7.315 16.7707 7.33072L16.7654 7.33596Z" fill="#4E3238"/>
|
||||
<path id="Vector_2" d="M2.8083 4.27586C4.90398 4.27586 6.99965 4.27586 9.09533 4.27586C11.1753 4.27586 13.25 4.27586 15.33 4.27586C15.3876 4.27586 15.4505 4.27586 15.5081 4.27586C15.5343 4.27586 15.5762 4.27062 15.5867 4.24967C15.6129 4.21299 15.5762 4.18156 15.55 4.1606C15.4505 4.07677 15.3562 3.98771 15.2566 3.90388C14.0307 2.89795 12.6318 2.26401 11.0705 1.99157C10.9552 1.97062 10.9029 1.93394 10.9133 1.81344C10.9133 1.76629 10.9081 1.71914 10.9029 1.67198C10.84 0.77608 10.0593 0.0216365 9.16344 0.0006797C8.1156 -0.0255163 7.31924 0.707971 7.25637 1.77153C7.2459 1.93918 7.18303 1.98633 7.03633 2.01777C5.41742 2.30592 3.99236 2.9975 2.74543 4.06629C2.6878 4.11869 2.57253 4.1606 2.60397 4.24443C2.63017 4.31778 2.74019 4.27586 2.81354 4.2811L2.8083 4.27586ZM8.36708 1.70866C8.43519 1.37335 8.70763 1.12711 9.04294 1.11663C9.41492 1.10615 9.69784 1.3262 9.78167 1.67198C9.81834 1.81868 9.7869 1.88155 9.62449 1.87631C9.44112 1.86583 9.25775 1.87631 9.07437 1.87631C8.88576 1.87631 8.69715 1.87631 8.50854 1.87631C8.38804 1.87631 8.33565 1.83964 8.36184 1.70866H8.36708Z" fill="#4E3238"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
6
resources/assets/images/recipes/toque.svg
Normal file
6
resources/assets/images/recipes/toque.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="toque">
|
||||
<path id="Vector" d="M12.942 12H2.98096V14H12.942V12Z" fill="#4E3238"/>
|
||||
<path id="Vector_2" d="M14.6079 3.64C13.8589 2.898 12.8509 2.478 11.8009 2.478H11.6329C11.3389 1.75 10.8279 1.12 10.1769 0.679001C9.51886 0.238 8.74886 0 7.95786 0C7.16686 0 6.39686 0.238 5.74586 0.679001C5.08786 1.12 4.58386 1.75 4.28986 2.478H3.96786C3.00186 2.478 2.06386 2.828 1.34286 3.465C0.614858 4.109 0.145857 4.984 0.0268571 5.943C-0.092143 6.902 0.138857 7.87501 0.684858 8.67301C1.23086 9.47101 2.04286 10.038 2.98086 10.276V11H12.9419V10.241C13.7609 9.99601 14.4749 9.49201 14.9789 8.81301C15.4899 8.12701 15.7699 7.29401 15.7699 6.447C15.7699 5.39 15.3499 4.382 14.6079 3.64Z" fill="#4E3238"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 803 B |
BIN
resources/assets/images/tmp/breeder.png
Normal file
BIN
resources/assets/images/tmp/breeder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 775 KiB |
BIN
resources/assets/images/tmp/job.jpg
Normal file
BIN
resources/assets/images/tmp/job.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
BIN
resources/assets/images/tmp/news.png
Normal file
BIN
resources/assets/images/tmp/news.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,007 KiB |
BIN
resources/assets/images/tmp/nuggets.png
Normal file
BIN
resources/assets/images/tmp/nuggets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
resources/assets/images/tmp/nutriscore-b.png
Normal file
BIN
resources/assets/images/tmp/nutriscore-b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
resources/assets/images/tmp/packaging.png
Normal file
BIN
resources/assets/images/tmp/packaging.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
resources/assets/images/tmp/product-picture.png
Normal file
BIN
resources/assets/images/tmp/product-picture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
BIN
resources/assets/images/tmp/product-tag.png
Normal file
BIN
resources/assets/images/tmp/product-tag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
18
resources/assets/images/tmp/tag-new.svg
Normal file
18
resources/assets/images/tmp/tag-new.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6 KiB |
|
|
@ -13,3 +13,22 @@
|
|||
.mirror-v {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
// * Clip-path for the irregular shape.
|
||||
// Use the large one for sections and the small one for cards.
|
||||
.line-border-large {
|
||||
clip-path: polygon(67% 1vw, 100% 0, 100% 100%, 50% calc(100% - 1vw), 0 100%, 0 1vw, 31% 0);
|
||||
}
|
||||
|
||||
.line-border-small {
|
||||
clip-path: polygon(60% 1vw, 100% 0, 100% calc(100% - 1vw), 70% calc(100% - 1.5vw), 40% 100%, 0 calc(100% - 1vw), 0 1vw, 30% 0);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
clip-path: polygon(60% 0.5vw, 100% 0, 100% calc(100% - 0.5vw), 70% calc(100% - 0.75vw), 40% 100%, 0 calc(100% - 0.5vw), 0 0.5vw, 30% 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-left-shadow {
|
||||
filter: drop-shadow(-2px 2px 4px rgb(78 50 56 / 12%));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,3 +12,6 @@
|
|||
@import "./base/fonts";
|
||||
@import "./base/common";
|
||||
@import "./base/layout";
|
||||
|
||||
// * PARTIALS
|
||||
@import "./partials/partials";
|
||||
|
|
|
|||
49
resources/sass/fo/partials/_breeding-card.scss
Normal file
49
resources/sass/fo/partials/_breeding-card.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
.breeding-card {
|
||||
margin-bottom: 0.7rem;
|
||||
|
||||
.card-img-top {
|
||||
img {
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: calc(100% - 1rem);
|
||||
height: 100%;
|
||||
margin: 0.5rem;
|
||||
background: linear-gradient(0deg,rgb(0 0 0 / 100%) 0%,rgb(255 255 255 / 0%) 100%);
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.card-body {
|
||||
bottom: -0.1rem;
|
||||
}
|
||||
|
||||
.text-zone {
|
||||
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
||||
background-image: linear-gradient($color-quint, $color-quint);
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0;
|
||||
transition: .4s, background-position 0s;
|
||||
|
||||
.btn {
|
||||
margin-bottom: -0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.text-zone {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.breeding-card-btn {
|
||||
bottom: -1rem;
|
||||
}
|
||||
}
|
||||
13
resources/sass/fo/partials/_job-card.scss
Normal file
13
resources/sass/fo/partials/_job-card.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.job-card {
|
||||
.card-body {
|
||||
margin-top: -2rem;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.job-card-view-more {
|
||||
bottom: -1rem;
|
||||
}
|
||||
}
|
||||
13
resources/sass/fo/partials/_news-card.scss
Normal file
13
resources/sass/fo/partials/_news-card.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.news-card {
|
||||
.card-img-top {
|
||||
img {
|
||||
height: 15rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.tag {
|
||||
bottom: -1.5rem;
|
||||
left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
resources/sass/fo/partials/_partials.scss
Normal file
6
resources/sass/fo/partials/_partials.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import "breeding-card";
|
||||
@import "job-card";
|
||||
@import "news-card";
|
||||
@import "product-card-tiny";
|
||||
@import "product-card";
|
||||
@import "recipe-card";
|
||||
7
resources/sass/fo/partials/_product-card-tiny.scss
Normal file
7
resources/sass/fo/partials/_product-card-tiny.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.product-card-tiny {
|
||||
.nutriscore {
|
||||
bottom: -1rem;
|
||||
left: -1rem;
|
||||
box-shadow: -2px 2px 4px 0 #4e32381f;
|
||||
}
|
||||
}
|
||||
43
resources/sass/fo/partials/_product-card.scss
Normal file
43
resources/sass/fo/partials/_product-card.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
.product-card {
|
||||
.product-card-tag {
|
||||
top: -5%;
|
||||
left: -1rem;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.product-card-packaging {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
.product-card-product {
|
||||
bottom: 1rem;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card-favorite-filled {
|
||||
right: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url('@/images/common/red-heart.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.product-card-favorite-empty {
|
||||
right: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url('@/images/common/empty-heart.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.product-card-bottom-part {
|
||||
top: -1rem;
|
||||
|
||||
.product-card-view-more {
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
resources/sass/fo/partials/_recipe-card.scss
Normal file
33
resources/sass/fo/partials/_recipe-card.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
.recipe-card {
|
||||
.recipe-card-product {
|
||||
left: 1rem;
|
||||
filter: drop-shadow(0 1px 9px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.recipe-card-favorite-filled {
|
||||
right: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url('@/images/common/red-heart.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.recipe-card-favorite-empty {
|
||||
right: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url('@/images/common/empty-heart.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.recipe-card-bottom-part {
|
||||
top: -1rem;
|
||||
|
||||
.recipe-tag {
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +33,9 @@
|
|||
.w#{$infix}-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
.w#{$infix}-fit {
|
||||
width: fit-content !important;
|
||||
}
|
||||
|
||||
@each $prop, $unit in (width: vw, height: vh) {
|
||||
@each $size in [25, 50, 75, 100] {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,6 @@
|
|||
@return $string;
|
||||
}
|
||||
|
||||
|
||||
@mixin text-inset-shadow($color) {
|
||||
background-clip: text;
|
||||
background-color: rgb(0 0 0 / 75%);
|
||||
|
|
|
|||
|
|
@ -41,4 +41,29 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
});
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// * BREEDING CARDS
|
||||
const breedingCards = document.getElementsByClassName("breeding-card");
|
||||
for (const breedingCard of breedingCards) {
|
||||
const breedingCardBtns = breedingCard.getElementsByClassName("btn");
|
||||
const breedingCardTexts = breedingCard.getElementsByTagName("p");
|
||||
breedingCard.addEventListener("mouseenter", () => {
|
||||
for (const breedingCardBtn of breedingCardBtns) {
|
||||
breedingCardBtn.classList.remove("btn-quint");
|
||||
breedingCardBtn.classList.add("btn-secondary");
|
||||
}
|
||||
for (const breedingCardText of breedingCardTexts) {
|
||||
breedingCardText.classList.remove("text-white");
|
||||
}
|
||||
});
|
||||
breedingCard.addEventListener("mouseleave", () => {
|
||||
for (const breedingCardBtn of breedingCardBtns) {
|
||||
breedingCardBtn.classList.remove("btn-secondary");
|
||||
breedingCardBtn.classList.add("btn-quint");
|
||||
}
|
||||
for (const breedingCardText of breedingCardTexts) {
|
||||
breedingCardText.classList.add("text-white");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
251
resources/views/fo/pages/partials-demo.blade.php
Normal file
251
resources/views/fo/pages/partials-demo.blade.php
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
@extends('fo.layout')
|
||||
|
||||
@section('title', __('Accueil'))
|
||||
@section('description', __('Description site'))
|
||||
@section('breadcrumb', request()->route()->getName())
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>{{ __('Partials elements') }}</h1>
|
||||
<h2>{{ __('Breeding cards') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
{{-- BREEDING CARDS --}}
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
@include('fo.partials.breeding-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/breeder.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'text' => __('L\'élevage des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
@include('fo.partials.breeding-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/breeder.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'text' => __('Le métier d\'éleveur de volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
@include('fo.partials.breeding-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/breeder.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'text' => __('L\'alimentation des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
@include('fo.partials.breeding-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/breeder.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'text' => __('La santé des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
{{-- NEWS CARDS --}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>{{ __('News cards') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.news-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/news.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'date' => now()->subDays(rand(0, 31)),
|
||||
'text' => __('L\'élevage des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.news-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/news.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'date' => now()->subDays(rand(0, 31)),
|
||||
'text' => __('L\'élevage des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.news-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/news.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'date' => now()->subDays(rand(0, 31)),
|
||||
'text' => __('L\'élevage des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.news-card', [
|
||||
'picture' => [
|
||||
'src' => 'resources/assets/images/tmp/news.png',
|
||||
'alt' => 'Image alt',
|
||||
'title' => 'Image title',
|
||||
],
|
||||
'date' => now()->subDays(rand(0, 31)),
|
||||
'text' => __('L\'élevage des volailles'),
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
{{-- PRODUCT CARDS TINY VERSION --}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>{{ __('Product cards - Tiny version') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card-tiny')
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card-tiny')
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card-tiny')
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card-tiny')
|
||||
</div>
|
||||
</div>
|
||||
{{-- PRODUCT CARDS --}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>{{ __('Product cards') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card', [
|
||||
'productPicture' => Vite::asset('resources/assets/images/tmp/nuggets.png'),
|
||||
'isNew' => true,
|
||||
'name' => __('Sauté de dinde sans os sans peau'),
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card', [
|
||||
'name' => __('Sauté de dinde sans os sans peau'),
|
||||
'tag' => [
|
||||
'src' => Vite::asset('resources/assets/images/tmp/product-tag.png'),
|
||||
'alt' => 'Alt tag',
|
||||
'title' => 'Title tag',
|
||||
],
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card', [
|
||||
'isNew' => true,
|
||||
'name' => __('Sauté de dinde sans os sans peau'),
|
||||
'tag' => [
|
||||
'src' => Vite::asset('resources/assets/images/tmp/product-tag.png'),
|
||||
'alt' => 'Alt tag',
|
||||
'title' => 'Title tag',
|
||||
],
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.product-card', [
|
||||
'productPicture' => Vite::asset('resources/assets/images/tmp/nuggets.png'),
|
||||
'name' => __('Sauté de dinde sans os sans peau'),
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
{{-- RECIPE CARDS --}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>{{ __('Recipe cards') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.recipe-card')
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.recipe-card')
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.recipe-card')
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.recipe-card')
|
||||
</div>
|
||||
</div>
|
||||
{{-- JOB CARDS --}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>{{ __('Job cards') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.job-card', [
|
||||
'picture' => [
|
||||
'src' => Vite::asset('resources/assets/images/tmp/job.jpg'),
|
||||
'alt' => 'Alt image',
|
||||
'title' => 'Title image',
|
||||
],
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.job-card', [
|
||||
'picture' => [
|
||||
'src' => Vite::asset('resources/assets/images/tmp/job.jpg'),
|
||||
'alt' => 'Alt image',
|
||||
'title' => 'Title image',
|
||||
],
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.job-card', [
|
||||
'picture' => [
|
||||
'src' => Vite::asset('resources/assets/images/tmp/job.jpg'),
|
||||
'alt' => 'Alt image',
|
||||
'title' => 'Title image',
|
||||
],
|
||||
])
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||
@include('fo.partials.job-card', [
|
||||
'picture' => [
|
||||
'src' => Vite::asset('resources/assets/images/tmp/job.jpg'),
|
||||
'alt' => 'Alt image',
|
||||
'title' => 'Title image',
|
||||
],
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
27
resources/views/fo/partials/breeding-card.blade.php
Normal file
27
resources/views/fo/partials/breeding-card.blade.php
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{{--
|
||||
VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT
|
||||
|
||||
$picture || Elements of the img tag. || array<string, string> || REQUIRED ||
|
||||
$text || Text displayed in the card. || string || REQUIRED ||
|
||||
$link || Link to redirect in the button. || string || REQUIRED ||
|
||||
$linkNewTab || Should the link be opened in a new tab ? || boolean || OPTIONNAL || false
|
||||
--}}
|
||||
|
||||
<div class="breeding-card bottom-left-shadow position-relative card mb-5 border-0 bg-transparent">
|
||||
<div class="card-img-top line-border-small img-wrapper bg-white p-2">
|
||||
<img class="w-100 line-border-small" src="{{ Vite::asset($picture['src']) }}" title="{{ $picture['alt'] }}"
|
||||
alt="{{ $picture['title'] }}">
|
||||
</div>
|
||||
<div class="card-body position-absolute w-100 d-flex flex-column p-0">
|
||||
<div class="position-relative">
|
||||
<div class="line-border-small text-zone pb-4 pt-3">
|
||||
<p class="text-uppercase fs-4 f-bourton-base px-4 pt-3 text-white">{{ $text }}</p>
|
||||
</div>
|
||||
<div class="position-absolute w-100 d-flex justify-content-center breeding-card-btn">
|
||||
<a class="btn btn-quint f-bourton-base" href="{{ $link }}"
|
||||
@if (!empty($linkNewTab)) target="_blank" @endif>{{ __('En savoir plus') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
24
resources/views/fo/partials/job-card.blade.php
Normal file
24
resources/views/fo/partials/job-card.blade.php
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="job-card bottom-left-shadow card position-relative mb-4 border-0 bg-transparent">
|
||||
<div class="line-border-small">
|
||||
<div class="card-img-top img-wrapper bg-white p-2">
|
||||
<img class="w-100 line-border-small" src="{{ $picture['src'] }}" title="{{ $picture['alt'] }}" alt="{{ $picture['title'] }}">
|
||||
</div>
|
||||
<div class="line-border-small bg-white">
|
||||
<div class="card-body p-4">
|
||||
<p class="f-bourton-base text-uppercase fs-5 text-center">{{ __('Qualité - Sécurité - Environnement') }}</p>
|
||||
<ul class="p-0 text-center">
|
||||
<li>{{ __('Directeur régional') }}</li>
|
||||
<li>{{ __('Chef de secteur') }}</li>
|
||||
<li>{{ __('Compte-clé') }}</li>
|
||||
<li>{{ __('Assistant commercial') }}</li>
|
||||
<li>{{ __('Télévendeur') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-absolute w-100 d-flex justify-content-center job-card-view-more">
|
||||
<a class="btn btn-secondary f-bourton-base w-fit" href="#CHANGEME" title="{{ __('Voir les offres') }}">
|
||||
{{ __('Voir les offres') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
26
resources/views/fo/partials/news-card.blade.php
Normal file
26
resources/views/fo/partials/news-card.blade.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{{--
|
||||
VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT
|
||||
|
||||
$picture || Elements of the img tag. || array<string, string> || REQUIRED ||
|
||||
$text || Text displayed in the card. || string || REQUIRED ||
|
||||
$link || Link to redirect in the button. || string || REQUIRED ||
|
||||
--}}
|
||||
|
||||
<div class="news-card bottom-left-shadow card border-0 bg-transparent">
|
||||
<a class="text-decoration-none" href="{{ $link }}" title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
|
||||
<div class="line-border-small bg-white">
|
||||
<div class="card-img-top position-relative">
|
||||
<img class="w-100 line-border-small" src="{{ Vite::asset($picture['src']) }}" title="{{ $picture['alt'] }}"
|
||||
alt="{{ $picture['title'] }}">
|
||||
<div class="position-absolute tag">
|
||||
<p class="text-uppercase rotate-left text-bg-quad f-bourton-base fs-5 px-2 py-1">{{ __('Actu') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<p class="text-small f-bakerie-rough">{{ $date->format('d/m/Y') }}</p>
|
||||
<p class="text-uppercase fs-4 f-bourton-base">
|
||||
{{ __('Le gaulois s\'engage avec ses équipes pour sauver un enfant avec mécénat chirurgie cardiaque') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
23
resources/views/fo/partials/product-card-tiny.blade.php
Normal file
23
resources/views/fo/partials/product-card-tiny.blade.php
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<div class="card bottom-left-shadow position-relative product-card-tiny border-0 bg-transparent">
|
||||
<div class="container-fluid line-border-small bg-white px-4 py-3">
|
||||
<div class="row mb-3">
|
||||
<div class="col-4 d-flex align-items-center">
|
||||
<div class="w-100 position-relative">
|
||||
<img class="w-100" src="{{ Vite::asset('resources/assets/images/tmp/packaging.png') }}" title="#CHANGEME"
|
||||
alt="#CHANGEME" />
|
||||
<img class="position-absolute w-75 nutriscore" src="{{ Vite::asset('resources/assets/images/tmp/nutriscore-b.png') }}"
|
||||
title="#CHANGEME" alt="#CHANGEME" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="d-flex flex-column justify-content-around h-100">
|
||||
<p class="text-uppercase f-bourton-base fs-4">{{ __('Sauté de dinde sans os sans peau') }}</p>
|
||||
<a class="btn btn-secondary f-bourton-base w-fit" href="#CHANGEME"
|
||||
title="{{ __('Voir le produit :name', ['name' => '#CHANGEME']) }}">
|
||||
{{ __('Voir le produit') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
39
resources/views/fo/partials/product-card.blade.php
Normal file
39
resources/views/fo/partials/product-card.blade.php
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<div class="position-relative product-card bottom-left-shadow mt-3 py-3">
|
||||
{{-- FIXME: Le haut de la partie tertiary doit être découpée, mais je n'arrive pas à le faire sans dégommer les images et en gardant une bonne hauteur ... --}}
|
||||
<div class="bg-tertiary position-relative d-flex justify-content-center pb-5">
|
||||
<img src="{{ Vite::asset('resources/assets/images/tmp/packaging.png') }}" title="#CHANGEME" alt="#CHANGEME"
|
||||
@class([
|
||||
'w-50 rotate-right product-card-packaging',
|
||||
'me-3 ms-auto' => !empty($productPicture),
|
||||
]) />
|
||||
|
||||
@if (!empty($isNew))
|
||||
<img class="position-absolute product-card-tag" src="{{ Vite::asset('resources/assets/images/tmp/tag-new.svg') }}"
|
||||
title="{{ __('Tag pour un nouveau produit') }}" alt="{{ __('Tag pour un nouveau produit') }}" />
|
||||
@elseif (!empty($tag))
|
||||
<img class="position-absolute product-card-tag w-25" src="{{ $tag['src'] }}" title="{{ $tag['title'] }}"
|
||||
alt="{{ $tag['alt'] }}" />
|
||||
@endif
|
||||
@if (!empty($productPicture))
|
||||
<img class="w-75 position-absolute product-card-product" src="{{ $productPicture }}" title="#CHANGEME" alt="#CHANGEME" />
|
||||
@endif
|
||||
{{-- FIXME: Ajouter condition si produit déjà aux favoris => Coeur rouge --}}
|
||||
@if (rand(0, 1))
|
||||
<button class="btn btn-link position-absolute product-card-favorite-empty z-1 bottom-0" title="Ajouter aux favoris"></button>
|
||||
@else
|
||||
<button class="btn btn-link position-absolute product-card-favorite-filled z-1 bottom-0" title="Retirer des favoris"></button>
|
||||
@endif
|
||||
</div>
|
||||
{{-- BOTTOM PART --}}
|
||||
<div class="position-relative">
|
||||
<div class="line-border-small position-relative d-flex flex-column align-items-center product-card-bottom-part bg-white pb-3">
|
||||
<p class="text-uppercase f-bourton-base fs-4 my-4 px-4 text-center">{{ $name }}</p>
|
||||
</div>
|
||||
<div class="position-absolute w-100 d-flex justify-content-center bottom-0">
|
||||
<a class="btn btn-secondary f-bourton-base product-card-view-more w-fit" href="#CHANGEME"
|
||||
title="{{ __('Voir le produit :name', ['name' => $name]) }}">
|
||||
{{ __('Voir le produit') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
44
resources/views/fo/partials/recipe-card.blade.php
Normal file
44
resources/views/fo/partials/recipe-card.blade.php
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<div class="recipe-card bottom-left-shadow">
|
||||
<div class="position-relative d-flex justify-content-center">
|
||||
<a class="text-decoration-none" href="#CHANGEME" title="{{ __('Accéder à la recette : :name', ['name' => '#CHANGEME']) }}">
|
||||
<img class="w-100 line-border-small" src="{{ Vite::asset('resources/assets/images/tmp/product-picture.png') }}" title="#CHANGEME"
|
||||
alt="#CHANGEME" />
|
||||
</a>
|
||||
<img class="w-25 position-absolute recipe-card-product rotate-left z-1 bottom-0"
|
||||
src="{{ Vite::asset('resources/assets/images/tmp/packaging.png') }}" title="#CHANGEME" alt="#CHANGEME" />
|
||||
|
||||
{{-- FIXME: Ajouter condition si recette déjà aux favoris => Coeur rouge --}}
|
||||
@if (rand(0, 1))
|
||||
<button class="btn btn-link position-absolute recipe-card-favorite-empty z-1 bottom-0" title="Ajouter aux favoris"></button>
|
||||
@else
|
||||
<button class="btn btn-link position-absolute recipe-card-favorite-filled z-1 bottom-0" title="Retirer des favoris"></button>
|
||||
@endif
|
||||
</div>
|
||||
<div class="line-border-small position-relative d-flex flex-column align-items-center recipe-card-bottom-part bg-white px-3 pt-5">
|
||||
<p class="text-uppercase fs-4 f-bourton-base text-center">
|
||||
{{ __('Poulet à la moutarde, aux olives noires et herbes de provence') }}
|
||||
</p>
|
||||
{{-- PICTOS --}}
|
||||
<div class="d-flex justify-content-around w-100">
|
||||
<p class="text-uppercase fs-5 f-bourton-base">
|
||||
<img src="{{ Vite::asset('resources/assets/images/recipes/clock.svg') }}" title="#CHANGEME" alt="#CHANGEME" />
|
||||
{{ __('1h32') }}
|
||||
</p>
|
||||
<p class="text-uppercase fs-5 f-bourton-base">
|
||||
<img src="{{ Vite::asset('resources/assets/images/recipes/cooking-pot.svg') }}" title="#CHANGEME" alt="#CHANGEME" />
|
||||
{{ __('40min') }}
|
||||
</p>
|
||||
<p class="text-uppercase fs-5 f-bourton-base">
|
||||
<img src="{{ Vite::asset('resources/assets/images/recipes/toque.svg') }}" title="#CHANGEME" alt="#CHANGEME" />
|
||||
{{ __('facile') }}
|
||||
</p>
|
||||
</div>
|
||||
{{-- TAGS --}}
|
||||
<div class="d-flex justify-content-center pb-3">
|
||||
<p class="badge recipe-tag bg-tertiary text-secondary text-uppercase f-catamaran fw-normal mx-3 px-3">{{ __('tag') }}
|
||||
</p>
|
||||
<p class="badge recipe-tag bg-tertiary text-secondary text-uppercase f-catamaran fw-normal mx-3 px-3">{{ __('tag') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,6 +10,7 @@ Route::middleware(['throttle:credentials'])
|
|||
// * Dev route only
|
||||
if (app()->environment() === 'local') {
|
||||
Route::view('/bs-demo', 'fo.pages.bs-demo')->name('bs-demo');
|
||||
Route::view('/partials-demo', 'fo.pages.partials-demo')->name('partials-demo');
|
||||
}
|
||||
|
||||
Route::get('/', [HomeController::class, 'index'])->name('homepage');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue