boboko/3dealer
3
0
Fork 0
generated from boboko/starter
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

homepage stuff and text animation fix

Browse Source
This commit is contained in:
elvira
2026-08-22 21:59:17 +03:00
parent 7677d10821
commit 45057f9083
6 changed files with 428 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/home.blade.php
+27 -21
View File
@@ -15,13 +15,13 @@
</svg>
<h1
class="font-display font-semibold text-6xl lg:text-7xl leading-tight"
class="font-display font-semibold text-6xl lg:text-[80px] leading-tight"
aria-label="Ό,τι φαντάζεσαι, το τυπώνουμε"
data-controller="appear"
data-appear-visible-class="is-visible"
>
Ό,τι <span class="text-flicker" data-text="φαντάζεσαι">φαντάζεσαι</span>,<br>
το <span class="text-flicker" data-text="τυπώνουμε">τυπώνουμε</span>
Ό,τι <span class="text-dance" data-text="φαντάζεσαι">φαντάζεσαι</span>,<br>
το <span class="text-dance [--dance-delay:200ms]" data-text="τυπώνουμε">τυπώνουμε</span>
</h1>
</div>
@@ -31,20 +31,19 @@ class="font-display font-semibold text-6xl lg:text-7xl leading-tight"
type="button"
data-action="carousel#prev"
aria-label="Προηγούμενο προϊόν"
class="absolute left-4 lg:left-8 top-1/2 -translate-y-1/2 hover:opacity-60 transition-opacity"
class="absolute left-4 lg:left-8 top-1/2 z-10 -translate-y-1/2 hover:-translate-x-1 transition duration-500"
>
<x-ui.icon name="arrow-left" :size="62" class="[&_path]:stroke-2" />
</button>
<div class="w-full ">
<div class="w-full h-full">
@foreach($heroProducts as $product)
<a
href="{{ $product['href'] }}"
<div
data-carousel-target="slide"
class="{{ $loop->first ? '' : 'hidden' }} block"
class="{{ $loop->first ? '' : 'hidden' }} group h-full flex flex-col justify-between"
>
<div class="flex items-center justify-center">
<div class="border border-black bg-white mb-16 flex items-center justify-center overflow-hidden max-w-sm">
<div class="relative flex items-center justify-center">
<a href="{{ $product['href'] }}" class="block border border-black bg-white flex items-center justify-center overflow-hidden max-w-sm">
@if($product['image'])
<img
src="{{ $product['image'] }}"
@@ -58,15 +57,22 @@ class="w-full h-full object-cover"
@else
<span class="text-neutral-500 text-sm">Χωρίς εικόνα</span>
@endif
</div>
</a>
<x-ui.button size="md" position="absolute" class="opacity-0 group-hover:opacity-100 transition-opacity duration-100">
Προσθήκη στο καλάθι
</x-ui.button>
</div>
<div class="flex items-baseline justify-between gap-4">
<span class="font-display font-bold text-2xl">{{ $product['name'] }}</span>
@if($product['price'] !== null)
<span class="font-bold text-xl shrink-0"><x-ui.price :amount="$product['price']" /></span>
@endif
</div>
</a>
<div class="flex items-baseline justify-between gap-4">
<a href="{{ $product['href'] }}" class="font-display font-bold text-2xl leading-snug hover:text-brand">
{{ $product['name'] }}
</a>
@if($product['price'] !== null)
<span class="font-bold text-xl shrink-0"><x-ui.price :amount="$product['price']" /></span>
@endif
</div>
</div>
@endforeach
</div>
@@ -74,7 +80,7 @@ class="w-full h-full object-cover"
type="button"
data-action="carousel#next"
aria-label="Επόμενο προϊόν"
class="absolute right-4 lg:right-8 top-1/2 -translate-y-1/2 hover:opacity-60 transition-opacity"
class="absolute right-4 lg:right-8 top-1/2 z-10 -translate-y-1/2 hover:translate-x-1 transition duration-500"
>
<x-ui.icon name="arrow-right" :size="62" class="[&_path]:stroke-2"/>
</button>
@@ -117,7 +123,7 @@ class="absolute right-4 lg:right-8 top-1/2 -translate-y-1/2 hover:opacity-60 tra
</div>
<div class="flex items-center gap-6 px-8 py-12">
<button type="button" data-action="carousel#prev" aria-label="Προηγούμενα προϊόντα" class="shrink-0 hover:opacity-60 transition-opacity">
<button type="button" data-action="carousel#prev" aria-label="Προηγούμενα προϊόντα" class="shrink-0 hover:-translate-x-0.5 hover:opacity-60 transition duration-500">
<x-ui.icon name="arrow-left" :size="32" />
</button>
@@ -138,7 +144,7 @@ class="absolute right-4 lg:right-8 top-1/2 -translate-y-1/2 hover:opacity-60 tra
@endforelse
</div>
<button type="button" data-action="carousel#next" aria-label="Επόμενα προϊόντα" class="shrink-0 hover:opacity-60 transition-opacity">
<button type="button" data-action="carousel#next" aria-label="Επόμενα προϊόντα" class="shrink-0 hover:translate-x-0.5 hover:opacity-60 transition duration-500">
<x-ui.icon name="arrow-right" :size="32" />
</button>
</div>