@@ -29,7 +29,7 @@ class="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-g
29
29
</div >
30
30
<div class =" py-10" >
31
31
<x-buttons .primary href =" #" class =" group px-8 py-3 text-center text-base font-medium" >
32
- {{ __ (' Shop New Arrivals ' ) } }
32
+ {{ __ (' Shop now ' ) } }
33
33
<span
34
34
class =" ml-2 translate-x-0 transform transition duration-200 ease-in-out group-hover:translate-x-1"
35
35
>
@@ -43,32 +43,43 @@ class="ml-2 translate-x-0 transform transition duration-200 ease-in-out group-ho
43
43
44
44
<div class =" bg-gray-50" >
45
45
<x-container class =" py-16 lg:py-24" >
46
- <div class =" lg:grid lg:grid-cols-6 lg:gap-10" >
47
- <div class =" flex self-center sm:col-span-2" >
48
- <div >
49
- <h1
50
- class =" font-heading text-2xl font-extrabold tracking-tight text-gray-950 sm:text-3xl"
51
- >
52
- {{ __ (' Shop by collections' ) } }
53
- </h1 >
54
- <div class =" mt-8" >
55
- <x-buttons .primary href =" #" class =" px-8 py-3 font-medium uppercase tracking-wider" >
56
- {{ __ (' View all collections' ) } }
57
- <x-untitledui-arrow-narrow-right class =" ml-2 size-5" />
58
- </x-buttons .primary >
59
- </div >
46
+ @if ($collections -> isNotEmpty () )
47
+ <section aria-labelledby =" collection-heading" class =" mx-auto max-w-xl lg:max-w-none" >
48
+ <h2 id =" collection-heading" class =" font-heading text-2xl font-extrabold tracking-tight text-gray-950 sm:text-3xl" >
49
+ {{ __ (' Shop by Collection' ) } }
50
+ </h2 >
51
+ <p class =" mt-2 text-base text-gray-500" >
52
+ Each season, we collaborate with world-class designers to create a collection inspired by the natural world.
53
+ </p >
54
+
55
+ <div class =" mt-10 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:space-y-0" >
56
+ @foreach ($collections as $collection )
57
+ <x-link href =" #" class =" group block" >
58
+ <img
59
+ src =" {{ $collection -> getFirstMediaUrl (config (' shopper.media.storage.thumbnail_collection' )) } }"
60
+ alt =" {{ $collection -> name } }"
61
+ class =" aspect-[3/2] w-full object-cover group-hover:opacity-75 lg:aspect-[5/6]"
62
+ />
63
+ <h3 class =" mt-2 text-base font-semibold text-gray-900" >
64
+ {{ $collection -> name } }
65
+ </h3 >
66
+ </x-link >
67
+ @endforeach
60
68
</div >
61
- </div >
62
- </div >
63
- <div class =" mt-16 max-w-3xl lg:mt-32 lg:max-w-none" >
64
- <h2 class =" font-heading text-2xl font-semibold tracking-tight text-gray-950 sm:text-3xl" >Trending products</h2 >
69
+ </section >
70
+ @endif
71
+
72
+ <section aria-labelledby =" products-list" class =" mt-16 max-w-3xl lg:mt-32 lg:max-w-none" >
73
+ <h2 class =" font-heading text-2xl font-semibold tracking-tight text-gray-950 sm:text-3xl" >
74
+ {{ __ (' Trending products' ) } }
75
+ </h2 >
65
76
66
77
<div class =" mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8" >
67
78
@foreach ($products as $product )
68
79
<x-product .card :product =" $product" />
69
80
@endforeach
70
81
</div >
71
- </div >
82
+ </section >
72
83
</x-container >
73
84
</div >
74
85
</div >
0 commit comments