b2in/resources/views/livewire/web/components/sections_bak/partner-hero.blade_bak.php

<section class="min-h-screen flex items-center relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div class="space-y-8">
                <h1 class="text-hero">
                    Wachsen Sie mit uns.<br />
                    Werden Sie <span class="text-secondary">B2In Partner</span>.
                </h1>

                <p class="text-lg text-muted-foreground max-w-md leading-relaxed">
                    Werden Sie Teil des B2In Ecosystems und profitieren Sie von innovativen
                    Geschäftsmodellen, die nachhaltiges Wachstum und langfristigen Erfolg ermöglichen.
                    Gemeinsam gestalten wir die Zukunft der Immobilienbranche.
                </p>

                <div class="grid grid-cols-2 gap-6">
                    @foreach ($this->partnerTypes as $partner)
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                                @if ($partner['icon'] === 'trending-up')
                                    <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                                    </svg>
                                @elseif($partner['icon'] === 'globe')
                                    <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                @elseif($partner['icon'] === 'handshake')
                                    <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                                    </svg>
                                @else
                                    <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                                    </svg>
                                @endif
                            </div>
                            <div>
                                <p class="font-semibold text-foreground">{{ $partner['title'] }}</p>
                                <p class="text-sm text-muted-foreground">{{ $partner['description'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="relative">
                <div class="card-elevated rounded-3xl p-12 bg-background/80 backdrop-blur-sm">
                    <div class="space-y-8">
                        <!-- Central Partnership Hub -->
                        <div class="text-center">
                            <div
                                class="w-24 h-24 mx-auto rounded-full bg-primary flex items-center justify-center mb-4">
                                <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                                </svg>
                            </div>
                            <h3 class="text-xl font-semibold text-foreground">Partner Network</h3>
                            <p class="text-sm text-muted-foreground">Werden Sie Teil unseres Ecosystems</p>
                        </div>

                        <!-- Partner Types -->
                        <div class="grid grid-cols-2 gap-8">
                            <div class="text-center">
                                <div
                                    class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                                    <svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                                    </svg>
                                </div>
                                <p class="font-medium text-sm">Makler</p>
                                <p class="text-xs text-muted-foreground">Lifetime-Modell</p>
                            </div>

                            <div class="text-center">
                                <div
                                    class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                                    <svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <p class="font-medium text-sm">Lieferanten</p>
                                <p class="text-xs text-muted-foreground">Global Markets</p>
                            </div>

                            <div class="text-center">
                                <div
                                    class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                                    <svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 1.657-2.657 1.657-2.657A8 8 0 0118.657 17.657zM12 12l1 1" />
                                    </svg>
                                </div>
                                <p class="font-medium text-sm">Erfolg</p>
                                <p class="text-xs text-muted-foreground">Messbare Ziele</p>
                            </div>

                            <div class="text-center">
                                <div
                                    class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                                    <svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                                    </svg>
                                </div>
                                <p class="font-medium text-sm">Qualität</p>
                                <p class="text-xs text-muted-foreground">Premium Standards</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>