Improve frontend (rapidez#51)

composer.json

@@ -63,7 +63,9 @@
             "composer config repositories.account path ../account",
             "composer config repositories.image-resizer path ../image-resizer",
             "composer config repositories.menu path ../menu",
-            "composer require rapidez/core:'dev-master as 0.1' rapidez/account:'dev-master as 0.2' rapidez/image-resizer:'dev-master as 0.1' rapidez/menu:'dev-master as 0.1'"
+            "composer config repositories.wishlist path ../wishlist",
+            "composer config repositories.reviews path ../reviews",
+            "composer require rapidez/core:'dev-master as 0.91' rapidez/account:'dev-master as 0.13.3' rapidez/image-resizer:'dev-master as 0.1' rapidez/menu:'dev-master as 0.1' rapidez/wishlist:'dev-master as 0.1' rapidez/reviews:'dev-master as 0.1'"
         ]
     }
 }

resources/views/components/category/block.blade.php

@@ -0,0 +1,16 @@
+@props(['title', 'description', 'image', 'link', 'button'])
+
+<a {{ $attributes->merge([
+    'class' => 'group relative h-72 w-full overflow-hidden sm:rounded-xl sm:first:row-span-2 sm:first:h-full',
+    'href' => $link . Rapidez::config('catalog/seo/category_url_suffix', '.html'),
+]) }}>
+    <img src="{{ $image }}" class="h-full w-full object-cover" alt="" />
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50 transition group-hover:opacity-40"></div>
+    <div class="absolute bottom-0 left-0 flex flex-col gap-1 p-5 text-white">
+        <div>
+            <p class="text-lg font-semibold">@lang($title)</p>
+            <p class="text-md text-gray-200">@lang($description)</p>
+        </div>
+        <span>{{ $button }}</span>
+    </div>
+</a>

resources/views/pages/home.blade.php

@@ -1,29 +1,26 @@
-<div class="md:flex mt-4 md:-mx-2">
-    <x-category-block
+<div class="grid gap-5 sm:grid-cols-2">
+    <x-category.block
         title="New Luma Yoga Collection"
         description="Get fit and look fab in new seasonal styles"
-        image="/storage/resizes/750/home1.jpg.webp"
+        image="/storage/{{ config('rapidez.store') }}/resizes/750/local/home1.jpg.webp"
         link="/collections/yoga-new"
         button="Shop New Yoga"
-        class="md:w-1/2 md:mx-2"
     />
-    <x-category-block
+    <x-category.block
         title="Men Tops Collection"
         description="Find conscientious, comfy clothing"
-        image="/storage/resizes/750/home2.jpg.webp"
+        image="/storage/{{ config('rapidez.store') }}/resizes/750/local/home2.jpg.webp"
         link="/men/tops-men"
         button="Shop Men Tops"
-        class="mt-4 md:w-1/2 md:mx-2 md:mt-0"
+    />
+    <x-category.block
+        title="Even more ways to mix and match"
+        description="Buy 3 Luma tees get a 4th free"
+        image="/storage/{{ config('rapidez.store') }}/resizes/1500/local/home3.jpg.webp"
+        link="/promotions/tees-all"
+        button="Shop Tees"
     />
 </div>
-<x-category-block
-    title="Even more ways to mix and match"
-    description="Buy 3 Luma tees get a 4th free"
-    image="/storage/resizes/1500/home3.jpg.webp"
-    link="/promotions/tees-all"
-    button="Shop Tees"
-    class="mt-4"
-/>
 
 <div class="bg-white w-full py-20">
     <p class="text-center text-base font-semibold uppercase text-gray-600 tracking-wider">