ZALORA SEA - Careers Page

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="p8h67r3vgIzvBSXpGxEvVmHgsplO85Aj1T6X9URg"> <meta name="description" content="ZALORA Careers Website."> <title>ZALORA SEA - Careers Page</title>  <link rel="preload" as="style" href="https://careers.zalora.com/build/assets/app.afa4e991.css" /><link rel="preload" as="style" href="https://careers.zalora.com/build/assets/app.5ddd0c10.css" /><link rel="modulepreload" href="https://careers.zalora.com/build/assets/app.0190196d.js" /><link rel="stylesheet" href="https://careers.zalora.com/build/assets/app.afa4e991.css" /><link rel="stylesheet" href="https://careers.zalora.com/build/assets/app.5ddd0c10.css" /><script type="module" src="https://careers.zalora.com/build/assets/app.0190196d.js"></script>  <style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style>  <script> window.dataLayer = window.dataLayer || []; </script> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PP25Q75'); </script> </head> <body class="font-sans antialiased">  <script> function gtmPush() { } addEventListener("load", gtmPush); </script> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP25Q75" height="0" width="0" style="display:none;visibility:hidden" ></iframe> </noscript> <div x-data="{"show":true,"style":"success","message":null}" :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }" style="display: none;" x-show="show && message" x-init=" document.addEventListener('banner-message', event => { style = event.detail.style; message = event.detail.message; show = true; }); "> <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8"> <div class="flex items-center justify-between flex-wrap"> <div class="w-0 flex-1 flex items-center min-w-0"> <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }"> <svg x-show="style == 'success'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <svg x-show="style == 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <svg x-show="style != 'success' && style != 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </span> <p class="ml-3 font-medium text-sm text-white truncate" x-text="message"></p> </div> <div class="shrink-0 sm:ml-3"> <button type="button" class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition" :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }" aria-label="Dismiss" x-on:click="show = false"> <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> </div> </div> <div class="min-h-screen flex flex-col justify-between"> <nav wire:id="HGIGCbEmhQNQ4osZQFes" wire:initial-data="{"fingerprint":{"id":"HGIGCbEmhQNQ4osZQFes","name":"navigation-menu","locale":"en","path":"careers","method":"GET","v":"acj"},"effects":{"listeners":["refresh-navigation-menu"]},"serverMemo":{"children":[],"errors":[],"htmlHash":"ec1f62a7","data":[],"dataMeta":[],"checksum":"65d4923d6d2e3fea10ea24c4c721d24ee18bfcfd46052a6f78aa666c84344212"}}" x-data="{ open: false }" class="bg-white drop-shadow-md">  <div class="w-full border-b border-gray-600"> <div class="flex justify-center align-center items-center w-full h-fit py-6"> <div class="flex w-full">  <div class="flex items-center pl-6 xl:pl-24"> <a aria-label="home page" href="https://careers.zalora.com"> <svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 278.453 37.971" class="w-3/4 fill-black"> <path id="polygon2" d="M0,37.531v1.2H33.678V35.723H5.873L33.492,3.147l-.009-1.427H1.3V4.731H27.632Z" transform="translate(0 -1.242)"/> <path id="path4" d="M189.984.766,172.429,38.045h3.763L182.1,25.467h17.788L205.8,38.045h3.763L192.009.766Zm8.5,21.69H183.509l7.46-15.971Z" transform="translate(-124.415 -0.553)"/> <path id="polygon6" d="M371.677,35.723v-34h-3.586V38.733h22.03V35.723Z" transform="translate(-265.595 -1.242)"/> <path id="path8" d="M523.95,0C512.708,0,503.9,8.339,503.9,18.985s8.806,18.985,20.047,18.985c11.3,0,20.155-8.339,20.155-18.985S535.252,0,523.95,0Zm.11,34.694c-9.169,0-16.353-6.9-16.353-15.709S514.891,3.276,524.06,3.276c9.108,0,16.242,6.9,16.242,15.709S533.167,34.694,524.06,34.694Z" transform="translate(-363.59)"/> <path id="path10" d="M736.246,20.353c4.443-1.781,6.694-4.777,6.694-8.914,0-6.081-4.752-9.711-12.713-9.711h-9.921V38.738h3.586V21.311h4.694c4.4,0,5.752.629,10.111,7.308l6.614,10.12h4.213l-8.777-13.094C739.094,23.228,737.76,21.382,736.246,20.353ZM723.889,4.736h5.734c6.133,0,9.511,2.4,9.511,6.755,0,4.39-3.338,6.808-9.4,6.808h-5.842V4.736Z" transform="translate(-519.735 -1.246)"/> <path id="path12" d="M886.212.766h-2.027L866.63,38.045h3.763L876.3,25.467h17.788L900,38.045h3.765Zm6.473,21.69H877.712l7.46-15.971Z" transform="translate(-625.315 -0.553)"/> </svg> </a> </div>  <div class="hidden lg:flex align-center items-end space-x-6 xl:space-x-12 ml-auto pr-12 xl:pr-24 w-fit"> <a class="inline-flex whitespace-nowrap items-center font-apercu-medium text-base xl:text-lg tracking-wide leading-5 text-gray-800 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition" href="https://careers.zalora.com"> Home </a> <a class="inline-flex whitespace-nowrap items-center font-apercu-medium text-base xl:text-lg tracking-wide leading-5 text-electric-violet focus:outline-none focus:border-black transition" href="https://careers.zalora.com/careers"> Careers </a> <a class="inline-flex whitespace-nowrap items-center font-apercu-medium text-base xl:text-lg tracking-wide leading-5 text-gray-800 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition" href="https://careers.zalora.com/interview-tips-and-tricks"> Interview Tips & Tricks </a> <a class="inline-flex whitespace-nowrap items-center font-apercu-medium text-base xl:text-lg tracking-wide leading-5 text-gray-800 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition" href="https://careers.zalora.com/life-as-a-zalorian"> Life as a ZALORIAN </a> <a class="inline-flex whitespace-nowrap items-center font-apercu-medium text-base xl:text-lg tracking-wide leading-5 text-gray-800 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition" href="https://careers.zalora.com/best-of-zalora"> Best of ZALORA </a> </div>  <div class="ml-auto pr-6 flex items-center lg:hidden"> <button aria-label="Menu" @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition"> <svg class="h-8 w-8" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> </div> </div>  <div :class="{'block': open, 'hidden': ! open}" class="hidden lg:hidden"> <div class="pt-2 pb-3 space-y-1"> <a class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition" href="https://careers.zalora.com"> Home </a> <a class="block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition" href="https://careers.zalora.com/careers"> Careers </a> <a class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition" href="https://careers.zalora.com/interview-tips-and-tricks"> Interview Tips & Tricks </a> <a class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition" href="https://careers.zalora.com/life-as-a-zalorian"> Life as a ZALORIAN </a> <a class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition" href="https://careers.zalora.com/best-of-zalora"> Best of ZALORA </a> </div> </div> </nav>    <main class="mb-auto"> <div wire:id="5IBfufkzzOuJrelHkYi1" wire:initial-data="{"fingerprint":{"id":"5IBfufkzzOuJrelHkYi1","name":"careers","locale":"en","path":"careers","method":"GET","v":"acj"},"effects":{"listeners":["redirectToLinkedin"],"path":"https:\/\/careers.zalora.com\/careers?"},"serverMemo":{"children":[],"errors":[],"htmlHash":"4273f2cd","data":{"jobs":[],"filteredJobs":[],"jobsByDepartments":[],"departmentsToDisplay":["Commercial","Engineering","Finance","Legal","Marketing","Operations","People & Culture","Revenue","Strategy"],"departmentCount":{"Commercial":0,"Engineering":0,"Finance":0,"Legal":0,"Marketing":0,"Operations":0,"People & Culture":0,"Revenue":0,"Strategy":0},"simillarDepartmentsToDepartments":{"Administration":"People & Culture","Category":"Commercial","Human Resources":"People & Culture","Human Resource & Administration":"People & Culture","Platform":"Commercial","Revenue Office":"Revenue"},"departmentAssetUrls":{"Commercial":"https:\/\/careers.zalora.com\/assets\/commercial_tab.webp","Engineering":"https:\/\/careers.zalora.com\/assets\/engineering_tab.webp","Finance":"https:\/\/careers.zalora.com\/assets\/finance_tab.webp","Legal":"https:\/\/careers.zalora.com\/assets\/legal_tab.webp","Marketing":"https:\/\/careers.zalora.com\/assets\/marketing_tab.webp","Operations":"https:\/\/careers.zalora.com\/assets\/operations_tab.webp","People & Culture":"https:\/\/careers.zalora.com\/assets\/people_culture_tab.webp","Revenue":"https:\/\/careers.zalora.com\/assets\/revenue_tab.webp","Strategy":"https:\/\/careers.zalora.com\/assets\/strategy_tab.webp"},"jobsToDisplay":[],"jobSelected":[],"jobSelectedError":false,"keyword":"","jobTypes":[],"locations":[],"sharePlatform":null,"jobToShare":null},"dataMeta":[],"checksum":"ef180655c28bff140bdc30f3506e8dfa77230c97971f7178567aaa5a5ca11490"}}"> <div x-data="{ 'showModal': false, 'showBanner': true }" @keydown.escape="showModal = false" > <div class="relative isolate flex justify-between w-full items-center gap-x-6 overflow-hidden bg-gray-100 px-6 py-2.5 sm:px-3.5" x-show="showBanner" > <div class="flex items-center mx-auto"> <p class="flex items-center text-sm lg:text-base font-apercu-regular"> <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full w-6 h-6 items-center justify-center"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12z" fill="#0D0D0D"/> <path d="M12 14a1 1 0 0 1-1-1V7a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1zm-1.5 2.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z" fill="#0D0D0D"/> </svg> </span> <span> <b>NOTICE ON JOB SCAMS</b> <br> We are reminding jobseekers that ZALORA only posts job openings on our official channels: ZALORA's career website and LinkedIn.<br> We never charge for a job placement. If you see a job posting for ZALORA that wasn't posted on our official channels, it's probably a scam. <button aria-label="Show notice" type="button" @click="showModal = true" class="inline font-medium text-blue-600 underline underline-offset-2 decoration-600 decoration-solid hover:no-underline">Learn more.</button> </span> </p> </div> <div class="flex items-center"> <button aria-label="Close notice" @click="showBanner = false" type="button" class="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5"> <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/> </svg> </button> </div> </div>  <div class="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 max-h-full bg-black bg-opacity-50" style="display: none" x-show="showModal" > <div class="max-w-3xl px-4 py-3 mx-auto text-left bg-white rounded shadow-lg font-apercu-regular" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" >  <div class="flex items-center justify-between p-4 border-b rounded-t"> <h3 class="flex items-center text-xl font-semibold text-gray-900"> <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full w-6 h-6 items-center justify-center"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12z" fill="#0D0D0D"/> <path d="M12 14a1 1 0 0 1-1-1V7a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1zm-1.5 2.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z" fill="#0D0D0D"/> </svg> </span> NOTICE ON JOB SCAMS </h3> <button aria-label="Close notice" type="button" class="z-50 cursor-pointer" @click="showModal = false"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div>  <div class="p-3 space-y-3 break-words"> <p class="text-base"> We are reminding jobseekers that ZALORA only posts job openings on our official channels: ZALORA's career website and LinkedIn. We never charge for a job placement. If you see a job posting for ZALORA that wasn't posted on our official channels, it's probably a scam. </p> <p class="text-base"> We also don't endorse any job postings or recruitment advertisements that weren't posted on our official channels or coursed through our verified recruitment partners. </p> <p class="text-base"> If you're interested in working for ZALORA, you can check out our job portal <a href="https://careers.zalora.com/careers" target="__blank" aria-label="zalora-career-website" class="inline font-medium text-blue-600 underline underline-offset-2 decoration-600 decoration-solid hover:no-underline">https://careers.zalora.com/careers</a> and our official LinkedIn page <a href="https://www.linkedin.com/company/zalora-sea/" target="__blank" aria-label="zalora-linkedin" class="inline font-medium text-blue-600 underline underline-offset-2 decoration-600 decoration-solid hover:no-underline">https://www.linkedin.com/company/zalora-sea/</a>. </p> <p class="text-base"> Here are some tips to avoid job scams: <ul class="space-y-1 list-disc list-inside"> <li>Only apply for jobs that are posted on ZALORA's career website and LinkedIn.</li> <li>Be wary of job postings that ask for money upfront.</li> <li>Don't give out your personal information, such as your Social Security number, Official ID numbers, or bank account information, unless you're sure the company is legitimate.</li> <li>If you're not sure about a job posting, contact ZALORA directly to verify its authenticity.</li> </ul> </p> <p class="text-base"> If you see a job posting that you think might be a scam, please report it to us at <a href="mailto:careers@zalora.com" class="inline font-medium text-blue-600 decoration-600 decoration-solid hover:no-underline">careers@zalora.com</a> and the relevant authorities so we can take action. </p> </div>  <div class="flex items-center p-3 space-x-2 border-t border-gray-200 rounded-b"> <button aria-label="Close notice" type="button" @click="showModal = false" class="text-white bg-electric-violet hover:bg-violent-violet focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">I Understand</button> </div> </div> </div> </div> <div class="mt-12 lg:mt-24 mx-6 md:mx-12 lg:mx-24"> <div class="w-full">  <div class="flex flex-col gap-4 text-center lg:text-start"> <span class="text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-black font-apercu-regular tracking-tight">We're more than fashion,</span>  <span class="text-[3rem] xs:text-[3.5rem] sm:text-[4rem] md:text-[4.5rem] lg:text-[5rem] text-black font-apercu-medium font-normal tracking-tight leading-none">Find your <span class="text-electric-violet font-normal underline">passion</span>. </span> </div>  <div wire:loading.remove wire:init="getJazzHrJobs">  <div class="mt-12" x-data="filtersData"> <div class="rounded-xl lg:rounded-full w-full h-fit lg:h-20 border-2 border-electric-violet shadow-search-offset"> <div class="flex justify-between h-full my-4 lg:my-0"> <div class="flex flex-col lg:flex-row items-center justify-center lg:justify-evenly gap-6 px-6 py-4 w-full h-full" wire:keydown.enter="filterJobs">  <div class="flex flex-col lg:flex-row items-center justify-between gap-6 grow w-full lg:w-1/3 h-full lg:h-12">  <div class="relative w-full lg:w-1/2 h-16 lg:h-full rounded-full outline outline-1 outline-slate-400 hover:shadow-md" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false"> <div class="flex flex-row items-center justify-center px-4 sm:px-8 md:px-12 lg:px-4 w-full h-full" @click="open = ! open"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-8 lg:w-6 xl:w-8 h-8 lg:h-6 xl:h-8 stroke-slate-400"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" class="fill-slate-400" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" class="fill-white" /> </svg> <button aria-label="Search location" type="button" class="flex flex-col items-center lg:items-start rounded-full pl-0 lg:pl-2 w-full text-lg lg:text-base text-slate-400 font-apercu-regular text-center"> <span>Locations</span> <span class="text-xs xl:text-sm text-slate-400" x-show="locationFilters.length" x-text="locationFilters.length + ' Selected'"></span> </button> </div> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute z-50 mt-2 w-full rounded-md shadow-lg" style="display: none;" @click.outside="open = false"> <div class="rounded-md ring-1 ring-black ring-opacity-5 bg-white"> <div class="block px-4 lg:px-2 xl:px-4 py-2 text-base text-gray-400 font-bold"> Locations </div> <div class="flex flex-col gap-1 px-4 lg:px-2 xl:px-4 pb-2 w-full"> <div> <input id="checkbox_hongkong" type="checkbox" name="Hong Kong" value="Hong Kong" wire:model.defer="locations" @click="updateLocationFilters('Hong Kong')"> <label for="checkbox_hongkong" class="text-sm">Hong Kong</label> </div> <div> <input id="checkbox_indonesia" type="checkbox" name="Indonesia" value="Indonesia" wire:model.defer="locations" @click="updateLocationFilters('Indonesia')"> <label for="checkbox_indonesia" class="text-sm">Indonesia</label> </div> <div> <input id="checkbox_malaysia" type="checkbox" name="Malaysia" value="Malaysia" wire:model.defer="locations" @click="updateLocationFilters('Malaysia')"> <label for="checkbox_malaysia" class="text-sm">Malaysia</label> </div> <div> <input id="checkbox_philippines" type="checkbox" name="Philippines" value="Philippines" wire:model.defer="locations" @click="updateLocationFilters('Philippines')"> <label for="checkbox_philippines" class="text-sm">Philippines</label> </div> <div> <input id="checkbox_singapore" type="checkbox" name="Singapore" value="Singapore" wire:model.defer="locations" @click="updateLocationFilters('Singapore')"> <label for="checkbox_singapore" class="text-sm">Singapore</label> </div> <div> <input id="checkbox_vietnam" type="checkbox" name="Viet Nam" value="Viet Nam" wire:model.defer="locations" @click="updateLocationFilters('Viet Nam')"> <label for="checkbox_vietnam" class="text-sm">Viet Nam</label> </div> </div> <button aria-label="Close" class="block px-4 lg:px-2 xl:px-4 pb-2 text-md text-gray-400 font-bold" @click="open = false"> Close </button> </div> </div> </div>  <div class="relative w-full lg:w-1/2 h-16 lg:h-full rounded-full outline outline-1 outline-slate-400 hover:shadow-md" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false"> <div class="flex flex-row items-center justify-center px-4 sm:px-8 md:px-12 lg:px-4 w-full h-full" @click="open = ! open"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-8 lg:w-6 xl:w-8 h-8 lg:h-6 xl:h-8 fill-slate-400"> <path fill-rule="evenodd" d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /> <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" /> </svg> <button aria-label="Search job type" type="button" class="flex flex-col items-center lg:items-start rounded-full pl-0 lg:pl-2 w-full text-lg lg:text-sm xl:text-base text-slate-400 font-apercu-regular text-center"> Job Type <span class="text-xs xl:text-sm text-slate-400" x-show="jobTypeFilters.length" x-text="jobTypeFilters.length + ' Selected'"></span> </button> </div> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute z-50 mt-2 w-full rounded-md shadow-lg" style="display: none;" @click.outside="open = false"> <div class="rounded-md ring-1 ring-black ring-opacity-5 bg-white"> <div class="block px-4 lg:px-2 xl:px-4 py-2 text-base text-gray-400 font-bold"> Job Type </div> <div class="flex flex-col gap-1 px-4 lg:px-2 xl:px-4 pb-2 w-full"> <div for="checkbox_1"> <input id="checkbox_fulltime" type="checkbox" name="Full Time" value="Full Time" wire:model.defer="jobTypes" @click="updateJobTypeFilters('Full Time')"> <label for="checkbox_fulltime" class="text-sm" for="Full Time">Full Time</label> </div> <div> <input id="checkbox_contract" type="checkbox" name="Contract" value="Contract" wire:model.defer="jobTypes" @click="updateJobTypeFilters('Contract')"> <label for="checkbox_contract" class="text-sm" for="Contract">Contract</label> </div> <div> <input id="checkbox_internship" type="checkbox" name="Internship" value="Internship" wire:model.defer="jobTypes" @click="updateJobTypeFilters('Internship')"> <label for="checkbox_internship" class="text-sm" for="Internship">Internship</label> </div> </div> <button aria-label="Close" class="block px-4 lg:px-2 xl:px-4 pb-2 text-md text-gray-400 font-bold" @click="open = false"> Close </button> </div> </div> </div> </div>  <input class="w-full lg:w-2/5 h-16 lg:h-full rounded-full outline outline-1 outline-slate-400 border-none focus:shadow-lg text-xs xs:text-sm sm:text-base md:text-lg lg:text-sm xl:text-base text-center lg:text-start placeholder:text-center placeholder:text-xs xs:placeholder:text-sm sm:placeholder:text-base md:placeholder:text-lg lg:placeholder:text-sm xl:placeholder:text-base placeholder:text-slate-400 placeholder:font-apercu-regular focus:placeholder:opacity-0" type="text" placeholder="Job Title / Keyword Search" wire:model.defer="keyword" />  <button aria-label="Search button" type="button" class="inline-flex items-center justify-center w-full lg:w-36 lg:max-w-36 xl:w-48 xl:max-w-48 h-16 lg:h-full rounded-full bg-electric-violet hover:shadow-lg" wire:click="filterJobs"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-white fill-none"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /> </svg> <span class="pl-2 text-lg xs:text-xl lg:text-xl text-white font-apercu-regular"> Search </span> </button> </div> </div> </div> </div>  <div class="hidden lg:grid grid-cols-3 gap-8 xl:gap-16 mt-24 w-full" x-data="departmentsData"> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Commercial" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/commercial_tab.webp' )" x-data="" x-on:click="openJobList(`Commercial`, 1)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">COMMERCIAL</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Engineering" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/engineering_tab.webp' )" x-data="" x-on:click="openJobList(`Engineering`, 2)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">ENGINEERING</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Finance" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/finance_tab.webp' )" x-data="" x-on:click="openJobList(`Finance`, 3)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">FINANCE</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="col-span-3 h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpen[0]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobList(0)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-row w-full py-2 bg-white">  <div class="flex flex-col flex-start justify-between px-12 py-2 w-full"> <button aria-label="Finance-title" class="text-black text-2xl xl:text-3xl font-apercu-bold text-start" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col gap-2 mt-2 w-full text-black text-md"> <span class="flex flex-row"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-2" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-row"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-2" x-text="job.type"></span> </span> </div> </div>  <div class="shrink-0 flex flex-col justify-items-center items-center gap-4 ml-auto p-4 w-1/4 border-l-4 border-gray-300">  <button aria-label="Finance-learn-more" class="w-5/6 h-12 rounded-full border-2 border-electric-violet font-apercu-bold text-base xl:text-lg hover:bg-electric-violet hover:text-white active:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Finance-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Legal" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/legal_tab.webp' )" x-data="" x-on:click="openJobList(`Legal`, 4)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">LEGAL</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Marketing" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/marketing_tab.webp' )" x-data="" x-on:click="openJobList(`Marketing`, 5)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">MARKETING</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Operations" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/operations_tab.webp' )" x-data="" x-on:click="openJobList(`Operations`, 6)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">OPERATIONS</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="col-span-3 h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpen[1]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobList(1)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-row w-full py-2 bg-white">  <div class="flex flex-col flex-start justify-between px-12 py-2 w-full"> <button aria-label="Operations-title" class="text-black text-2xl xl:text-3xl font-apercu-bold text-start" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col gap-2 mt-2 w-full text-black text-md"> <span class="flex flex-row"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-2" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-row"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-2" x-text="job.type"></span> </span> </div> </div>  <div class="shrink-0 flex flex-col justify-items-center items-center gap-4 ml-auto p-4 w-1/4 border-l-4 border-gray-300">  <button aria-label="Operations-learn-more" class="w-5/6 h-12 rounded-full border-2 border-electric-violet font-apercu-bold text-base xl:text-lg hover:bg-electric-violet hover:text-white active:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Operations-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="People & Culture" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/people_culture_tab.webp' )" x-data="" x-on:click="openJobList(`People & Culture`, 7)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">PEOPLE & CULTURE</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Revenue" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/revenue_tab.webp' )" x-data="" x-on:click="openJobList(`Revenue`, 8)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">REVENUE</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-48 xl:h-64 rounded-[2.5rem] bg-slate-400"> <button aria-label="Strategy" class="bg-cover bg-center bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/strategy_tab.webp' )" x-data="" x-on:click="openJobList(`Strategy`, 9)" disabled> <div class="relative top-6 xl:top-12 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl xl:text-4xl font-apercu-medium">STRATEGY</span> <span class="text-white text-xl xl:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="col-span-3 h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpen[2]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobList(2)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-row w-full py-2 bg-white">  <div class="flex flex-col flex-start justify-between px-12 py-2 w-full"> <button aria-label="Strategy-title" class="text-black text-2xl xl:text-3xl font-apercu-bold text-start" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col gap-2 mt-2 w-full text-black text-md"> <span class="flex flex-row"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-2" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-row"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-2" x-text="job.type"></span> </span> </div> </div>  <div class="shrink-0 flex flex-col justify-items-center items-center gap-4 ml-auto p-4 w-1/4 border-l-4 border-gray-300">  <button aria-label="Strategy-learn-more" class="w-5/6 h-12 rounded-full border-2 border-electric-violet font-apercu-bold text-base xl:text-lg hover:bg-electric-violet hover:text-white active:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Strategy-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> </div> <div class="lg:hidden grid lg:grid-cols-1 gap-8 mt-16 w-full" x-data="departmentsData"> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Commercial" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/commercial_tab.webp' )" x-data="" x-on:click="openJobList(`Commercial`, 1)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">COMMERCIAL</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[1]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(1)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Commercial-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Commercial-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Commercial-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Engineering" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/engineering_tab.webp' )" x-data="" x-on:click="openJobList(`Engineering`, 2)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">ENGINEERING</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[2]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(2)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Engineering-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Engineering-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Engineering-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Finance" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/finance_tab.webp' )" x-data="" x-on:click="openJobList(`Finance`, 3)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">FINANCE</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[3]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(3)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Finance-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Finance-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Finance-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Legal" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/legal_tab.webp' )" x-data="" x-on:click="openJobList(`Legal`, 4)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">LEGAL</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[4]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(4)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Legal-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Legal-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Legal-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Marketing" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/marketing_tab.webp' )" x-data="" x-on:click="openJobList(`Marketing`, 5)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">MARKETING</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[5]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(5)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Marketing-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Marketing-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Marketing-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Operations" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/operations_tab.webp' )" x-data="" x-on:click="openJobList(`Operations`, 6)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">OPERATIONS</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[6]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(6)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Operations-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Operations-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Operations-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="People & Culture" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/people_culture_tab.webp' )" x-data="" x-on:click="openJobList(`People & Culture`, 7)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">PEOPLE & CULTURE</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[7]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(7)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="People & Culture-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="People & Culture-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="People & Culture-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Revenue" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/revenue_tab.webp' )" x-data="" x-on:click="openJobList(`Revenue`, 8)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">REVENUE</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[8]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(8)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Revenue-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Revenue-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Revenue-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> <div class="w-full h-48 rounded-[2.5rem] bg-slate-400"> <button aria-label="Strategy" class="bg-cover bg-center sm:bg-top bg-no-repeat rounded-[2.5rem] w-full h-full opacity-30 bg-gray-200" style="background-image: url( 'https://careers.zalora.com/assets/strategy_tab.webp' )" x-data="" x-on:click="openJobList(`Strategy`, 9)" disabled> <div class="relative top-4 flex flex-col bg-[#3d3b3a]/50 w-full py-2"> <span class="text-white text-2xl sm:text-3xl md:text-4xl font-apercu-medium">STRATEGY</span> <span class="text-white text-lg sm:text-xl md:text-2xl font-apercu-medium">No vacancies</span> </div> </button> </div> <div class="w-full h-[27rem] bg-electric-violet" x-data="" x-show="isJobListOpenResponsive[9]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @click.away="closeJobListResponsive(9)"> <div class="p-6 h-full overflow-y-scroll"> <template x-for="job in jobsToDisplay"> <div class="mb-6"> <div class="flex flex-col w-full py-2 rounded-md bg-white">  <div class="flex flex-col flex-start gap-6 justify-start p-2 w-full border-b-2 border-gray-300"> <button aria-label="Strategy-title" class="text-black text-xl sm:text-2xl md:text-3xl font-apercu-bold" x-text="job.title" @click="$wire.jobSelect(job.board_code)"></button> <div class="flex flex-col items-center gap-4 py-4 w-full text-black text-md"> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span class="mx-1" x-text="job.city ? job.city + ', ' + job.country_id : job.country_id"></span> </span> <span class="flex flex-col items-center justify-center text-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 sm:w-8 h-6 md:h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /> </svg> <span class="mx-1" x-text="job.type"></span> </span> </div> </div>  <div class="flex flex-col justify-items-center items-center gap-4 p-4 w-full">  <button aria-label="Strategy-learn-more" class="w-full h-12 sm:h-16 md:h-20 rounded-full border-2 border-electric-violet font-apercu-bold text-base sm:text-lg md:text-xl hover:bg-electric-violet hover:text-white focus:bg-electic-violet" @click="$wire.jobSelect(job.board_code)"> Learn More.. </button>  <button aria-label="Strategy-share-linkedin" class="flex flex-row items-center content-center" @click="$wire.shareJob('linkedin', job)"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" class="mx-2 w-6 h-6"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> <span class="text-xl text-gray-500">Share</span> </button> </div> </div> </div> </template> </div> </div> </div> </div>  <div class="mt-24 flex w-full justify-center" wire:loading.flex> <svg class="animate-spin h-16 w-16 fill-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </div>  <div class="my-16 lg:mt-36 lg:mb-20 w-full"> <a class="flex flex-col md:flex-row items-center justify-center px-4 w-full md:w-3/5 h-36 bg-electric-violet rounded-[2.5rem] md:rounded-full hover:bg-violent-violet" href="https://careers.zalora.com/interview-tips-and-tricks">  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="0.0 0.0 438.2 443.1" class="h-2/5 md:h-3/4" zoomAndPan="magnify"> <defs> <clipPath id="a"> <path d="M 168 362 L 267 362 L 267 443.109375 L 168 443.109375 Z M 168 362" /> </clipPath> <clipPath id="b"> <path d="M 0 0 L 438.179688 0 L 438.179688 360 L 0 360 Z M 0 0" /> </clipPath> </defs> <g> <g clip-path="url(#a)" id="change1_1"> <path d="M 247.695312 424.121094 L 247.695312 417.816406 C 247.695312 417.117188 247.128906 416.546875 246.425781 416.546875 C 246.425781 416.546875 231.660156 418.261719 217.339844 418.261719 C 203.019531 418.261719 188.253906 416.546875 188.253906 416.546875 C 187.554688 416.546875 186.984375 417.117188 186.984375 417.816406 L 186.984375 424.121094 C 186.984375 434.609375 195.484375 443.109375 205.972656 443.109375 L 228.707031 443.109375 C 239.195312 443.109375 247.695312 434.609375 247.695312 424.121094 Z M 254.917969 406.28125 C 257.890625 405.285156 259.492188 402.066406 258.496094 399.097656 C 257.503906 396.121094 254.285156 394.523438 251.3125 395.515625 C 224.488281 404.503906 206.023438 402.304688 183.195312 395.460938 C 180.1875 394.558594 177.027344 396.265625 176.128906 399.269531 C 175.226562 402.273438 176.933594 405.4375 179.933594 406.335938 C 192.996094 410.25 205.09375 412.796875 218.058594 412.796875 C 229.300781 412.796875 241.195312 410.878906 254.917969 406.28125 Z M 258.109375 389.789062 C 261.238281 388.828125 262.996094 385.511719 262.035156 382.382812 C 261.074219 379.25 257.75 377.496094 254.628906 378.457031 C 225.1875 387.496094 204.925781 385.285156 179.882812 378.40625 C 176.722656 377.539062 173.460938 379.394531 172.59375 382.550781 C 171.726562 385.710938 173.585938 388.972656 176.742188 389.839844 C 190.917969 393.734375 204.054688 396.265625 218.125 396.265625 C 230.320312 396.265625 243.222656 394.363281 258.109375 389.789062 Z M 218.199219 380.101562 C 202.894531 380.101562 188.601562 377.785156 173.175781 374.226562 C 169.96875 373.484375 167.96875 370.28125 168.707031 367.074219 C 169.449219 363.863281 172.648438 361.863281 175.859375 362.605469 C 202.894531 368.84375 226.179688 371.027344 258.671875 362.640625 C 261.859375 361.816406 265.113281 363.738281 265.9375 366.925781 C 266.761719 370.113281 264.839844 373.367188 261.652344 374.1875 C 245.480469 378.363281 231.460938 380.101562 218.199219 380.101562" fill="#c1b8a7" /> </g> <g clip-path="url(#b)" id="change2_1"> <path d="M 214.789062 65.039062 C 218.5 64.886719 221.375 61.753906 221.222656 58.046875 L 219.050781 6.433594 C 218.890625 2.730469 215.78125 -0.15625 212.054688 0.00390625 C 208.347656 0.160156 205.46875 3.292969 205.625 7 L 207.796875 58.613281 C 207.949219 62.222656 210.921875 65.046875 214.503906 65.046875 C 214.597656 65.046875 214.695312 65.046875 214.789062 65.039062 Z M 343.671875 102.566406 L 383.03125 69.109375 C 385.859375 66.707031 386.203125 62.46875 383.800781 59.640625 C 381.394531 56.8125 377.152344 56.472656 374.328125 58.875 L 334.972656 92.332031 C 332.144531 94.734375 331.800781 98.972656 334.203125 101.800781 C 335.53125 103.363281 337.421875 104.167969 339.324219 104.167969 C 340.863281 104.167969 342.410156 103.640625 343.671875 102.566406 Z M 380.847656 184.089844 L 432.195312 178.421875 C 435.882812 178.015625 438.542969 174.695312 438.136719 171.007812 C 437.726562 167.316406 434.394531 164.664062 430.71875 165.066406 L 379.375 170.734375 C 375.6875 171.140625 373.027344 174.460938 373.433594 178.148438 C 373.8125 181.585938 376.722656 184.128906 380.105469 184.128906 C 380.351562 184.128906 380.597656 184.117188 380.847656 184.089844 Z M 423.628906 298.761719 C 424.839844 295.253906 422.980469 291.425781 419.472656 290.214844 L 370.652344 273.335938 C 367.144531 272.121094 363.316406 273.984375 362.105469 277.488281 C 360.894531 280.996094 362.753906 284.820312 366.261719 286.035156 L 415.082031 302.914062 C 415.808594 303.164062 416.550781 303.285156 417.277344 303.285156 C 420.0625 303.285156 422.664062 301.539062 423.628906 298.761719 Z M 122.09375 97.351562 C 124.960938 94.996094 125.378906 90.761719 123.023438 87.894531 L 90.230469 47.980469 C 87.875 45.109375 83.644531 44.695312 80.777344 47.050781 C 77.910156 49.40625 77.492188 53.640625 79.847656 56.507812 L 112.640625 96.425781 C 113.96875 98.039062 115.894531 98.878906 117.835938 98.878906 C 119.335938 98.878906 120.84375 98.378906 122.09375 97.351562 Z M 69.925781 165.515625 C 70.980469 161.960938 68.953125 158.21875 65.398438 157.164062 L 15.875 142.46875 C 12.3125 141.410156 8.578125 143.4375 7.523438 146.996094 C 6.464844 150.554688 8.492188 154.292969 12.050781 155.347656 L 61.574219 170.046875 C 62.210938 170.234375 62.855469 170.324219 63.488281 170.324219 C 66.386719 170.324219 69.058594 168.433594 69.925781 165.515625 Z M 8.8125 284.714844 L 57.902344 268.640625 C 61.429688 267.484375 63.351562 263.691406 62.199219 260.164062 C 61.042969 256.636719 57.25 254.710938 53.722656 255.871094 L 4.628906 271.941406 C 1.105469 273.097656 -0.820312 276.890625 0.335938 280.417969 C 1.261719 283.25 3.890625 285.046875 6.71875 285.046875 C 7.410156 285.046875 8.117188 284.941406 8.8125 284.714844 Z M 317.078125 207.425781 C 317.078125 229.886719 309.652344 250.617188 297.121094 267.277344 C 288.261719 279.0625 280.792969 291.769531 274.960938 305.167969 C 269.128906 318.578125 264.933594 332.671875 262.613281 347.230469 C 261.519531 354.125 255.566406 359.199219 248.585938 359.199219 L 181.847656 359.199219 C 174.820312 359.199219 168.859375 354.074219 167.796875 347.132812 L 166.875 341.085938 C 162.699219 313.710938 152.074219 287.734375 136.019531 265.175781 C 124.671875 249.226562 117.894531 229.800781 117.613281 208.800781 C 116.875 154 161.117188 108.453125 215.921875 107.695312 C 271.652344 106.914062 317.078125 151.863281 317.078125 207.425781" fill="#fd0" /> </g> <g id="change3_1"> <path d="M 146.527344 150.53125 C 194.265625 106.496094 237.070312 117.746094 259.445312 139.082031 C 281.824219 160.417969 286.765625 190.859375 270.894531 216.097656 C 255.023438 241.335938 199.863281 283.484375 157.191406 262.671875 C 114.523438 241.855469 119.726562 175.246094 146.527344 150.53125" fill="#ffea00" /> </g> <g id="change4_1"> <path d="M 150.71875 168.707031 C 148.808594 168.285156 147.804688 166.144531 148.382812 164.273438 C 150.570312 157.210938 156.261719 149.761719 164.835938 144.953125 C 166.542969 143.996094 172.320312 142.65625 173.714844 144.023438 C 178.691406 148.902344 167.8125 153.734375 166.105469 154.691406 C 159.175781 158.578125 157.617188 161.824219 154.6875 166.53125 C 153.617188 168.253906 152.511719 169.101562 150.71875 168.707031" fill="#fff" /> </g> <g id="change5_1"> <path d="M 264.8125 224.921875 C 262.925781 221.941406 259.132812 221.613281 256.097656 222.882812 C 252.496094 224.390625 250.609375 227.894531 249.59375 231.46875 C 248.304688 236.011719 247.761719 240.824219 247.046875 245.488281 C 246.632812 248.175781 246.242188 250.855469 245.886719 253.542969 C 243.910156 255.710938 241.417969 257.910156 238.449219 257.207031 C 235.238281 256.449219 233.546875 252.828125 232.582031 249.996094 C 232.398438 249.464844 232.234375 248.925781 232.074219 248.394531 C 234.511719 245.519531 236.691406 242.441406 238.558594 239.167969 C 240.484375 235.773438 242.6875 231.632812 241.308594 227.652344 C 240.160156 224.335938 236.757812 222.4375 233.449219 224 C 229.558594 225.832031 228.734375 230.308594 228.613281 234.179688 C 228.472656 238.875 229.015625 243.570312 230.242188 248.101562 C 230.261719 248.175781 230.285156 248.253906 230.308594 248.339844 C 229.828125 248.878906 229.351562 249.421875 228.863281 249.941406 C 226.273438 252.695312 223.390625 255.234375 220.277344 257.390625 C 217.113281 259.582031 212.929688 261.433594 209.316406 259.148438 C 206.585938 257.414062 205.109375 254.105469 204.296875 251.09375 C 203.898438 249.574219 203.59375 248.011719 203.386719 246.441406 C 204.429688 245.074219 205.382812 243.667969 206.25 242.320312 C 208.589844 238.691406 210.574219 234.832031 212.15625 230.808594 C 212.949219 228.804688 213.632812 226.753906 214.207031 224.671875 C 214.671875 223.015625 215.128906 221.246094 214.824219 219.511719 C 214.566406 218.070312 213.675781 216.78125 212.199219 216.402344 C 210.609375 215.988281 209.046875 216.8125 207.941406 217.90625 C 206.519531 219.285156 205.71875 221.007812 204.992188 222.820312 C 204.179688 224.890625 203.507812 227.003906 202.976562 229.160156 C 201.902344 233.574219 201.488281 238.070312 201.675781 242.605469 C 201.730469 243.730469 201.804688 244.859375 201.914062 245.996094 C 201.695312 246.277344 201.488281 246.5625 201.273438 246.84375 C 199.007812 249.652344 196.242188 252.414062 192.71875 253.554688 C 189.5 254.585938 186.390625 254.050781 183.625 252.632812 C 183.246094 249.085938 182.855469 245.542969 182.433594 241.996094 C 182.128906 239.46875 181.8125 236.945312 181.488281 234.429688 C 181.195312 232.132812 181.011719 229.777344 180.449219 227.523438 C 179.613281 224.207031 177.164062 220.746094 173.3125 221.09375 C 169.910156 221.398438 168.695312 224.703125 168.804688 227.6875 C 168.867188 229.539062 169.367188 231.339844 169.824219 233.140625 C 170.34375 235.210938 170.90625 237.269531 171.589844 239.296875 C 173.488281 244.933594 176.925781 250.734375 182.171875 253.617188 C 182.636719 258.0625 183.0625 262.519531 183.449219 266.976562 C 185 284.699219 185.347656 301.675781 185.8125 319.457031 C 185.902344 322.882812 185.726562 347.273438 185.75 359.199219 L 188.828125 359.199219 C 189.609375 318.449219 187.449219 291.539062 185.910156 272.382812 C 185.433594 266.378906 184.425781 260.363281 183.808594 254.378906 C 185.046875 254.875 186.355469 255.234375 187.765625 255.386719 C 193.75 256.046875 198.464844 252.414062 202.152344 247.992188 C 202.488281 250.257812 203.019531 252.492188 203.898438 254.585938 C 205.164062 257.628906 207.355469 260.460938 210.683594 261.339844 C 214.792969 262.410156 218.847656 260.101562 222.046875 257.757812 C 225.210938 255.441406 228.128906 252.796875 230.761719 249.890625 C 231.648438 252.804688 232.929688 255.785156 235.410156 257.585938 C 238.511719 259.839844 242.222656 258.800781 244.984375 256.546875 C 245.179688 256.371094 245.375 256.199219 245.558594 256.023438 C 243.402344 272.601562 242.144531 289.273438 241.820312 305.992188 C 241.730469 310.132812 241.730469 345.757812 241.765625 359.199219 L 244.246094 359.199219 C 244.183594 337.574219 245.027344 283.183594 246.652344 266.683594 C 247.097656 262.226562 247.597656 257.792969 248.148438 253.359375 C 248.53125 252.925781 248.898438 252.492188 249.269531 252.058594 C 250.925781 250.160156 252.585938 248.253906 254.242188 246.34375 C 255.902344 244.4375 257.550781 242.527344 259.210938 240.621094 C 260.714844 238.886719 262.320312 237.195312 263.609375 235.296875 C 265.628906 232.347656 266.894531 228.195312 264.8125 224.921875 Z M 263.359375 232.097656 C 261.835938 235.839844 258.503906 238.902344 255.914062 241.914062 C 253.453125 244.773438 250.988281 247.632812 248.527344 250.496094 C 248.96875 247.140625 249.4375 243.789062 249.953125 240.445312 C 250.546875 236.613281 250.851562 232.382812 252.503906 228.832031 C 253.871094 225.886719 256.859375 223.253906 260.339844 224.007812 C 263.984375 224.800781 264.558594 229.152344 263.359375 232.097656 Z M 230.253906 237.433594 C 230.085938 233.746094 229.808594 228.410156 233.058594 225.859375 C 236.523438 223.144531 240.074219 226.632812 240.144531 230.292969 C 240.21875 234.199219 237.628906 238.128906 235.601562 241.300781 C 234.386719 243.199219 233.050781 245.019531 231.625 246.765625 C 230.847656 243.714844 230.398438 240.570312 230.253906 237.433594 Z M 203.039062 239.488281 C 203.164062 235.402344 203.753906 231.328125 204.886719 227.398438 C 205.453125 225.421875 206.136719 223.449219 206.996094 221.582031 C 207.683594 220.085938 208.960938 218.007812 210.734375 217.695312 C 212.726562 217.34375 213.410156 219.527344 213.359375 221.082031 C 213.300781 222.785156 212.726562 224.46875 212.21875 226.078125 C 211.035156 229.8125 209.546875 233.445312 207.726562 236.917969 C 206.378906 239.484375 204.855469 241.976562 203.160156 244.335938 C 203.03125 242.71875 202.988281 241.09375 203.039062 239.488281 Z M 175.011719 243.574219 C 173.253906 240.097656 172.1875 236.332031 171.222656 232.574219 C 170.542969 229.9375 169.1875 225.792969 171.246094 223.429688 C 172.484375 222.007812 174.480469 222.238281 175.949219 223.148438 C 177.632812 224.191406 178.507812 226.035156 178.976562 227.894531 C 179.46875 229.847656 179.648438 231.882812 179.902344 233.878906 C 180.191406 236.09375 180.464844 238.3125 180.726562 240.53125 C 181.164062 244.230469 181.566406 247.9375 181.957031 251.640625 C 179 249.628906 176.558594 246.632812 175.011719 243.574219" fill="#544e38" /> </g> </g> </svg>  <div class="flex flex-col md:flex-start items-center md:items-start md:ml-4 lg:mx-8 text-white"> <span class="font-apercu-bold text-base xs:text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl text-center md:text-start">GET A HEAD START</span> <span class="font-apercu-regular text-xs xs:text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-center md:text-start">Here are the secret hacks to ace an interview at ZALORA!</span> </div> </a> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('filtersData', () => ({ init() { this.locationFilters = []; let locationsProxy = window.Livewire.find('5IBfufkzzOuJrelHkYi1').entangle('locations').initialValue; if (locationsProxy) { Object.keys(locationsProxy).forEach(key => { this.locationFilters.push(locationsProxy[key]); }); } this.jobTypeFilters = []; let jobTypeProxy = window.Livewire.find('5IBfufkzzOuJrelHkYi1').entangle('jobTypes').initialValue; if (jobTypeProxy) { Object.keys(jobTypeProxy).forEach(key => { this.jobTypeFilters.push(jobTypeProxy[key]); }); } }, locationFilters: [], jobTypeFilters: [], updateLocationFilters(location = '') { if (location === '') { return; } if (this.locationFilters.includes(location)) { let index = this.locationFilters.indexOf(location); this.locationFilters.splice(index, 1); } else { this.locationFilters.push(location); } }, updateJobTypeFilters(jobType = '') { if (jobType === '') { return; } if (this.jobTypeFilters.includes(jobType)) { let index = this.jobTypeFilters.indexOf(jobType); this.jobTypeFilters.splice(index, 1); } else { this.jobTypeFilters.push(jobType); } }, })); Alpine.data('departmentsData', () => ({ init() { this.jobsToDisplay = []; this.isJobListOpen = [ false, false, false, ]; this.isJobListOpenResponsive = [ false, false, false, false, false, false, false, false, false, ]; }, locations: [], jobTypes: [], jobsToDisplay: [], currentSelectedDepartment: '', isJobListOpen: [ false, false, false, ], isJobListOpenResponsive: [ false, false, false, false, false, false, false, false, false, ], openJobList(department = '', loopIndex = null) { this.resetJobsToDisplay(); if (department === '' || this.currentSelectedDepartment === department || loopIndex === null) { this.currentSelectedDepartment = ''; return; } let jobsByDepartments = window.Livewire.find('5IBfufkzzOuJrelHkYi1').entangle('jobsByDepartments').initialValue; this.jobsToDisplay = jobsByDepartments[department]; let jobListIndex = Math.ceil(loopIndex / 3) - 1; this.isJobListOpen[jobListIndex] = true; this.isJobListOpenResponsive[loopIndex] = true; this.currentSelectedDepartment = department; return; }, resetJobsToDisplay() { // Resets the all job lists status to closed this.jobsToDisplay = []; this.isJobListOpen = [ false, false, false, ]; this.isJobListOpenResponsive = [ false, false, false, false, false, false, false, false, false, ]; }, closeJobList($index) { this.currentSelectedDepartment = ''; this.isJobListOpen[$index] = false; }, closeJobListResponsive($index) { this.currentSelectedDepartment = ''; this.isJobListOpenResponsive[$index] = false; }, })); }); </script> </div>  </main>  <footer class="bottom-0 w-full py-4 lg:py-6 lg:pl-24 bg-white shadow font-apercu-bold text-xl text-black"> <div class="text-center lg:text-start">Follow us to know more at</div> <div class="flex flex-row justify-center lg:justify-start gap-6 mt-2"> <a href="https://www.linkedin.com/company/zalora-sea" target="_blank" aria-label="zalora-linkedin"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" width="32" height="32" zoomAndPan="magnify"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M81.6,177H54.5V89.6h27.1V177z M68.1,78c-8.7,0-15.8-7.1-15.8-15.8c0-8.7,7.1-15.8,15.8-15.8c8.7,0,15.8,7.1,15.8,15.8 C83.9,70.9,76.8,78,68.1,78z M183.4,177h-27.1v-43.7c0-6.2,0-21.6-13.8-21.6c-15.7,0-16.7,15.9-16.7,15.9V177H98.8V89.6h27.1v12 c6.4-13,19.6-14,28.2-14c9.8,0,18.6,3.8,23.6,12.2c4.3,7.1,5.7,17.4,5.7,33.5V177z" /> </g> </svg> </a> <a href="https://www.youtube.com/user/zalora/playlists" target="_blank" aria-label="zalora-youtube"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#282b2a" preserveAspectRatio="xMidYMid meet" version="1" viewBox="0.0 0.0 231.0 231.0" width="32" height="32" zoomAndPan="magnify"> <g id="change1_1"> <path d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M182,147.8c-1.3,8.5-8.7,14.7-17.3,14.7h-51.3H66.2c-8.6,0-16-6.2-17.3-14.7c-1.2-7.9-2.4-18.9-2.5-32.4 c0.1-13.5,1.2-24.4,2.5-32.4c1.3-8.5,8.7-14.7,17.3-14.7h47.2h51.3c8.6,0,16,6.2,17.3,14.7c1.2,7.9,2.4,18.9,2.5,32.4 C184.4,128.9,183.2,139.9,182,147.8z" /> <path d="M100.9 96.7L100.9 134.2 135.8 115.5z" /> </g> </svg> </a> </div> </footer> </div> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = 'p8h67r3vgIzvBSXpGxEvVmHgsplO85Aj1T6X9URg';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> <script src="https://careers.zalora.com/vendor/livewire-alert/livewire-alert.js"></script> <script> /**** Livewire Alert Scripts ****/ (()=>{var __webpack_modules__={757:(e,t,r)=>{e.exports=r(666)},666:e=>{var t=function(e){"use strict";var t,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function s(e,t,r){return Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,r){return e[t]=r}}function l(e,t,r,n){var o=t&&t.prototype instanceof y?t:y,i=Object.create(o.prototype),a=new x(n||[]);return i._invoke=function(e,t,r){var n=f;return function(o,i){if(n===p)throw new Error("Generator is already running");if(n===d){if("throw"===o)throw i;return S()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=L(a,r);if(c){if(c===h)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===f)throw n=d,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=p;var s=u(e,t,r);if("normal"===s.type){if(n=r.done?d:_,s.arg===h)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n=d,r.method="throw",r.arg=s.arg)}}}(e,r,a),i}function u(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}e.wrap=l;var f="suspendedStart",_="suspendedYield",p="executing",d="completed",h={};function y(){}function v(){}function m(){}var b={};s(b,i,(function(){return this}));var w=Object.getPrototypeOf,g=w&&w(w(D([])));g&&g!==r&&n.call(g,i)&&(b=g);var O=m.prototype=y.prototype=Object.create(b);function E(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function k(e,t){function r(o,i,a,c){var s=u(e[o],e,i);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?t.resolve(f.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(f).then((function(e){l.value=e,a(l)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}var o;this._invoke=function(e,n){function i(){return new t((function(t,o){r(e,n,t,o)}))}return o=o?o.then(i,i):i()}}function L(e,r){var n=e.iterator[r.method];if(n===t){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=t,L(e,r),"throw"===r.method))return h;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return h}var o=u(n,e.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,h;var i=o.arg;return i?i.done?(r[e.resultName]=i.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,h):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,h)}function j(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function P(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function x(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(j,this),this.reset(!0)}function D(e){if(e){var r=e[i];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return a.next=a}}return{next:S}}function S(){return{value:t,done:!0}}return v.prototype=m,s(O,"constructor",m),s(m,"constructor",v),v.displayName=s(m,c,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===v||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,m):(e.__proto__=m,s(e,c,"GeneratorFunction")),e.prototype=Object.create(O),e},e.awrap=function(e){return{__await:e}},E(k.prototype),s(k.prototype,a,(function(){return this})),e.AsyncIterator=k,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new k(l(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},E(O),s(O,c,"Generator"),s(O,i,(function(){return this})),s(O,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=[];for(var r in e)t.push(r);return t.reverse(),function r(){for(;t.length;){var n=t.pop();if(n in e)return r.value=n,r.done=!1,r}return r.done=!0,r}},e.values=D,x.prototype={constructor:x,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(P),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var s=n.call(a,"catchLoc"),l=n.call(a,"finallyLoc");if(s&&l){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,h):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),h},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),P(r),h}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;P(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:D(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),h}},e}(e.exports);try{regeneratorRuntime=t}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=t:Function("r","regeneratorRuntime = r")(t)}}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var r=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](r,r.exports,__webpack_require__),r.exports}__webpack_require__.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=(e,t)=>{for(var r in t)__webpack_require__.o(t,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{"use strict";var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(757),_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach((function(t){_defineProperty(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function asyncGeneratorStep(e,t,r,n,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void r(e)}c.done?t(s):Promise.resolve(s).then(n,o)}function _asyncToGenerator(e){return function(){var t=this,r=arguments;return new Promise((function(n,o){var i=e.apply(t,r);function a(e){asyncGeneratorStep(i,n,o,a,c,"next",e)}function c(e){asyncGeneratorStep(i,n,o,a,c,"throw",e)}a(void 0)}))}}function evalCallbacksOptions(options){for(var callbacksKeysAllowed=["allowOutsideClick","allowEscapeKey","allowEnterKey","loaderHtml","inputOptions","inputValidator","preConfirm","preDeny","didClose","didDestroy","didOpen","didRender","willClose","willOpen"],_i=0,_callbacksKeysAllowed=callbacksKeysAllowed;_i<_callbacksKeysAllowed.length;_i++){var callbackKey=_callbacksKeysAllowed[_i];options.hasOwnProperty(callbackKey)&&("string"==typeof options[callbackKey]||options[callbackKey]instanceof String)&&options[callbackKey]&&""!=options[callbackKey].trim()&&(options[callbackKey]=eval(options[callbackKey]))}}function afterAlertInteraction(e){if(e.confirmed)return"self"===e.onConfirmed.component?void Livewire.find(e.onConfirmed.id).emitSelf(e.onConfirmed.listener,e.result):void Livewire.emitTo(e.onConfirmed.component,e.onConfirmed.listener,e.result);if(e.isDenied)return"self"===e.onDenied.component?void Livewire.find(e.onDenied.id).emitSelf(e.onDenied.listener,e.result):void Livewire.emitTo(e.onDenied.component,e.onDenied.listener,e.result);if(e.onProgressFinished&&e.dismiss===Swal.DismissReason.timer)return"self"===e.onProgressFinished.component?void Livewire.find(e.onProgressFinished.id).emitSelf(e.onProgressFinished.listener,e.result):void Livewire.emitTo(e.onProgressFinished.component,e.onProgressFinished.listener,e.result);if(e.onDismissed){if("self"===e.onDismissed.component)return void Livewire.find(e.onDismissed.id).emit(e.onDismissed.listener,e.result);Livewire.emitTo(e.onDismissed.component,e.onDismissed.listener,e.result)}}window.addEventListener("alert",function(){var e=_asyncToGenerator(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark((function e(t){var r,n,o,i,a,c,s,l;return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return o=t.detail.message,i=null!==(r=t.detail.type)&&void 0!==r?r:null,a=t.detail.data,c=t.detail.events,evalCallbacksOptions(s=t.detail.options),e.next=8,Swal.fire(_objectSpread({title:o,icon:i},s));case 8:afterAlertInteraction(_objectSpread(_objectSpread(_objectSpread({confirmed:(l=e.sent).isConfirmed,denied:l.isDenied,dismiss:l.dismiss,result:_objectSpread(_objectSpread({},l),{},{data:_objectSpread(_objectSpread({},a),{},{inputAttributes:null!==(n=s.inputAttributes)&&void 0!==n?n:null})})},c),l),s));case 10:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()),window.flashAlert=function(){var e=_asyncToGenerator(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark((function e(t){var r,n,o,i,a,c,s;return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return i=t.events,a=t.events.data,evalCallbacksOptions(c=t.options),e.next=6,Swal.fire(_objectSpread({title:null!==(r=t.message)&&void 0!==r?r:"",icon:null!==(n=t.type)&&void 0!==n?n:null},c));case 6:afterAlertInteraction(_objectSpread(_objectSpread({confirmed:(s=e.sent).isConfirmed,denied:s.isDenied,dismiss:s.dismiss,result:_objectSpread(_objectSpread({},s),{},{data:_objectSpread(_objectSpread({},a),{},{inputAttributes:null!==(o=c.inputAttributes)&&void 0!==o?o:null})})},i),t.options));case 8:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()})()})(); </script> </body> </html>

CINXE.COM

ZALORA SEA - Careers Page