Senior Developer

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Layout;

class PremiumNavigation extends Component
{
    public $mobileMenuOpen = false;
    public $currentTheme = 'system';
    
    public function mount()
    {
        $this->currentTheme = session('theme', 'system');
    }
    
    public function toggleTheme($theme)
    {
        $this->currentTheme = $theme;
        session(['theme' => $theme]);
        $this->dispatch('theme-changed', theme: $theme);
    }
    
    public function toggleMobileMenu()
    {
        $this->mobileMenuOpen = !$this->mobileMenuOpen;
    }
    
    #[Layout('layouts.app')]
    public function render()
    {
        return view('livewire.premium-navigation');
    }
}

{{-- resources/views/livewire/premium-navigation.blade.php --}}
<nav class="luxury-glass fixed w-full z-50 transition-all duration-300">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16 items-center">
            {{-- Logo --}}
            <div class="flex-shrink-0">
                <a href="/" class="text-2xl font-bold gradient-text">
                    Premium App
                </a>
            </div>
            
            {{-- Desktop Navigation --}}
            <div class="hidden md:flex space-x-8">
                <flux:navlink href="/features">Features</flux:navlink>
                <flux:navlink href="/pricing">Pricing</flux:navlink>
                <flux:navlink href="/about">About</flux:navlink>
            </div>
            
            {{-- Theme Toggle --}}
            <div class="flex items-center space-x-4">
                <flux:dropdown>
                    <flux:button icon="sun-moon" variant="ghost" size="sm">
                        Theme
                    </flux:button>
                    
                    <flux:menu>
                        <flux:menu.item wire:click="toggleTheme('light')" icon="sun">
                            Light
                        </flux:menu.item>
                        <flux:menu.item wire:click="toggleTheme('dark')" icon="moon">
                            Dark
                        </flux:menu.item>
                        <flux:menu.item wire:click="toggleTheme('system')" icon="laptop">
                            System
                        </flux:menu.item>
                    </flux:menu>
                </flux:dropdown>
                
                {{-- Mobile Menu Button --}}
                <button 
                    @click="$wire.toggleMobileMenu()" 
                    class="md:hidden magnetic-element"
                >
                    <flux:icon name="menu" />
                </button>
            </div>
        </div>
    </div>
    
    {{-- Mobile Menu --}}
    <div 
        x-show="$wire.mobileMenuOpen" 
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform scale-95"
        x-transition:enter-end="opacity-100 transform scale-100"
        class="md:hidden"
    >
        <div class="px-2 pt-2 pb-3 space-y-1 luxury-glass">
            <flux:navlink href="/features" mobile>Features</flux:navlink>
            <flux:navlink href="/pricing" mobile>Pricing</flux:navlink>
            <flux:navlink href="/about" mobile>About</flux:navlink>
        </div>
    </div>
</nav>

/* Premium CSS patterns for luxury web experiences */

/* Glass morphism effect */
.luxury-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Dark mode glass */
.dark .luxury-glass {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Magnetic hover effect */
.magnetic-element {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.magnetic-element:hover {
    transform: scale(1.05) translateY(-2px);
}

/* Smooth theme transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Premium button styles */
.premium-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.premium-button:hover::before {
    opacity: 1;
}

.premium-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
}

/* Organic shapes with custom properties */
.organic-blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
    0%, 100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}

/* Premium typography scale */
:root {
    --font-sans: 'Inter', system-ui, sans-serif;
    --spacing-unit: 8px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
}

.premium-typography h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.premium-typography h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.premium-typography p {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    color: var(--text-secondary);
}

// Three.js particle background for hero section
import * as THREE from 'three';

class PremiumParticleBackground {
    private scene: THREE.Scene;
    private camera: THREE.PerspectiveCamera;
    private renderer: THREE.WebGLRenderer;
    private particles: THREE.Points;
    private mouseX: number = 0;
    private mouseY: number = 0;
    
    constructor(container: HTMLElement) {
        this.initScene(container);
        this.createParticles();
        this.addEventListeners();
        this.animate();
    }
    
    private initScene(container: HTMLElement) {
        // Scene setup
        this.scene = new THREE.Scene();
        
        // Camera
        this.camera = new THREE.PerspectiveCamera(
            75,
            container.clientWidth / container.clientHeight,
            0.1,
            1000
        );
        this.camera.position.z = 5;
        
        // Renderer
        this.renderer = new THREE.WebGLRenderer({
            alpha: true,
            antialias: true
        });
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(this.renderer.domElement);
    }
    
    private createParticles() {
        const particlesGeometry = new THREE.BufferGeometry();
        const particlesCount = 5000;
        const posArray = new Float32Array(particlesCount * 3);
        
        for (let i = 0; i < particlesCount * 3; i++) {
            posArray[i] = (Math.random() - 0.5) * 10;
        }
        
        particlesGeometry.setAttribute(
            'position',
            new THREE.BufferAttribute(posArray, 3)
        );
        
        // Material
        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.005,
            color: '#667eea',
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending
        });
        
        this.particles = new THREE.Points(
            particlesGeometry,
            particlesMaterial
        );
        this.scene.add(this.particles);
    }
    
    private addEventListeners() {
        window.addEventListener('mousemove', (event) => {
            this.mouseX = (event.clientX / window.innerWidth) * 2 - 1;
            this.mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        });
        
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        });
    }
    
    private animate = () => {
        requestAnimationFrame(this.animate);
        
        // Rotate particles
        this.particles.rotation.y += 0.001;
        
        // Mouse interaction
        this.particles.rotation.x += (this.mouseY * 0.1 - this.particles.rotation.x) * 0.05;
        this.particles.rotation.y += (this.mouseX * 0.1 - this.particles.rotation.y) * 0.05;
        
        this.renderer.render(this.scene, this.camera);
    }
    
    public destroy() {
        this.renderer.dispose();
        this.particles.geometry.dispose();
        (this.particles.material as THREE.Material).dispose();
    }
}

// Usage in Livewire component
document.addEventListener('DOMContentLoaded', () => {
    const heroContainer = document.getElementById('hero-background');
    if (heroContainer) {
        new PremiumParticleBackground(heroContainer);
    }
});