184 lines
10 KiB
PHP
184 lines
10 KiB
PHP
<div class="space-y-6">
|
|
{{-- Marken-Header mit Logo --}}
|
|
<flux:card>
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-6 p-6 rounded-lg"
|
|
style="background: linear-gradient(135deg, {{ $customerBrandColors['primary'] ?? '#2b3f51' }}15 0%, {{ $customerBrandColors['secondary'] ?? '#20a0da' }}15 100%);">
|
|
<div class="flex-1 text-center md:text-left">
|
|
<div class="mb-4">
|
|
<img src="{{ asset($customerBrandLogo) }}" alt="{{ $customerBrandName }}" class="h-12 mx-auto md:mx-0 dark:hidden">
|
|
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPathForBrand($customerBrand, 'negative')) }}" alt="{{ $customerBrandName }}" class="h-12 mx-auto md:mx-0 hidden dark:block">
|
|
</div>
|
|
<flux:heading size="xl">{{ __('Willkommen bei') }} {{ $customerBrandName }}!</flux:heading>
|
|
<flux:subheading class="mt-2">{{ __('Ihr persönliches Kundenportal') }}</flux:subheading>
|
|
@if($customerBrokerName)
|
|
<div class="mt-3 flex items-center gap-2 justify-center md:justify-start">
|
|
@svg('heroicon-o-user-circle', 'w-5 h-5 text-zinc-500 dark:text-zinc-400')
|
|
<span class="text-sm text-zinc-600 dark:text-zinc-400">
|
|
{{ __('Ihr Ansprechpartner:') }} <strong>{{ $customerBrokerName }}</strong>
|
|
</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<div class="w-32 h-32 rounded-full flex items-center justify-center"
|
|
style="background-color: {{ $customerBrandColors['primary'] ?? '#2b3f51' }}20;">
|
|
@svg('heroicon-o-home', 'w-16 h-16', ['style' => 'color: ' . ($customerBrandColors['primary'] ?? '#2b3f51')])
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
|
|
{{-- Info-Box --}}
|
|
<flux:card>
|
|
<div class="p-4 rounded-lg" style="background-color: {{ $customerBrandColors['secondary'] ?? '#20a0da' }}10;">
|
|
<div class="flex items-start gap-3">
|
|
@svg('heroicon-o-information-circle', 'w-6 h-6 flex-shrink-0', ['style' => 'color: ' . ($customerBrandColors['secondary'] ?? '#20a0da')])
|
|
<div>
|
|
<div class="font-medium" style="color: {{ $customerBrandColors['primary'] ?? '#2b3f51' }};">
|
|
{{ __('Ihr Dashboard wird bald erweitert') }}
|
|
</div>
|
|
<div class="text-sm text-zinc-700 dark:text-zinc-300 mt-1">
|
|
{{ __('Hier sehen Sie bald Ihre Bestellungen, Wunschliste und Empfehlungen.') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
|
|
{{-- Top-Angebote --}}
|
|
@if(!empty($topOffers))
|
|
<flux:card>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div>
|
|
<flux:heading size="lg">{{ __('Top-Angebote für Sie') }}</flux:heading>
|
|
<flux:subheading>{{ __('Exklusive Möbel zu besonderen Preisen') }}</flux:subheading>
|
|
</div>
|
|
<flux:button variant="ghost" size="sm" icon="arrow-right">
|
|
{{ __('Alle Angebote') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
|
|
@foreach($topOffers as $offer)
|
|
<div class="group relative overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700 hover:shadow-lg transition-shadow duration-300">
|
|
{{-- Produktbild --}}
|
|
<div class="relative aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800">
|
|
<img src="{{ $offer['image'] }}"
|
|
alt="{{ $offer['name'] }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
|
{{-- Rabatt-Badge --}}
|
|
@if($offer['discount'] > 0)
|
|
<div class="absolute top-3 right-3 px-2 py-1 rounded-full text-xs font-bold text-white"
|
|
style="background-color: {{ $customerBrandColors['secondary'] ?? '#20a0da' }};">
|
|
-{{ $offer['discount'] }}%
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Kategorie-Badge --}}
|
|
<div class="absolute top-3 left-3 px-2 py-1 rounded-full text-xs font-medium bg-white/90 dark:bg-zinc-900/90 text-zinc-700 dark:text-zinc-300">
|
|
{{ $offer['category'] }}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Produktinfo --}}
|
|
<div class="p-4">
|
|
<h3 class="font-semibold text-lg mb-2 text-zinc-900 dark:text-zinc-100">
|
|
{{ $offer['name'] }}
|
|
</h3>
|
|
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3">
|
|
{{ $offer['description'] }}
|
|
</p>
|
|
|
|
{{-- Preis --}}
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="text-2xl font-bold" style="color: {{ $customerBrandColors['primary'] ?? '#2b3f51' }};">
|
|
{{ number_format($offer['price'], 2, ',', '.') }} €
|
|
</span>
|
|
@if($offer['original_price'] > $offer['price'])
|
|
<span class="text-sm text-zinc-500 dark:text-zinc-400 line-through">
|
|
{{ number_format($offer['original_price'], 2, ',', '.') }} €
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Aktions-Buttons --}}
|
|
<div class="flex gap-2">
|
|
<flux:button
|
|
variant="primary"
|
|
size="sm"
|
|
icon="eye"
|
|
class="flex-1"
|
|
style="background-color: {{ $customerBrandColors['primary'] ?? '#2b3f51' }}; border-color: {{ $customerBrandColors['primary'] ?? '#2b3f51' }};">
|
|
{{ __('Details') }}
|
|
</flux:button>
|
|
<flux:button
|
|
variant="ghost"
|
|
size="sm"
|
|
icon="heart"
|
|
style="color: {{ $customerBrandColors['secondary'] ?? '#20a0da' }};">
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</flux:card>
|
|
@endif
|
|
|
|
{{-- Feature-Vorschau --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<flux:card>
|
|
<div class="p-4 text-center">
|
|
<div class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center"
|
|
style="background-color: {{ $customerBrandColors['primary'] ?? '#2b3f51' }}20;">
|
|
@svg('heroicon-o-shopping-bag', 'w-8 h-8', ['style' => 'color: ' . ($customerBrandColors['primary'] ?? '#2b3f51')])
|
|
</div>
|
|
<div class="font-medium text-lg">{{ __('Meine Bestellungen') }}</div>
|
|
<div class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{{ __('Bald verfügbar') }}</div>
|
|
<div class="mt-3">
|
|
<flux:badge color="zinc" size="sm">{{ __('In Entwicklung') }}</flux:badge>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
|
|
<flux:card>
|
|
<div class="p-4 text-center">
|
|
<div class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center"
|
|
style="background-color: {{ $customerBrandColors['secondary'] ?? '#20a0da' }}20;">
|
|
@svg('heroicon-o-heart', 'w-8 h-8', ['style' => 'color: ' . ($customerBrandColors['secondary'] ?? '#20a0da')])
|
|
</div>
|
|
<div class="font-medium text-lg">{{ __('Meine Wunschliste') }}</div>
|
|
<div class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{{ __('Bald verfügbar') }}</div>
|
|
<div class="mt-3">
|
|
<flux:badge color="zinc" size="sm">{{ __('In Entwicklung') }}</flux:badge>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
|
|
<flux:card>
|
|
<div class="p-4 text-center">
|
|
<div class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center"
|
|
style="background-color: {{ $customerBrandColors['accent'] ?? ($customerBrandColors['secondary'] ?? '#20a0da') }}20;">
|
|
@svg('heroicon-o-star', 'w-8 h-8', ['style' => 'color: ' . ($customerBrandColors['accent'] ?? ($customerBrandColors['secondary'] ?? '#20a0da'))])
|
|
</div>
|
|
<div class="font-medium text-lg">{{ __('Empfehlungen') }}</div>
|
|
<div class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{{ __('Bald verfügbar') }}</div>
|
|
<div class="mt-3">
|
|
<flux:badge color="zinc" size="sm">{{ __('In Entwicklung') }}</flux:badge>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Marken-Info Footer --}}
|
|
<flux:card>
|
|
<div class="text-center py-6">
|
|
<div class="text-sm text-zinc-600 dark:text-zinc-400">
|
|
{{ __('Powered by') }}
|
|
</div>
|
|
<img src="{{ asset($customerBrandLogo) }}" alt="{{ $customerBrandName }}" class="h-8 mx-auto mt-2 opacity-60 dark:hidden">
|
|
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPathForBrand($customerBrand, 'negative')) }}" alt="{{ $customerBrandName }}" class="h-8 mx-auto mt-2 opacity-60 hidden dark:block">
|
|
</div>
|
|
</flux:card>
|
|
</div>
|