presseportale/resources/views/livewire/web/footer.blade.php

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $darkMode = false;

    public function mount()
    {
        // Check if user has a preference stored
        $this->darkMode = false;
    }

    public function toggleTheme()
    {
        $this->darkMode = !$this->darkMode;
        $this->dispatch('theme-changed', darkMode: $this->darkMode);
    }
}; ?>

<div x-data="{ darkMode: $wire.entangle('darkMode') }" x-init="darkMode = localStorage.getItem('theme') === 'dark';
$watch('darkMode', value => {
    localStorage.setItem('theme', value ? 'dark' : 'light');
    if (value) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
});
// Initialize theme on load
if (darkMode) {
    document.documentElement.classList.add('dark');
}">
    <footer
        class="bg-zinc-100 glow-soft dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 py-8 mt-auto transition-colors duration-200">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Unternehmen</h3>
                    <ul class="space-y-2">
                        <li><a href="/ueber-uns"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Über
                                uns</a></li>
                        <li><a href="/kontakt"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Kontakt</a>
                        </li>
                        <li><a href="/presse"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Presse</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Services</h3>
                    <ul class="space-y-2">
                        <li><a href="/preise"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Preise</a>
                        </li>
                        <li><a href="/newsrooms"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Newsrooms</a>
                        </li>
                        <li><a href="/api"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">API</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Rechtliches</h3>
                    <ul class="space-y-2">
                        <li><a href="/impressum"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Impressum</a>
                        </li>
                        <li><a href="/datenschutz"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Datenschutz</a>
                        </li>
                        <li><a href="/agb"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">AGB</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Folgen Sie uns</h3>
                    <ul class="space-y-2">
                        <li><a href="https://linkedin.com" target="_blank" rel="noopener"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">LinkedIn</a>
                        </li>
                        <li><a href="https://twitter.com" target="_blank" rel="noopener"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">Twitter</a>
                        </li>
                        <li><a href="/rss"
                                class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 transition-colors">RSS</a>
                        </li>
                    </ul>
                </div>
            </div>

            @php
                $theme = config('app.theme', 'businessportal24');
                $isPresseecho = $theme === 'presseecho';
                $isBusinessportal24 = $theme === 'businessportal24';
                $currentYear = date('Y');
                $siteName = $isPresseecho ? 'Presseecho' : 'Business Portal';
            @endphp

            <!-- Cross-Link für Presseecho -->
            @if ($isPresseecho)
                <div
                    class="mb-6 p-5 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:to-[var(--color-secondary)]/10 rounded-lg border border-[var(--color-primary)]/10">
                    <div class="flex items-center justify-between gap-4 flex-wrap">
                        <div>
                            <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
                                Für maximale Reichweite?
                            </p>
                            <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                Besuchen Sie unser reichweitenstarkes Portal <strong
                                    class="text-zinc-900 dark:text-zinc-100">Businessportal24</strong>
                            </p>
                        </div>
                        <a href="https://businessportal24.test"
                            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] hover:from-[var(--color-primary)]/90 hover:to-[var(--color-secondary)]/90 rounded-lg shadow-md hover:shadow-lg transition-all whitespace-nowrap">
                            Zu Businessportal24
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            @endif

            @if ($isBusinessportal24)
                <div
                    class="mb-6 p-5 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:to-[var(--color-secondary)]/10 rounded-lg border border-[var(--color-primary)]/10">
                    <div class="flex items-center justify-between gap-4 flex-wrap">
                        <div>
                            <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
                                Für maximale Reichweite?
                            </p>
                            <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                Besuchen Sie unser reichweitenstarkes Portal <strong
                                    class="text-zinc-900 dark:text-zinc-100">presseecho</strong>
                            </p>
                        </div>
                        <a href="https://presseecho.test"
                            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] hover:from-[var(--color-primary)]/90 hover:to-[var(--color-secondary)]/90 rounded-lg shadow-md hover:shadow-lg transition-all whitespace-nowrap">
                            Zu Presseecho
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            @endif

            <div class="pt-6 border-t border-zinc-200 dark:border-zinc-700">
                <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                    <p class="text-sm text-zinc-600 dark:text-zinc-400">© {{ $currentYear }} {{ $siteName }}. Alle
                        Rechte vorbehalten.</p>

                    <!-- Theme Toggle -->
                    <button @click="darkMode = !darkMode"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-lg transition-all"
                        aria-label="Theme wechseln">
                        <!-- Sun Icon (zeigt in Dark Mode) -->
                        <svg x-show="darkMode" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            x-cloak>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
                            </path>
                        </svg>
                        <!-- Moon Icon (zeigt in Light Mode) -->
                        <svg x-show="!darkMode" class="h-5 w-5" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
                            </path>
                        </svg>
                        <span x-text="darkMode ? 'Hell' : 'Dunkel'"></span>
                    </button>
                </div>
            </div>
        </div>
    </footer>
</div>