WIP: add joinus page

app/Http/Controllers/Fo/StaticPageController.php

@@ -5,14 +5,18 @@ namespace App\Http\Controllers\Fo;
 use App\Enums\StaticPageType;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Fo\ContactRequest;
-use App\Models\Explorerpage;
+use App\Http\Requests\Fo\JoinusRequest;
 use App\Mail\SendContactMail;
+use App\Mail\SendJoinusMail;
 use App\Models\Convictionpage;
+use App\Models\Explorerpage;
 use App\Models\Homepage;
+use App\Models\Joinuspage;
 use App\Models\News;
 use App\Models\Range;
 use App\Models\SeasonalSection;
 use App\Models\StaticPage;
+use App\Models\Testimonial;
 use Illuminate\Support\Facades\Mail;
 
 class StaticPageController extends Controller
@@ -38,8 +42,7 @@ class StaticPageController extends Controller
      */
     public function legals(StaticPage $legalPage)
     {
-        $legalPage = StaticPage::query()->where('type', StaticPageType::legals)
-            ->get();
+        $legalPage = StaticPage::query()->where('type', StaticPageType::legals)->get();
         return view('fo.pages.legals', ['staticPageModel' => $legalPage[0]]);
     }
 
@@ -51,8 +54,7 @@ class StaticPageController extends Controller
      */
     public function policies(StaticPage $policiesPage)
     {
-        $policiesPage = StaticPage::query()->where('type', StaticPageType::confidentiality)
-            ->get();
+        $policiesPage = StaticPage::query()->where('type', StaticPageType::confidentiality)->get();
         return view('fo.pages.legals', ['staticPageModel' => $policiesPage[0]]);
     }
 
@@ -154,4 +156,40 @@ class StaticPageController extends Controller
             'staticPageModel',
         ));
     }
+
+    /**
+     * Display the explorer and gastonome page.
+     *
+     * @return \Illuminate\Contracts\View\View
+     */
+    public function joinus(): \Illuminate\Contracts\View\View
+    {
+        /** @var \App\Models\StaticPage $staticPageModel */
+        $staticPageModel = StaticPage::query()->where('type', StaticPageType::joinus)->firstOrFail();
+
+        /** @var \App\Models\Joinuspage $joinuspageModel */
+        $joinuspageModel = Joinuspage::query()->firstOrFail();
+
+        /** @var \App\Models\Testimonial $testimonialModels */
+        $testimonialModels = Testimonial::query()->get();
+
+        return view('fo.pages.join-us', compact('staticPageModel', 'joinuspageModel', 'testimonialModels'));
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @param \App\Http\Requests\Fo\JoinusRequest $request
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function joinusForm(JoinusRequest $request): \Illuminate\Http\RedirectResponse
+    {
+        Mail::to(\config('mail.from.address'))->send(new SendJoinusMail((object)$request->validated()));
+
+        return redirect()->route('fo.joinus.show')
+            ->with(
+                'success',
+                'Bonjour, votre candidature a bien été transmise. nous vous en remercions. Cordialement, l’équipe Agis.'
+            );
+    }
 }

app/Http/Middleware/SecureHeaders.php

@@ -63,7 +63,8 @@ class SecureHeaders
             'frame-src ' . implode(' ', [
                 'https://www.google.com/recaptcha/',
                 'https://recaptcha.google.com/recaptcha/',
-                'https://www.google.com/maps/'
+                'https://www.google.com/maps/',
+                'https://www.youtube.com',
             ]) . ';',
             "font-src 'self' data: " . \implode(' ', [
                 // * VITE DEV
@@ -101,7 +102,10 @@ class SecureHeaders
             'Content-Security-Policy',
             implode(' ', $cspPolicies) . $reportUri
         );
-        $response->headers->set('Feature-Policy', 'fullscreen \'self\';');
+        $response->headers->set('Feature-Policy', \implode(',', [
+            'fullscreen', 'accelerometer', 'encrypted-media',
+            'gyroscope', 'picture-in-picture'
+        ]) . ';');
         return $response;
     }
 

app/Http/Requests/Fo/JoinusRequest.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Requests\Fo;
+
+use App\Lib\Helpers\ToolboxHelper;
+use Illuminate\Foundation\Http\FormRequest;
+
+class JoinusRequest extends FormRequest
+{
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        ToolboxHelper::validateRecaptcha($this, \config('services.google.recaptcha.version'));
+
+        return [
+            'last_name'  => 'required|string|between:3,255',
+            'first_name' => 'required|string|between:3,255',
+            'email'      => 'required|email:rfc,strict,dns,spoof,filter|max:255',
+            'phone'      => 'required|numeric|min:0',
+            'message'    => 'required|string|between:3,255',
+            "file"       => "sometimes|nullable|mimes:pdf|max:10000"
+        ];
+    }
+
+    /**
+     * Get custom attributes for validator errors.
+     *
+     * @return array
+     */
+    public function attributes(): array
+    {
+        return [
+            'first_name' => trans('validation.attributes.first_name'),
+            'last_name'  => trans('validation.attributes.last_name'),
+            'email'      => trans('validation.attributes.email'),
+            'phone'      => trans('validation.attributes.phone'),
+            'message'    => trans('validation.attributes.message'),
+            'file'       => trans('validation.attributes.file'),
+        ];
+    }
+}

app/Mail/SendJoinusMail.php

@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Mail;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Mail\Mailable;
+use Illuminate\Mail\Mailables\Address;
+use Illuminate\Mail\Mailables\Attachment;
+use Illuminate\Mail\Mailables\Content;
+use Illuminate\Mail\Mailables\Envelope;
+use Illuminate\Queue\SerializesModels;
+
+class SendJoinusMail extends Mailable
+{
+    use Queueable;
+    use SerializesModels;
+
+    /**
+     * @var \App\Mail\Joinus
+     */
+    private \stdClass $data;
+
+    /**
+     * Create a new message instance.
+     *
+     * @param \stdClass $data
+     * @return void
+     * @phpcs:disable Generic.Metrics.CyclomaticComplexity.TooHigh
+     */
+    public function __construct(\stdClass $data)
+    {
+        $this->data = clone $data;
+    }
+
+    /**
+     * Get the message envelope.
+     *
+     * @return \Illuminate\Mail\Mailables\Envelope
+     */
+    public function envelope(): \Illuminate\Mail\Mailables\Envelope
+    {
+        return new Envelope(
+            from: new Address(
+                $this->data->email,
+                ($this->data->first_name !== null || $this->data->last_name !== null) ?
+                    (($this->data->first_name ?? '') . " " . ($this->data->last_name ?? '')) :
+                    null
+            ),
+            to: [new Address(config('mail.from.address'), config('mail.from.name'))],
+            subject: sprintf('%s - %s', __('Candidature spontanée'), config('app.name')),
+        );
+    }
+
+    /**
+     * Get the message content definition.
+     *
+     * @return \Illuminate\Mail\Mailables\Content
+     */
+    public function content(): \Illuminate\Mail\Mailables\Content
+    {
+        return new Content(
+            markdown: 'emails.send-joinus-form',
+            with: ['data' => $this->data],
+        );
+    }
+
+    /**
+     * Get the attachments for the message.
+     *
+     * @return array<int, \Illuminate\Mail\Mailables\Attachment>
+     */
+    public function attachments(): array
+    {
+        $attachments = [];
+        if (isset($this->data->file)) {
+            $attachments[] = Attachment::fromPath($this->data->file->getRealPath())
+                ->as($this->data->file->getClientOriginalName())
+                ->withMime($this->data->file->getClientMimeType());
+        }
+        return $attachments;
+    }
+}
+
+/**
+ * @property string                        $last_name
+ * @property string                        $first_name
+ * @property string                        $email
+ * @property string                        $phone
+ * @property string                        $message
+ * @property \Illuminate\Http\UploadedFile $file
+ * @phpcs:disable PSR1.Classes.ClassDeclaration.MultipleClasses
+ */
+class Contact extends \stdClass
+{
+}

database/seeders/ConvictionpageSeeder.php

@@ -14,12 +14,6 @@ class ConvictionpageSeeder extends Seeder
      */
     public function run()
     {
-        // Disable model events to allow Convictionpage creation in seeders.
-        try {
-            Convictionpage::unsetEventDispatcher();
-            Convictionpage::factory(1)->create();
-        } finally {
-            Convictionpage::setEventDispatcher(new \Illuminate\Events\Dispatcher());
-        }
+        Convictionpage::factory(1)->createQuietly();
     }
 }

database/seeders/ExplorerpageSeeder.php

@@ -16,28 +16,22 @@ class ExplorerpageSeeder extends Seeder
      */
     public function run()
     {
-        // Disable model events to allow Explorerpage creation in seeders.
-        try {
-            FileStorageHelper::removeModelFiles(new Explorerpage());
-            Explorerpage::unsetEventDispatcher();
-            Explorerpage::factory(1)->create([
-                'picture_1' => FileStorageHelper::storeFile(new Explorerpage(), new \SplFileInfo(
-                    \resource_path('../database/factories/assets/explorerpages/default-picture-265x364.png')
-                )),
-                'picture_2' => FileStorageHelper::storeFile(new Explorerpage(), new \SplFileInfo(
-                    \resource_path('../database/factories/assets/explorerpages/default-picture-265x364.png')
-                )),
-                'picture_3' => FileStorageHelper::storeFile(new Explorerpage(), new \SplFileInfo(
-                    \resource_path('../database/factories/assets/explorerpages/default-picture-265x364.png')
-                )),
-            ]);
+        FileStorageHelper::removeModelFiles(new Explorerpage());
+        Explorerpage::factory(1)->createQuietly([
+            'picture_1' => FileStorageHelper::storeFile(new Explorerpage(), new \SplFileInfo(
+                \resource_path('../database/factories/assets/explorerpages/default-picture-265x364.png')
+            )),
+            'picture_2' => FileStorageHelper::storeFile(new Explorerpage(), new \SplFileInfo(
+                \resource_path('../database/factories/assets/explorerpages/default-picture-265x364.png')
+            )),
+            'picture_3' => FileStorageHelper::storeFile(new Explorerpage(), new \SplFileInfo(
+                \resource_path('../database/factories/assets/explorerpages/default-picture-265x364.png')
+            )),
+        ]);
 
-            $commitments = Commitment::query()->get();
-            Explorerpage::query()->each(function (Explorerpage $explorerpage) use ($commitments) {
-                $explorerpage->commitments()->saveMany($commitments->random(\rand(3, 12)));
-            });
-        } finally {
-            Explorerpage::setEventDispatcher(new \Illuminate\Events\Dispatcher());
-        } //end try
+        $commitments = Commitment::query()->get();
+        Explorerpage::query()->each(function (Explorerpage $explorerpage) use ($commitments) {
+            $explorerpage->commitments()->saveMany($commitments->random(\rand(3, 12)));
+        });
     }
 }

database/seeders/HomepageSeeder.php

@@ -15,17 +15,11 @@ class HomepageSeeder extends Seeder
      */
     public function run()
     {
-        // Disable model events to allow Homepage creation in seeders.
-        try {
-            FileStorageHelper::removeModelFiles(new Homepage());
-            Homepage::unsetEventDispatcher();
-            Homepage::factory(1)->create([
-                'picture' => FileStorageHelper::storeFile(new Homepage(), new \SplFileInfo(\resource_path(
-                    '../database/factories/assets/homepages/default-picture-640x390.png'
-                ))),
-            ]);
-        } finally {
-            Homepage::setEventDispatcher(new \Illuminate\Events\Dispatcher());
-        }
+        FileStorageHelper::removeModelFiles(new Homepage());
+        Homepage::factory(1)->createQuietly([
+            'picture' => FileStorageHelper::storeFile(new Homepage(), new \SplFileInfo(\resource_path(
+                '../database/factories/assets/homepages/default-picture-640x390.png'
+            ))),
+        ]);
     }
 }

database/seeders/JoinuspageSeeder.php

@@ -14,12 +14,6 @@ class JoinuspageSeeder extends Seeder
      */
     public function run()
     {
-        // Disable model events to allow Joinuspage creation in seeders.
-        try {
-            Joinuspage::unsetEventDispatcher();
-            Joinuspage::factory(1)->create();
-        } finally {
-            Joinuspage::setEventDispatcher(new \Illuminate\Events\Dispatcher());
-        }
+        Joinuspage::factory(1)->createQuietly();
     }
 }

resources/assets/images/global/bg-yellow.svg

@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_2" data-name="Calque 2"
-    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 508" preserveAspectRatio="none">
+<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 508" preserveAspectRatio="none">
     <defs>
         <style>
-      .cls-1 {
-        fill: #ffd264;
-        stroke-width: 0px;
-      }
+            .cls-1 {
+                fill: #ffd264;
+                stroke-width: 0px;
+            }
         </style>
     </defs>
     <g id="UNE_ACTU" data-name="UNE ACTU">

resources/lang/en/cookie-notice.php

@@ -0,0 +1,43 @@
+<?php
+
+// * Version 3.0.8
+// phpcs:disable
+return [
+    'button_customize_cookies'  => 'Customize cookies',
+    'button_forbid'             => 'Prohibit',
+    'button_allow'              => 'Allow',
+    'button_forbid_all'         => 'Reject all',
+    'button_allow_all'          => 'Accept all',
+    'button_customize'          => 'Customize',
+    'button_back'               => 'Back',
+    'banner_title'              => 'The :site_name website uses cookies!',
+    'banner_text_open'          => 'This website stores cookies on your computer. :site_name uses this information to improve and personalize your browsing experience, as well as for analysis and indicators concerning our visitors both on this website and on other media. You can click on "Accept" if you consent to the use of these cookies.',
+    'banner_text'               => 'We use cookies to ensure the smooth operation of our site and for analytical purposes. By continuing to browse this site or by closing this banner, you consent to the use of these cookies.',
+    'banner_details'            => 'If you refuse the use of cookies, your information will not be tracked during your visit to this site. A cookie will be used in your browser to remember not to track your preferences. Some features will not be accessible. You can change your mind and modify your consent at any time by returning to this site.',
+    'banner_details_link'       => 'To find out more about the cookies we use, please consult our privacy policy.',
+    'banner_details_link_title' => 'Privacy policy',
+    'banner_more_details'       => 'More details...',
+    'banner_less_details'       => 'Fewer details...',
+    'Panel_title'               => 'Cookie management panel',
+    'Panel_subtitle'            => 'Your privacy is our priority',
+    'Panel_details'             => 'The functionalities of this site are based on services provided by third parties. If you accept, these third parties will deposit cookies that will enable you to view content on the site hosted by these third parties. Through these cookies, these third parties will collect and use your browsing data for their own purposes, in accordance with their privacy policy (link below). This page allows you to give or withdraw your consent, either globally or service by service.',
+    'custom' => [
+        'youtube'   => [
+            'name'        => 'Youtube',
+            'description' => 'Cookies placed via video sharing services are intended to allow the user to view multimedia content directly on the site.',
+            'labelLink'   => 'Learn more',
+            'warning'     => 'You must accept cookies to view this video',
+        ],
+        'matomo'    => [
+            'title'       => 'Matomo',
+            'description' => 'Audience measurement services are used to generate traffic statistics, which are useful for improving the site.',
+            'labelLink'   => 'Learn more',
+        ],
+        'recaptcha' => [
+            'title'       => 'reCAPTACHA',
+            'description' => 'The purpose of the cookies placed on forms via the recaptcha is to prevent them from being submitted by robots.',
+            'labelLink'   => 'Learn more',
+            'warning'     => 'You must accept cookies to send the form',
+        ]
+    ]
+];

resources/lang/fr/cookie-notice.php

@@ -3,34 +3,41 @@
 // * Version 3.0.8
 // phpcs:disable
 return [
-    'button_customize_cookies' => 'Personnaliser les cookies',
-    'button_forbid' => 'Interdire',
-    'button_allow' => 'Autoriser',
-    'button_forbid_all' => 'Tout refuser',
-    'button_allow_all' => 'Tout accepter',
-    'button_customize' => 'Personnaliser',
-    'button_back' => 'Retour',
-    'banner_title' => 'Le site internet :site_name utilise des cookies !',
-    'banner_text_open' => 'Ce site web stocke les cookies sur votre ordinateur. :site_name utilise ces informations afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l’analyse et les indicateurs concernant nos visiteurs à la fois sur ce site web et sur d’autres supports. Vous pouvez cliquer sur « Accepter » si vous consentez à l’utilisation de ces cookies.',
-    'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisationde ces cookies.',
-    'banner_details' => 'Si vous refusez l’utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles. Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.',
-    'banner_details_link' =>
-    'Pour en savoir plus sur les cookies que nous utilisons, consultez notre charte de confidentialité.',
+    'button_customize_cookies'  => 'Personnaliser les cookies',
+    'button_forbid'             => 'Interdire',
+    'button_allow'              => 'Autoriser',
+    'button_forbid_all'         => 'Tout refuser',
+    'button_allow_all'          => 'Tout accepter',
+    'button_customize'          => 'Personnaliser',
+    'button_back'               => 'Retour',
+    'banner_title'              => 'Le site internet :site_name utilise des cookies !',
+    'banner_text_open'          => 'Ce site web stocke les cookies sur votre ordinateur. :site_name utilise ces informations afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l’analyse et les indicateurs concernant nos visiteurs à la fois sur ce site web et sur d’autres supports. Vous pouvez cliquer sur « Accepter » si vous consentez à l’utilisation de ces cookies.',
+    'banner_text'               => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisationde ces cookies.',
+    'banner_details'            => 'Si vous refusez l’utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles. Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.',
+    'banner_details_link'       => 'Pour en savoir plus sur les cookies que nous utilisons, consultez notre charte de confidentialité.',
     'banner_details_link_title' => 'Charte de confidentialité',
-    'banner_more_details' => 'Plus de détails...',
-    'banner_less_details' => 'Moins de détails...',
-    'Panel_title' => 'Panneau de gestion des cookies',
-    'Panel_subtitle' => 'Le respect de votre vie privée est notre priorité',
-    'Panel_details' => 'Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers. Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers. Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit service par service.',
-
+    'banner_more_details'       => 'Plus de détails...',
+    'banner_less_details'       => 'Moins de détails...',
+    'Panel_title'               => 'Panneau de gestion des cookies',
+    'Panel_subtitle'            => 'Le respect de votre vie privée est notre priorité',
+    'Panel_details'             => 'Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers. Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers. Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit service par service.',
     'custom' => [
-        'matomo' => [
-            'title' => 'Matomo',
+        'youtube'   => [
+            'name'        => 'Youtube',
+            'description' => 'Les cookies placés via les services de partage de vidéos sont destinés à permettre à l\'utilisateur de visionner des contenus multimédias directement sur le site.',
+            'labelLink'   => 'En apprendre plus',
+            'warning'     => 'Vous devez accepter les cookies pour visionner cette vidéo',
+        ],
+        'matomo'    => [
+            'title'       => 'Matomo',
             'description' => 'Les services de mesure d\'audience permettent de générer des statistiques de fréquentation utiles à l\'amélioration du site.',
+            'labelLink'   => 'En apprendre plus',
         ],
         'recaptcha' => [
-            'title' => 'reCAPTACHA',
+            'title'       => 'reCAPTACHA',
             'description' => 'Les cookies qui sont déposés via le recaptcha sur les formulaires ont pour finalité d\'empêcher que ceux-ci ne soient soumis par des robots.',
+            'labelLink'   => 'En apprendre plus',
+            'warning'     => 'Vous devez accepter les cookies pour envoyer le formulaire',
         ]
     ]
 ];

resources/sass/fo/base/_common.scss

@@ -11,6 +11,13 @@ img { max-width: 100%; }
     background-size: 100% 100%;
 }
 
+.bg-agis-grey {
+    background-image: url('@/images/global/bg-grey.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
 .divide {
     height: 4px;
     background-image: url('@/images/homepage/h-bar.svg');

resources/sass/fo/fo.scss

@@ -18,6 +18,7 @@
 // * PAGES.
 @import './pages/homepage';
 @import './pages/ranges';
+@import './pages/joinus';
 @import './pages/contact';
 @import './pages/explorerpage';
 @import './pages/product';

resources/sass/fo/pages/_joinus.scss

@@ -0,0 +1,230 @@
+.joinus {
+    .highlight.black {
+        width: 100%;
+
+        @include media-breakpoint-up(xl) {
+            width: fit-content;
+        }
+    }
+
+    .swiper-joinus .swiper-slide-content,
+    .card {
+        width: 292px;
+    }
+
+    .swiper-joinus {
+        position: relative;
+
+        .swiper-button {
+            &-prev,
+            &-next { width: 3rem; }
+
+            &-next { rotate: 180deg; }
+
+            &-disabled { opacity: .5; }
+        }
+    }
+
+    .details {
+        padding-bottom: 8rem;
+
+        @include media-breakpoint-up(md) {
+            padding-bottom: 5rem;
+        }
+
+        &::after {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 100%;
+            max-width: 30rem;
+            height: 10rem;
+            background: url("@/images/joinus/personaje.svg");
+            background-position: right;
+            background-repeat: no-repeat;
+            background-size: initial;
+            content: "";
+            pointer-events: none;
+            transform: translateX(-50%);
+
+            @include media-breakpoint-up(md) {
+                height: 15rem;
+            }
+        }
+
+        .container {
+            max-width: 30rem;
+
+            .number {
+                width: 3rem;
+
+                @include media-breakpoint-up(md) {
+                    width: 4rem;
+                }
+            }
+
+            .description {
+                width: calc(100% - 4rem);
+            }
+
+            .part1-assets::before {
+                position: absolute;
+                top: -2rem;
+                left: 0;
+                width: 3rem;
+                height: 1rem;
+                background: url("@/images/joinus/green-points.svg");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                content: "";
+                pointer-events: none;
+                transform: rotate(35deg);
+
+                @include media-breakpoint-up(md) {
+                    top: -1rem;
+                    left: -4rem;
+                    width: 4rem;
+                    transform: rotate(55deg);
+                }
+            }
+
+            .part2-assets {
+                p {
+                    line-height: 1.5;
+                }
+
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    left: -6rem;
+                    display: none;
+                    width: 4rem;
+                    height: 18rem;
+                    background: url("@/images/joinus/ladle.svg");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    content: "";
+                    pointer-events: none;
+
+                    @include media-breakpoint-up(md) {
+                        display: block;
+                    }
+                }
+
+                &::after {
+                    position: absolute;
+                    right: -6rem;
+                    bottom: 0;
+                    width: 15rem;
+                    height: 6rem;
+                    background: url("@/images/joinus/sticks.svg");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    content: "";
+                    pointer-events: none;
+
+                    @include media-breakpoint-up(md) {
+                        right: -15rem;
+                        width: 26rem;
+                        height: 10rem;
+                    }
+                }
+            }
+
+            .part3-assets::after {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                width: 6rem;
+                height: 5rem;
+                background: url("@/images/joinus/ingredients-1.svg");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                content: "";
+                pointer-events: none;
+
+                @include media-breakpoint-up(md) {
+                    width: 10rem;
+                    height: 7rem;
+                }
+            }
+
+            .part4-assets {
+                &::before {
+                    position: absolute;
+                    bottom: 2rem;
+                    left: -5rem;
+                    display: none;
+                    width: 3rem;
+                    height: 2rem;
+                    background: url("@/images/joinus/tomato.svg");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    content: "";
+                    pointer-events: none;
+
+                    @include media-breakpoint-up(md) {
+                        display: block;
+                    }
+                }
+
+                &::after {
+                    position: absolute;
+                    right: 4rem;
+                    bottom: 1rem;
+                    width: 3rem;
+                    height: 1rem;
+                    background: url("@/images/joinus/green-points.svg");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    content: "";
+                    pointer-events: none;
+
+                    @include media-breakpoint-up(md) {
+                        right: 6rem;
+                        bottom: 2rem;
+                        width: 6rem;
+                        height: 2rem;
+                    }
+                }
+            }
+
+            .part5-assets::after {
+                position: absolute;
+                bottom: -8rem;
+                left: 2rem;
+                width: 13rem;
+                height: 6rem;
+                background: url("@/images/joinus/ingredients-2.svg");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                content: "";
+                pointer-events: none;
+
+                @include media-breakpoint-up(md) {
+                    bottom: -4rem;
+                    left: -6rem;
+                    width: 22rem;
+                    height: 8rem;
+                    background: url("@/images/joinus/ingredients-3.svg");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+        }
+    }
+
+    #candidature-spontanee {
+        .highlight.black {
+            transform: translateY(-1rem);
+        }
+    }
+}

resources/sass/fo/utilities/_bootstrap-variables.scss

@@ -7,6 +7,8 @@ $secondary: $color-secondary;
 $tertiary: $color-tertiary;
 $quad: $color-quad;
 $quint: $color-quint;
+$sext: $color-sext;
+$sept: $color-sept;
 $success: $color-success;
 $info: $color-info;
 $warning: $color-warning;
@@ -19,6 +21,8 @@ $theme-colors: (
     tertiary: $tertiary,
     quad: $quad,
     quint: $quint,
+    sext: $sext,
+    sept: $sept,
     success: $success,
     info: $info,
     warning: $warning,
@@ -31,6 +35,8 @@ $custom-theme-colors: map.merge($theme-colors,
     'tertiary': $tertiary,
     'quad': $quad,
     'quint': $quint,
+    'sext': $sext,
+    'sept': $sept,
 ));
 $theme-colors: map.merge($theme-colors, $custom-theme-colors);
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value');

resources/sass/fo/utilities/_variables.scss

@@ -11,6 +11,8 @@ $color-secondary: #ffd264;
 $color-tertiary: #ff9251;
 $color-quad: #6e130a;
 $color-quint: #003a5d;
+$color-sext: #e25141;
+$color-sept: #aac27f;
 
 // * BACKGROUNDS COLORS
 $bg-white: $color-white;

resources/ts/fo/base/common.ts

@@ -1,8 +1,8 @@
 import Swiper from "swiper";
 import { Navigation } from "swiper/modules";
 
-// * Video frames.
 document.addEventListener("DOMContentLoaded", function () {
+    // * Video frames.
     const videoFrameList = document.querySelectorAll(
         ".video-frame"
     ) as NodeListOf<HTMLLinkElement>;
@@ -44,6 +44,32 @@ document.addEventListener("DOMContentLoaded", function () {
             });
         }, 300);
     }
+    // * Video inlaid.
+    const videoInlaidList = document.querySelectorAll(
+        ".video-inlaid"
+    ) as NodeListOf<HTMLLinkElement>;
+    for (const videoLink of videoInlaidList) {
+        if (!videoLink.getAttribute("type")) {
+            throw new Error("Missing attribute type");
+        }
+        if (!videoLink.getAttribute("href")) {
+            throw new Error("Missing attribute href");
+        }
+        // @ts-ignore
+        if (window.__CN_VIDEO[videoLink.getAttribute("type")]) {
+            videoLink.innerHTML = "";
+            const newIframe = document.createElement("iframe");
+            newIframe.frameBorder = "0";
+            newIframe.allow = "fullscreen";
+            newIframe.width = "1920px";
+            newIframe.height = "1080px";
+            newIframe.classList.add("w-100");
+            newIframe.classList.add("h-100");
+            newIframe.setAttribute("allowfullscreen", "allowfullscreen");
+            newIframe.src = String(videoLink.getAttribute("href"));
+            videoLink.appendChild(newIframe);
+        }
+    }
     // SWIPER
     const swiperConfig = {
         "swiper-news": {
@@ -51,13 +77,11 @@ document.addEventListener("DOMContentLoaded", function () {
             grabCursor: true,
             slidesPerView: 1,
             spaceBetween: 60,
-            // Navigation arrows
             navigation: {
                 nextEl: ".swiper-button-next",
                 prevEl: ".swiper-button-prev",
             },
             breakpoints: {
-                // when window width is >= 1200px
                 1200: {
                     slidesPerView: 3,
                 },
@@ -68,19 +92,27 @@ document.addEventListener("DOMContentLoaded", function () {
             grabCursor: true,
             slidesPerView: 1,
             spaceBetween: 60,
-            // Navigation arrows
             navigation: {
                 nextEl: ".swiper-button-next",
                 prevEl: ".swiper-button-prev",
             },
             breakpoints: {
-                // when window width is >= 1200px
                 1200: {
                     slidesPerView: 3,
                     spaceBetween: 0,
                 },
             },
         },
+        "swiper-joinus": {
+            modules: [Navigation],
+            grabCursor: true,
+            slidesPerView: 1,
+            spaceBetween: 60,
+            navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+            },
+        },
         "swiper-product-pictures": {
             modules: [Navigation],
             grabCursor: true,

resources/ts/fo/fo.ts

@@ -12,6 +12,7 @@ import "./base/common";
 
 // PAGES
 import "./pages/contact";
+import "./pages/joinus";
 
 // COOKIES
 import CookieNotice from "@ldc-web/cookie-notice";

resources/ts/fo/pages/joinus.ts

@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const joinusPage = document.querySelector("section.joinus");
+    if (joinusPage === null) {
+        return;
+    }
+
+    // * Return string error.
+    function getErrorString(fieldName: string) {
+        return `Élement du dom ${fieldName} inexistant.`;
+    }
+
+    // * Get filename.
+    const inputFile = joinusPage.querySelector("input[name=\"file\"]") as HTMLSelectElement | null;
+    const renderFileName = joinusPage.querySelector("#input-file-name") as HTMLParagraphElement | null;
+    if (inputFile === null) {
+        throw new Error(getErrorString("input[name=\"file\"]"));
+    }
+    if (renderFileName === null) {
+        throw new Error(getErrorString("#input-file-name"));
+    }
+    inputFile.addEventListener("change", function () {
+        renderFileName.textContent = this.value;
+    });
+});

resources/views/emails/send-contact-form.blade.php

@@ -1,7 +1,7 @@
 @component('mail::message')
 # Bonjour,
 
-## Voici un message envoyé depuis le formulaire de contact du site web {{ config('app.name') }} :
+## Voici un message envoyé depuis le formulaire de la page "contact" du site web {{ config('app.name') }} :
 
 ### Information sur l'utilisateur:
 @component('mail::panel')

resources/views/emails/send-joinus-form.blade.php

@@ -0,0 +1,16 @@
+@component('mail::message')
+# Bonjour,
+
+## Voici un message envoyé depuis le formulaire de la page "rejoignez-nous" du site web {{ config('app.name') }} :
+
+### Information sur l'utilisateur:
+@component('mail::panel')
+- **{{ __('validation.attributes.first_name') }}:** {{ $data->first_name ?? '' }}
+- **{{ __('validation.attributes.last_name') }}:** {{ $data->last_name ?? '' }}
+- **{{ __('validation.attributes.email') }}:** {{ $data->email }}
+- **{{ __('validation.attributes.phone') }}:** {{ $data->phone ?? '' }}
+- **{{ __('validation.attributes.message') }}:** {{ $data->message }}
+@endcomponent
+
+L'équipe {{ config('app.name') }}
+@endcomponent

resources/views/fo/layouts/footer.blade.php

@@ -77,8 +77,8 @@
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-uppercase @if (request()->routeIs('CHANGEME')) active @endif" data-bs-toggle="tooltip"
-                            href="#" title="{{ __('Rejoignez-nous') }}">
+                        <a class="nav-link text-uppercase @if (request()->routeIs('fo.joinus.show')) active @endif" data-bs-toggle="tooltip"
+                            href="{{ route('fo.joinus.show') }}" title="{{ __('Rejoignez-nous') }}">
                             {{ __('Rejoignez-nous') }}
                         </a>
                     </li>

resources/views/fo/layouts/nav-list.blade.php

@@ -20,8 +20,8 @@
             href="#" title="{{ __('Nos actualités') }}">
             {{ __('Nos actualités') }}
         </a>
-        <a class="nav-link display-5 fw-bold text-uppercase @if (request()->routeIs('CHANGEME')) active @endif" data-bs-toggle="tooltip"
-            href="#" title="{{ __('Rejoignez-nous') }}">
+        <a class="nav-link display-5 fw-bold text-uppercase @if (request()->routeIs('fo.joinus.show')) active @endif" data-bs-toggle="tooltip"
+            href="{{ route('fo.joinus.show') }}" title="{{ __('Rejoignez-nous') }}">
             {{ __('Rejoignez-nous') }}
         </a>
         <a class="nav-link display-5 fw-bold text-uppercase @if (request()->routeIs('CHANGEME')) active @endif" data-bs-toggle="tooltip"

resources/views/fo/pages/join-us.blade.php

@@ -0,0 +1,266 @@
+@extends('fo.layout')
+
+@section('title', $staticPageModel->seo_title ?? __('Rejoignez-nous'))
+@section('description', $staticPageModel->seo_description ?? __('Rejoignez-nous la description.'))
+@section('breadcrumb',
+    request()->route()->getName())
+
+@section('content')
+    <section class="joinus overflow-hidden">
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <span class="divide d-block w-100 mt-xl-3 my-2"></span>
+                    <h1 class="f-sheldon text-uppercase my-3 text-center">{{ $staticPageModel->title }}</h1>
+                    <span class="divide d-block w-100 mt-xl-3 my-2"></span>
+                </div>
+                <div class="col-12 mb-xl-5">
+                    <p class="lh-sm m-0 mb-3 text-center">
+                        {{ Str::of(__('Après plus de 30 ans de croissance soutenue par l\'innovation, intégrée au groupe familial français LDC, leader de l\'agro-alimentaire, AGIS est désormais une société comptant plus de 800 collaborateurs passionnés répartis sur ses 3 ateliers de production et une plateforme logistiques.'))->ucFirst()->value() }}
+                    </p>
+                    <div class="row justify-content-center">
+                        <div class="col-12 col-xl-5 mb-3 text-center">
+                            <a class="w-100 btn btn-secondary" href="https://recrutement.ldc.fr/fr/annonces?brands=1401">
+                                {{ __('> Découvrir les postes à pourvoir') }}
+                            </a>
+                        </div>
+                        <div class="col-12 col-xl-5 mb-3 text-center">
+                            <a class="w-100 btn btn-secondary" href="#candidature-spontanee">{{ __('> Candidature spontanée') }}</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="details bg-agis-grey position-relative pt-4">
+            <div class="container">
+                <p class="lh-1 fs-5 f-readex-pro text-uppercase fw-bold m-0 text-center">{{ __('les 5 bonnes raisons') }}</p>
+                <p class="lh-1 fs-5 f-readex-pro text-uppercase fw-bold m-0 text-center">{{ __('de devenir') }}</p>
+                <p class="lh-1 fs-5 f-readex-pro text-uppercase fw-bold text-center">{{ __('un explorateur agis') }}</p>
+                {{-- FIRST --}}
+                <div class="part1-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
+                    <div class="number">
+                        <p class="fs-1 f-sheldon text-sext fw-bold w-100 m-0 text-start">{{ __('01') }}</p>
+                    </div>
+                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
+                        <p class="lh-1 m-0">{{ Str::of(__('des hommes et des femmes'))->ucFirst()->value() }}</p>
+                        <p class="lh-1 fs-6 text-sext text-uppercase fw-bold f-readex-pro m-0">{{ __('bienveillants') }}</p>
+                        <p class="lh-1 m-0">{{ __('motivés et impliqués.') }}</p>
+                    </div>
+                </div>
+                {{-- SECOND --}}
+                <div class="part2-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
+                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
+                        <p class="d-flex flex-column text-primary align-items-start justify-content-start fs-5 text-uppercase f-sheldon m-0">
+                            <span>{{ __('innovation') }}</span>
+                            <span>{{ __('qualité') }}</span>
+                            <span>{{ __('performance') }}</span>
+                        </p>
+                        <p class="d-none d-md-block lh-1 m-0">{{ __('sont les meilleurs ingrédients') }}</p>
+                        <p class="d-none d-md-block lh-1 m-0">{{ __('de notre entreprise.') }}</p>
+                    </div>
+                    <div class="number">
+                        <p class="fs-1 f-sheldon text-primary fw-bold w-100 m-0 text-end">{{ __('02') }}</p>
+                    </div>
+                </div>
+                {{-- THIRD --}}
+                <div class="part3-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
+                    <div class="number">
+                        <p class="fs-1 f-sheldon fw-bold text-sept w-100 m-0 text-start">{{ __('03') }}</p>
+                    </div>
+                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
+                        <p class="lh-1 fs-6 text-uppercase text-sept fw-bold f-readex-pro m-0">{{ __('vous aimez') }}</p>
+                        <p class="lh-1 fs-6 text-uppercase text-sept fw-bold f-readex-pro m-0">{{ __('manger ?') }}</p>
+                        <p class="lh-1 m-0">{{ Str::of(__('rejoignez notre équipe'))->ucFirst()->value() }}</p>
+                        <p class="lh-1 m-0">{{ __('de Gastronomes') }}</p>
+                    </div>
+                </div>
+                {{-- FOURTH --}}
+                <div class="part4-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
+                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
+                        <p class="lh-1 m-0">{{ Str::of(__('une entreprise'))->ucFirst()->value() }}</p>
+                        <p class="lh-1 fs-6 text-secondary text-uppercase fw-bold f-readex-pro m-0">{{ __('humaine') }}</p>
+                        <p class="lh-1 m-0">{{ __('& à l\'écoute de ses talents.') }}</p>
+                    </div>
+                    <div class="number">
+                        <p class="fs-1 f-sheldon text-secondary fw-bold w-100 m-0 text-end">{{ __('04') }}</p>
+                    </div>
+                </div>
+                {{-- FIFTH --}}
+                <div class="part5-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
+                    <div class="number">
+                        <p class="fs-1 f-sheldon text-sext fw-bold w-100 m-0 text-start">{{ __('05') }}</p>
+                    </div>
+                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
+                        <p class="lh-1 m-0">{{ Str::of(__('des formations'))->ucFirst()->value() }}</p>
+                        <p class="lh-1 fs-6 text-sext text-uppercase fw-bold f-readex-pro m-0">{{ __('qualifiantes') }}</p>
+                        <p class="lh-1 m-0">{{ __('pour gagner en compétences.') }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="row">
+                <div class="col-12 text-center">
+                    <p class="m-0">{{ __('Nous sommes tous animés par la passion de nos métiers !') }}</p>
+                    <p>{{ __('Une équipe de talents à renforcer.') }}</p>
+                    <div class="ratio ratio-16x9">
+                        <div class="video-inlaid" type="youtube" href="https://www.youtube.com/embed/6B4O-_1CQoI">
+                            <a class="cn-cookie-link" id="youtube-warning" href="" rel="nofollow">
+                                <strong class="text-underline text-bold text-normal text-danger">
+                                    {{ __('cookie-notice.custom.youtube.warning') }}
+                                </strong>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 mb-xl-0 mb-5">
+                    <p class="highlight black mx-xl-auto my-5 px-5 text-center text-white">{{ __('Ils témoignent !') }}</p>
+                    <div class="container-fluid position-relative d-block d-xl-none p-4">
+                        <div class="swiper swiper-joinus overflow-hidden" id="swiper-joinus">
+                            <div class="swiper-wrapper">
+                                @foreach ($testimonialModels as $testimonialModel)
+                                    <div class="swiper-slide">
+                                        <div class="swiper-slide-content d-flex flex-column justify-content-center align-items-center mx-auto">
+                                            <img src="{{ asset($testimonialModel->picture) }}" title="{{ $testimonialModel->picture_title }}"
+                                                alt="{{ $testimonialModel->picture_alt }}">
+                                            <div class="w-100">
+                                                <p class="fw-bold m-0">{{ $testimonialModel->job }}</p>
+                                                <p class="text-uppercase m-0">{{ $testimonialModel->statut }}</p>
+                                                <p class="m-0">{{ $testimonialModel->description }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                            <div class="navigation d-flex justify-content-evenly align-items-center mb-2 mt-3 flex-row p-0">
+                                <div class="swiper-button-prev rounded-circle" role="button">
+                                    <img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
+                                        title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
+                                </div>
+                                <div class="swiper-button-next rounded-circle" role="button">
+                                    <img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
+                                        title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-none d-xl-flex row justify-content-center flex-wrap">
+                        @foreach ($testimonialModels as $testimonialModel)
+                            <div class="col-4 mb-5">
+                                <div class="card mx-auto border-0">
+                                    <img class="card-img-top rounded-0" src="{{ asset($testimonialModel->picture) }}"
+                                        title="{{ $testimonialModel->picture_title }}" alt="{{ $testimonialModel->picture_alt }}">
+                                    <div class="card-body px-0">
+                                        <p class="fw-bold mb-1">{{ $testimonialModel->job }}</p>
+                                        <p class="text-uppercase mb-1">{{ $testimonialModel->statut }}</p>
+                                        <p class="mb-1">{{ $testimonialModel->description }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+                <div class="col-12 position-relative mb-5 p-5 pt-0" id="candidature-spontanee">
+                    <div class="black-frame position-absolute w-100 h-100 z-n1 start-0 top-0 px-2 py-0">
+                        <div class="position-relative w-100 h-100"></div>
+                    </div>
+                    <p class="highlight black mx-xl-auto px-xl-5 px-2 text-center text-white">{{ __('Vos candidatures spontatées') }}</p>
+                    <form id="joinus-form" method="POST" action="{{ route('fo.joinus.store') }}" enctype="multipart/form-data">
+                        @method('POST')
+                        @csrf
+                        <div class="row">
+                            <div class="col-12 col-xl-6 pe-xl-5">
+                                <fieldset class="mb-3">
+                                    <label for="last_name">
+                                        {{ Str::of(__('validation.attributes.last_name'))->ucFirst()->value() }}*&nbsp;:
+                                    </label>
+                                    <input class="form-control" id="last_name" name="last_name" value="{{ old('last_name') }}" required>
+                                </fieldset>
+                                <fieldset class="mb-3">
+                                    <label for="first_name">
+                                        {{ Str::of(__('validation.attributes.first_name'))->ucFirst()->value() }}*&nbsp;:
+                                    </label>
+                                    <input class="form-control" id="first_name" name="first_name" value="{{ old('first_name') }}" required>
+                                </fieldset>
+                                <fieldset class="mb-3">
+                                    <label for="email">
+                                        {{ Str::of(__('validation.attributes.email'))->ucFirst()->value() }}*&nbsp;:
+                                    </label>
+                                    <input class="form-control" id="email" name="email" value="{{ old('email') }}" required>
+                                </fieldset>
+                                <fieldset class="mb-3">
+                                    <label for="phone">
+                                        {{ Str::of(__('validation.attributes.phone'))->ucFirst()->value() }}*&nbsp;:
+                                    </label>
+                                    <input class="form-control" id="phone" name="phone" value="{{ old('phone') }}" required>
+                                </fieldset>
+                                <fieldset class="row mb-xl-0 mb-3">
+                                    <div class="col-12 col-xl-5 d-flex align-items-center">
+                                        <p class="m-0">{{ __('Pièce jointe') }}&nbsp;:</p>
+                                    </div>
+                                    <div class="col-12 col-xl-7">
+                                        <label class="btn btn-light w-100 mt-1" for="file">
+                                            {{ Str::of(__('parcourir'))->ucFirst()->value() }}
+                                        </label>
+                                        <input class="d-none" id ="file" name="file" type="file" value="{{ old('file') }}"
+                                            role="button" accept="application/pdf">
+                                    </div>
+                                    <div class="col-12">
+                                        <p class="m-0" id="input-file-name"></p>
+                                    </div>
+                                </fieldset>
+                            </div>
+                            <div class="col-12 col-xl-6 ps-xl-5">
+                                <fieldset class="mb-3">
+                                    <label for="message">
+                                        {{ Str::of(__('validation.attributes.message'))->ucFirst()->value() }}*&nbsp;:
+                                    </label>
+                                    <textarea class="form-control" id="message" name="message" rows="6" required>{{ old('message') }}</textarea>
+                                </fieldset>
+                                <a class="cn-cookie-link" id="recaptcha-warning" rel="nofollow">
+                                    <strong class="text-underline text-bold text-normal text-danger">
+                                        {{ __('cookie-notice.custom.recaptcha.warning') }}
+                                    </strong>
+                                </a>
+                                <div class="d-flex flex-column justify-content-center align-items-center mt-2">
+                                    <div id="r_captcha"></div>
+                                    @if ($errors->has('g-recaptcha-response'))
+                                        <div class="mb-6">
+                                            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
+                                        </div>
+                                    @endif
+                                    <p class="my-1">{{ __('*Champ obligatoire') }}</p>
+                                </div>
+                                <button class="g-recaptcha btn btn-primary w-100 text-capitalize"
+                                    data-sitekey="{{ config('services.google.recaptcha.public') }}"
+                                    type="submit">{{ Str::ucfirst(__('contact.send')) }}</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+@endsection
+
+@push('scripts')
+    <script nonce="{{ $nonce }}">
+        document.addEventListener('DOMContentLoaded', function() {
+            window.__CN_Recaptcha = function() {
+                (function(d, t) {
+                    let g = d.createElement(t),
+                        s = d.getElementsByTagName(t)[0];
+                    g.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=__CN_Recaptcha_Loaded';
+                    s.parentNode.insertBefore(g, s)
+                }(document, 'script'));
+            };
+            window.__CN_Recaptcha_Loaded = function() {
+                grecaptcha.render('r_captcha', {
+                    'sitekey': '{{ config('services.google.recaptcha.public') }}'
+                });
+                document.getElementById('recaptcha-warning').remove();
+                document.getElementById('joinus-form').inert = false;
+            };
+        });
+    </script>
+@endpush

resources/views/vendor/cn-cookies.blade.php

@@ -29,6 +29,28 @@ $strings = (object)[
 
 $cookies = [];
 
+// YOUTUBE
+$cookies['youtube'] = [
+    'name' => __('cookie-notice.custom.youtube.name'),
+    'description' => __('cookie-notice.custom.youtube.description'),
+    'labelLink' => __('cookie-notice.custom.youtube.labelLink'),
+    'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb',
+    'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
+];
+
+$cookies['youtube']['script'] = <<<SCRIPT
+function () {
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.youtube = true;
+}
+SCRIPT;
+$cookies['youtube']['fallback'] = <<<FALLBACK
+function () {
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.youtube = false;
+}
+FALLBACK;
+
 // RECAPTCHA
 $cookies['recaptcha'] = [
     'name'        => __('cookie-notice.custom.recaptcha.title'),

routes/web-fo.php

@@ -20,6 +20,10 @@ Route::middleware(['throttle:credentials'])
         // * PRODUCTS
         Route::get('/produits/{publishedProduct:slug}', [ProductController::class, 'show'])->name('products.show');
 
+        // * RANGES
+        Route::get('/rejoignez-nous', [StaticPageController::class, 'joinus'])->name('joinus.show');
+        Route::post('/rejoignez-nous-form', [StaticPageController::class, 'joinusForm'])->name('joinus.store');
+
         // * CONTACT
         Route::get('/contact', [StaticPageController::class, 'contact'])->name('contact.show');
         Route::post('/contact-form', [StaticPageController::class, 'contactForm'])->name('contact.store');