{"version":3,"file":"RealWorldCalls-CnNznvtG.js","sources":["../../../resources/images/voices/calvin.jpg?w=600&h=600&format=webp","../../../resources/images/voices/rebecca.jpg?w=600&h=600&format=webp","../../../resources/js/Components/Marketing/FacePlayer/LanguageDropdown.vue","../../../resources/js/Components/Marketing/FacePlayer.vue","../../../resources/js/Components/AppMorphTagline.vue","../../../resources/images/voices/calvin.jpg","../../../resources/images/voices/michael.png","../../../resources/images/voices/rebecca.jpg","../../../resources/js/Components/Marketing/RealWorldCalls/CallExampleSwiper.vue"],"sourcesContent":["export default \"__VITE_ASSET__D$fz3cPx__\";","export default \"__VITE_ASSET__DGJ9D1xw__\";","<template>\n    <div class=\"relative w-full\">\n        <Listbox as=\"div\" v-model=\"selected\">\n            <ListboxLabel class=\"sr-only\">Select Skill</ListboxLabel>\n            <div class=\"relative\">\n                <ListboxButton class=\"flex justify-between w-full divide-x divide-indigo-700 rounded-md shadow-sm\">\n                    <div\n                        class=\"flex flex-col w-full items-start gap-x-1.5 rounded-l-md bg-white px-3 py-3 border border-gray-300\">\n                        <!--                        <CheckIcon class=\"-ml-0.5 h-5 w-5\" aria-hidden=\"true\"/>-->\n                        <p class=\"text-black font-bold\">\n                            {{ selected.label }}\n                        </p>\n                    </div>\n\n                    <div\n                        class=\"items-center rounded-l-none rounded-r-md bg-gray-600 self-stretch px-3 justify-center flex hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-gray-50\">\n                        <span class=\"sr-only\">Change published status</span>\n                        <ChevronDownIcon class=\"size-5 text-white\" aria-hidden=\"true\"/>\n                    </div>\n                </ListboxButton>\n\n                <transition leave-active-class=\"transition ease-in duration-100\" leave-from-class=\"opacity-100\"\n                            leave-to-class=\"opacity-0\">\n                    <ListboxOptions\n                        class=\"absolute left-0 z-10 mt-2 w-[600px] origin-top-left divide-y divide-gray-200 overflow-hidden rounded-md bg-white  ring-2 ring-black ring-opacity-5 focus:outline-none shadow-2xl\">\n                        <ListboxOption as=\"template\" v-for=\"option in options\" :key=\"option.title\"\n                                       :value=\"option\" v-slot=\"{ active, selected }\">\n                            <li :class=\"[(active || selected) ? 'bg-gray-800 text-white' : 'text-gray-900 bg-white', 'cursor-pointer select-none p-4 text-sm']\">\n                                <div class=\"flex gap-3 items-center\">\n\n                                    <div class=\"flex flex-col\">\n                                        <div class=\"flex gap-2\">\n                                            <p :class=\"selected ? 'font-semibold' : 'font-normal'\">{{\n                                                    option.label\n                                                }}</p>\n                                            <span v-if=\"selected\" :class=\"active ? 'text-white' : 'text-white'\">\n                                                     <CheckIcon class=\"h-5 w-5\" aria-hidden=\"true\"/>\n                                                </span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </li>\n                        </ListboxOption>\n                    </ListboxOptions>\n                </transition>\n            </div>\n        </Listbox>\n    </div>\n</template>\n\n<script setup>\nimport {ref, watch} from 'vue'\nimport {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'\nimport {\n    ArrowRightStartOnRectangleIcon,\n    CheckIcon,\n    ChevronDownIcon, DevicePhoneMobileIcon,\n    EnvelopeIcon, GlobeAmericasIcon,\n    UserIcon, LinkIcon\n} from '@heroicons/vue/20/solid'\nimport useSkillTypes from \"@/Composeables/useSkillTypes.js\";\n\nconst options = [\n    {value: 'en', label: 'English'},\n    {value: 'es', label: 'Spanish'},\n    {value: 'fr', label: 'French'},\n    {value: 'de', label: 'German'},\n    {value: 'it', label: 'Italian'},\n];\n\nconst model = defineModel();\n\nconst selected = ref(options.find(option => option.value === model.value) ?? options[0])\n\nwatch(() => selected.value, (value) => {\n    model.value = value.value\n}, {immediate: true})\n\n</script>\n","<template>\n    <div\n        class=\"rounded-lg relative flex flex-col items-center justify-end\">\n\n        <div class=\"absolute z-0 inset-0 w-full h-full rounded-lg overflow-hidden\">\n            <img :src=\"src\" alt=\"\" class=\"w-full h-full object-cover object-center\"/>\n        </div>\n\n        <div\n            class=\"absolute inset-0 w-full h-full bg-gradient-to-t from-transparent to-slate-900 rounded-lg overflow-hidden\"></div>\n\n        <div class=\"absolute z-10 px-1 py-1 top-2 left-2 lg:left-6 lg:top-6 text-white\">\n            <slot name=\"title\"/>\n        </div>\n\n        <div class=\"relative z-10 pb-4 flex-col gap-4 items-center w-full px-2 lg:px-6\">\n            <LazyRendering>\n                <FaceRecordingAudioWavesurfer\n                    v-if=\"mounted\"\n                    :key=\"file\"\n                    :audio=\"file\"\n                    @play=\"hidePlayButton = true\"\n                    @pause=\"hidePlayButton = false\"\n                    class=\"hidden lg:block\"\n                    ref=\"player\"/>\n            </LazyRendering>\n\n            <div class=\"flex flex-col items-center lg:items-start lg:flex-row gap-4 mt-4\">\n                <LanguageDropdown\n                    v-model=\"form.language\" class=\"w-full\"/>\n                <button\n                    :disabled=\"player?.loading\"\n                    @click=\"playPause\"\n                    :class=\"{\n                        '': hidePlayButton,\n                        'opacity-25': player?.loading\n                    }\"\n                    class=\"cursor-pointer\">\n                    <span\n                        class=\"size-12 text-xs flex items-center gap-2 text-primary bg-white rounded-full p-2 border-2 hover:border-black\">\n                        <PlaySvg v-if=\"!hidePlayButton\"/>\n                        <PauseSvg v-else/>\n                    </span>\n                </button>\n            </div>\n        </div>\n\n    </div>\n</template>\n<script setup>\nimport {ref, onMounted, computed, watch} from \"vue\";\nimport PlaySvg from \"@/Components/PlaySvg.vue\";\nimport PauseSvg from \"@/Components/PauseSvg.vue\";\nimport {useForm} from \"@inertiajs/vue3\";\nimport LanguageDropdown from \"@/Components/Marketing/FacePlayer/LanguageDropdown.vue\";\nimport FaceRecordingAudioWavesurfer from \"@/Components/Marketing/FacePlayer/FaceRecordingAudioWavesurfer.vue\";\nimport LazyRendering from \"@/Components/LazyRendering.vue\";\n\nconst props = defineProps(['src', 'variant'])\n\nconst form = useForm({\n    language: 'en',\n    variant: props.variant\n});\n\nconst file = computed(() => route('audio-example.get', {language: form.language, variant: form.variant}));\nconst player = ref()\n\nwatch(file, async () => {\n    await player.value.loadingPromise;\n    playPause()\n})\n\nconst mounted = ref(false)\nconst hidePlayButton = ref(false)\n\nconst playPause = () => {\n    player.value?.playPause()\n\n    // hidePlayButton.value = !hidePlayButton.value\n}\n\nonMounted(() => {\n    mounted.value = true\n})\n</script>\n","<template>\n    <p class=\"morph text-white py-1 px-2 mb-4 inline-flex items-center gap-2\">\n        <slot/>\n    </p>\n</template>\n","export default \"__VITE_ASSET__C9t1PDGD__\"","export default \"__VITE_ASSET__CzeTztfS__\"","export default \"__VITE_ASSET__CkLpCXVE__\"","<template>\n    <LazyRendering>\n        <div class=\"\">\n            <swiper\n                :modules=\"[Pagination, Navigation]\"\n                :grabCursor=\"true\"\n                :centeredSlides=\"true\"\n                :slidesPerView=\"slidesPerView\"\n                :space-between=\"30\"\n                :navigation=\"true\"\n                :pagination=\"true\"\n                :free-mode=\"false\"\n                :loop=\"true\"\n            >\n                <swiper-slide>\n                    <RealWorldExample4/>\n                </swiper-slide>\n                <swiper-slide>\n                    <RealWorldExample1/>\n                </swiper-slide>\n                <swiper-slide>\n                    <RealWorldExample2/>\n                </swiper-slide>\n                <swiper-slide>\n                    <RealWorldExample3/>\n                </swiper-slide>\n            </swiper>\n        </div>\n    </LazyRendering>\n</template>\n<style scoped>\n.swiper-slide {\n    opacity: .5;\n    pointer-events: none;\n}\n\n.swiper-slide-active {\n    opacity: 1;\n    pointer-events: auto;\n}\n</style>\n<script setup>\n// Import Swiper Vue.js components\nimport {Swiper, SwiperSlide} from 'swiper/vue';\nimport {Navigation, Pagination, Scrollbar, A11y, EffectCoverflow} from 'swiper/modules';\n\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\nimport 'swiper/css/scrollbar';\nimport 'swiper/css/effect-coverflow';\n\nimport RealWorldExample2 from \"@/Components/Marketing/RealWorldCalls/RealWorldExample2.vue\";\nimport RealWorldExample1 from \"@/Components/Marketing/RealWorldCalls/RealWorldExample1.vue\";\nimport RealWorldExample3 from \"@/Components/Marketing/RealWorldCalls/RealWorldExample3.vue\";\nimport {onMounted, ref} from \"vue\";\n\nimport {useElementVisibility} from '@vueuse/core'\nimport LazyRendering from \"@/Components/LazyRendering.vue\";\nimport RealWorldExample4 from \"@/Components/Marketing/RealWorldCalls/RealWorldExample4.vue\";\n\nconst slidesPerView = ref(1)\nonMounted(() => {\n    if (window.innerWidth < 768) {\n        slidesPerView.value = 1\n    } else {\n        slidesPerView.value = 2\n    }\n})\n\nconst onSwiper = (swiper) => console.log(swiper);\nconst onSlideChange = () => console.log('slide change');\n// Import Swiper styles\n</script>\n"],"names":["calvin","rebecca","options","model","_useModel","__props","selected","ref","option","watch","value","form","useForm","file","computed","player","playPause","mounted","hidePlayButton","_a","onMounted","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1","face$2","face$1","face","slidesPerView"],"mappings":"uiCAAA,MAAAA,GAAe,6DCAfC,GAAe,qqBC8Df,MAAMC,EAAU,CACZ,CAAC,MAAO,KAAM,MAAO,SAAS,EAC9B,CAAC,MAAO,KAAM,MAAO,SAAS,EAC9B,CAAC,MAAO,KAAM,MAAO,QAAQ,EAC7B,CAAC,MAAO,KAAM,MAAO,QAAQ,EAC7B,CAAC,MAAO,KAAM,MAAO,SAAS,CAClC,EAEMC,EAAQC,EAAWC,EAAA,YAAC,EAEpBC,EAAWC,EAAIL,EAAQ,KAAKM,GAAUA,EAAO,QAAUL,EAAM,KAAK,GAAKD,EAAQ,CAAC,CAAC,EAEvF,OAAAO,EAAM,IAAMH,EAAS,MAAQI,GAAU,CACnCP,EAAM,MAAQO,EAAM,KACxB,EAAG,CAAC,UAAW,EAAI,CAAC,m7DChBpB,MAAMC,EAAOC,EAAQ,CACjB,SAAU,KACV,QAJUP,EAIK,OACnB,CAAC,EAEKQ,EAAOC,EAAS,IAAM,MAAM,oBAAqB,CAAC,SAAUH,EAAK,SAAU,QAASA,EAAK,OAAO,CAAC,CAAC,EAClGI,EAASR,EAAG,EAElBE,EAAMI,EAAM,SAAY,CACpB,MAAME,EAAO,MAAM,eACnBC,EAAS,CACb,CAAC,EAED,MAAMC,EAAUV,EAAI,EAAK,EACnBW,EAAiBX,EAAI,EAAK,EAE1BS,EAAY,IAAM,QACpBG,EAAAJ,EAAO,QAAP,MAAAI,EAAc,WAGlB,EAEA,OAAAC,EAAU,IAAM,CACZH,EAAQ,MAAQ,EACpB,CAAC,g/BCnFG,SAAAI,GAAAC,EAAAC,EAAA,QACWC,EAAA,EAAAC,EAAA,IAAAC,GAAA,uDCFAC,EAAA,iqBCAAC,GAAA,6sBCAAC,GAAA,kyCC6Df,MAAMC,EAAgBvB,EAAI,CAAC,EAC3B,OAAAa,EAAU,IAAM,CACR,OAAO,WAAa,IACpBU,EAAc,MAAQ,EAEtBA,EAAc,MAAQ,CAE9B,CAAC"}