@extends('layouts._guest')

@section('content')

<div class="bg-white">
    <!-- Header -->
    <header class="absolute inset-x-0 top-0 z-50">
        <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
            <div class="flex lg:flex-1">
                <a href="#" class="-m-1.5 p-1.5">
                    <span class="sr-only">Gökyüzü Kutuları</span>
                </a>
            </div>
            <div class="flex lg:hidden">
            </div>
            <div class="lg:flex py-20">
                <img class="h-20 w-auto" src="https://cdn.apper.com.tr/img/gokyuzukutulari/full-gk-logo.svg" alt="">
            </div>
            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
            </div>
        </nav>
    </header>

    <main class="isolate pt-32">

        <!-- HERO -->
        <div class="overflow-hidden bg-white py-24 sm:py-32">
            <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
                <section class="mt-20 grid grid-cols-1 lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16">
                    <div class="lg:pr-8 mt-24 text-right">
                        <h1 class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl">
                            Hem ekolojik
                            Hem vizyoner</h1>
                        <p class="mt-8 text-2xl font-medium text-pretty text-gray-500 sm:max-w-md lg:max-w-none">Kamp
                            alanları ve
                            oteller gibi mevcut işletmelerin gelirlerini çeşitlendirmek için
                            yenilikçi ekolojik bir konsept ve işbirliği modeli sunuyoruz.</p>
                        <div class="mt-8 flex items-center justify-end gap-x-4">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-24 w-auto">
                                <path fill="#fb7185"
                                    d="M224 373.1c-25.2-31.7-40.1-59.4-45-83.2-22.6-88 112.6-88 90.1 0-5.5 24.3-20.3 52-45 83.2zm138.2 73.2c-42.1 18.3-83.7-10.9-119.3-50.5 103.9-130.1 46.1-200-18.9-200-54.9 0-85.2 46.5-73.3 100.5 6.9 29.2 25.2 62.4 54.4 99.5-32.5 36.1-60.6 52.7-85.2 54.9-50 7.4-89.1-41.1-71.3-91.1 15.1-39.2 111.7-231.2 115.9-241.6 15.8-30.1 25.6-57.4 59.4-57.4 32.3 0 43.4 25.9 60.4 59.9 36 70.6 89.4 177.5 114.8 239.1 13.2 33.1-1.4 71.3-37 86.6zm47-136.1C280.3 35.9 273.1 32 224 32c-45.5 0-64.9 31.7-84.7 72.8C33.2 317.1 22.9 347.2 22 349.8-3.2 419.1 48.7 480 111.6 480c21.7 0 60.6-6.1 112.4-62.4 58.7 63.8 101.3 62.4 112.4 62.4 62.9 .1 114.9-60.9 89.6-130.2 0-3.9-16.8-38.9-16.8-39.6z" />
                            </svg>
                            <span class="text-gray-400 text-left text-xl">2021 yılında Türkiye'de Airbnb üzerinde
                                <span class="text-gray-600 font-bold">"Benzersiz Konaklamalar"</span>
                                kategorisindeki 2 kayıttan biri seçildik.
                                <br>
                                Yayın süresince
                                <span class="text-gray-600 font-bold">4.85</span>
                                ortalama ile
                                <span class="text-gray-600 font-bold">"Süper Ev Sahibi"</span>
                                unvanına sahip olduk.
                            </span>
                        </div>
                    </div>
                    <div class="pt-16 lg:row-span-2 lg:-mr-16 xl:mr-auto">
                        <div
                            class="-mx-8 grid grid-cols-2 gap-4 sm:-mx-16 sm:grid-cols-4 lg:mx-0 lg:grid-cols-2 lg:gap-4 xl:gap-8">
                            <div
                                class="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10">
                                <img alt="" src="{{ asset('assets/img/franchise/gk-floor.jpg') }}"
                                    class="block size-full object-cover">
                            </div>
                            <div
                                class="-mt-8 aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-40">
                                <img alt="" src="{{ asset('assets/img/franchise/gk-garden.jpg') }}"
                                    class="block size-full object-cover">
                            </div>
                            <div
                                class="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10">
                                <img alt="" src="{{ asset('assets/img/franchise/gk-moka.jpg') }}"
                                    class="block size-full object-cover">
                            </div>
                            <div
                                class="-mt-8 aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-40">
                                <img alt="" src="{{ asset('assets/img/franchise/gk-garden2.jpg') }}"
                                    class="block size-full object-cover">
                            </div>
                        </div>
                    </div>
                </section>
                <div class="max-w-5xl mx-auto">
                    <img alt="" src="{{ asset('assets/img/airbnb/points.png') }}"
                        class="block size-full object-cover p-4">
                    <p class="text-xs text-gray-400 italic text-center">*Airbnb web sitesinden alınmış 2 yılı kapsayan
                        gerçek
                        verilerdir.</p>
                </div>
            </div>
        </div>

        <!-- FRANCHISE -->
        <div class="bg-black text-white py-24 sm:py-32">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <h2 class="text-4xl text-center font-semibold tracking-tight text-pretty sm:text-5xl">Ekosistem
                </h2>
                <dl class="grid grid-cols-1 gap-x-8 gap-y-16 pt-12 text-center lg:grid-cols-3">
                    <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                        <p class="text-4xl">I</p>
                        <h2 class="text-2xl font-semibold tracking-tight sm:text-4xl">Şartları belirleyelim</h2>
                        <p class="font-light text-lg">İşletme olanakları ve anlaşma koşulları belirlenir.
                            Sezonluk anlaşma imzalanır.</p>
                    </div>
                    <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                        <p class="text-4xl">II</p>
                        <h2 class="text-2xl font-semibold tracking-tight sm:text-4xl">Ücretsiz kurulum yapalım</h2>
                        <p class="font-light text-lg">İşletmeniz sınırları içinde belirlenen uygun yerlere <span
                                class="font-bold">Ücretsiz</span>
                            olarak kutu ve aksesuar
                            kurulumları yapılır.</p>
                    </div>
                    <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                        <p class="text-4xl">III</p>
                        <h2 class="text-2xl font-semibold tracking-tight sm:text-4xl">Rezervasyon almaya başlayın</h2>
                        <p class="font-light text-lg">Kurulum sonrasında işletmeniz portalda yayınlanır ve rezervasyon
                            almaya
                            başlarsınız.</p>
                    </div>
                </dl>
            </div>
        </div>

        <!-- IMAGE -->
        <div class="mt-32 sm:mt-40 xl:mx-auto xl:max-w-5xl border-2 border-gray-200 rounded-3xl">
            <img src="{{ asset('assets/img/airbnb/comments.png') }}" alt=""
                class="aspect-5/2 w-full object-cover xl:rounded-3xl">
        </div>
        <div class="xl:mx-auto xl:max-w-5xl">
            <p class="mt-3 text-xs italic text-gray-400 px-3">*Airbnb web sitesinden alınmış gerçek yorum ve
                puanlamalardır.</p>
        </div>

        <!-- VALUES -->
        <div class="mx-auto mt-32 max-w-7xl px-6 sm:mt-40 lg:px-8">
            <div class="mx-auto max-w-2xl lg:mx-0">
                <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">+ Faydalar</h2>
                <p class="mt-6 text-3xl text-gray-600">İşletmenize kattığımız en büyük fayda kuşkusuz gelirlerinizi
                    artırma fırsatıdır.</p>
                <p class="mt-6 text-3xl italic text-gray-400"> Ancak Gökyüzü Kutuları daha fazlasıdır.</p>
            </div>
            <dl
                class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Yeni ve elit müşteriler</h3>
                    <p class="mt-1 text-gray-600">Gökyüzü Kutuları sosyal medya hesapları ve mevcut müşteri havuzundan
                        işletmenize yeni
                        müşteriler kazandırır. Konsept gereği müşteri kitlesi yüksek oranda elit bireylerden oluşur.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Ekstra satış fırsatı</h3>
                    <p class="mt-1 text-gray-600">Yönlendirilen yeni müşteriler işletmenizde bulunan restoran, bar ve
                        aktivitelerden faydalanır
                        ve ekstra satışlarınızı artırır.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Yeni kitleye hitab etme</h3>
                    <p class="mt-1 text-gray-600">Gökyüzü Kutuları, yenilikçi konseptiyle işletmenizin hiç bir zaman
                        hitap edemeyeceği bir
                        kitleye hitab etme imkanı sağlar.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ İşletme değeri artışı</h3>
                    <p class="mt-1 text-gray-600">Konsept gereği sosyal medya mecralarında normalin üzerinden etiketleme
                        alarak işletmenizin
                        doğal reklamasyonu sağlanır. Bu sayede işletmenizin değeri artar.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Tercih sebebi işletme</h3>
                    <p class="mt-1 text-gray-600">Gökyüzü Kutuları Türkiye genelinde tanınan bir marka olması
                        işletmenizin tercih sebebi olmasını
                        sağlar.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Sınırlı lokasyonlardan olma</h3>
                    <p class="mt-1 text-gray-600">Türkiye'de Gökyüzü Kutusu deneyim konaklmamsına sahip sınırlı sayıdaki
                        noktalardan biri olması
                        işletmenizin tanınmasını sağlar.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Başarılı bir konsept</h3>
                    <p class="mt-1 text-gray-600">3 yıldan fazla süre test edilmiş başarılı bir konsept olması
                        işletmenizin başarısını
                        artıracağının garantisidir.
                    </p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 text-2xl">+ Ekstra maliyet yok</h3>
                    <p class="mt-1 text-gray-600">Gökyüzü Kutusu tıpkı bir mobilya gibi portatif bileşenlerden oluşur.
                        Parçalar halinde gelir ve
                        yerinde kurulumu yapılır. Önemli bir yatırım maliyeti olmadan da kullanılabilir. Hizmet
                        vermeye başlamak için yalnızca bir elektrik hattı yeterlidir.
                    </p>
                </div>
            </dl>
        </div>

        <!-- IMAGE -->
        <div class="mt-32 sm:mt-40 xl:mx-auto xl:max-w-7xl border-2 border-gray-200 rounded-3xl">
            <img src="{{ asset('assets/img/franchise/ecosystem.png') }}" alt=""
                class="aspect-5/2 w-full object-cover xl:rounded-3xl">
        </div>
        <div class="xl:mx-auto xl:max-w-7xl">
            <p class="mt-3 text-lg px-3">Türkiye'de alternatif ve ekolojik turizm anlayışına sahip olan seçili
                işletmeler arasında yer alarak tercih sebebi bir işletme
                olun.</p>
        </div>

        <!-- VISION -->
        <div class="mt-32 mx-auto max-w-7xl px-6 ">
            <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
                <div class="mt-6 flex flex-col gap-x-8 gap-y-20 lg:flex-row">
                    <div class="lg:w-full lg:max-w-2xl lg:flex-auto">
                        <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
                            Vizyonumuz</h2>
                        <p class="mt-6 max-w-xl text-2xl font-medium text-gray-700">Hedeflerimizin başında işletmelerin
                            gelirlerini en az %20
                            oranında artırmak
                            var.</p>
                        <p class="mt-6 text-xl/8 text-gray-600">Merkezi rezervasyon ve reklamasyon sistemi sayesinde
                            işletmelerin reklam maliyeti
                            ve iş yükünü
                            hafifletmeyi amaçlıyoruz.</p>
                        <p class="mt-6 text-xl/8 text-gray-600">3 yıl içerisinde Türkiye genelinde farklı konum ve
                            özelliklerde farklı deneyimler
                            sunan bir ekosistem kurmak ve 100'den fazla kutu sayısına ulaşmayı hedefliyoruz.</p>
                        <p class="mt-6 text-xl/8 text-gray-600">Geleceğin turizm modeli olan ekolojik turizm için rol
                            model olmak istiyoruz.</p>
                    </div>
                    <div class="lg:flex lg:flex-auto lg:justify-center">
                        <dl class="w-64 space-y-6 xl:w-80">
                            <div class="flex flex-col-reverse">
                                <p class="text-base/7 text-gray-600">içerisinde</p>
                                <h3 class="text-5xl font-semibold tracking-tight text-gray-900">3 yıl</h3>
                            </div>
                            <div class="flex flex-col-reverse">
                                <p class="text-base/7 text-gray-600">Hedeflenen işletme sayısı</p>
                                <h3 class="text-5xl font-semibold tracking-tight text-gray-900">40+ lokasyon</h3>
                            </div>
                            <div class="flex flex-col-reverse">
                                <p class="text-base/7 text-gray-600">Hedeflenen kutu sayısı</p>
                                <h3 class="text-5xl font-semibold tracking-tight text-gray-900">100+ kutu</h3>
                            </div>
                            <div class="flex flex-col-reverse">
                                <p class="text-base/7 text-gray-600">Hedeflenen gelir artışı oranı</p>
                                <h3 class="text-5xl font-semibold tracking-tight text-gray-900">+%20 gelir</h3>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- BAĞLANTILAR -->
        <div class="bg-black mt-32">
            <section aria-labelledby="features-heading" class="relative">
                <img src="{{ asset('assets/img/franchise/detail-2.png') }}" alt=""
                    class="aspect-3/2 w-full object-cover sm:aspect-5/2 lg:absolute lg:aspect-auto lg:h-full lg:w-1/2 lg:pr-4 xl:pr-16">

                <div
                    class="mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 sm:pb-48 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:pt-48 bg-black text-white">
                    <div class="lg:col-start-2">
                        <h2 class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">Rezervasyon Portalı
                        </h2>
                        <p class="mt-6 text-3xl text-white">İşletmeniz kendi adı, görselleri ve tüm detayları ile
                            rezervasyon portalında yer
                            alır.</p>
                        <p class="mt-6 text-2xl italic text-white">Müşteriler portal üzerinden rezervasyonlarını
                            tamamlarlar.</p>
                        <div class="mt-10">
                            <a href="{{ route('index') }}" type="button" target="_blank"
                                class="mt-10 flex items-center w-96 justify-center rounded-md border border-transparent bg-emerald-600 px-8 py-3 text-lg font-bold text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-hidden">
                                REZERVASYON PORTALI
                            </a>
                            <a href="https://www.instagram.com/gokyuzukutulari" type="button" target="_blank"
                                class="mt-4 flex items-center w-96 justify-center rounded-md border border-transparent bg-emerald-600 px-8 py-3 text-lg font-bold text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-hidden">
                                INSTAGRAM SAYFASI
                            </a>
                            <a href="https://disk.yandex.ru/a/iKIp4oonoFUcMQ" type="button" target="_blank"
                                class="mt-4 flex items-center w-96 justify-center rounded-md border border-transparent bg-emerald-600 px-8 py-3 text-lg font-bold text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-hidden">
                                GÖRSELLER
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </main>

    <!-- FOOTER -->
    <footer class="mt-16 sm:mt-32">
        <div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
            <nav class="-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6" aria-label="Footer">
                <img class="h-20 w-auto" src="https://cdn.apper.com.tr/img/gokyuzukutulari/icon-gk-logo.svg" alt="">
            </nav>
            <div class="mt-16 flex justify-center gap-x-10">
                <a href="https://www.instagram.com/gokyuzukutulari" class="text-gray-600 hover:text-gray-800">
                    <span class="sr-only">Instagram</span>
                    <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
                            clip-rule="evenodd" />
                    </svg>
                </a>
            </div>
            <p class="mt-10 text-center text-sm/6 text-gray-600">&copy; 2025 Gökyüzü Kutuları, Ltd. All rights reserved.
            </p>
        </div>
    </footer>
</div>

@endsection