326 lines
20 KiB
PHP
326 lines
20 KiB
PHP
@extends('web.layouts.web-master')
|
||
|
||
@section('title', 'Kontakt - Business Portal 24')
|
||
|
||
@section('content')
|
||
|
||
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
|
||
<!-- Burger Menu Component -->
|
||
<livewire:web.burger-menu />
|
||
|
||
<!-- Header Component -->
|
||
<livewire:web.header />
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||
style="background: var(--gradient-hero);">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||
Kontakt
|
||
</h1>
|
||
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
|
||
Wir sind für Sie da – per E-Mail, Telefon oder vor Ort in München
|
||
</p>
|
||
</div>
|
||
<!-- Decorative Pattern -->
|
||
<div class="absolute top-0 right-0 opacity-10">
|
||
<svg width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||
<defs>
|
||
<pattern id="pattern-hero-kontakt" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||
<rect x="0" y="0" width="4" height="4" fill="currentColor"/>
|
||
</pattern>
|
||
</defs>
|
||
<rect width="404" height="384" fill="url(#pattern-hero-kontakt)"/>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Methods -->
|
||
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-16">
|
||
<!-- Email -->
|
||
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="h-8 w-8 text-[var(--color-primary)]" 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"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
|
||
E-Mail
|
||
</h3>
|
||
<a href="mailto:info@businessportal.de" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
|
||
info@businessportal.de
|
||
</a>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
Antwort innerhalb von 24 Stunden
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Phone -->
|
||
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="h-8 w-8 text-[var(--color-primary)]" 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"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
|
||
Telefon
|
||
</h3>
|
||
<a href="tel:+498912345678" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
|
||
+49 89 1234 5678
|
||
</a>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
Mo-Fr 9:00-18:00 Uhr
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Address -->
|
||
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="h-8 w-8 text-[var(--color-primary)]" 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>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
|
||
Adresse
|
||
</h3>
|
||
<p class="text-zinc-900 dark:text-zinc-100 font-medium mb-1">
|
||
Maximilianstraße 35
|
||
</p>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
80539 München, Deutschland
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Business Hours -->
|
||
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
|
||
Geschäftszeiten
|
||
</h3>
|
||
<p class="text-zinc-900 dark:text-zinc-100 font-medium mb-1">
|
||
Mo-Fr 9:00-18:00
|
||
</p>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
Sa-So geschlossen
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contact Form & Map -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||
<!-- Form -->
|
||
<div>
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
|
||
Nachricht senden
|
||
</h2>
|
||
<p class="text-zinc-600 dark:text-zinc-400">
|
||
Haben Sie Fragen oder benötigen Sie Unterstützung? Füllen Sie das Formular aus und wir melden uns schnellstmöglich bei Ihnen.
|
||
</p>
|
||
</div>
|
||
|
||
<form class="space-y-6" method="POST" action="/kontakt">
|
||
@csrf
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="space-y-2">
|
||
<label for="vorname" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
Vorname *
|
||
</label>
|
||
<input
|
||
id="vorname"
|
||
name="vorname"
|
||
type="text"
|
||
placeholder="Max"
|
||
required
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||
/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label for="nachname" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
Nachname *
|
||
</label>
|
||
<input
|
||
id="nachname"
|
||
name="nachname"
|
||
type="text"
|
||
placeholder="Mustermann"
|
||
required
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="email" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
E-Mail-Adresse *
|
||
</label>
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
placeholder="max.mustermann@beispiel.de"
|
||
required
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||
/>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="unternehmen" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
Unternehmen
|
||
</label>
|
||
<input
|
||
id="unternehmen"
|
||
name="unternehmen"
|
||
type="text"
|
||
placeholder="Firma GmbH"
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||
/>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="telefon" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
Telefon
|
||
</label>
|
||
<input
|
||
id="telefon"
|
||
name="telefon"
|
||
type="tel"
|
||
placeholder="+49 123 456789"
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||
/>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="betreff" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
Betreff *
|
||
</label>
|
||
<input
|
||
id="betreff"
|
||
name="betreff"
|
||
type="text"
|
||
placeholder="Wie können wir Ihnen helfen?"
|
||
required
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||
/>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="nachricht" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||
Nachricht *
|
||
</label>
|
||
<textarea
|
||
id="nachricht"
|
||
name="nachricht"
|
||
placeholder="Ihre Nachricht an uns..."
|
||
rows="6"
|
||
required
|
||
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 resize-none"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
* Pflichtfelder
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
class="w-full inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
|
||
style="background: var(--gradient-hero);"
|
||
>
|
||
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||
</svg>
|
||
Nachricht senden
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Map & Info -->
|
||
<div class="space-y-6">
|
||
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
|
||
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-6">
|
||
Besuchen Sie uns
|
||
</h3>
|
||
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h4 class="font-medium text-zinc-900 dark:text-zinc-100 mb-2">Hauptsitz München</h4>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
Maximilianstraße 35<br />
|
||
80539 München<br />
|
||
Deutschland
|
||
</p>
|
||
</div>
|
||
|
||
<div class="border-t border-zinc-200 dark:border-zinc-800 pt-6">
|
||
<h4 class="font-medium text-zinc-900 dark:text-zinc-100 mb-2">Anfahrt</h4>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
|
||
<strong class="text-zinc-900 dark:text-zinc-100">Öffentliche Verkehrsmittel:</strong><br />
|
||
U-Bahn U4/U5 – Haltestelle Lehel<br />
|
||
Tram 19 – Haltestelle Maxmonument
|
||
</p>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
<strong class="text-zinc-900 dark:text-zinc-100">Parken:</strong><br />
|
||
Parkhaus Maximilianstraße (5 Min. Fußweg)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="h-80 bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden">
|
||
<div class="w-full h-full bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<svg class="h-12 w-12 text-[var(--color-primary)] mx-auto mb-3" 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>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||
</svg>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400">
|
||
Interaktive Karte
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-zinc-50/50 dark:bg-zinc-900/50 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
|
||
<h4 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
|
||
Schnelle Hilfe benötigt?
|
||
</h4>
|
||
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
|
||
Für dringende Anfragen oder technischen Support steht Ihnen unser Chat zur Verfügung.
|
||
</p>
|
||
<a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-all">
|
||
Live-Chat starten
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer Component -->
|
||
<livewire:web.footer />
|
||
</main>
|
||
|
||
@endsection
|
||
|
||
@push('styles')
|
||
<style>
|
||
/* Domain-spezifische Color-Variablen für Inline-Styles */
|
||
:root {
|
||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||
}
|
||
|
||
/* Alpine.js Cloak */
|
||
[x-cloak] {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
@endpush
|