10-04-2026
This commit is contained in:
parent
4d6b4930b2
commit
4bb89aad8c
836 changed files with 52961 additions and 5950 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Left Side - Hero Text -->
|
||||
<div class="slide-right delay-200">
|
||||
<div class="">
|
||||
<h1 class="text-hero mb-6 tracking-wide">
|
||||
{!! $content['hero']['title'] ?? 'Send us a<br /><span class="text-secondary font-medium">message.</span>' !!}
|
||||
</h1>
|
||||
|
|
@ -14,18 +14,27 @@
|
|||
</div>
|
||||
|
||||
<!-- Right Side - Contact Form -->
|
||||
<div class="card-elevated p-8 slide-left delay-200">
|
||||
@if (session()->has('message'))
|
||||
<div class="mb-6 p-4 bg-gray-50 border border-secondary/20 rounded-lg text-secondary">
|
||||
{{ session('message') }}
|
||||
<div class="card-elevated p-8 ">
|
||||
@if ($success)
|
||||
<div class="flex flex-col items-center text-center py-8 gap-5">
|
||||
<div class="flex items-center justify-center w-20 h-20 rounded-full bg-green-100">
|
||||
<svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-semibold text-foreground">{{ __('ui.contact_form.success_title') }}</p>
|
||||
<p class="text-muted-foreground mt-2 max-w-sm mx-auto">
|
||||
{{ $content['form']['success_message'] ?? __('ui.contact_form.success_message') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@else
|
||||
<form wire:submit="submit" class="space-y-6">
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="firstName" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['first_name'] ?? 'First name *' }}
|
||||
{{ $content['form']['labels']['first_name'] ?? __('ui.contact_form.first_name') }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="firstName"
|
||||
|
|
@ -38,7 +47,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<label for="lastName" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['last_name'] ?? 'Last name *' }}
|
||||
{{ $content['form']['labels']['last_name'] ?? __('ui.contact_form.last_name') }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="lastName"
|
||||
|
|
@ -53,7 +62,7 @@
|
|||
|
||||
<div>
|
||||
<label for="company" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['company'] ?? 'Company' }}
|
||||
{{ $content['form']['labels']['company'] ?? __('ui.contact_form.company') }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="company"
|
||||
|
|
@ -67,7 +76,7 @@
|
|||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="email" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['email'] ?? 'Email *' }}
|
||||
{{ $content['form']['labels']['email'] ?? __('ui.contact_form.email') }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="email"
|
||||
|
|
@ -80,7 +89,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<label for="phone" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['phone'] ?? 'Phone' }}
|
||||
{{ $content['form']['labels']['phone'] ?? __('ui.contact_form.phone') }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="phone"
|
||||
|
|
@ -94,7 +103,7 @@
|
|||
|
||||
<div>
|
||||
<label for="subject" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['subject'] ?? 'Subject *' }}
|
||||
{{ $content['form']['labels']['subject'] ?? __('ui.contact_form.subject') }}
|
||||
</label>
|
||||
<div class="grid grid-cols-1">
|
||||
<select
|
||||
|
|
@ -116,34 +125,70 @@
|
|||
|
||||
<div>
|
||||
<label for="message" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['message'] ?? 'Message *' }}
|
||||
{{ $content['form']['labels']['message'] ?? __('ui.contact_form.message') }}
|
||||
</label>
|
||||
<textarea
|
||||
wire:model="message"
|
||||
id="message"
|
||||
rows="5"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6 resize-none"
|
||||
placeholder="{{ $content['form']['placeholders']['message'] ?? 'Ihre Nachricht...' }}"
|
||||
placeholder="{{ $content['form']['placeholders']['message'] ?? __('ui.contact_form.message_placeholder') }}"
|
||||
required
|
||||
></textarea>
|
||||
@error('message') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
{{-- Honeypot --}}
|
||||
<div class="opacity-0 absolute top-0 left-0 h-0 w-0 -z-10 overflow-hidden" aria-hidden="true">
|
||||
<label for="website">Website</label>
|
||||
<input type="text" id="website" name="website" wire:model="website" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div x-data="{ on: $wire.entangle('privacy') }">
|
||||
<label class="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
x-model="on"
|
||||
id="privacy"
|
||||
type="checkbox"
|
||||
class="sr-only"
|
||||
/>
|
||||
<span
|
||||
role="switch"
|
||||
:aria-checked="on.toString()"
|
||||
:class="on ? 'bg-green-500' : 'bg-muted'"
|
||||
class="relative mt-0.5 w-11 h-6 shrink-0 rounded-full transition-colors duration-200"
|
||||
>
|
||||
<span
|
||||
:class="on ? 'translate-x-5' : 'translate-x-0'"
|
||||
class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 pointer-events-none"
|
||||
></span>
|
||||
</span>
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{{ __('ui.contact_form.privacy_prefix') }}
|
||||
<a href="{{ route('privacy') }}" target="_blank" class="text-secondary underline underline-offset-2 hover:no-underline">Datenschutzerklärung</a>
|
||||
{{ __('ui.contact_form.privacy_suffix') }}
|
||||
</span>
|
||||
</label>
|
||||
@error('privacy') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full btn-primary flex items-center justify-center"
|
||||
wire:loading.attr="disabled"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<span wire:loading.remove>{{ $content['form']['button_text'] ?? 'Senden' }}</span>
|
||||
<span wire:loading>{{ $content['form']['button_loading'] ?? 'Wird gesendet...' }}</span>
|
||||
<span wire:loading.remove>{{ $content['form']['button_text'] ?? __('ui.contact_form.send') }}</span>
|
||||
<span wire:loading>{{ $content['form']['button_loading'] ?? __('ui.contact_form.sending') }}</span>
|
||||
|
||||
<svg wire:loading.remove class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<p class="text-sm text-muted-foreground">{{ __('ui.required_fields') }}</p>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -172,7 +217,7 @@
|
|||
@endif
|
||||
</div>
|
||||
<h3 class="text-xl mb-2 text-foreground">{{ $info['title'] }}</h3>
|
||||
<div class="text-muted-foreground text-sm">
|
||||
<div class="text-muted-foreground text-base">
|
||||
@foreach($info['info'] as $line)
|
||||
<p>{{ $line }}</p>
|
||||
@endforeach
|
||||
|
|
@ -184,7 +229,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Social Media Section -->
|
||||
<section class="section-padding bg-accent">
|
||||
{{-- <section class="section-padding bg-accent">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="slide-right delay-200">
|
||||
|
|
@ -212,4 +257,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
--}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue