@extends('frontend.layouts.app')

@section('title', __('Home'))

@section('meta_description', 'Idein The Ideal Partner for All of Your Creative & strategic Communication Needs.')

@section('content')
    {{-- section1 --}}
    <section class="mt-10 md:mt-32 pxs">
        <div class="lg:h-[70vh] flex items-center justify-center md:justify-between max-md:flex-wrap max-md:gap-10 mb-6 md:mb-10">
            <div class="font-rubik text-[32px] md:text-5xl max-md:text-center leading-snug max-md:order-2">
                <div class="font-[500] leading-tight tracking-tighter">
                    The
                    <span class="relative">
                        <span class="absolute top-0 -bottom-2 -left-2 md:-bottom-5 md:-left-5 right-0">
                            <svg class="h-[80%] w-full" viewBox="0 0 457 166" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                                <path class="draw-circle" pathLength="100" vector-effect="non-scaling-stroke"
                                    d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                    stroke="#000" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                        ideal
                    </span>
                    partner
                </div>
                <div class="font-[400] leading-tight tracking-tighter">
                    for all of your <br>
                    <span class="relative btm-line">creative & strategic</span> <br>
                    communication <br> needs.
                </div>
                <div class="mt-8">
                    <div class="max-md:text-center font-inter text-xs md:text-xl">
                        Get your
                        <span class="relative font-bold text-free">
                            {{-- <div class="absolute top-0 -left-1 -right-1 bottom-0">
                                <img class="h-full w-full" src="{{ asset('img/bg-free.png') }}" alt="">
                            </div> --}}
                            free
                        </span>
                        30-minutes consultation now
                    </div>
                    <div class="mt-4">
                        <button onclick="openModal()" class="btn-outline"><span class="btn-text">Book A Session</span></button>
                    </div>
                </div>
            </div>
            <div class="md:basis-[55%] order-1 relative">
                {{-- <img class="w-full" src="{{ asset('img/home/hero-robot.png') }}" alt=""> --}}
                <div class="atropos my-atropos relative z-10">
                    <!-- scale container (required) -->
                    <div class="atropos-scale">
                      <!-- rotate container (required) -->
                      <div class="atropos-rotate">
                        <!-- inner container (required) -->
                        <div class="atropos-inner overflow-visible">
                            <img class="w-full" src="{{ asset('img/home/hero-4.png') }}" alt="" data-atropos-offset="0">
                            <img class="absolute left-[20%] bottom-[7%] h-[80%]" src="{{ asset('img/home/hero-3.png') }}" alt="" data-atropos-offset="-1">
                            <img class="absolute right-[5%] bottom-[10%] w-1/2" src="{{ asset('img/home/hero-2.png') }}" alt="" data-atropos-offset="1">
                            <img class="absolute top-[30%] right-[10%] w-[15%]" src="{{ asset('img/home/hero-1.png') }}" alt="" data-atropos-offset="-1">
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
        <div>
            <button class="mx-auto block relative z-10 js-scroll-trigger" data-scroll="#section-1">
                <img class="mx-auto w-[200px] max-md:w-1/2" src="{{ asset('img/icon/scll-more.png') }}" alt="">
            </button>
        </div>
    </section>
    {{-- section1 end --}}

    <section id="section-1" class="pt-6 pb-0 md:py-32">
        <div class="pxs mx-auto" data-gesture="inview-fade-right">
            <div class="text-xl max-md:text-center md:text-[4.375rem] font-rubik font-[400]" data-anim="inview-fade-right">
                We've got it <span class="font-[600]">under control</span> 💪
            </div>
            <div class="curves-dotte my-10 md:mt-20 md:mb-32 relative">
                <div class="md:-mx-[10%] lg:-mx-[6%] pt-4 md:pb-[12%] lg:pb-[8%] max-md:hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1367.65 175.96">
                        <g id="timeline">
                            <path d="M56.72,1.54C32.48,4.73,17.12,15.07,6.57,29.24" transform="translate(0 0)" />
                            <path d="M113.08.5c2,0,4,.05,6,.13" transform="translate(0 0)" />
                            <path d="M73.4.5c-2.05,0-4.05.05-6,.13" transform="translate(0 0)" />
                            <path d="M131.52,1.78c102.81,15.28,41.93,162.47,144.54,173.08" transform="translate(0 0)" />
                            <path d="M335.1,175.33q-2.93.13-6,.13" transform="translate(0 0)" />
                            <path d="M545.35.5c2,0,4,.05,6,.13" transform="translate(0 0)" />
                            <path d="M485.86,1.78c-102.8,15.28-41.92,162.47-144.53,173.08" transform="translate(0 0)" />
                            <path d="M282.29,175.33q2.93.13,6,.13" transform="translate(0 0)" />
                            <path d="M504.31.5c-2.05,0-4.05.05-6,.13" transform="translate(0 0)" />
                            <path d="M563.8,1.78c102.81,15.28,41.92,162.47,144.53,173.08" transform="translate(0 0)" />
                            <path d="M767.33,175.33q-2.93.13-6,.13" transform="translate(0 0)" />
                            <path d="M976.26.5c2,0,4,.05,6,.13" transform="translate(0 0)" />
                            <path d="M918.1,1.78C815.29,17.06,876.17,164.25,773.56,174.86" transform="translate(0 0)" />
                            <path d="M714.57,175.33q2.91.13,6,.13" transform="translate(0 0)" />
                            <path d="M936.54.5c-2,0-4,.05-6,.13" transform="translate(0 0)" />
                            <path d="M994.71,1.78c102.81,15.28,41.92,162.47,144.53,173.08" transform="translate(0 0)" />
                            <path d="M1198.44,175.33q-2.91.13-6,.13" transform="translate(0 0)" />
                            <path d="M3.52,33.64Q1.9,36.16.44,38.79" transform="translate(0 0)" />
                            <path d="M1367.65.5c-2.05,0-4.05.05-6,.13" transform="translate(0 0)" />
                            <path d="M1145.47,175.33q2.92.13,6,.13" transform="translate(0 0)" />
                            <path d="M1349.21,1.78c-102.81,15.28-41.93,162.47-144.53,173.08" transform="translate(0 0)" />
                        </g>
                    </svg>
                </div>
                <div class="work-curves font-inter" data-gesture='inview-fade-right-stagger'>
                    <div class="" data-anim='inview-fade-right-stagger'>
                        <a href="{{ route('frontend.work') }}#creative">
                            <x-svg.arrow fill="#000" bg="#fff" border="true" />
                            <div>
                                <span class="font-medium">Creative</span>
                                Communication
                                Plan
                            </div>
                        </a>
                    </div>
                    <div class="max-md:order-3" data-anim='inview-fade-right-stagger'>
                        <a href="{{ route('frontend.work') }}#brand-identity">
                            <x-svg.arrow fill="#000" bg="#fff" border="true" />
                            <div>
                                <span class="font-medium">Brand</span> <br class="max-md:hidden">
                                Identity
                            </div>
                        </a>
                    </div>
                    <div class="max-md:order-2" data-anim='inview-fade-right-stagger'>
                        <a href="{{ route('frontend.work') }}#sosmed-management">
                            <x-svg.arrow fill="#000" bg="#fff" border="true" />
                            <div>
                                <span class="font-medium">Social Media</span>
                                Management
                            </div>
                        </a>
                    </div>
                    <div class="max-md:order-4" data-anim='inview-fade-right-stagger'>
                        <a href="{{ route('frontend.work') }}#creative-marketing">
                            <x-svg.arrow fill="#000" bg="#fff" border="true" />
                            <div>
                                <span class="font-medium">Creative</span>
                                Marketing
                            </div>
                        </a>
                    </div>
                    <div class="max-md:order-5" data-anim='inview-fade-right-stagger'>
                        <a href="{{ route('frontend.work') }}#performance-marketing">
                            <x-svg.arrow fill="#000" bg="#fff" border="true" />
                            <div>
                                <span class="font-medium">Performance</span>
                                Marketing
                            </div>
                        </a>
                    </div>
                    <div class="max-md:order-6" data-anim='inview-fade-right-stagger'>
                        <a href="{{ route('frontend.work') }}#training">
                            <x-svg.arrow fill="#000" bg="#fff" border="true" />
                            <div>
                                In-House <br class="max-md:hidden">
                                <span class="font-medium">Training</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="text-2xl max-md:text-center md:text-5xl mb-8 max-md:hidden" data-gesture="inview-fade-right">
                <div class="font-rubik" data-anim="inview-fade-right">A Glimpse of <span class="font-bold">Who We Are...</span></div>
            </div>
            <div data-gesture="inview-fade-up">
                <div class="bg-grad-primary md:rounded-t-xl px-4 md:px-10 max-md:pb-28 max-md:-mx-5" data-anim="inview-fade-up">
                    <div class="text-[26px] font-rubik max-md:text-center md:text-5xl text-white pt-10 mb-8 md:hidden font-[400]">A Glimpse of <span class="font-medium">Who We Are...</span></div>
                    <div class="flex items-center gap-2 md:gap-5 text-white pt-2 pb-2 md:py-10">
                        <div class="h-12 md:h-24 w-full border-dashed rounded-tl-xl border-l border-t border-white mt-2 md:mt-8"></div>
                        <div class="self-start">
                            <div class="flex items-center gap-2 md:gap-4 w-max">
                                <div>
                                    <img class="h-5 md:h-16" src="{{ asset('img/brand/Logo-white.svg') }}" alt="">
                                </div>
                                <div class="font-medium text-[8px] md:text-xl">PT IDEIN KREATIF INDONESIA</div>
                            </div>
                        </div>
                        <div class="h-12 md:h-24 w-full border-dashed rounded-tr-xl border-r border-t border-white mt-2 md:mt-8"></div>
                    </div>
                    <div>
                        <table class="w-full text-white font-inter">
                            <thead>
                                <th class="border-b border-r border-white p-2 md:p-5 md:align-bottom">
                                    <div><img class="w-max md:h-9 max-md:mb-1" src="{{ asset('img/brand/idein_creative.svg') }}" alt=""></div>
                                </th>
                                <th class="border-b border-r border-white p-2 md:p-5 md:align-bottom">
                                    <div class="max-md:hidden"><img class="h-8 md:h-11" src="{{ asset('img/brand/idein_workshop2.svg') }}" alt=""></div>
                                    <div class="md:hidden"><img class="h-8 md:h-11" src="{{ asset('img/brand/idein_workshop_mobile.svg') }}" alt=""></div>
                                </th>
                                <th class="border-b border-white p-2 md:p-5 md:align-bottom">
                                    <div><img class="h-10 md:h-16 max-md:mb-2" src="{{ asset('img/brand/idein_studio1.svg') }}" alt=""></div>
                                </th>
                            </thead>
                            <tbody>
                                <tr class="text-[8px] md:text-lg">
                                    <td class="border-r border-white align-top">
                                        <div class="flex gap-4 max-lg:flex-col p-2 md:p-5 w-full">
                                            <div>
                                                <div>Creative Communication Plan</div>
                                                <div>Brand Identity</div>
                                                <div>Social Media Management</div>
                                            </div>
                                            <div>
                                                <div>Creative & Performance Marketing</div>
                                                <div>Design Collaterals</div>
                                                <div>In-house Training</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="border-r border-white align-top">
                                        <div class="flex gap-4 max-lg:flex-col p-2 md:p-5 w-full" >
                                            <div>
                                                <div>Wayfinding</div>
                                                <div>Neon Retail Product</div>
                                                <div>Signage / Logo Lightbox</div>
                                                <div>Commercial Interior Design</div>
                                                <div>Media Placement</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class=" align-top">
                                        <div class="flex gap-4 max-lg:flex-col p-2 md:p-5 w-full">
                                            <div>
                                                <div>Photo Studio Renta</div>
                                                <div>LivePod™</div>
                                                <div>Photography Service</div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mx-[9%] mt-20">
                        <div class="max-md:text-white text-center text-2xl md:text-4xl font-rubik">
                            <span><span class="font-bold">idein</span> <span class="font-medium max-md:hidden"> creative</span><span class="md:text-2xl align-top max-md:-top-1 max-md:inline-block max-md:-ml-1 max-md:text-xs">&#174;</span></span>
                                is your
                                <span class="relative inline-block">
                                    <span class="absolute top-0 -bottom-2 -left-2 md:-bottom-3 md:-left-3 right-0">
                                        <svg class="h-[85%] w-full" viewBox="0 0 457 166" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                                            <path class="draw-circle max-md:!stroke-white" pathLength="100" vector-effect="non-scaling-stroke"
                                                d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </span>
                                    one-stop
                                </span>
                                vendor for
                                creative solutions by delivering exceptional
                                solutions that drive 📈 business growth
                        </div>
                        <div class="md:w-1/2 text-[#848382] space-y-1 mt-40 font-inter max-md:hidden">
                            <div>idein <span class="italic">[e-day-in] noun</span></div>
                            <div>The word “IDE” in English means idea and “IN” is equivalent
                                to the verb "ing." Mix those 2 ingredients together voila! Our
                                name meaning refers to the process of giving form to ideas
                                in order to put them into practice on daily basis.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="-mt-20 md:-mt-60 relative max-md:mx-6">
        <img class="mx-auto" src="{{ asset('img/robot-3.png') }}" alt="">
    </div>

    <section class="py-10 md:py-40">
        <div class="pxs mx-auto">
            <div class="flex items-center justify-between gap-2 font-inter">
                <div>
                    <div class="bg-black text-white text-[9px] md:text-2xl w-fit px-2 rounded-t-md">
                        Started
                    </div>
                    <div class="bg-black text-white text-[9px] md:text-2xl w-max px-2 rounded-tr-md rounded-b-md">
                        from 2016
                    </div>
                </div>
                <div class="w-full">
                    <div class="line"></div>
                </div>
                <div>
                    <div class="bg-black text-white text-[9px] md:text-2xl w-fit px-2 rounded-t-md">
                        and now
                    </div>
                    <div class="bg-black text-white text-[9px] md:text-2xl w-max px-2 rounded-tr-md rounded-b-md">
                        we’re here!
                    </div>
                </div>
            </div>
            <div class="text-center text-sm md:text-3xl md:w-[70%] mx-auto mt-10 md:mt-32 font-rubik">
                Gathering experience after experience,
                <span class="relative inline-block">
                    <span class="absolute top-0 -bottom-2 -left-2 md:-bottom-4 md:-left-3 right-0">
                        <svg class="h-[83%] w-full" viewBox="0 0 457 166" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                            <path class="draw-circle" pathLength="100" vector-effect="non-scaling-stroke"
                                d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    we grow
                </span>
                from feedbacks from our former, loyal existing and
                potential partners. 🤝
            </div>
            <div class="my-10 md:my-32">
                <img class="mx-auto" src="{{ asset('img/home/clients.png') }}" alt="">
            </div>
            <div class="text-center text-sm md:text-3xl font-inter md:w-[70%] mx-auto ">
                Being buddy with our partners is our
                <span class="relative inline-block">
                    <span class="absolute top-0 -bottom-2 -left-2 md:-bottom-4 md:-left-3 right-0">
                        <svg class="h-[83%] w-full" viewBox="0 0 457 166" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                            <path class="draw-circle" pathLength="100" vector-effect="non-scaling-stroke"
                                d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    priority
                </span>
                as we seek to
                develop a long and enduring relationship.
            </div>
            <div class="w-full flex justify-center mt-8">
                <a href="{{ route('frontend.work') }}" class="btn-outline max-md:!text-xs !px-3 !py-1 md:!px-5 md:!py-3 !border-[1.5px] md:!border-2 max-md:!rounded-md"><span class="btn-text">See Our Services</span></a>
            </div>
        </div>
    </section>

    {{-- @include('frontend.includes.modal-book-session') --}}
    <livewire:frontend.book-session />
@endsection

@push('after-scripts')
    <script>
        const myAtropos = Atropos({
            el: '.my-atropos',
            shadow: false,
            alwaysActive: false,
            activeOffset: 0,
            commonOrigin: false,
            rotateXMax: 1,
            rotateYMax: 1,
            shadowOffset: 0,
            highlight: false
        });

        const modal = document.querySelector('.main-modal');
        const closeButton = document.querySelectorAll('.modal-close');

		const modalClose = () => {
			modal.classList.remove('fadeIn');
			modal.classList.add('fadeOut');
			setTimeout(() => {
				modal.style.display = 'none';
			}, 100);
		}

		const openModal = () => {
			modal.classList.remove('fadeOut');
			modal.classList.add('fadeIn');
			modal.style.display = 'flex';
		}

		for (let i = 0; i < closeButton.length; i++) {

			const elements = closeButton[i];

			elements.onclick = (e) => modalClose();

			modal.style.display = 'none';

			window.onclick = function (event) {
				if (event.target == modal) modalClose();
			}
		}

    </script>
@endpush