From b238700c79c0c3e85ed2dfd846107ed212822b92 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 26 Oct 2021 16:07:35 +0200
Subject: [PATCH] wip #4839 @0:10

---
 resources/views/front/home.blade.php          |  63 +++++++
 resources/views/front/media-library.blade.php | 103 +++++++++++
 resources/views/front/resources.blade.php     | 164 ++++++++++++++++++
 routes/web.php                                |  10 +-
 4 files changed, 339 insertions(+), 1 deletion(-)
 create mode 100644 resources/views/front/home.blade.php
 create mode 100644 resources/views/front/media-library.blade.php
 create mode 100644 resources/views/front/resources.blade.php

diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php
new file mode 100644
index 0000000..ebd1533
--- /dev/null
+++ b/resources/views/front/home.blade.php
@@ -0,0 +1,63 @@
+@extends('layouts.app')
+
+@section('content')
+
+    @php
+        // TEMPORARY DATA MOCKUP
+        $logo = 'https://odl.paris.cubedesigners.com/storage/102/groupe-84.svg';
+        $subtitle = "Découvrez le coeur de l'offre sous forme de feuilleteur interactif";
+        $button = "Découvrir l'offre";
+        $illustration = 'https://odl.paris.cubedesigners.com/storage/103/magazine-mockup-presentation-vol9-at-2x.png';
+        $shortcuts = [
+            [
+                'title' => 'Ressources',
+                'content' => "Consultez l'ensemble des documents au format PDF",
+                'image' => 'https://odl.paris.cubedesigners.com/storage/104/groupe-209-at-2x.png',
+                'link' => '/ressources',
+            ],
+            [
+                'title' => 'Médiathèque',
+                'content' => 'Consultez les médias audio et vidéo',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/105/groupe-211-at-2x.png',
+                'link' => '#',
+            ],
+            [
+                'title' => 'Visite guidée',
+                'content' => 'Laissez-vous guider dans une lecture thématique',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/106/groupe-221-at-2x.png',
+                'link' => '#',
+            ],
+        ];
+    @endphp
+
+    <div class="flex flex-col flex-1 -mx-22 -mt-22">
+
+        {{-- Main home content --}}
+        <div class="flex flex-1 justify-center -mb-16">{{-- negative margin so image shadow sits under shortcuts --}}
+            {{-- Left Column: logo + text + CTA --}}
+            <div class="home-left flex flex-1 flex-col justify-center items-center p-6 max-w-[310px]">
+                @if($logo)<img class="mb-10" src="{{ $logo }}" alt="Logo">@endif
+                @if($subtitle)<p class="text-center mb-5">{{ $subtitle }}</p>@endif
+                @if($button)<a class="bg-blue text-white py-4 px-10 rounded-full" href="/tools/fluidbookpreview">{{ $button }}</a>@endif
+            </div>
+            {{-- Right Column: Illustration image --}}
+            <div class="home-right flex-1 bg-contain bg-center bg-no-repeat max-w-[700px]" style="@if($illustration)background-image:url({{ $illustration }})@endif"></div>
+        </div>
+
+        {{-- Link blocks --}}
+        <div class="grid grid-cols-3 gap-6">
+            @foreach($shortcuts as $shortcut)
+                <div class="bg-blue flex items-center text-white p-6 rounded-lg">
+                    <img class="flex-shrink mr-8 w-[40%]" src="{{ $shortcut['image'] }}" alt="">
+                    <div class="flex-1 flex-shrink-0 space-y-2">
+                        <h3 class="font-semibold uppercase">{{ $shortcut['title'] }}</h3>
+                        <p>{{ $shortcut['content'] }}</p>
+                        <a href="{{ $shortcut['link'] }}" class="circle-arrow"></a>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+
+    </div>
+
+@endsection
diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php
new file mode 100644
index 0000000..1c7f2a3
--- /dev/null
+++ b/resources/views/front/media-library.blade.php
@@ -0,0 +1,103 @@
+@extends('layouts.app')
+
+@section('content')
+
+    @php
+        // TEMPORARY DATA MOCKUP
+        $media = [
+            [
+                'title' => "Qu’est ce que la gouvernance ?",
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 1,
+                    'title' => 'Gouvernance',
+                    'color' => '#FA4E66',
+                ],
+            ],
+            [
+                'title' => 'Les outils de communication',
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 2,
+                    'title' => 'Communication',
+                    'color' => '#FBB100',
+                ],
+            ],
+            [
+                'title' => "Une organisation à plusieurs niveaux",
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 3,
+                    'title' => 'Organisation',
+                    'color' => '#7A2AA1',
+                ],
+            ],
+            [
+                'title' => 'Système d’information',
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 4,
+                    'title' => 'Système d’information',
+                    'color' => '#2AB3C9',
+                ],
+            ],
+            [
+                'title' => "Qu’est ce que la gouvernance ?",
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 1,
+                    'title' => 'Gouvernance',
+                    'color' => '#FA4E66',
+                ],
+            ],
+            [
+                'title' => 'Les outils de communication',
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 2,
+                    'title' => 'Communication',
+                    'color' => '#FBB100',
+                ],
+            ],
+        ];
+    @endphp
+
+    <h1 class="uppercase">Médiathèque</h1>
+
+    {{-- FILTERS --}}
+    <div class="mt-10">
+        <a href="#" class="inline-block bg-black hover:bg-blue text-white font-secondary font-medium leading-none py-4 px-6 rounded-full">Filtrer</a>
+    </div>
+
+    {{-- MEDIA LIBRARY GRID --}}
+    <div class="mt-10 grid grid-cols-4 gap-x-5 gap-y-16">
+        @foreach ($media as $item)
+            <div class="media-item" data-type="{{ $item['type'] }}" data-theme="{{ $item['theme']['id'] }}">
+                <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-image:url({{ $item['image'] }})">
+                    {{-- TODO: play button --}}
+                    {{-- TODO: media length --}}
+                </div>
+                <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $item['theme']['color'] }}">
+                    {{ $item['theme']['title'] }}
+                </div>
+                <div class="mt-1.5 font-semibold leading-snug">
+                    {{ $item['title'] }}
+                </div>
+            </div>
+        @endforeach
+
+    </div>
+
+@endsection
diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php
new file mode 100644
index 0000000..5ab00b1
--- /dev/null
+++ b/resources/views/front/resources.blade.php
@@ -0,0 +1,164 @@
+@extends('layouts.app')
+
+@section('content')
+
+    @php
+        // TEMPORARY DATA MOCKUP
+        $title = 'Ressources';
+        $subtitle = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum.';
+        $documents = [
+            [
+                'document_title' => "Cœur de l'offre",
+                'document_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
+                'document_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
+                'document_pdf' => '#',
+            ],
+            [
+                'document_title' => 'Offre détaillée',
+                'document_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
+                'document_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                'document_pdf' => '#',
+            ],
+        ];
+
+    $memo_part_title = 'Les Mémos';
+    $chapters = [
+        [
+            'chapter_title' => 'Chaptire 1',
+            'subchapters' => [
+                [
+                    'subchapter_title' => '1.1 Sous chapitre',
+                    'subchapter_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
+                    'subchapter_memos' => [
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo1.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
+                        ],
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo2.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                        ],
+                    ],
+                ],
+                [
+                    'subchapter_title' => '1.2 Sous chapitre',
+                    'subchapter_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
+                    'subchapter_memos' => [
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo1.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
+                        ],
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo2.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                        ],
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo3.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                        ],
+                    ],
+                ],
+            ],
+        ],
+        [
+            'chapter_title' => 'Chaptire 2',
+            'subchapters' => [
+                [
+                    'subchapter_title' => '2.1 Sous chapitre',
+                    'subchapter_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
+                    'subchapter_memos' => [
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo1.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
+                        ],
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo2.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                        ],
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo2.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                        ],
+                    ],
+                ],
+                [
+                    'subchapter_title' => '2.2 Sous chapitre',
+                    'subchapter_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.',
+                    'subchapter_memos' => [
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo1.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png',
+                        ],
+                        [
+                            'memo_title' => 'Lorem ipsum dolor sit',
+                            'memo_pdf' => 'memo2.pdf',
+                            'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png',
+                        ],
+                    ],
+                ],
+            ],
+        ],
+    ];
+    @endphp
+
+    <h1 class="uppercase mb-8">{{ $title }}</h1>
+    <h2 class="font-medium text-2xl mb-14 w-1/2">{{ $subtitle }}</h2>
+
+    {{-- DOCUMENTS --}}
+    <div class="grid grid-cols-2 gap-6">
+        @foreach($documents as $doc)
+            <div class="bg-blue flex p-10 text-white rounded-md">
+                <img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">
+                <div class="-mr-5 space-y-4">
+                    <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>
+                    <p>{{ $doc['document_subtitle'] }}</p>
+                    <a href="{{ $doc['document_pdf'] }}" class="bg-blue-dark inline-block py-4 px-10 rounded-full">Visualiser</a>
+                </div>
+            </div>
+        @endforeach
+    </div>
+
+    {{-- MEMOS --}}
+    <p>
+        <span class="inline-block font-secondary font-bold uppercase text-xs leading-none p-2.5 border border-current mt-15">
+            {{ $memo_part_title }}
+        </span>
+    </p>
+
+
+    {{-- CHAPTERS --}}
+    @foreach ($chapters as $chapter)
+        <div class="mt-15">
+            <h3 class="text-4xl">{{ $chapter['chapter_title'] }}</h3>
+
+            {{-- SUB-CHAPTERS --}}
+            @foreach ($chapter['subchapters'] as $subchapter)
+                <h4 class="mt-8 text-2xl">{{ $subchapter['subchapter_title'] }}</h4>
+                <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
+
+                {{-- MEMOS --}}
+                <div class="grid grid-cols-2 gap-5 mt-8">
+                    @foreach ($subchapter['subchapter_memos'] as $memo)
+                        <div class="bg-grey-50 flex items-center p-8 rounded-md">
+                            <img class="w-1/4 pr-4" src="{{ $memo['memo_image'] }}" alt="{{ $memo['memo_title'] }}">
+                            <div class="space-y-2.5">
+                                <h3 class="text-base font-semibold">{{ $memo['memo_title'] }}</h3>
+                                <a href="{{ $memo['memo_pdf'] }}" class="circle-arrow"></a>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            @endforeach
+        </div>
+    @endforeach
+
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 00e3dff..ffd5f09 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -13,4 +13,12 @@ Route::group([
     Route::any('tools/{tool}/{args?}', 'ToolsController@index')->where(['args' => '.*']);
 });
 
-Route::get('test','\App\Http\Controllers\Admin\ToolsController@test');
+Route::group([
+    'prefix' => 'front',
+    'middleware' => ['web', config('backpack.base.middleware_key', 'admin')],
+    'namespace' => '\App\Http\Controllers\Admin',
+], function () { // custom admin routes
+    Route::view('/', 'front.home');
+    Route::view('/ressources', 'front.resources');
+    Route::view('/mediatheque', 'front.media-library');
+});
-- 
2.39.5