215 lines
14 KiB
PHP
215 lines
14 KiB
PHP
<div>
|
|
<!-- Hero Section with Contact Form -->
|
|
<section class="py-10 flex items-center relative overflow-hidden">
|
|
<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>
|
|
<h1 class="text-hero mb-6 tracking-wide">
|
|
{!! $content['hero']['title'] ?? 'Send us a<br /><span class="text-secondary font-medium">message.</span>' !!}
|
|
</h1>
|
|
<p class="text-large text-muted-foreground mb-8 max-w-md">
|
|
{{ $content['hero']['subtitle'] ?? 'Wir freuen uns auf Ihre Nachricht und werden uns schnellstmöglich bei Ihnen melden.' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Right Side - Contact Form -->
|
|
<div class="card-elevated p-8">
|
|
@if (session()->has('message'))
|
|
<div class="mb-6 p-4 bg-gray-50 border border-secondary/20 rounded-lg text-secondary">
|
|
{{ session('message') }}
|
|
</div>
|
|
@endif
|
|
|
|
<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 *' }}
|
|
</label>
|
|
<input
|
|
wire:model="firstName"
|
|
id="firstName"
|
|
type="text"
|
|
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"
|
|
required
|
|
/>
|
|
@error('firstName') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label for="lastName" class="text-foreground mb-2 block text-sm font-medium">
|
|
{{ $content['form']['labels']['last_name'] ?? 'Last name *' }}
|
|
</label>
|
|
<input
|
|
wire:model="lastName"
|
|
id="lastName"
|
|
type="text"
|
|
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"
|
|
required
|
|
/>
|
|
@error('lastName') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="company" class="text-foreground mb-2 block text-sm font-medium">
|
|
{{ $content['form']['labels']['company'] ?? 'Company' }}
|
|
</label>
|
|
<input
|
|
wire:model="company"
|
|
id="company"
|
|
type="text"
|
|
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"
|
|
/>
|
|
@error('company') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<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 *' }}
|
|
</label>
|
|
<input
|
|
wire:model="email"
|
|
id="email"
|
|
type="email"
|
|
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"
|
|
required
|
|
/>
|
|
@error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label for="phone" class="text-foreground mb-2 block text-sm font-medium">
|
|
{{ $content['form']['labels']['phone'] ?? 'Phone' }}
|
|
</label>
|
|
<input
|
|
wire:model="phone"
|
|
id="phone"
|
|
type="tel"
|
|
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"
|
|
/>
|
|
@error('phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="subject" class="text-foreground mb-2 block text-sm font-medium">
|
|
{{ $content['form']['labels']['subject'] ?? 'Subject *' }}
|
|
</label>
|
|
<div class="grid grid-cols-1">
|
|
<select
|
|
wire:model="subject"
|
|
id="subject" name="subject"
|
|
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-gray-50 py-2 pr-8 pl-3 text-base text-gray-900 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">
|
|
@foreach($this->subjects as $value => $label)
|
|
<option value="{{ $value }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
<svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4">
|
|
<path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
@error('subject') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
<label for="message" class="text-foreground mb-2 block text-sm font-medium">
|
|
{{ $content['form']['labels']['message'] ?? '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...' }}"
|
|
required
|
|
></textarea>
|
|
@error('message') <span class="text-red-500 text-xs">{{ $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>
|
|
|
|
<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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Information Cards -->
|
|
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
@foreach($this->contactInfo as $info)
|
|
<div class="card-elevated p-8 rounded-xl text-center">
|
|
<div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
@if($info['icon'] === 'map-pin')
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
@elseif($info['icon'] === 'mail')
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
@else
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
<h3 class="text-xl mb-2 text-foreground">{{ $info['title'] }}</h3>
|
|
<div class="text-muted-foreground text-sm">
|
|
@foreach($info['info'] as $line)
|
|
<p>{{ $line }}</p>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Social Media Section -->
|
|
<section class="section-padding bg-accent">
|
|
<div class="container-padding">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 class="text-section-title mb-6">
|
|
{!! $content['social_media']['title'] ?? 'Follow for<br /><span class="text-secondary font-medium">exclusives</span>' !!}
|
|
</h2>
|
|
<p class="text-muted-foreground mb-8 max-w-md">
|
|
{{ $content['social_media']['subtitle'] ?? 'Bleiben Sie auf dem Laufenden mit exklusiven Angeboten und News.' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
@foreach($this->socialMedia as $social)
|
|
<div class="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer">
|
|
<div>
|
|
<h3 class="text-xl text-foreground">{{ $social['name'] }}</h3>
|
|
<p class="text-sm text-muted-foreground">{{ $social['handle'] }}</p>
|
|
</div>
|
|
<svg class="w-4 h-4 text-muted-foreground" 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>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|