First commit
This commit is contained in:
commit
7cf3558ba7
12933 changed files with 1180047 additions and 0 deletions
|
|
@ -0,0 +1,215 @@
|
|||
<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>
|
||||
73
resources/views/livewire/web/components/ui/footer.blade.php
Normal file
73
resources/views/livewire/web/components/ui/footer.blade.php
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<footer class="section-dark section-padding">
|
||||
<div class="container-padding">
|
||||
{{-- Main Content --}}
|
||||
<div class="text-center spacing-section">
|
||||
<div class="spacing-section">
|
||||
<div class="flex items-center justify-center">
|
||||
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('negative')) }}"
|
||||
alt="{{ $domainName ?? 'B2In' }} Logo" class="h-12 w-auto" />
|
||||
</div>
|
||||
|
||||
<div class="container-narrow spacing-content">
|
||||
<h2 class="text-section-title text-dark-text leading-tight">
|
||||
Connecting Design and <span class="text-secondary">Property</span>
|
||||
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<hr class="border-t border-dark-muted/30 mt-12 pt-4">
|
||||
</div>
|
||||
|
||||
{{-- Links --}}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-left max-w-4xl mx-auto">
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Privacy Policy</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Terms of Service</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Cookie Policy</a>
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Impressum</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bottom Bar --}}
|
||||
<div class="border-t border-dark-muted/30 mt-12 pt-8">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center spacing-small md:space-y-0">
|
||||
<div class="text-dark-muted text-sm">
|
||||
© {{ date('Y') }} B2In. All rights reserved.
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 text-dark-muted text-sm">
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="hover-text-secondary transition-colors" aria-label="Facebook">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="hover-text-secondary transition-colors" aria-label="Instagram">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="hover-text-secondary transition-colors" aria-label="LinkedIn">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
71
resources/views/livewire/web/components/ui/header.blade.php
Normal file
71
resources/views/livewire/web/components/ui/header.blade.php
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<header class="header-normal" id="header">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="{{ $domainUrl }}" class="flex items-center">
|
||||
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('positive')) }}"
|
||||
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-8 w-auto" />
|
||||
</a>
|
||||
|
||||
<nav class="hidden md:flex items-center space-x-8">
|
||||
@foreach($content['navigation'] as $navItem)
|
||||
<a href="{{ $navItem['url'] }}"
|
||||
class="text-sm font-medium transition-colors relative
|
||||
@if($this->isActiveRoute($navItem['url']))
|
||||
text-secondary after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-secondary after:rounded-full
|
||||
@else
|
||||
text-primary hover:text-secondary
|
||||
@endif">
|
||||
{{ $navItem['label'] }}
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="{{ config('domains.domain_portal_url') }}"
|
||||
class=" md:block rounded-md px-3 py-2 text-sm font-medium bg-secondary hover-bg-primary hover-shadow-accent-glow text-white transition-all duration-200">
|
||||
{{ $content['portal_login'] }}
|
||||
</a>
|
||||
<button wire:click="toggleMobileMenu"
|
||||
class="md:hidden w-5 h-5 text-muted-foreground hover:text-foreground transition-colors">
|
||||
@if ($this->isMobileMenuOpen)
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Mobile Menu --}}
|
||||
@if ($this->isMobileMenuOpen)
|
||||
<div class="md:hidden border-t border-border bg-background/95 backdrop-blur-sm">
|
||||
<nav class="px-4 py-6 space-y-4">
|
||||
@foreach($content['navigation'] as $navItem)
|
||||
<a href="{{ $navItem['url'] }}"
|
||||
class="block text-sm font-medium transition-colors py-2 px-3 rounded-md
|
||||
@if($this->isActiveRoute($navItem['url']))
|
||||
text-secondary bg-secondary/10 border-l-2 border-secondary
|
||||
@else
|
||||
text-foreground hover:text-secondary hover:bg-muted/50
|
||||
@endif"
|
||||
wire:click="closeMobileMenu">
|
||||
{{ $navItem['label'] }}
|
||||
</a>
|
||||
@endforeach
|
||||
<div class="pt-4 border-t border-border">
|
||||
<a href="{{ config('domains.domain_portal_url') }}"
|
||||
class="block w-full btn-secondary-accent text-center">
|
||||
{{ $content['portal_login'] }}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</header>
|
||||
79
resources/views/livewire/web/components/ui/top-bar.blade.php
Normal file
79
resources/views/livewire/web/components/ui/top-bar.blade.php
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<div class="topbar-normal" id="topbar">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-10 text-xs">
|
||||
<!-- Left side - Social icons and Theme Demo -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Social Media Icons -->
|
||||
|
||||
<span class="text-muted-foreground">
|
||||
<a href="/theme-demo" class="text-foreground hover-text-secondary transition-colors">Theme Demo</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Language switcher -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex space-x-3">
|
||||
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="Facebook">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="Instagram">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="LinkedIn">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex items-center space-x-1 text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<span class="text-sm font-medium flex items-center gap-1">
|
||||
<span>{{ $localeFlags[$currentLocale] ?? '🏳️' }}</span>
|
||||
<span class="text-xs">{{ $availableLocales[$currentLocale] ?? 'Deutsch' }}</span>
|
||||
</span>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute right-0 mt-2 w-32 bg-card border border-border rounded-md shadow-lg z-50"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="py-1">
|
||||
@foreach($availableLocales as $locale => $name)
|
||||
<button
|
||||
wire:click="switchLanguage('{{ $locale }}')"
|
||||
@click="open = false"
|
||||
class="block w-full text-left px-4 py-2 text-sm transition-colors duration-200 {{ $currentLocale === $locale ? 'bg-secondary text-secondary-foreground' : 'text-card-foreground hover:bg-gray-200 hover:text-gray-900' }}"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span>{{ $localeFlags[$locale] ?? '🏳️' }}</span>
|
||||
<span>{{ $name }}</span>
|
||||
</span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue