{"version":3,"file":"vote-Bf7QRadz.js","sources":["../../src/components/vote/Section4.vue","../../src/components/vote/Section3.vue","../../src/components/vote/Section2.vue","../../src/components/vote/Section1.vue","../../src/pages/vote.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst el = ref()\nconst v = useElementVisibility(el)\n</script>\n\n<template>\n  <div ref=\"el\" relative h-930px w-full lg:h-496px>\n    <img absolute inset-0 max-h-496px object-cover class=\"zoom\" size-full src=\"/images/group-100000271621.webp\">\n\n    <svg :class=\"v && 'animated-fade-in-left'\" absolute animated class=\"left-[clamp(-10000px,calc((100vw-1920px)/2.5+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1052\" height=\"496\" viewBox=\"0 0 1052 496\" fill=\"none\">\n      <path d=\"M0 496H1052L709.5 0H0V496Z\" fill=\"black\" />\n    </svg>\n\n    <svg :class=\"v && 'animated-fade-in-right'\" absolute animated class=\"right-[clamp(-10000px,calc((100vw-1920px)/1.5+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"663\" height=\"496\" viewBox=\"0 0 663 496\" fill=\"none\">\n      <path d=\"M663 0H0L342.5 496H663V0Z\" fill=\"black\" />\n    </svg>\n\n    <div lt-lg=\"flex flex-col-reverse\" absolute inset-0 container items-center lg:row lg:justify-end>\n      <img :class=\"v && 'animated-fade-in-up'\" class=\"scale-0\" src=\"/images/group-1000002736-prod.webp\" w-353px animated lg:mt--230px lt-lg:mt-20px>\n\n      <div lg:ml-12 lt-lg:max-w-330px>\n        <p class=\"text-35px font-bold lh-100% lg:text-80px\" :class=\"v && 'animated-fade-in-right'\" animated animated-delay-200>\n          VOTE ROMA\n        </p>\n        <p :class=\"v && 'animated-fade-in-right'\" mt-20px text-24px font-bold animated animated-delay-300 lg:text-53px>\n          STEP 4\n        </p>\n        <p :class=\"v && 'animated-fade-in-right'\" fond-bold text-15px animated animated-delay-400 lg:text-24px>\n          Elect from over 1,000 cryptocurrencies to nominate a token you believe best represents your chosen ambassador.\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@keyframes zoom {\n  from {\n    object-position: 25% center;\n  }\n  to {\n    object-position: 100% center;\n  }\n}\n\nimg.zoom {\n  animation: zoom ease-in-out 12s alternate infinite;\n}\n</style>\n","<script setup lang=\"ts\">\nconst el = ref()\nconst v = useElementVisibility(el)\n</script>\n\n<template>\n  <div ref=\"el\" relative h-850px w-full lg:h-496px>\n    <img absolute inset-0 object-cover size-full class=\"zoom\" src=\"/images/image-1416.webp\">\n    <svg\n      :class=\"v && 'animated-fade-in-left'\"\n      absolute animated\n      lt-lg=\"bottom-0 left-[clamp(-10000px,calc((100vw-1920px)/5+0px),0px)]\"\n      class=\"left-[clamp(-10000px,calc((100vw-1920px)/2.5+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"530\" height=\"496\" viewBox=\"0 0 530 496\" fill=\"none\"\n    >\n      <path d=\"M0 496H529.5L187 0H0V496Z\" fill=\"#CE0000\" />\n    </svg>\n    <svg\n      :class=\"v && 'animated-fade-in-right'\"\n      absolute animated lt-md:hidden\n      lt-lg=\"right-[clamp(-10000px,calc((100vw-1920px)/1.15+0px),0px)]\"\n      class=\"right-[clamp(-10000px,calc((100vw-1920px)/1.5+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1131\" height=\"496\" viewBox=\"0 0 1131 496\" fill=\"none\"\n    >\n      <path d=\"M1131 0H0L342.5 496H1131V0Z\" fill=\"#CE0000\" />\n    </svg>\n\n    <svg\n      :class=\"v && 'animated-fade-in-right'\"\n      absolute animated md:hidden\n      class=\"right-[clamp(-10000px,calc((100vw-1920px)/1.7+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1131\" height=\"600\" viewBox=\"0 0 1131 600\" fill=\"none\"\n    >\n      <path d=\"M1131 0H0L442.5 600H1131V0Z\" fill=\"#CE0000\" />\n    </svg>\n\n    <div absolute inset-0 container col items-center justify-center lg:row lg:justify-end>\n      <div max-w-330px lg:max-w-480px>\n        <p class=\"text-35px font-bold lh-100% lg:text-80px\" :class=\"v && 'animated-fade-in-right'\" animated animated-delay-200>\n          NOMINATE\n        </p>\n        <p :class=\"v && 'animated-fade-in-right'\" mt-20px text-24px font-bold animated animated-delay-300 lg:text-53px>\n          STEP 3\n        </p>\n        <p :class=\"v && 'animated-fade-in-right'\" fond-bold text-15px animated animated-delay-400 lg:text-24px>\n          Choose your favorite from the roster of 1,500 Miss W ambassadors.\n        </p>\n      </div>\n\n      <img class=\"scale-0\" :class=\"v && 'animated-fade-in-down'\" src=\"/images/group-1000002738-prod.webp\" w-353px animated animated-delay-200 lg:ml-12 lt-lg:mt-20px>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@keyframes zoom {\n  from {\n    object-position: 0% center;\n  }\n  to {\n    object-position: 100% center;\n  }\n}\n\nimg.zoom {\n  animation: zoom ease-in-out 20s alternate infinite;\n}\n</style>\n","<script setup lang=\"ts\">\nconst el = ref()\nconst v = useElementVisibility(el)\n</script>\n\n<template>\n  <div ref=\"el\" relative h-690px w-full lg:h-496px>\n    <svg\n      :class=\"v && 'animated-fade-in-right'\"\n      absolute animated lt-lg=\"bottom-0\"\n      class=\"right-[clamp(-10000px,calc((100vw-1920px)/1.8+0px),0px)] z-1\"\n      sm=\"right-[clamp(-10000px,calc((100vw-1920px)/2.4+0px),0px)] z-1\"\n      lg=\"right-[clamp(-10000px,calc((100vw-1920px)/2+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1131\" height=\"496\" viewBox=\"0 0 1131 496\" fill=\"none\"\n    >\n      <path d=\"M1131 496H0L342.5 0H1131V496Z\" fill=\"#CE0000\" />\n    </svg>\n\n    <div absolute inset-0 container row items-center>\n      <!-- <VoteLivePhone class=\"!absolute\" left-10px /> -->\n      <img\n        :class=\"v && 'animated-fade-in-left'\" src=\"/images/group-1000002742-prod.webp\" w-353px animated lt-lg=\"mb-200px\" sm=\"ml-12\" lg=\"ml-0\"\n      >\n\n      <div lt-lg=\"absolute bottom-40px right-15px\" z-2 ml-4 lg:ml-12>\n        <p class=\"text-35px font-bold lh-100% lg:text-80px\" :class=\"v && 'animated-fade-in-right'\" animated animated-delay-400>\n          START VOTING\n        </p>\n        <p :class=\"v && 'animated-fade-in-right'\" mt-20px text-24px font-bold animated animated-delay-500 lg:text-53px>\n          STEP 2\n        </p>\n        <p :class=\"v && 'animated-fade-in-right'\" fond-bold text-15px animated animated-delay-600 lg:text-24px>\n          With ROMA in hand, you’re all set to vote.\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n</style>\n","<script setup lang=\"ts\">\nconst el = ref()\nconst v = useElementVisibility(el)\n</script>\n\n<template>\n  <div ref=\"el\" relative h-496px w-full>\n    <svg\n      :class=\"v && 'animated-fade-in-left'\"\n      absolute animated class=\"left-[clamp(-10000px,calc((100vw-1920px)/2.2+0px),0px)]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1131\" height=\"496\" viewBox=\"0 0 1131 496\" fill=\"none\"\n    >\n      <path d=\"M0 0H1131L788.5 496H0V0Z\" fill=\"#CE0000\" />\n    </svg>\n\n    <div absolute bottom-20px container col items-center justify-center md:inset-0>\n      <div>\n        <p class=\"text-35px font-bold lh-100% md:text-80px\" :class=\"v && 'animated-fade-in-left'\" animated animated-delay-200>\n          ACQUIRE ROMA\n        </p>\n        <p :class=\"v && 'animated-fade-in-left'\" mt-20px text-24px font-bold animated animated-delay-300 md:text-53px>\n          STEP 1\n        </p>\n        <p :class=\"v && 'animated-fade-in-left'\" mt-14px text-24px font-bold animated animated-delay-400 lt-md:text-15px>\n          You can obtain ROMA in two ways:\n        </p>\n\n        <div :class=\"v && 'animated-fade-in-left'\" mt-20px max-w-293px animated animated-delay-500 md:hidden>\n          <p text-24px font-bold>\n            STAKING\n          </p>\n          <p mt-14px text-15px font-bold>\n            Stake any token with liquidity for 7, 14, or 30 days to receive ROMA.\n          </p>\n\n          <p my-20px text-35px font-bold>\n            OR\n          </p>\n\n          <p text-24px font-bold>\n            BUYING\n          </p>\n          <p mt-14px text-15px font-bold>\n            Directly purchase ROMA from the missweb3.org website.\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div mt-40px row items-center justify-center px-2rem lt-md:hidden>\n    <div max-w-480px>\n      <p text-53px font-bold>\n        STAKING\n      </p>\n      <p text-24px font-bold>\n        Stake any token with liquidity for 7, 14, or 30 days to receive ROMA.\n      </p>\n    </div>\n    <span class=\"lh-100%\" mx-40px text-35px font-bold>\n      or\n    </span>\n    <div max-w-480px>\n      <p text-53px font-bold>\n        BUYING\n      </p>\n      <p text-24px font-bold>\n        Directly purchase ROMA from the missweb3.org website.\n      </p>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n\n</style>\n","<script setup lang=\"ts\">\nuseHead({\n  meta: [\n    {\n      name: 'description',\n      content: 'Miss W - Your Voice, Your Vote, Your Victory',\n    },\n  ],\n})\n</script>\n\n<template>\n  <div w-full overflow-x-hidden>\n    <MissWHeader\n      cover=\"/images/image-167-vote.webp\"\n      title=\"vote\"\n      subtitle=\"YOUR VOICE, YOUR VOTE, YOUR VICTORY\"\n      intro=\"Each vote brings your ambassador closer to the crown and further cements the role of blockchain in the global beauty movement. Ready to make history? Stake, buy, vote, and let the best ambassador win!\"\n      mask=\"linear-gradient(180deg, rgba(87, 0, 0, 0.77) 0%, rgba(102, 0, 0, 0.00) 13.56%, rgba(95, 0, 0, 0.00) 63.07%, rgba(94, 0, 0, 0.60) 79.45%, #5E0000 100%)\"\n    />\n\n    <div class=\"test\" w-full pt-80px>\n      <VoteSection1 />\n\n      <VoteSection2 mt-100px />\n\n      <VoteSection3 mt-100px />\n\n      <VoteSection4 mt-40px lg:mt-230px />\n    </div>\n\n    <IntroductionSponsors pt-60px>\n      <div container mb-80px text-center lg:mb-200px>\n        <p text-24px font-bold uppercase>\n          YOUR VOTE WILL DETERMINE THEIR DESTINY\n        </p>\n\n        <p class=\"lh-100%\" py-20px text-53px font-bold uppercase lg:text-120px>\n          VOTE <span class=\"text-#CE0000\">NOW</span>\n        </p>\n        <p class=\"text-#CE0000\">\n          Crypto Wallet with 1499 BTC will be shown during Event Day.\n        </p>\n\n        <a href=\"https://missweb3.app\" target=\"_blank\" mt-40px btn-primary inline-block uppercase class=\"w-295px p-[20px_25px]\">\n          VOTE NOW\n        </a>\n      </div>\n    </IntroductionSponsors>\n  </div>\n</template>\n\n<style scoped>\n.test {\n  background: linear-gradient(\n    180deg,\n    #5e0000 0%,\n    #000 9.62%,\n    #000 63.94%,\n    #80000e 100%\n  );\n}\n</style>\n"],"names":["el","ref","v","useElementVisibility","useHead"],"mappings":"62BACA,MAAMA,EAAKC,IACLC,EAAIC,EAAqBH,CAAE,g9DCDjC,MAAMA,EAAKC,IACLC,EAAIC,EAAqBH,CAAE,4/DCDjC,MAAMA,EAAKC,IACLC,EAAIC,EAAqBH,CAAE,k0ECDjC,MAAMA,EAAKC,IACLC,EAAIC,EAAqBH,CAAE,0tDCDzB,OAAAI,EAAA,CACN,KAAM,CACJ,CACE,KAAM,cACN,QAAS,8CACX,CACF,CAAA,CACD"}