@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">About Converting Offers</h1>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">We're a venture-backed performance marketing agency
                        focused on health and wellness, dedicated to scaling offers fast with cutting-edge technology and
                        proven strategies.</p>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
                    <div class="space-y-6">
                        <h2 class="text-3xl font-bold text-gray-900">Our Story</h2>
                        <p class="text-lg text-gray-600 leading-relaxed">Converting Offers is a venture-backed performance
                            marketing agency focused on health and wellness. We run all campaigns in-house, using AI-powered
                            media buying, paid traffic, and data-driven creative testing.</p>
                        <p class="text-lg text-gray-600 leading-relaxed">Our team licenses content from influencers and
                            social media creators with real reach to build trust and drive conversions. With offices in
                            London, Dubai, and India, we specialize in scaling offers fast—across Meta, native, search, and
                            affiliate channels.</p>
                        <p class="text-lg text-gray-600 leading-relaxed">Every product we launch is built to convert, backed
                            by strong compliance, and supported by a modern growth infrastructure that ensures sustainable
                            success.</p>
                    </div>
                    <div class="grid grid-cols-2 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">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg 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-award h-6 w-6 text-blue-600" aria-hidden="true">
                                        <path
                                            d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
                                        </path>
                                        <circle cx="12" cy="8" r="6"></circle>
                                    </svg></div>
                                <h3 class="text-2xl font-bold text-gray-900 mb-2">Venture-Backed</h3>
                                <p class="text-gray-600">Funded by leading investors</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">
                                <div
                                    class="w-12 h-12 bg-green-100 rounded-lg 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-trending-up h-6 w-6 text-green-600" 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></div>
                                <h3 class="text-2xl font-bold text-gray-900 mb-2">Health Focus</h3>
                                <p class="text-gray-600">Specialized in wellness</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">
                                <div
                                    class="w-12 h-12 bg-purple-100 rounded-lg 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-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>
                                <h3 class="text-2xl font-bold text-gray-900 mb-2">In-House</h3>
                                <p class="text-gray-600">All campaigns managed internally</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">
                                <div
                                    class="w-12 h-12 bg-orange-100 rounded-lg 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-map-pin h-6 w-6 text-orange-600" aria-hidden="true">
                                        <path
                                            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
                                        </path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg></div>
                                <h3 class="text-2xl font-bold text-gray-900 mb-2">Global</h3>
                                <p class="text-gray-600">3 international offices</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-16">
                    <h2 class="text-3xl font-bold text-gray-900 text-center mb-12">Our Global Presence</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg hover:shadow-xl transition-shadow">
                            <div data-slot="card-content" class="p-8 text-center">
                                <div
                                    class="w-16 h-16 bg-red-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-map-pin h-8 w-8 text-red-600" aria-hidden="true">
                                        <path
                                            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
                                        </path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg></div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">London</h3>
                                <p class="text-gray-600">European headquarters driving innovation in performance marketing
                                </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 hover:shadow-xl transition-shadow">
                            <div data-slot="card-content" class="p-8 text-center">
                                <div
                                    class="w-16 h-16 bg-blue-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-map-pin h-8 w-8 text-blue-600" aria-hidden="true">
                                        <path
                                            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
                                        </path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg></div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">Dubai</h3>
                                <p class="text-gray-600">Middle East hub connecting global markets and opportunities</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 hover:shadow-xl transition-shadow">
                            <div data-slot="card-content" class="p-8 text-center">
                                <div
                                    class="w-16 h-16 bg-green-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-map-pin h-8 w-8 text-green-600" aria-hidden="true">
                                        <path
                                            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
                                        </path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg></div>
                                <h3 class="text-xl font-bold text-gray-900 mb-2">India</h3>
                                <p class="text-gray-600">Technology center powering our AI-driven marketing solutions</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Ready to Work Together?</h2>
                    <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">Discover how our expertise in health and
                        wellness marketing can help scale your 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">Get in Touch</a>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('scripts')

@endsection