generated from boboko/starter
56 lines
2.6 KiB
PHP
56 lines
2.6 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', __('general.nav.contact'))
|
|
@section('description', 'Επικοινώνησε μαζί μας για οποιαδήποτε απορία ή ιδέα έχεις και θα σου απαντήσουμε το συντομότερο δυνατό.')
|
|
|
|
@section('content')
|
|
|
|
<section class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-black lg:min-h-[calc(100vh-102px)]">
|
|
|
|
<div class="flex flex-col justify-center gap-10 px-8 py-16 lg:px-16">
|
|
|
|
<svg viewBox="0 0 135 124" class="rotating-star text-brand w-24 h-24 lg:w-40 lg:h-40" 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 text-h2 font-semibold leading-tight lg:text-h2"
|
|
data-controller="appear"
|
|
data-appear-visible-class="is-visible">
|
|
<span class="text-dance">Επικοινώνησε</span><br>
|
|
μαζί μας <span class="text-dance">άμεσα</span>
|
|
</h1>
|
|
|
|
<p class="max-w-md ">
|
|
Έχεις απορία, ιδέα ή θες να μας πεις κάτι; Γράψε μας το μήνυμά σου και θα σου απαντήσουμε το συντομότερο δυνατό.
|
|
</p>
|
|
|
|
<form method="POST" action="#" class="flex flex-col gap-8 max-w-xl">
|
|
@csrf
|
|
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
|
|
<x-ui.field label="Το όνομά σου" for="contact-name">
|
|
<x-ui.input id="contact-name" name="name" autocomplete="name" :required="true" />
|
|
</x-ui.field>
|
|
|
|
<x-ui.field label="Το email σου" for="contact-email">
|
|
<x-ui.input id="contact-email" name="email" type="email" autocomplete="email" :required="true" />
|
|
</x-ui.field>
|
|
</div>
|
|
|
|
<x-ui.field label="Το μήνυμά σου" for="contact-message">
|
|
<x-ui.textarea id="contact-message" name="message" rows="5" :required="true" />
|
|
</x-ui.field>
|
|
|
|
<div>
|
|
<x-ui.button type="submit" size="md">Υποβολή</x-ui.button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="min-h-[320px] bg-neutral-400 lg:min-h-full" aria-hidden="true"></div>
|
|
|
|
</section>
|
|
|
|
@endsection
|