3dealer/resources/views/home.blade.php

@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-[80px] leading-tight"
                    aria-label="Ό,τι φαντάζεσαι, το τυπώνουμε"
                    data-controller="appear"
                    data-appear-visible-class="is-visible"
                >
                    Ό,τι <span class="text-dance" data-text="φαντάζεσαι">φαντάζεσαι</span>,<br>
                    το <span class="text-dance [--dance-delay:200ms]" 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 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 h-full">
                        @foreach($heroProducts as $product)
                            <div
                                data-carousel-target="slide"
                                class="{{ $loop->first ? '' : 'hidden' }} group h-full flex flex-col justify-between"
                            >
                                <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'] }}"
                                                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
                                    </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">
                                    <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>

                    <button
                        type="button"
                        data-action="carousel#next"
                        aria-label="Επόμενο προϊόν"
                        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>
                @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:-translate-x-0.5 hover:opacity-60 transition duration-500">
                <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:translate-x-0.5 hover:opacity-60 transition duration-500">
                <x-ui.icon name="arrow-right" :size="32" />
            </button>
        </div>
    </div>

    <div class="py-20">
        <x-newsletter-split />
    </div>
@endsection