generated from boboko/starter
homepage, new newsletter section, multilang support
This commit is contained in:
elvira
@@ -0,0 +1,150 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', config('app.name') . ' — Ό,τι φαντάζεσαι, τυπωμένο σε 3D')
|
||||
@section('description', 'Gaming φιγούρες, κρανία, κλειδοθήκες και ό,τι πιο τρελό σου περνάει απ\' το μυαλό. Σχεδιασμένα και τυπωμένα σε 3D, ένα προς ένα.')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="border-b border-black">
|
||||
|
||||
{{-- Hero --}}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-black border-b border-black min-h-[calc(100vh-102px)]">
|
||||
<div class="flex flex-col justify-center gap-8 px-8 py-16 lg:px-16">
|
||||
<svg viewBox="0 0 135 124" class="hero-star w-[173px] h-[159px] text-[#f3d121]" aria-hidden="true" fill="currentColor">
|
||||
<path d="m88.4 0 4 28.9 29.7-5.2-14.3 25.7L135 62l-27.2 12.6 14.3 25.7-29.7-5.2-4 28.9-20.9-21.1L46.6 124l-4-28.9-29.7 5.2 14.3-25.7L0 62l27.2-12.6-14.3-25.7 29.7 5.2 4-28.9 20.9 21.1L88.4 0z"/>
|
||||
</svg>
|
||||
|
||||
<h1
|
||||
class="font-display font-semibold text-6xl lg:text-7xl 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>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center justify-center px-8 py-10 lg:px-10" data-controller="carousel">
|
||||
@if($heroProducts->isNotEmpty())
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<x-ui.icon name="arrow-left" :size="56" />
|
||||
</button>
|
||||
|
||||
<div class="w-full ">
|
||||
@foreach($heroProducts as $product)
|
||||
<a
|
||||
href="{{ $product['href'] }}"
|
||||
data-carousel-target="slide"
|
||||
class="{{ $loop->first ? '' : 'hidden' }} block"
|
||||
>
|
||||
<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">
|
||||
@if($product['image'])
|
||||
<img
|
||||
src="{{ $product['image'] }}"
|
||||
alt="{{ $product['name'] }}"
|
||||
width="400"
|
||||
height="400"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
class="w-full h-full object-cover"
|
||||
>
|
||||
@else
|
||||
<span class="text-neutral-500 text-sm">Χωρίς εικόνα</span>
|
||||
@endif
|
||||
</div>
|
||||
</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">€{{ number_format($product['price'], 2) }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<x-ui.icon name="arrow-right" :size="56" />
|
||||
</button>
|
||||
@else
|
||||
<p class="text-neutral-500">Δεν βρέθηκαν προϊόντα.</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Info / trivia --}}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-black">
|
||||
<div class="bg-neutral-300 min-h-[320px] lg:min-h-full flex items-center justify-center text-neutral-500 text-sm">
|
||||
Χωρίς εικόνα
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center gap-6 px-8 py-16 lg:px-16 text-center">
|
||||
<p class="max-w-md mx-auto text-neutral-600">
|
||||
Gaming φιγούρες, κρανία, κλειδοθήκες, dark humor και ό,τι πιο τρελό σου περνάει απ' το μυαλό — όλα σχεδιασμένα και τυπωμένα σε 3D, ένα προς ένα, εδώ στην Ελλάδα.
|
||||
</p>
|
||||
<h2 class="font-display font-extrabold text-h2 leading-tight">
|
||||
Στρώση-στρώση,<br>
|
||||
<span class="italic">0.1mm τη φορά</span>
|
||||
</h2>
|
||||
<p class="max-w-md mx-auto text-neutral-600">
|
||||
Τόσο λεπτή είναι κάθε στρώση υλικού σε ένα 3D εκτυπωμένο κομμάτι — πιο λεπτή κι από τρίχα. Δεν κρατάμε αποθέματα: κάθε παραγγελία τυπώνεται ειδικά για σένα, στο χρώμα και στο μέγεθος που θες.
|
||||
</p>
|
||||
<div>
|
||||
<x-ui.button size="md" :href="url('/'.app()->getLocale().'/products')">Δες τα προϊόντα</x-ui.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Classics --}}
|
||||
<div class="border-b border-black" data-controller="carousel">
|
||||
<div class="flex items-center justify-between gap-4 px-8 py-8 border-b border-black">
|
||||
<h2 class="font-display font-extrabold text-h3">Τα αγαπημένα μας</h2>
|
||||
<x-ui.button size="sm" :href="url('/'.app()->getLocale().'/products')">Δες όλα</x-ui.button>
|
||||
</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">
|
||||
<x-ui.icon name="arrow-left" :size="32" />
|
||||
</button>
|
||||
|
||||
<div class="flex-1 overflow-hidden">
|
||||
@forelse($classicsProducts->chunk(4) as $page)
|
||||
<div data-carousel-target="slide" class="{{ $loop->first ? '' : 'hidden' }} grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
@foreach($page as $product)
|
||||
<x-ui.product-card
|
||||
:name="$product['name']"
|
||||
:price="$product['price']"
|
||||
:image="$product['image']"
|
||||
:href="$product['href']"
|
||||
/>
|
||||
@endforeach
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-neutral-500 text-center w-full">Δεν βρέθηκαν προϊόντα.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<button type="button" data-action="carousel#next" aria-label="Επόμενα προϊόντα" class="shrink-0 hover:opacity-60 transition-opacity">
|
||||
<x-ui.icon name="arrow-right" :size="32" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-20">
|
||||
<x-newsletter-split />
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user