@extends('layouts.landing')

@section('headers')
@endsection

@section('popup')
@endsection

@section('content')
    <main>
        <div class="py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Our Approach to Performance Marketing</h1>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">At Converting Offers, our strategy is built on
                        innovation and results. We leverage cutting-edge technology and proven methodologies to deliver
                        exceptional performance.</p>
                </div>
                <div class="space-y-16">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                        <div>
                            <div class="flex items-center mb-6">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-brain h-6 w-6 text-blue-600"
                                        aria-hidden="true">
                                        <path
                                            d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z">
                                        </path>
                                        <path
                                            d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z">
                                        </path>
                                        <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path>
                                        <path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path>
                                        <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path>
                                        <path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path>
                                        <path d="M19.938 10.5a4 4 0 0 1 .585.396"></path>
                                        <path d="M6 18a4 4 0 0 1-1.967-.516"></path>
                                        <path d="M19.967 17.484A4 4 0 0 1 18 18"></path>
                                    </svg></div>
                                <h2 class="text-3xl font-bold text-gray-900">AI-Powered Media Buying</h2>
                            </div>
                            <p class="text-lg text-gray-600 leading-relaxed mb-6">We leverage AI-powered media buying to
                                optimize ad spend and maximize reach. Our advanced algorithms analyze vast amounts of data
                                in real-time, making intelligent bidding decisions that ensure your budget is allocated to
                                the highest-performing placements.</p>
                            <p class="text-lg text-gray-600 leading-relaxed">This technology-driven approach allows us to
                                scale campaigns efficiently while maintaining cost-effectiveness and driving superior ROI
                                for our clients.</p>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-xl">
                            <div data-slot="card-content" class="p-8">
                                <div class="space-y-4">
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-zap h-5 w-5 text-blue-600 mr-3" aria-hidden="true">
                                            <path
                                                d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
                                            </path>
                                        </svg><span class="text-gray-700">Real-time optimization</span></div>
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-trending-up h-5 w-5 text-blue-600 mr-3" aria-hidden="true">
                                            <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                                            <polyline points="16 7 22 7 22 13"></polyline>
                                        </svg><span class="text-gray-700">Intelligent bidding strategies</span></div>
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-target h-5 w-5 text-blue-600 mr-3" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <circle cx="12" cy="12" r="6"></circle>
                                            <circle cx="12" cy="12" r="2"></circle>
                                        </svg><span class="text-gray-700">Precision targeting</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-xl lg:order-2">
                            <div data-slot="card-content" class="p-8">
                                <div class="space-y-4">
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-target h-5 w-5 text-green-600 mr-3" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <circle cx="12" cy="12" r="6"></circle>
                                            <circle cx="12" cy="12" r="2"></circle>
                                        </svg><span class="text-gray-700">A/B testing frameworks</span></div>
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-trending-up h-5 w-5 text-green-600 mr-3"
                                            aria-hidden="true">
                                            <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                                            <polyline points="16 7 22 7 22 13"></polyline>
                                        </svg><span class="text-gray-700">Performance analytics</span></div>
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-zap h-5 w-5 text-green-600 mr-3" aria-hidden="true">
                                            <path
                                                d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
                                            </path>
                                        </svg><span class="text-gray-700">Rapid iteration cycles</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="lg:order-1">
                            <div class="flex items-center mb-6">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-target h-6 w-6 text-green-600" aria-hidden="true">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <circle cx="12" cy="12" r="6"></circle>
                                        <circle cx="12" cy="12" r="2"></circle>
                                    </svg></div>
                                <h2 class="text-3xl font-bold text-gray-900">Data-Driven Creative Testing</h2>
                            </div>
                            <p class="text-lg text-gray-600 leading-relaxed mb-6">Through rigorous data-driven creative
                                testing, we continuously refine campaigns for peak performance. Our systematic approach to
                                testing ensures that every creative element is optimized for maximum conversion potential.
                            </p>
                            <p class="text-lg text-gray-600 leading-relaxed">We implement comprehensive A/B testing
                                frameworks that allow us to identify winning combinations quickly and scale them effectively
                                across all channels.</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                        <div>
                            <div class="flex items-center mb-6">
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-users h-6 w-6 text-purple-600" aria-hidden="true">
                                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                        <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                                        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                        <circle cx="9" cy="7" r="4"></circle>
                                    </svg></div>
                                <h2 class="text-3xl font-bold text-gray-900">Influencer Content Licensing</h2>
                            </div>
                            <p class="text-lg text-gray-600 leading-relaxed mb-6">We collaborate with influencers and
                                social media creators, licensing their authentic content to foster trust and significantly
                                boost conversion rates. Our network includes creators with real reach and genuine engagement
                                in the health and wellness space.</p>
                            <p class="text-lg text-gray-600 leading-relaxed">This approach allows us to leverage the trust
                                and credibility that influencers have built with their audiences, creating more authentic
                                and effective marketing campaigns.</p>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-xl">
                            <div data-slot="card-content" class="p-8">
                                <div class="space-y-4">
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-users h-5 w-5 text-purple-600 mr-3" aria-hidden="true">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                            <circle cx="9" cy="7" r="4"></circle>
                                        </svg><span class="text-gray-700">Verified creator network</span></div>
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-shield h-5 w-5 text-purple-600 mr-3" aria-hidden="true">
                                            <path
                                                d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
                                            </path>
                                        </svg><span class="text-gray-700">Authentic content licensing</span></div>
                                    <div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-trending-up h-5 w-5 text-purple-600 mr-3"
                                            aria-hidden="true">
                                            <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                                            <polyline points="16 7 22 7 22 13"></polyline>
                                        </svg><span class="text-gray-700">Trust-driven conversions</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-8 lg:p-12">
                        <div class="text-center mb-8">
                            <div
                                class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="lucide lucide-shield h-8 w-8 text-indigo-600" aria-hidden="true">
                                    <path
                                        d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
                                    </path>
                                </svg></div>
                            <h2 class="text-3xl font-bold text-gray-900 mb-4">Built to Convert with Strong Compliance</h2>
                            <p class="text-lg text-gray-600 max-w-3xl mx-auto">Every product we launch is built to convert,
                                backed by strong compliance, and supported by a modern growth infrastructure that ensures
                                sustainable success and regulatory adherence.</p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div data-slot="card"
                                class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                                <div data-slot="card-content" class="p-6 text-center"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-shield h-8 w-8 text-indigo-600 mx-auto mb-3"
                                        aria-hidden="true">
                                        <path
                                            d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
                                        </path>
                                    </svg>
                                    <h3 class="font-semibold text-gray-900 mb-2">Compliance First</h3>
                                    <p class="text-gray-600 text-sm">Regulatory adherence across all markets</p>
                                </div>
                            </div>
                            <div data-slot="card"
                                class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                                <div data-slot="card-content" class="p-6 text-center"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-zap h-8 w-8 text-indigo-600 mx-auto mb-3" aria-hidden="true">
                                        <path
                                            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
                                        </path>
                                    </svg>
                                    <h3 class="font-semibold text-gray-900 mb-2">Modern Infrastructure</h3>
                                    <p class="text-gray-600 text-sm">Scalable technology stack</p>
                                </div>
                            </div>
                            <div data-slot="card"
                                class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                                <div data-slot="card-content" class="p-6 text-center"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-trending-up h-8 w-8 text-indigo-600 mx-auto mb-3"
                                        aria-hidden="true">
                                        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                                        <polyline points="16 7 22 7 22 13"></polyline>
                                    </svg>
                                    <h3 class="font-semibold text-gray-900 mb-2">Growth Focused</h3>
                                    <p class="text-gray-600 text-sm">Sustainable scaling strategies</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-16">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Ready to Experience Our Approach?</h2>
                    <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">Let's discuss how our proven methodology can
                        help scale your health and wellness offers</p><a data-slot="button"
                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-10 rounded-md has-[>svg]:px-4 text-lg px-8 py-3"
                        href="{{ route('landing.contact') }}" data-discover="true">Start Your Campaign</a>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('scripts')
@endsection