WIP #4817 @5

diff --git a/.gitignore b/.gitignore
index 4c1f70e99e91edac3c154edc5dbd755ba29af560..c913f26465968d3e2775f5010bcba06c6969025a 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,10 @@
 /node_modules
 /public/hot
 /public/storage
+/public/fonts
+/public/css
+/public/js
+/public/mix-manifest.json
 /storage/*.key
 /vendor
 .env

diff --git a/resources/css/app.css b/resources/css/app.css
index 58b1f23e1a4fdf7f85452650ab13d600a84cc5b1..de7cd5d3be03cef2875ef3e82164a5c89af8f924 100644 (file)
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,9 +6,20 @@
 @layer base {
     @import 'fonts.css';
 
+    html, body {
+        min-height: 100%;
+    }
+
     b, strong {
         @apply font-semibold
     }
+
+    .circle-arrow {
+        display: inline-block;
+        width: 3em;
+        height: 3em;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='24' fill='%230825e2'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M29.089 23.537H18'/%3E%3Cpath d='m24.555 19 4.534 4.541-4.534 4.533'/%3E%3C/g%3E%3C/svg%3E");
+    }
 }
 
 

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 70a2d531231baa61d185ef4a543a5f3e5c846c3a..07bb748e93712b0fc644bef8f7e01b9230949eae 100644 (file)
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -2,13 +2,62 @@
 
 @section('content')
 
-    <div class="flex flex-col -mx-28 min-h-full">
-        <div class="flex-1 flex justify-center items-center bg-yellow p-4">BLOCK 1</div>
-        <div class="flex-none grid grid-cols-3 gap-6">
-            <div class="bg-blue text-white p-8 rounded-lg">LINK</div>
-            <div class="bg-blue text-white p-8 rounded-lg">LINK</div>
-            <div class="bg-blue text-white p-8 rounded-lg">LINK</div>
+    @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-28 -mt-28">
+
+        {{-- 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="#">{{ $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/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 12c77af925401f954e6a4645f3d759c2681e1662..acea01567207b55238871fce7084ed3b5364f4df 100644 (file)
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -21,9 +21,9 @@
         </a>
 
         {{-- VEOLIA Logo --}}
-        <div class="header-logo text-red">
+        <a class="header-logo text-red" href="/">
             <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="130" height="31.878" viewBox="0 0 130 31.878"><path d="M13.704 31.795A16.13 16.13 0 0 1 .278 19.079a19.191 19.191 0 0 1-.189-5.063A16.014 16.014 0 0 1 13.598.139a19.613 19.613 0 0 1 5.536.127 16.063 16.063 0 0 1 11.993 10.7 15.252 15.252 0 0 1 .794 4.983 16.007 16.007 0 0 1-12.536 15.626 23.994 23.994 0 0 1-5.681.22Zm1.658-7.262a19.68 19.68 0 0 1-2.509-3.99 4.469 4.469 0 0 1-.4-2.247 3.587 3.587 0 0 1 .346-2.02 3.386 3.386 0 0 1 3.156-2.1c2.061-.012 3.576 1.758 3.567 4.166q-.009 2.367-2.468 5.525l-.947 1.215.914-.083a11.289 11.289 0 0 0 7.03-3.344 9.91 9.91 0 0 0 2.146-3.057 9.655 9.655 0 0 0 1.066-4.821 9.577 9.577 0 0 0-.262-2.748 11.391 11.391 0 0 0-12.229-8.536 11.425 11.425 0 0 0-9.762 8.536 13.065 13.065 0 0 0 .01 5.46 11.419 11.419 0 0 0 8.977 8.38 11.273 11.273 0 0 0 1.33.167l.468.011Zm63.629.811a12.141 12.141 0 0 1-3.307-1.111 7.234 7.234 0 0 1-3.274-5.455 16.528 16.528 0 0 1 .2-4.7 7.168 7.168 0 0 1 2.883-4.3 11.8 11.8 0 0 1 6.823-1.261c2.5.255 4.008.871 5.278 2.153a6.778 6.778 0 0 1 1.844 3.475 16.166 16.166 0 0 1 .051 5.776 6.754 6.754 0 0 1-5.2 5.254 16.019 16.019 0 0 1-5.298.17Zm4.092-3.055a3.074 3.074 0 0 0 1.737-1.57 7.571 7.571 0 0 0 .736-3.75c0-3.9-1.372-5.6-4.516-5.6a4.05 4.05 0 0 0-3.041.95c-1.035.93-1.478 2.323-1.478 4.647 0 3.219 1 5.013 3.1 5.541a7.933 7.933 0 0 0 3.461-.221Zm-39.092 2.622c-.062-.158-1.636-3.728-3.5-7.932s-3.387-7.689-3.387-7.744a6.066 6.066 0 0 1 1.548-.1c1.387 0 1.6.029 2.079.28a2.662 2.662 0 0 1 .841.753c.171.26 1.2 2.562 2.278 5.114s2.006 4.715 2.053 4.8a40.742 40.742 0 0 0 2.044-4.732c1.078-2.693 2.076-5.068 2.218-5.278a2.56 2.56 0 0 1 .789-.661c.484-.255.684-.28 2.246-.28h1.715l-3.31 7.323c-1.821 4.027-3.445 7.5-3.609 7.715-.506.666-1.126.9-2.6.966-1.278.068-1.298.062-1.406-.223Zm17.04-.007a6.749 6.749 0 0 1-4.9-5.126 12.989 12.989 0 0 1 0-5.393 7.238 7.238 0 0 1 3.253-4.507c1.366-.728 1.823-.787 6.226-.8l3.978-.008v2.893l-3.438.06-3.438.06-.794.391a2.765 2.765 0 0 0-1.13.877 4.562 4.562 0 0 0-.661 2.012v.274l4.55.032 4.55.032v2.772l-4.55.032-4.55.032v.266a5.392 5.392 0 0 0 .2.964 3.036 3.036 0 0 0 1.826 2.043c.647.257.9.276 4.094.318l3.405.045v2.873l-4.008-.013c-2.2-.007-4.279-.065-4.611-.128Zm35.54-.1a8.52 8.52 0 0 1-1.373-.486 5.251 5.251 0 0 1-1.992-2.091c-.544-1.188-.585-1.718-.59-7.609V9.073h1.266c1.094 0 1.323.036 1.688.264.806.505.777.3.844 5.943l.06 5.123.3.536a1.956 1.956 0 0 0 .9.844c.586.3.662.309 3.526.347l2.927.04v2.874l-3.345-.007a16.7 16.7 0 0 1-4.207-.233Zm9.869-7.2c.032-7.081.045-7.46.263-7.781.382-.563.851-.73 2.212-.785l1.235-.05v7.433c0 8.2.026 7.911-.759 8.39-.32.195-.609.235-1.685.236h-1.3Zm5.7 7.3c.034-.088 1.464-3.387 3.178-7.331 3.49-8.032 3.517-8.08 4.711-8.388a7.507 7.507 0 0 1 3.108-.019c.1.119 6.534 14.861 6.847 15.676.071.186-.066.2-1.505.2-2.346 0-2.719-.236-3.635-2.308l-.552-1.248-3.217-.032-3.217-.032-.124.325c-.068.179-.361.82-.652 1.426a3.114 3.114 0 0 1-1.039 1.455c-.5.345-.552.355-2.238.393-1.4.032-1.716.008-1.666-.121Zm11.231-6.518c-.92-2.207-2.181-5.116-2.249-5.19a38.91 38.91 0 0 0-2.253 4.949l-.164.392h2.365c1.844 0 2.35-.034 2.301-.151Z"/></svg>
-        </div>
+        </a>
 
 
         {{-- Search Icon --}}
@@ -38,7 +38,7 @@
         </a>
     </header>
 
-    <div class="content-wrapper min-h-content mx-28 pt-28 bg-gray-200">
+    <div class="min-h-content flex flex-col mx-28 pt-28">
         @yield('content')
     </div>
 

diff --git a/routes/web.php b/routes/web.php
index b0d9441e87574686fceae2c8c132371d2ac56775..82ec5e57fada2e1944cc351088a3bcb0d8f52745 100644 (file)
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,7 @@ Route::group([
     'namespace' => '\App\Http\Controllers\Admin',
 ], function () { // custom admin routes
     Route::view('/', 'home');
+    Route::view('/ressources', 'resources');
     Route::any('tools/{tool}/{args?}', 'ToolsController@index')->where(['args' => '.*']);
 });
 

diff --git a/tailwind.config.js b/tailwind.config.js
index 884e90c8f443e848d74eb2f86dd8cc63ba0a5682..c31b9d7739ae44006bdc06efdb5f8e2e38b3fac6 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,15 +8,16 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        red: '#ED1C24',
-        salmon: '#FA4E66',
-        pink: '#FC8FE7',
-        orange: '#FB7600',
-        yellow: '#FBB100',
-        blue: '#2F5FF0',
-        turquoise: '#2AB3C9',
-        green: '#37BE4E',
-        purple: '#7A2AA1',
+        'red': '#ED1C24',
+        'salmon': '#FA4E66',
+        'pink': '#FC8FE7',
+        'orange': '#FB7600',
+        'yellow': '#FBB100',
+        'blue': '#2F5FF0',
+        'blue-dark': '#0825E2',
+        'turquoise': '#2AB3C9',
+        'green': '#37BE4E',
+        'purple': '#7A2AA1',
       }
     },
     fontFamily: {