generated from boboko/starter
63 lines
2.8 KiB
PHP
63 lines
2.8 KiB
PHP
@props([
|
|
'image' => null,
|
|
])
|
|
|
|
<section {{ $attributes }}>
|
|
<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 border border-black">
|
|
<div class="flex flex-col justify-center gap-8 px-8 py-16 lg:px-16">
|
|
<h2
|
|
class="text-h2 leading-tight"
|
|
aria-label="Γράψου στο newsletter μας"
|
|
data-controller="appear"
|
|
data-appear-visible-class="is-visible"
|
|
>
|
|
<span class="text-flicker" data-text="Γράψου">Γράψου</span>
|
|
στο
|
|
<span class="text-flicker" data-text="newsletter">newsletter</span>
|
|
μας
|
|
</h2>
|
|
|
|
<p class="max-w-md text-neutral-600">
|
|
Γίνε μέλος της λίστας μας και κέρδισε <span class="font-bold">5% έκπτωση</span> στην πρώτη σου παραγγελία, μαζί με αποκλειστικές προσφορές και νέα.
|
|
</p>
|
|
|
|
<form method="POST" action="#" class="flex flex-col gap-6 max-w-md">
|
|
@csrf
|
|
<div class="relative">
|
|
<x-ui.input
|
|
name="email"
|
|
type="email"
|
|
:required="true"
|
|
autocomplete="email"
|
|
placeholder="Το email σου"
|
|
class="pr-10 text-lg"
|
|
placeholderClass="placeholder:text-black/40"
|
|
aria-label="Το email σου"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
aria-label="Εγγραφή στο newsletter"
|
|
class="absolute right-0 bottom-2 cursor-pointer"
|
|
>
|
|
<x-ui.icon name="arrow-right" size="22" />
|
|
</button>
|
|
</div>
|
|
|
|
<x-ui.checkbox name="gdpr_consent" :required="true" id="newsletter_split_gdpr_consent" class="after:mix-blend-multiply">
|
|
<span class="text-sm text-left">Επιθυμώ διακαώς 🔥 να εγγραφώ στη λίστα αποστολής ενημερωτικού υλικού</span>
|
|
</x-ui.checkbox>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="relative bg-neutral-300 min-h-[320px] lg:min-h-full border-t border-black lg:border-t-0 lg:border-l">
|
|
@if($image)
|
|
<img src="{{ $image }}" alt="" aria-hidden="true" loading="lazy" width="800" height="800" class="w-full h-full object-cover">
|
|
@else
|
|
<div class="absolute inset-0 flex items-center justify-center text-neutral-500 text-sm">
|
|
Χωρίς εικόνα
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|