<x-layout.site title="Welcome to {{ config('app.name') }}" metaDescription="Discover our modern platform with powerful features and intuitive design.">
    <!-- Hero Section -->
    <x-hero 
        title="Welcome to the Future"
        subtitle="Experience modern design with glassmorphism effects and seamless navigation"
        :ctaButtons="[
            ['label' => 'Get Started', 'route' => 'register', 'style' => 'primary', 'icon' => 'fa-arrow-right'],
            ['label' => 'Learn More', 'route' => 'home', 'style' => 'outline', 'icon' => 'fa-info-circle']
        ]"
    />

    <!-- Content Section -->
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    Why Choose Us
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-400 max-w-5xl mx-auto">
                    We provide cutting-edge solutions with modern design principles
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                    <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-rocket text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                        Fast Performance
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Lightning-fast load times and smooth animations for the best user experience.
                    </p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                    <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-shield-halved text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                        Secure & Reliable
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Enterprise-grade security with role-based access control and data protection.
                    </p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                    <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-palette text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                        Modern Design
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Beautiful glassmorphism effects and 3D depth for a contemporary look.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-gradient-to-br from-blue-600 to-purple-700 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-4xl font-bold mb-4">
                Ready to Get Started?
            </h2>
            <p class="text-xl mb-8 text-white/90 max-w-5xl mx-auto">
                Join thousands of users who trust our platform for their needs.
            </p>
            <div class="flex justify-center gap-4">
                <a href="{{ route('register') }}" class="px-8 py-3 bg-white text-blue-600 rounded-lg hover:bg-gray-100 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 font-semibold">
                    Sign Up Now
                </a>
                <a href="{{ route('home') }}" class="px-8 py-3 border-2 border-white text-white rounded-lg hover:bg-white hover:text-blue-600 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 font-semibold">
                    Contact Sales
                </a>
            </div>
        </div>
    </section>
</x-layout.site>
